Use of elements

Buttons

Example of a command button  

Example of a command button

Command button

Command buttons are used in various contexts. They are used to select from a list of actions on a page or in popups. In wizards they are used to navigate to the next step.

Verbs are used to name them. Specific names are preferable, e.g., “Create” instead of “OK”. This is not the case in wizards. To move back or forward within a wizard, button labels that do not contain verbs, e.g., “Next” or “Next question”, are also permitted.

A command button is at least as wide as it is high.

Back to top
Example of a command button  

Example of a command button in a wizard

Use command buttons if:

  • An action is directly performed, including the opening of a sub-window.
  • The action is not shown in the flowing text.
  • The action is part of a group of similar actions.
  • The action cannot be reversed. Users associate links with navigation and therefore with the ability to return to the starting point.
  • Command buttons start or end processes, change objects or confirm a selection. Links or tiles, on the other hand, should be used for navigation.

Link

Links take users to another area of the application, to a completely different application or to the online documentation.

Always use links for:

  • E-mail addresses
  • Phone numbers
  • Web addresses

The text used for the link must make it clear what its function is.

Buttons in the navigation bar

Buttons in the navigation bar allow users to perform secondary actions. The actions either relate to the content of the current page or are used to navigate within the application.

Examples:

  • Open menu
  • Home (e.g., back to the main screen)
  • Navigate forward or back
  • Open additional information relating to the current page

The action is available on the vast majority of pages.

Use icons. A text label is only used if it provides users with a better understanding.

Buttons in the navigation bar  

Buttons in the navigation bar

Tiling

Tiles are used to give users a quick overview of the available contents. They provide access to important functions. Ideally, tiles should be used on the homepage of an app and be linked to secondary pages.

 

Detail disclosure button

A detail disclosure button opens a new view and provides additional information about an element. Ideally a popover is used or, in rare cases, a dialog. This may be necessary in various situations:

  • Users only need the information when they are new to the app.
  • Users do not notice the information, e.g., because they are occasional users or the information is not presented in an obvious place.
  • The information is only needed by a few users.

The detail disclosure button is displayed differently depending on the context. Usually, an info icon is used.

 

Popups

Popover  

Example of a popover

Popover

A popover can display any content or be used for navigation. The popover appears over existing content. It is used primarily for inactive elements that are not clicked:

  • Images
  • Text
  • Communication of advantages

The size should be proportional to the rest of the screen and cover a maximum of 50% of the screen.

Actions are permitted if they are used for navigation. If actions are required, a dialog is used.

  • Scrolling: users can scroll within a popover while it is open.
  • Paging: users can page within a popover while it is open.
  • Linking: when users click on a link (in the form of a list entry, link or button), the popover is closed.
Back to top

Popup dialog

A popup dialog is a secondary window. It is used to:

  • Execute an action.
  • Query parameters for an action that the user has initiated.
  • Present users with a selection.
  • Display information.

A dialog opens in the center of the screen. The size depends on the content displayed.
There are modal and non-modal dialogs:

  • Modal dialogs: users have to close the dialog before they can continue working with the app. A modal dialog contains at least one command button used to confirm an action or make a decision.
  • Non-modal dialogs are used purely for information purposes. They require no direct action. Users can close non-modal popups by clicking on the screen behind the popup.
Confirmation dialog  

Example of a confirmation dialog

A dialog can display various content. There are several different types:

Confirmation dialog: the confirmation dialog appears as the result of a process. It informs users of the progress of the process or its result. The confirmation dialog contains:

  • Message in text form
  • Command button
  • Icon (optional)
Menu dialog  

Example of a menu dialog

Menu dialog: additional menus of secondary importance are shown in a popup dialog. A typical example is a settings dialog. The menu dialog contains:

  • Title
  • Menu
  • Other elements are optional
Information dialog  

Example of an information dialog

Information dialog: the information dialog appears when a detail disclosure button is pressed. The dialog then displays special information on a certain topic or function. The information dialog contains a title and descriptive text. The text can be scrolled if necessary.

Scrolling and paging

Scrolling and paging are forms of unstructured navigation. Users can access content that goes beyond the current page.

  • When the content is arranged in a continuous, flowing layout, this is known as scrolling.
  • When the content is arranged in separate sections, this is known as paging.

Before providing large amounts of information via scrolling or paging, consider whether the content can be broken down. In this case, another navigation structure may be used:

  1. Semantic differentiation: content is grouped according to its meaning. Every group has a name.
  2. Task-based differentiation: content is assigned to a specific task, creating individual, independent steps.

Time invested here during development can be advantageous for users. This is because without structured navigation, users have no idea which content is coming next. They also never know whether to carry on scrolling or to cancel and try something different.

