Interaction

The interaction concept defines the basic elements to trigger an action, control a component and navigate through the content.

This is important to ensure an optimal user guidance in every use case. The right usage of interaction elements has a huge impact on user acceptance and the understanding of functions and goals.

Buttons

Buttons attract users’ attention for actions. Different hierarchy levels of buttons are used to achieve the desired loudness level of attraction.

Standard Button

The Standard Button appears in restrained, neutral colors. The button with label only is the most common button and can be used multiple times on a page. If necessary, for better understanding the label can be supplemented with a supporting icon. If a button with a subordinate functionality must appear reduced without drawing much attention to itself, the rimless version should be used.

Controls

The Control is a special version of the Standard Button that is mostly used for interactions that control a component. It only consists of a single icon that represents its function. This is often a standard function like “add”, “remove”, “back”, “next”, “up”, “down” that doesn’t require additional text. If necessary, the Standard Button containing an icon and label can be displayed minimized as a Control on mobile devices.

In some components (e.g. Accordion, Alert, Application Bar, Date-Time-Picker, Modal Dialog) that work as clearly separated composition Controls are displayed on a lower hierarchy level. Then they consist just of a dark grey icon.

Primary Button

The Primary Button in Accessible Orange is used for the primary call to action. It should attract the user on the main action. It is used rarely – only one primary button per screen is recommended to avoid competition with each other. Supplemented with an icon this button can be minimized to an orange circle with icon on mobile devices if the use case requires it. This is an exceptional case.

Links

Links are hierarchically subordinated to the buttons. Commonly they are used as hyperlinks referring to other pages. There are different link modifications to fit a variety of purposes.

Inline links

A simple link appears underlined in text paragraphs. In exceptional cases it can be supplemented with an appropriate icon which supports the declaration of the label.

Text link

Text links appear separated from text paragraphs. By default they consist of a descriptive label and a supporting icon to underpin the meaning of it. Text links without icons are only used in exceptional cases, for example in the footer component as legal links.

Text links can be placed as single links or combined as linklist. The linklist is nice for a lucid offering of multiple links. It is documented in the Lists component.