...
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.
Specific This also means that specific design choices have in general, have been made due to components used through Angular Material libraries. If an application does not use Angular material it 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 i in Common Workplace UI.
Most parts are of a type, or derived from the following:
Navigable Data tables
Forms w./ formfields Buttons
Most of these components are implemented through https://material.angular.io/
...
Most components are used “out of the box“. But there are exceptions.
Specific in Common Workplace is to the Plan editor and Questionnaire editor, which includes a fully featured drag & drop implementation.This is a custom solution and the feature there is a custom drag and drop solution that is not part of the Angular material speccomponent 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 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
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.
...
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.
...
Smaller Screens And Responsiveness
...
Until further notice there will be no support for mobile or smaller screens.