Introduction

Originally parts of these guidelines were developed to target both administrative and clinical solutions.

The following design guidelines describe the specifics of the Common Workplace UI self-service solution.

Above all, the UI’s main goal is to support ease of use in self-service solutions.

The design adheres to general design guidelines, which are derived from Google https://material.io/

Furthermore implementation is done through https://material.angular.io/ component libraries that support Material design guidelines.

Color & Contrast

Theme was chosen on the following criteria: Simple, neutral and Flexsible

Furthermore it is imperative that the theme supports high contrast for maximum readability.

Overall Color Scheme is as follows

Grayscale

Messages and Alerts

Typography And Fonts

The chosen font type in the material design guidelines is Roboto

Furthermore, fonts are chosen on the following criteria: readability, contrast, clear huarache.

Only parts of the full Font spec have been chosen for Common Workplace UI specifically

Used Font Types

Icons

General icon resources used are google icons

In Common Workplace UI Icons are used to “support” the user's understanding of what is being communicated through call to actions.

Rule of thumb is that a label (usually a CTA) is always displayed with a visible label. There are exceptions though.

Generally already established conventions can sometimes be displayed without a clear call to action if a mouseover caption is provided.

• General icons for confirm, copy, delete, search

• navigation: Home, back arrows.

Generally Icons used are never displayed alone, as this usually leads to unnecessary cognitive overload .

The are specific areas i Common Workplace UI, where icons are a little more freely interpriable. These are generally never left without a clear label.

Content and layout

General layout considerations are based on what type of content is to be displayed and edited i Common Workplace UI.

Most parts are of type or derived from the following

• Navigable Data tables

• Forms w./ formfields

• Buttons

Most of these components are implemented through https://material.angular.io/

• UI components: HTML + CSS. This could be a button, a radio-button or an input-field or anything else consisting of just HTML and CSS.

• Functional components: HTML + CSS + JS. This could be an accordion, a carousel or a modal.

Most components are used “out of the box“. But there are exceptions.

Specific in Common Workplace is the Plan editor and Questionnaire editor, which includes fully drag & drop elements.

This is a custom solution and the feature is not part of the Angular material spec.

Smaller Screens And Responsiveness

The https://material.angular.io/ spec fully supports responsive layout. And most components are laid out in a flexible gridmodel.

That said, we do NOT officially support screen widths below 1400px. Everything under will introduce inconsistencies in navigation and is therefore not recommended.