Back to overview

Interaction patterns for applications

Navigation

Main navigation

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.

Application navigation

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 navigationThe 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 modulesThis element is used to structure different sections within the content of an application.
Back to top

Functions

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.

  • Functions that affect the sub-navigation-area are placed in the area below the header area.
  • Functions that affect a specific content area (e.g. tables) are placed above the specific content-area.
  • Functions to expand or minimize modules are placed within the expand-bar.
  • Functions that affect a row in a table are placed in the row right aligned in the table (last column).
  • An exception is the expand-function for rows in a table. Because it is a structuring element, it is placed in front, next to a select-option if there is one.
  • Functions that affect a single cell in a table are placed within the cell itself (right aligned). It can stand alone in the cell (then left aligned) or in addition to text. With click on the icon a layer opens up to add content.

If the same functions are used within an application they should always be displayed in the same way.

Back to top

Search and results

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

  • Search area with specific search fields like text-input fields, dropdowns, radio buttons etc. It is limited to one row. Below this row, the primary and secondary action is placed right aligned. The optional expand-function is placed left aligned. Via click more search options will be shown.
  • In the expanded view a close button is placed below the search fields.
  • Results are shown within in a table. See Table with functions.

 

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

  • Search area with type-ahead text search. Result is shown after searching.
  • To refine the search criteria, filter elements are placed within the first row of each column.
  • In the last column, above the table functions, a search button is placed. By clicking the button “Search” the selected filters are applied to the result.

 

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.

Table as search result list
Back to top

Drop-down lists (long)

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:

  • up to 20 items (two columns)
  • up to 30 items (three columns)
  • more than 30 items (three columns with paging or A-Z function)

 

Back to top

Table with functions

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:

ElementDescription
1. Paging

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 tableLeft 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. TitleThe 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 rowFunctions 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.

Back to top

Data record

In a search result list the detailed view of a data entry looks like this:

Data record
  1. Back: Links back to the previous view, e.g. search result
  2. Functions affecting the whole data-record: Information on data entry and editing-options (edit, export, delete)
  3. Headline: Title of data-entry
  4. Content-Navigation: If the data-entry has different sections or sub-categories the content navigation is used.
  5. Data-entry detailed view: Content of data entry. Can be structured by expand-collapse modules.

 

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.

Back to top

File upload

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.

File upload
Back to top

A click on the search button opens the file browser of the actual operation system.

File upload

When a file is selected, the file name appears in the input-field.

File upload

After clicking “upload” the file appears in a list of uploads underneath the dialogue.

File upload

Back to overview
Further information

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines