Introduction

Parts of these guidelines were originally developed for both administrative and clinical solutions.

Therefore they are very generic and can be found here: General guidelines.

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

You can find some more background in the general guidelines.

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/

Implementation has been executed through https://material.angular.io/ component libraries that support Material design guidelines.

Specific design choices have in general been made due to components used through Angular Material libraries.

If an application does not use Angular material it should at least adhere to the following guidelines, in order to be considered within specifications.

Left menu toggle
Global navigation
User information og login/out
Left menu
Main content area / Card
Contextual action
Breadcrumb Navigation

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 a fully featured drag & drop implementation.

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

togglable left menu

The left menu can be displayed in to states. Unfolded and folded, making it possible for the user to take a reclaime a little more horizontal space.

Display all / unfolded
Clicking the “3 strip“ icon hides labels, displaying more horizontal space.
Minimal display / folded
Clicking the “3 stripe“ menu ikon shows displays icons as well as labels

In general the individual items (Micro frontends) in the left menu should be considered a HOME funktion.

Meaning that if the user clicks on the menu item they are returned to the starting state of the particular micro frontend.

Content navigation

The main navigational element in individual applications are the breadcrumb trails at the top of the content area. Done so as to make it possible for the user to jump back to a specific step/page.

The users current position is always the link furthest to the right. As the user navigates deeper, further steps are added to the trail.

It is not a “stepper” and is only intended for use as backwards navigation and will grow and shrink depending on how many levels deep the navigation goes.

Via the browser back button the user can traverse exactly one step.

Theme

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

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

Grayscale

information & Warnings

Buttons

https://material.angular.io/components/button/overview

Font types

The chosen font type in the material design guidelines is Roboto

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

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

Also specific fonts for components specified in angular material have been left in.

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.

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. This is because of the Common Workplace shell not using breakpoints for supporting lower screen sizes, and will introduce inconsistencies in navigation.

Until further notice there will be no support for mobile or smaller screens.

UI and Design