...
Parts of these guidelines were originally developed for both administrative and clinical solutions.
Therefore they are very general in nature generic and can be found here: General guidelines.
...
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.
| Info |
|---|
In order to be considered within specifications the applications should at least loosely adhere to these guidelines, or the general Material design guidelines. |
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.
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 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 to two different states. Unfolded and folded, making it possible for the user to take a reclaime a little bit 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 This means that if the user clicks on the menu item they are returned to the starting state of the particular micro frontend. 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.
Title
Contextual menu
If more than one functions are available the an overflow menu can be utilised.Search & Filter options
Depending on content type, the filter options can vary.Paging & navigation
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:
Card title
Description of content (optional)
Overflow menu
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:
Primary & secondary actions (Tertiary if needed).
Button placement is always from left to right, with the primary function left most.
Content navigation
...
https://webaim.org/resources/contrastchecker/
Grayscale
...
...
Information & Warnings
...
Buttons
https://material.angular.io/components/button/overview
...
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) an icon is always displayed with a visible label. There are exceptions though.
...
General icons for confirm, copy, delete, search, and so forth
navigation: Home, back arrows.
...
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 a fully featured drag & drop implementation.
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.
...
Until further notice there will be no support for mobile or smaller screens.