| Table of Contents | ||||
|---|---|---|---|---|
|
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.
Layout & navigation
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
| Status | ||||
|---|---|---|---|---|
|
Meaning that if the user clicks on the menu item they are returned to the starting state of the particular application.
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 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.