Use of elements

Buttons

Command buttons

When actuated, a command button executes an action directly. They are used in various contexts.

In dialog boxes

  • Within a page, for example for making a selection from a list of actions
  • In wizards, to navigate to the next step (see image).

Use command buttons if:

  • An action is executed immediately, including the opening of a sub-window.
  • The action is not shown in the continuous text.
  • The action is part of a group of similar actions.
  • The action is not reversible (users associate links with navigation, and therefore with the ability to return to the starting point).
  • Command buttons start or end processes, change objects, and confirm a selection, whereas (hyper)links or tiles (see teaser tile) are to be used for navigation wherever possible.

Instructions for use:

  • Labeling:
    • Using verbs
    • Specific commands are preferred: e.g. "Create" offer, rather than "OK"
    • Exception in wizards: To move back or forward within a wizard, button labels that do not contain verbs are also permitted. Examples: "Next", "Next question".
    • It only makes sense to use an icon instead of a label for frequently executed actions, and when users are familiar with the symbol from other applications (e.g. cut, copy).
  • Size: A command button is to be at least as wide as it is high.

 

Links

Links navigate 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
  • Internet addresses

The text used in the link must make it clear to the user what action will be executed.

Superjacent windows

(Non-modal) action dialog using a search dialog as an example  

(Non-modal) action dialog using a search dialog as an example

Dialog boxes

A popup dialog is a subordinate UI window. A popup dialog can be used to

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

Instructions for use

  • As a rule, use dialog boxes sparingly. They tear users out of the context and do not always facilitate orientation. Furthermore, it is seen as a characteristic of Phoenix Contact applications that dialog boxes are seldom used.
  • Do not stack dialog boxes on top of each other.
  • Assign descriptive names to the buttons. "OK" is insufficient.
  • Normally, a dialog opens in the center of the superordinate window. 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 on the screen. A modal dialog contains at least one command button, which is used to confirm an action or make a decision.
  • Non-modal dialogs:
Example of a query from the Microsoft Windows user experience interaction guidelines  

Example of a query from the Microsoft Windows user experience interaction guidelines

A dialog can display various types of content. Accordingly, a distinction is made between several types:

Action dialogs give the user the opportunity to specify the action in more detail, before this action is executed. These include the common dialogs for opening/saving files, for printing, and for searching.

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)

Settings dialogs offer the user a larger number of setting options, which normally affect the application as a whole.

Please note the corresponding guidelines for these buttons.

Wireframe based on Project+  

Wireframe based on Project+

Popups

A popup element is a floating window that contains simple interaction options. It is presented when a button is clicked on. Spatially, it appears directly below the button. Users can perform simple interactions in the popup.

Use simple selection elements in the popup: checkboxes, radio buttons, toggle buttons. These elements should not open up further overlapping elements (as is the case with dropdown lists, for example).

Tool tips

A tool tip is a small popup window. It appears when the mouse is moved over a UI element. It is very sensitive and disappears immediately upon further mouse actions.

A tool tip is used to provide a written description of a UI element that has no text. Very often, these are toolbar icons. In this case, a tool tip is mandatory.
Will a UI element benefit from a supplementary explanation? Labels must be kept as short as possible in the application. Tool tips help to eliminate uncertainties and ambiguities.

Instructions for use

Texts written for tool tips should have the following properties:

  • Concise: Texts must be formulated in short sentences or even sentence stems. A grammatically correct sentence is thus not necessary. It is more important for it to be
  • Informative: No redundant information that the user can already see on the screen.
  • Supplementary: Because tool tips are not displayed permanently, the information should not be essential for use. The central information must be able to be displayed with self-explanatory labels or supplementary texts on the user interface. Tool tips are therefore intended to provide background information that supports the user in learning about the application or to explain elements that do not have text.
  • Stable: The texts in a tool tip may not change. Users will not notice the change, because tooltips only appear at the user's request (mouse hover).
  • Tooltips on UI elements in the status area of an application are an exception. Here, however, the status elements must also display the change.
  • Times:
    • Initial: The time the mouse pointer remains over the UI element before the tool tip appears. A good default time is 0.5 seconds.
    • Restoration: The amount of time the mouse pointer must remain still when the mouse pointer moves from one element to the next. A good default time is 0.1 seconds.
    • Removal: The time after which a tool tip disappears. A good default time is 5 seconds.

