---
title: Navigation and User Interface
slug: en/navigation-and-user-interface
description: Improve your experience with CITSmart instance through its user-friendly interface featuring a banner frame, voIP integration, and a virtual assistant. Explore numerous applications and functionalities, including 16 certified processes, registration optio
docTags: 
createdAt: 2021-10-26T15:58:12.000Z
---

The user interface is the easiest way for the user to interact with
&#x20;applications and information in a <font color="#3b9f0f">**CITSmart**</font>**&#x20;instance**.

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/qRG23iw4qNv_Bpfm4ZPFr_image.png "Figure 1 – CITSmart Homepage Screen")

**1. Banner frame:** in the internal area of the system, the taskbar contains navigation items and tools, such as,

- The main menu, with all the <font color="#3b9f0f">**CITSmart**</font> functionalities;
- Buttons with VoIP integration;
- The virtual assistant <font color="#3b9f0f">**Anuva**</font>;&#x20;
- Information about the user login;
- Environment version; and also&#x20;
- About language change.

**2. Navigation in applications**:&#x20;

- Access to <font color="#3b9f0f">**CITSmart**</font>**'s 16 certified processes**,
  &#x20;
- Basic registration functionalities,&#x20;
- Creation, and emission of reports,&#x20;
- Parameters,
  &#x20;
- Access to <font color="#3b9f0f">**CITSmart**</font> **Neuro&#x20;**(application engine);
- And other platform management functionalities
  .

**3.  User panel**:&#x20;

- Determines the layout of the user panel presentation (Smart
  &#x20;Decision) available on the <font color="#3b9f0f">**CITSmart**</font> **Platform&#x20;**&#x68;ome page.&#x20;
- It allows putting
  &#x20;quick accesses such as links, reports, and widgets.

## User Interface Tour

### Banner Frame

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/9_T_w0vBCsq81UJrb2uoQ_image.png" size="74" width="917" height="58" caption="Figure 2 - Banner Frame" position="center" showCaption="true"}

The taskbar, located at the top, contains navigation items and tools:

- ****<font color="#3b9f0f">**1**</font>: Main navigation menu, contains all the processes and functionalities of <font color="#3b9f0f">**CITSmart**</font>;
- ****<font color="#3b9f0f">**2**</font>: When browsing the system and wanting to return to the home screen, click on "**Home**";
- ****<font color="#3b9f0f">**3**</font>: System notifications to the user, which is evidenced by the quantity existing;
- ****<font color="#3b9f0f">**4**</font>: **VOIP&#x20;**&#x63;all service;
- ****<font color="#3b9f0f">**5**</font>: Attendance chat (visible to attendance group users);
- ****<font color="#3b9f0f">**6**</font>: Shortcut to the main system applications;
- ****<font color="#3b9f0f">**7**</font>: User information, as well as providing system language change, manage
  &#x20;chat status, <font color="#3b9f0f">**CITSmart**</font> support media, and installed version environment
  &#x20;data.

### Navigation in Applications

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/rOuGiAXRJM2wJjoZWR6mx_image.png" size="40" width="301" height="494" caption="Figure 3 – Main Menu Screen" position="center" showCaption="true"}

By clicking on the main navigation menu, you will see all the features that <font color="#3b9f0f">**CITSmart**</font> provides.

- ****<font color="#3b9f0f">**1**</font>: Search bar of the functionality, accessible via a menu;
- ****<font color="#3b9f0f">**2**</font>: Access to settings for maintaining flows;
- ****<font color="#3b9f0f">**3**</font>: It has all **16 certified Processes** of the <font color="#3b9f0f">**CITSmart**</font> Platform;
- ****<font color="#3b9f0f">**4**</font>: Integrated management has functionalities that help in the management
  &#x20;of the processes;
- ****<font color="#3b9f0f">**5**</font>: It presents basic registers to start <font color="#3b9f0f">**CITSmart**</font>, such as users, location, besides
  &#x20;being able to register and edit menus within the system;
- ****<font color="#3b9f0f">**6**</font>: It has data to manage the **Experience Center**, which is a portal customizable
  &#x20;for the user;
- ****<font color="#3b9f0f">**7**</font>: Provides several types of reports that the system can generate with the
  &#x20;data of the main functionalities, therefore, making possible the information
  &#x20;to be better analyzed, besides allowing the creation of customized reports;
- ****<font color="#3b9f0f">**8**</font>: Configuration of access and permission in the system;
- ****<font color="#3b9f0f">**9**</font>: Configuration of the application and system parameters;
- ****<font color="#3b9f0f">**10**</font>: Functionalities to manage the <font color="#3b9f0f">**CITSmart**</font>**&#x20;Platform**;
- ****<font color="#3b9f0f">**11**</font>: Access to <font color="#3b9f0f">**CITSmart**</font> **Neuro&#x20;**(the engine of applications).

### User Panel (Smart Decision)

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/0XefbZzzGIEXQ7HFFR_eZ_image.png "Figure 4 – Smart Decision Screen")

Customization of the **User Panel** (**Smart Decision**) displayed on the system
&#x20;homepage, where you can place quick accesses such as links, reports, and widgets.

- ****<font color="#3b9f0f">**1**</font>: Vertical bar containing the registered panels. Bar items can be shifted to fit the user's need;
- ****<font color="#3b9f0f">**2**</font>: Items to edit a dashboard;
- ****<font color="#3b9f0f">**3**</font>: Items to edit widgets in a dashboard;
- ****<font color="#3b9f0f">**4**</font>: Example of widget of type "link", that can be internal or external.