Interaction design

Role of colour in interaction design

ETH web applications display interaction via colours and colour changes. Interactive elements such as links are coloured according to the selected colour scheme or change colour when hovered over (e.g. accordion headers).

Less important elements or site-wide elements (such as links in context columns or breadcrumb navigation trails) are displayed in gray, which keeps the focus on the main content.

Certain elements are also underlined (e.g. main navigation) or supplemented by a pictogram or an animation (e.g. subnavigation). This improves usability.

Buttons are black on the ETH website. In web applications, they can also be coloured.

Links

There are two types of links: coloured icon links and coloured, underlined text links. Text links appear in body/main text, while icon links are always displayed on their own (e.g. as a list of links).

Links on coloured backgrounds

Links are white if they are displayed on a coloured or black background. Here interaction is displayed by slightly darkening the text when a user hovers over it. Links are gray when displayed on light backgrounds in order to prevent any undesirable colour combinations.

Text links with icons

Text links that refer to other ETH websites do not have any icons. Downloads or external links are supplemented by an appropriate pictogram.

Buttons

Buttons on user interfaces display different possible actions. As with other interactive elements, a button displays visual feedback “onHover” or “onTap”.

Primary buttons

Primary buttons guide users towards a main action and are visually dominant. These buttons appear on the website in light black (#222222) and onHover in black (#000000).

Secondary Buttons

Secondary buttons are used for smaller actions. They can be used several times and be placed next to one another. Secondary buttons are outlined in black light 20%.

Button-Tags

If a button is used as a filter or to present users with a selection, a tag version of the button is displayed.

Icon Buttons

Button text can be supplemented by an appropriate icon in order to make the action of the button more intuitive/accessible.

Buttons on coloured backgrounds

Buttons are displayed in an inverted fashion if they are on a coloured background (one of the 7 ETH colours). The button background is then white, and the text is black. Secondary buttons are displayed with a white outline.

Buttons in applications

Buttons can also be coloured if used in web or mobile applications. To show the hover status, darker shades are used.