User-defined selection

Checkboxes, switches and toggle buttons  

Wireframes of a list with checkboxes, switches or toggle buttons

Checkboxes, switches, toggle buttons

All three elements allow a selection between two complementary states. A *switch* allows a selection between two states that can be described with on/off.

A binary state is available for selections which can be described with on/off. Use a checkbox for binary states that cannot be described meaningfully with on/off. 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

The two states must be complementary to each other, i.e. they must be mutually exclusive.

  • Example: It does not make sense to use a checkbox to select the page format (portrait/landscape) when printing documents, because the two formats are not opposites of each other.

Switches are primarily used in a mobile context.

  • On the other hand, checkboxes and toggle buttons should be used in a purely desktop environment.
  • In general, the two types of control should not be mixed arbitrarily in one application; this applies in particular to controls on the same screen.

Instructions for use

  • Checkboxes, toggle buttons and switches should not be mixed together in the same group.
  • A list of checkboxes, toggle buttons or switches
    • can be described with a label positioned above them.
    • Checkboxes/switches are to be aligned one below the next.
    • Toggle buttons can be aligned one below the next or alongside each other.
  • Sorting in a list:
    • The most commonly used options appear first
    • Ideally, related options appear next to one another
    • Alternatively, use a natural/logical sequence
    • Avoid alphabetical sorting
Wireframes with a list of radio buttons  

Wireframes with a list of radio buttons

Radio buttons

A radio button is a graphical control element. Users can select "1 out of N". With radio buttons, users can only ever select one option. This is suitable if:

  • Options are to be mutually exclusive

With radio buttons, users can see the other options available for selection at all times. This is suitable if:

  • Users are not aware of the possible entries
  • The number of clicks is to be kept to a minimum

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:
    • Optionally, a text can be placed above a group with 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 first
    • Alternatively, use a natural/logical sequence
    • Alphabetical sorting is not permitted
  • Alignment: several radio buttons are aligned one below the next (otherwise difficult to read)
Wireframe of a dropdown list with days of the week  

Wireframe of a dropdown list with days of the week

Dropdowns, combo boxes

When are dropdowns / combo boxes to be used?

  • The user must make a selection from mutually exclusive elements.
  • The options are values, not actions or navigation elements.
    • Actions are better represented by menus, buttons or links.
  • The selection is to be made from 3 or more options. If not, use radio or toggle buttons.

Instructions for use

  • A meaningful default value should be available. Empty dropdown lists / combo boxes are unusual.
  • Sorting:
    • Related options appear next to one another
    • Ideally, the most commonly used options appear first
    • Alternatively, use a natural/logical sequence
    • Lists with 12 or more entries are to be sorted alphabetically/numerically/chronologically.
  • Meta options, such as "All" or "None":
    • Are always to appear at the start of the list
    • Are to be listed in brackets, in order that they stand out from the other elements: e.g. "(All)"
    • Are always to be used in brackets instead of empty entries.

Combo boxes allow users to add their own entries:

  • Text lengths are to be limited.
  • The entries in the list are specified systematically:
    • Either the most frequent options, such that these do not have to be entered manually, or
    • A representative selection, explaining to the user which entry makes sense.

Bridging waiting times

Activity indicator  

Activity indicators: left – busy; right – background activity

Activity indicator

An activity indicator shows an ongoing process without providing the user with information on when the process will end (if it is possible to predict this, a progress indicator is to be used).

When is an activity indicator to be used?

A progress indicator is to be preferred over an activity indicator. This UI 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 determine how much of the process is already complete.

