Enhance DE header (Accessibility, Localisation, Login)
In order to improve the readability of the DE header,
Here are three enhancements to apply to the Web accessibility, Localisation and Login options.
Web accessibility
-
Replace the current web accessibility icon with the new one which has two states (outline/filled): - When the accessibility mode is currently disabled:
Use the outline icon. The tooltip displays the text of the locale key
accessibility.enable
. - When the accessibility mode is currently enabled:
Use the filled icon.The tooltip displays the text of the locale key
accessibility.disable
.
Note: The tooltip indicates what happens when the user clicks on the button.
- When the accessibility mode is currently disabled:
Localisation
-
Add an icon to the localisation option to make this option understandable whatever the current localisation. The icon is fixed and (as today) only the languages options are displayed in the drop-down.
Login
-
Replace the current login icon with the new one which has two states (outline/filled): - When the user is not logged in:
Use the outline icon. The tooltip displays the text of the locale key
user.login
. When the user clicks on the icon, then (s)he is forwarded to the login page. - When the user is logged in: Use the filled icon. When the user hovers over the 'logged in' icon, then a drop-down menu is displayed with the (non-clickable) login name (e.g. "Max Mustermann"), the (non-clickable) login email (e.g. "max.mustermann@email.xyz") followed by the (clickable) Log out option that displays the text of the locale key
user.logout
:. When the user clicks on the Log out option, then (s)he is logged out.
Note: At a later stage the filled icon could be replaced with the user's avatar (when available) to be retrieved from the identity provider.
- When the user is not logged in:
Header integration
Here are the three features presented in the header with a separator between each of them
Note: The colour of the icons (action's dark blue) is to be respected.
Design references
UI documentation of the header
UI documentation of the icons
Click to expand the Design specifications
To improve the readiness of the header, here are three enhancements to apply on the Web accessibility, Localisation options and login option. * [x] Enhance the Web accessibility icon Currently, the developer team has put in place the following icon in the header bar near the language drop-down list. This icon allows the switch to the accessibility mode. It would be good to include it in the mockups and the UI documentation with the Designer's recommendations. The current icon is ('@material-ui/icons/AccessibilityNew';):The behaviour should be easily understood by the user (color change, strike out the icon,..) even if the tooltip will let the user know in which status this icon is:
- If the status is disable: "Click to enable the Web accessibility"
- If the status is enable: "Click to disable the Web accessibility"
-
Add an icon to the localisation option
In the DE, the language selector is not internationaly easy to guess: When you are in a language that you don't master you have no clue on how to get to the language that you need:We need a visual mean, e.g. an icon such as the globe
(@material-ui/icons/Language), to label the dropdown and make clear that this dropdown serves as language picker:
-
Update the icon for the login to the AccountCircle one of Material UI