General layout and common features
Table of Content
User Interface Design Specifications
The UI design of the .Stat Data Explorer (DE) is following the specifications described in the UI documentation. Mockups are also available to illustrate the expected user experience. The UI design respects the general Data Explorer design principles agreed within SIS-CC.
Disclaimer: It is possible to see some differences between the specifications of the UI design, the mockups and the look and feel of the latest implementation version of .Stat DE, which is due to the sequential timing of design and implementation.
Also, theming the Data Explorer is largely flexible (see the related documentation here), you can thus see particular tenants of the .Stat DE demo instance that apply different layouts, colours or fonts.
The Data Explorer header is common to all pages of the application, and consists of:
- a predefined, configurable logo
- a switch to enable Accessibility support
- a link to Login to the application
- a Language switch option
Web Content Accessibility Support
Released in June 23, 2020 Release .Stat Suite JS 5.1.0
The Data Explorer endorses Web Content Accessibility Guidelines (WCAG) 2.1 to Level AA, in order to make its content accessible to people with disabilities.
The WCAG 2.1 accessibility standards are made of prioritised criteria improving the accessibility. While all the technical content of the Data Explorer meets WCAG 2.1 criteria at Level AA, large parts also already meet Level AAA criteria.
The prioritised criteria include key areas of adaptability such as:
- Semantic mark-up code enabling screen readers accessibility;
- All functionalities are keyboard accessible;
- Correct contrast ratio across the entire design colours;
- Alternative features (see below) when the defaults ones are limited in terms of accessibility criteria.
In order to apply the Data Explorer content accessibility features, the user can ‘enable accessibility support’ using the related button in the application header.
The option can be used to enable or disable accessibility support at any time during the user journey in the Data Explorer.
With this feature enabled, the data table view and its ‘Customise’ panel become accessible by screen readers.
- Accessible data table version
When accessibility support is enabled, using the
Tabkey of the keyboard allows to navigate through each cell and see its content. When the specific footnote cells in the column headers have no content, then they are skipped.
- Accessible ‘Customise’ panel version
When accessibility support is enabled, using the
Tabkey of the keyboard allows to navigate through the table axes (Rows, Columns or Row sections) and dimensions in order to change the table layout:
enterkey to select/unselect a dimension
rightcontrol keys to move a dimension between axes
downcontrol keys to re-order dimensions within an axis
Note: We used ANDI, the ‘Accessible Name and Description Inspector’ accessibility testing tool, in the developments and tests of the accessibility compliance features.
Registration is orchestrated at the organisation level, for one or several instances of the Data Explorer, and common with the Data Lifecycle Manager (DLM) registration mechanism (if the DLM is part of the same installation). For further information, check the .Stat authentication configuration and the DLM login mechanism.
.Stat Suite applications are using Keycloak as the authentication service.
When cliking on the
Log in icon of the DE, the user is redirected to the authentication page in order to provide his username and password.
Once logged in, the DE header displays the user’s name, next to the user icon. When clicking on the name, a dropdown feature displays the user email address, and the option to log out.
Log out will automatically unregister the user and refresh the DE homepage.
The Data Explorer is multilangual and supports the localisation of the static elements of the user interface, as well as the localised indexed data (documentation).
There must be at least one language defined per DE instance. If an instance supports more than one language, then a dropdown feature displays the list of available languages.
Switching from one language to another will display the corresponding translated labels for the static UI elements, as well as for the contents (e.g. filter contents, table and chart view headers and labels, etc.).
If, for a given language, the localised contents are not available (e.g. the data provider did not add the necessary translated elements), then they are replaced by their corresponding IDs.
The behavior of switching language will change depending on the page where language is switched:
- Switching language from the homepage keeps the user on the homepage;
- Switching language from the search result page brings the user back to the homepage;
- Switching language from the visualisation page (table view or chart view) keeps the user on the same page.
The Data Explorer footer is common to all pages of the application, and consists of:
- a predefined, configurable logo;
- two (left and right) placeholders for predefined, configurable localised text and hyperlink.