The main navigation is used to switch between different applications.
The fly out menu shows only the 1st level of the application. The subnavigation is placed in the application itself.
All navigational elements leading the user to a different type of entity within the application (e.g. “Search” or “New internal user”) are now part of the application navigation.
Due to the space required for the content elements (especially complex tables) there will be no left-hand navigation used in the application.
|Content navigation||The content navigation has to be used when the application is more complex and additional depth is needed. It can be used additionally as a superordinated level to expand-collapse modules or instead of the expand-collapse module e.g. when content-types of different sections differ from each other.|
|Expand-collapse modules||This element is used to structure different sections within the content of an application.|
Functions and related services are always located at the data-entry or content section they belong to. There are overall functions that affect the whole application like help and contact. These functions are placed in the area above the header area of an application.
If the same functions are used within an application they should always be displayed in the same way.
There are different complexities of search functions within applications. To cover this, different search types are available for applications. All search types have in common that the search area is placed above the result area.
Type 1: Basic search – expandable
Type 2: Complex search – expandable
If the search is more complex the focus should be on the results, the whole search can be minimized/expanded.
Type 3: Simple text-search with filters in table
Table as search result list
"Select all"checkbox, "show all" and "hide all" buttons are left-aligend. "Edit list", "export list" and "delete selection" buttons are right-aligned.
If there are many selectable options, dropdown-lists and type-ahead-fields can be combined. Initially the user can decide if he enters the needed search term or wants to view the entire list of options. If the user clicks on one of the options it is shown in the input-field.
There are different display options depending on how much items are offered:
Tables with functions should be structured always the same so the user can learn from the behavior of the interaction patterns.
The following interaction patterns can be combined in a table:
In a table with functions that is used a search result list, paging elements are placed above AND below the result list.
The user can set the number of shown results. The paging and the results table adapt to the setting.
|2. Functions regarding whole table||Left aligned: select- and view-options like “select all” and “expand/collapse all”|
Right aligned: changing-options like edit, export, delete.
|3. Select, expand||
When data-entries can be selected, this option is placed in the first column.
If data-entries can be expanded, this option is placed right besides the select-option.
Via click, a expanded view of the row is shown. This can be closed again.
|4. Title||The data-entry title can be a link that opens the data-entry. The title is the column that contains a unique property of the data-entry like the project or user-name.|
|5. Functions regarding row||Functions regarding changes of a specific row are right aligned in the last column of the table.|
Another function is the “add item” function that can be placed as well in a cell. On click a layer opens with the needed input fields.
In a search result list the detailed view of a data entry looks like this:
Functions and navigation in a data-record
The functions placed underneath the separation area affect the whole data entry including all subsections of the content-navigation.
The content navigation is used to skip between different data-record content-sections. Clicking one of the tabs opens it up and shows the selected sub-section.
To enable the user to create a new subsection at the end of the content navigation an “add item” section is placed. By clicking this icon a new section opens in edit mode.
To insert actions that affect a subsection (selected content-navigation) primary and/or action buttons are placed right aligned above and underneath the content area. The same functions are placed above and below the content.
It may be necessary that the content-area itself is again clustered by expand-minimize elements. To assign functions to such a subsection functions-buttons are placed right.
The file upload consists of a simple input form element and two buttons: “search” and “upload”. If no file is selected the “upload" button is inactive.
+49 5235 3-41984
Coordinator Communication Guidelines