Back to top
Scrollbars and panning indicators  

Horizontal scrolling with panning areas

Scrollbars and panning indicators

Scrollbars and panning indicators show users the same information. They differ only in terms of interaction. Panning indicators are not operated directly.

A panning indicator provides users with information as to the scope of content and the current position. It aids orientation and also boosts users' confidence in their abilities to master the application.

  • Panning indicators: used for mobile devices with touch operation.
  • Scrollbars: used for PCs with mouse and keyboard.

Scrollbars and panning indicators are required if:

  • The displayed content does not fit on a screen.
  • The content consists of elements of the same type that cannot be structured into groups.

If the content is too vast for all end devices, another form of navigation should be considered.

  • Panning indicators are used to compensate for the disadvantages of smaller displays in cases where the content is displayed in full on a larger screen.
  • The content should not cover more than three screen pages.

Multiple containers that use panning or scrolling should be nested in one another. Neither should panning, scrolling, and paging be nested.

Scrollable containers:

  • Panning areas feature horizontal panning indicators. They are therefore reserved for applications in landscape format.
Paging  

Example of paging

Paging

Paging is used to clearly structure content. There may be one page for presenting a product, for example, or one page with all products in a certain group. Paging is only used when the pages are laid out horizontally, up to a maximum of 10 pages.

Paging control provides a visual indicator of the paging process.

User-defined selection

Checkbox and switch  

Example of a checkbox and switch

Checkbox and switch

A switch enables users to choose between two states that can be described as On or Off. For binary states that cannot be described as on/off, use a checkbox. In many cases this is simply a case of the wording of the label, but it does need to be taken into account.

  • Example of a switch: “Toner saving mode (on/off)” is displayed as a switch
  • Example of a checkbox: “Save toner (yes/no)” is displayed as a checkbox

Both states must be mutually exclusive.

  • Example: it does not make sense to use a checkbox to select the page format (portrait/landscape) when printing documents as neither format has a direct opposite.

Switches are primarily used for mobile devices. They should be avoided in the case of pure desktop applications. Checkboxes and switches should not be mixed together in the same group. A group of checkboxes and switches is described by a label above it. The following applies to sorting within a group:

  • The most commonly used options appear at the top
  • Ideally, related options appear next to one another
  • Alternatively use a natural, logical sequence
  • Avoid alphabetic sorting
Back to top
Radio button  

Example of a radio button

Radio button

A radio button is a graphical control element. Users can make a “1 out of N” selection. Users can only ever select one option. This should be used if options need to be mutually exclusive.

With radio buttons, users can see the other options available for selection at all times. This should be used:

  • If users are not aware of the possible entries
  • To reduce the number of clicks

Instructions for use

  • Number of options: 2 - 10; in the case of more than 10 another solution should be found
  • Default: there is always a preselected option
    • Ideally this should be the most commonly used option
  • Labeling:
    • A text can be placed above a group of radio buttons to explain the groups as a whole
    • Every option has a text
  • Sorting:
    • Related options appear next to one another
    • Ideally, the most commonly used options appear at the top
    • Alternatively use a natural, logical sequence
    • Do not sort alphabetically
  • Arrangement: several radio buttons are arranged one on top of the other (difficult to read)

Filling waiting times

Activity indicator  

Example of an activity indicator

Activity indicator

An activity indicator shows a running process without indicating when the process will be complete. As soon as this can be predicted, a progress bar appears.

This element should be used if:

  • A process is blocking the interface.
  • The process takes longer than 3 and less than 10 seconds.
  • It is impossible to say how much of the process is already complete.

The indicator rotates while the process is running. It disappears once it is complete.

If possible, the animation should relate to the process in question. If the process stops, the activity indicator should do the same.

The activity indicator is placed in the main screen area. It is centered. This notifies the user directly that a process is running. The display should also contain text that explains the process in question.

Ideally, a progress bar should be used instead of an activity indicator.

Back to top
Progress indicator  

Progress indicator

Progress indicator

A progress indicator shows the progress of a running operation. It shows the estimated time until the operation is complete. The progress indicator consists of a bar that fills from left to right while the operation is in progress. This element should be used if a process blocks the interface and takes longer than 3 seconds. The progress indicator should visibly change at least every 3 seconds.

A progress indicator does not allow the user to perform any actions. Clicking on the progress indicator does not trigger any actions and shows no additional information. There is only one exception: the user can cancel a process.

Provide text that explains what the system is doing at a certain time, e.g., connecting to the server, downloading a file, installing an update.

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

This website uses cookies, by continuing to browse, you agree to our cookie policy. Read our privacy policy for more information.

Close