| Table of Contents | ||||
|---|---|---|---|---|
|
Introduction
Originally parts Parts of these guidelines were originally developed to target for both administrative and clinical solutions.
Therefore they are very general in nature 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/
Furthermore implementation is done Implementation has been executed through https://material.angular.io/ component libraries that support Material design guidelines.
...
Layout & navigation
Left menu toggle
Global navigation
User information og login/out
Left menu
Main content area / Card
Contextual action
Breadcrumb Navigation
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 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 Flexsible Flexible
Furthermore it is imperative that the theme supports high contrast for maximum readability.
Read more about importance of contrast:
Overall Color Scheme is as follows
...
w3.org/TR/WCAG21/#contrast-minimum
https://webaim.org/resources/contrastchecker/
Grayscale
...
Messages and Alerts
...
information & Warnings
...
Buttons
https://colormaterial.adobeangular.comio/dacomponents/create/color-contrast-analyzer
...
...
Font types
The chosen font type in the material design guidelines is Roboto
Furthermore, fonts are chosen on the following criteria: readability, contrast, clear huarache.hierarchy
Only parts of the full Font spec of the material spec have been chosen for Common Workplace UI specifically
Used Font Types
...
Info
...
Icons
General icon resources used are google icons
...
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 .
...
...
Content and layout
General layout considerations are based on what type of content is to be displayed and edited i Common Workplace UI.
...
Specific in Common Workplace is the Plan editor and Questionnaire editor, which includes a fully featured drag & drop elementsimplementation.
This is a custom solution and the feature is not part of the Angular material spec.
...
That said, we do NOT officially support screen widths below 1400px. Everything under This is because of the Common Workplace shell not using breakpoints for supporting lower screen sizes, and will introduce inconsistencies in navigation and is therefore not recommended.
Until further notice there will be no support for mobile or smaller screens.