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, in part, executed through https://material.angular.io/ component libraries that support Material design guidelines.

This also means that specific design choices in general, have been made on the premise of these components.

Layout & navigation

The following is a general description of the different components used in the Common Workplace UI

Common Workplace UI shell

Describes menu structure and navigation within the Common Workplace UI shell application.

1. Left menu toggle

2. Global navigation

3. User information og login/out

4. Left menu

5. Main content area / Card

6. Contextual action

7. Breadcrumb Navigation

Open

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

Most parts are of a type, or derived from the following:

• Navigable Data tables

• Forms w./ formfields
  
  

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 to the Plan editor there is a custom drag and drop solution that is not part of the Angular material component library.

Everything under Spørgeskema (Questionnaire) menu item is NOT Angular Material, and does not use any of these components.

togglable left menu

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

1. Display all / unfolded
   Clicking the “3 strip“ icon hides labels, displaying more horizontal space.
   
   

   Open

   

    

2. Minimal display / folded
   Clicking the “3 stripe“ menu ikon shows displays icons as well as labels
   
   

In general the individual items in the left menu should be considered a Home funktion.

This means that if the user clicks on the menu item they are returned to the starting state of the particular application.

Table design

Tables are used for displaying large sets of data that can be searched or browsed through. Specifically in the Common Workplace UI, they are used for displaying Care teams, Plans and Questionnaires.

The tables are generally displayed as follows.

1. Title

2. Contextual menu
   If more than one functions are available the an overflow menu can be utilised.

3. Search & Filter options
   Depending on content type, the filter options can vary.

4. Paging & navigation

5. Accordion Content
   The rows are by default collapsed, but can be opened individually via the chevron icon on the left side.
   This preview funktion is optional and should only be utilised if there is a need for it.

Card design

Cards are used for general input and editing of content.
Different content dictates different functionality, but cards generally follow these rules:

1. Card title

2. Description of content (optional)

3. Overflow menu

4. Form fields & controls

The overflow menu is for extra functionality that is not part of the primary flow of the form. These are typically functions that somehow are supportive of the main flow e.g. (New…, delete, copy).

Dependant on priority the functions can be displayed to the left of the 3 dots, or hidden under the overflow, which are displayed on click.

The bottom section of the card consists of:

1. Primary & secondary actions (Tertiary if needed).

Button placement is always from left to right, with the primary function left most.

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.

Read more about importance of contrast:

https://www.w3.org/TR/WCAG21/#contrast-minimum

https://webaim.org/resources/contrastchecker/

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 an icon 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, and so forth

• 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.

Refences & Materials

Reference design guide

General Design guidelines