Instructions for use

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

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

The display should also contain text that explains what the system is currently working on.

Activity indicator for PC applications: There are 2 mouse pointers:

  • Busy: When the application is not currently responding to user inputs.
  • Background activity: A process is running in the background, and is expected to slow down working with the application. However, the application continues to react to mouse actions, such as pointing, clicking, dragging.
Dialog with progress indicator (wireframe)  

Dialog with progress indicator (wireframe)

Progress indicators

A progress indicator shows the progress of an ongoing operation. It shows the (estimated) time remaining until the operation is complete. This element should be used if a process blocks the interface or takes longer than 3 seconds.

A progress indicator consists of a bar that fills from left to right while the operation is progressing (see image). A progress indicator does not allow the user to perform any actions. This means, for example, that clicking on or touching the progress indicator does not trigger an action or cause further information to be displayed. There is one exception: the user can cancel a process. A corresponding button must be made available for this.

  • Use a progress indicator in a modal dialog if the user cannot use the application meaningfully until the process has been completed.
  • Use a progress indicator in the status bar if the process can be executed in the background.
  • Provide text that explains what the system is doing at a specific time, e.g. (1) connecting to the server, (2), downloading a file, (3) installing an update.
  • The progress indicator should visibly change at least every 3 seconds.

Structuring and grouping forms

Wireframe illustration  

Wireframe illustration

The greater the amount of information available in a mask, the greater the effort needed to find the respective field that the user currently needs. Structure content to facilitate clarity. The options for structuring follow a (grouping) hierarchy:

  • Windows/dialogs
    • Tab sheet
      • Group box
        • Structuring through interspaces

Example: Tab sheets should not be used within group boxes. Group boxes within tab sheets are, however, very useful.

  • It is always possible to omit the intermediate levels.
    • Example: Group boxes directly in a window/dialog are possible
  • The same element may not be used twice in the hierarchy:
    • Example: No group boxes within group boxes
    • Example: No tabs within tabs

Structuring in a mask through interspaces

Content can be well structured with interspaces alone. Use small interspaces when elements belong together, and larger interspaces to separate them from one another.

When should interspaces be used?

Interspaces can be used to separate small numbers of UI elements from one another.

With a small number of UI elements (approx. less than 10, but more than 2)
At the lowest level of a grouping hierarchy (see above).

Instructions for use

Combine fields if they are often needed together. This is often the case if a particular user task requires the same fields to be processed (while others can be ignored).
Combine content, that

Group boxes

Group boxes delimit a rectangular area and have a title. They are used for more complex information.

  • Groups can be shown and named meaningfully
  • There is more than one group
  • There is more than one element in the group

Instructions for use

Labeling the group box

Short, concise label
Meaningful, i.e. not "Others", for example
The labels of several group boxes should not start with the same word.

Tab sheet
When should tab sheets be used?

If the content is suitable for one individual tab, then tabs are not necessary.
Selecting a tab may not imply the selection of content. Tabs are only for structuring content. Selecting a tab to make a particular decision is not permitted.
The contents of different tabs are independent of one another.

An entry in one tab may not have an effect on other tabs.
Alternative 1: Wizard

The contents of the tabs are of equal priority. There is no hierarchical relationship.

Alternative: A tree control in a master detail arrangement can represent hierarchical relationships.

The contents of the tabs are not to be seen as steps in the processing of a task.
The contents of the tabs are different. They do not simply represent views of the same contents.

Instructions for use

Do not use more than 7 tabs. All tabs should fit into one row (even after localization into other languages). Users must be free to choose the sequence in which the tabs are opened.


Labeling tabs

Short, concise label
Meaningful, i.e. not "Others", for example
Several labels should not start with the same word.
Nouns

If a tab is not meaningful in a particular context, it is to be removed.

PHOENIX CONTACT
GmbH & Co. KG

Flachsmarktstraße 8
32825 Blomberg, Germany
+49 5235 3-00

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

Close