UX Guidelines
The application consists of:
- The Top Navigation bar and search;
- The Title bar with sub-navigation and the toolbar;
- The Content Area.
Content of the application fills up 100% of the browser width, with the min-width property set to 1200px. If content is larger than the minimum width, the min-width property has no effect, while if it’s smaller then the minimum width applies and upon reaching 1200px, a browser horizontal scroll bar will be shown.
Top bar consists of the product logo, top navigation that provides easy and quick navigation between top-level views of the application, global search functionality and a user avatar (or an icon) with quick access to the user's profile, quick information about the product and the logout option.
licking a user icon in the top right corner if the navigation bar, brings a User Profile dropdown menu with quick access to user's profile, logout and the option to launch a dialog with information about the product.
Expandable Searchbar
Global search offers functionality that allows users to search across the application. After search is applied, a new page displays filtered content with applied quiry in the expanded search bar.
Auto-Suggest
The main principle of Auto-Suggest (as-you-type suggestions) is to offer users exact match results, as well as providing a shortcut to filtered listings for currently selected category.
If selected from auto-suggest list, is the exact match item, it’ll bypass the search results page entirely, taking users directly to details view of a selected item. In this use-case scenario, no needs to keep search box expanded and no query will be populated in the search box. Coming back from details view, users will see an unfiltered listing page.
Page Title & Sub-navigation
Page title, sub-navigation and toolbar actions appear above the view affected by their actions. The Title bar always stays visible and in case overflowed content, scrollable content slides underneath it. Page title should always communicate to the user which content is currently displayed: if the user is on the high level landing page, the title should reflect the tab selection (Customers, Network Locations, Settings etc.). If the user is on a drill-down page - a particular customer or location - then the page title should reflect the name of the selected object. In cases when a selected customer belongs to an organization, then the organization's name must be displayed, in brackets, next to the customer name.
Toolbar
A right-justified toolbar uses the same virtical space as sub-navigation and the page title. The toolbar should be always visible, appearing above the content it affects, and if scrolled up, slides underneath the toolbar component.
Action buttons (Back, Refresh, More, etc.) are applicable to the current view. In "drill-down" pages, there is also a Back button that always brings users back to a parent list view page.
Vertical spacing
A data table contains a filter area with a search bar, item count, filter option, where applicable, and dropdown buttons. Header row displays left-justified column names, followed by data rows with the same justification.
If the user needs to select or manipulate data items, checkboxes should accompany each row.
Each row ends with an action menu icon that contains options applicable to an item in the row.
Data tables may consist of:
Action buttons initiate specific actions and always displayed as a group, left-justified, and cannot be scattered across a page or a modal dialog. Primary button, in most cases, is the first button to the left.
Example of refreshing content.
Content in several pages is expected to be constantly updated with newly arriving events, changed status, health, etc. Automatically updating content would cause usability issues by disrupting a view the user is currently working on. So instead of updating the list automatically, newly arrived events can be added by clicking the dynamic Refresh button. Previously applied filters, scopes must be persisted.
Refresh button is always enabled. Default state ("white") conveys to the user that there are "no new events", for a current view. Clicking the Refresh button updates the events list only if new events arrive during the click.
It should take no time for a user to recognize different types of text fields that usually appear in forms. Text fields allow users to input text, select text, and lookup data via auto-completion.
Global search offers functionality that allows users to search across the application. After search is applied, a new page displays filtered content with applied quiry in the expanded search bar.
Auto-Suggest
The main principle of Auto-Suggest (as-you-type suggestions) is to offer users exact match results, as well as providing a shortcut to filtered listings for currently selected category.
If selected from auto-suggest list, is the exact match item, it’ll bypass the search results page entirely, taking users directly to details view of a selected item. In this use-case scenario, no needs to keep search box expanded and no query will be populated in the search box. Coming back from details view, users will see an unfiltered listing page.
Text should always be legible. The font and font-sizes are optimized to give text legibility, clarity, and consistency.
The official NetOp fonts should be Roboto Light and Roboto Medium.
10 default colors in order of appearance for the chart's series. When all colors are used, new colors are pulled from the start again.
...
#FC0D1B