Back to overview

Content navigation and controls

Filter column

The width of the filter column is 220 pixels. Its height is variable.

Filter column
Back to top

Interaction concept

Expand/collapse function within the facets

Within the pages with a left filter column facet boxes with expand/collapse function are offered.

Per default the first x boxes are open. They show a minus button in front of the box headline and the defined “content”.

All other boxes are closed. They show a plus button in front of the box headline and no content.

The user can manually open or close all boxes. There will be no dependency from each other.

  • Behaviour of the expand/collapse elements
  • Animation: Changing icon, content display, following module moves down
  • Time: 0 seconds
Functional layer

Action 1

With mouse-over on a link with arrow button in the service navigation a layer opens. The layer also opens, when the user clicks on the arrow button.

Action 2

By moving the mouse out of the layer area, the layer has to close automatically with a little bit allowance (ca. 0.5 seconds).

Display of layer

  • Animation: Alpha from 0 to 100% (and back)
  • Transition: easeOutCubic/ easeInCubic
  • Time: 0.5 seconds
  • Delay: 0.3 (open) 0.5 (close, only on mouse moving out)

Expand/collapse module

Expand/collapse module

Interaction concept: Expand/collapse module in content

If only one module is offered, it is closed.

If more than one module is offered, the first one is open, the following modules are closed.
The whole headline/button area is sensitive. With mouse-over above the defined area the user gets mouse-feedback (TBD).

With click on the area the module opens or closes. The user can open all modules and has to close them manually. If he leaves the page, the default state will be recovered. Closed modules display the plus (+) button; open modules display the minus (-) button.

  • Animation: Changing icon, content display, following content moves down
  • Time: 0 second
Back to top

Expand/ collapse module with edit functions

Expand/ collapse module with edit functions
Back to top

Tab modules

The basic rule for the width of the tabs is to use the whole available space and divide it by the amount of necessary elements (minus distances between the element). Two lines of text should be used only exceptionally, e.g. if only one or two tabs contain much more text than the rest of the tabs. The text in the tabs is always vertically and horizontally centered.

Tab modules

From top to bottom: Standard tabs, glossary tabs, and tabs with arrows

Back to top

Tab module with content

The height of the higher column in a row defines the height of both columns.

Tab module with content
Back to top

Secondary navigation

Secondary navigation
Back to top

Jump marks

Jump marks
Back to top

Clickable progress indicator

  • Font: Verdana
  • Font color: #FFFFFF
  • Font size: 100%
  • Font style process step numbering: bold
  • Font style process step description: normal
  • Background color clickable process steps: #0098a1
  • Background color non-clickable process steps: #0098a1 with 50% transparency

 

Interaction concept

Only the process step that is currently active has a description. Clicking on a previous process step takes the user back to that process step, where they will find the data that they have already edited. Subsequent process steps are not clickable, a corresponding primary call-to-action button is required here. If the user switches to another process step, the corresponding description will be displayed there.

Back to top

Back to overview
Further information

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines