General layout and common features

Table of Content

• User Interface Design Specifications
• Header
• Web Content Accessibility Support
• Login
• “Contact us” form
• Language
• Footer
• URL parameters

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.

Header

The Data Explorer header is common to all pages of the application, and consists of:

• a predefined, configurable logo
• a localised text field, which by default is empty and hidden and which can be customised
• a switch to enable Accessibility support
• a link to Login to the application
• a link to Contact us
• a Language switch option

Since April 4, 2024 Release .Stat Suite JS zoo, in responsive mode (on mobile phone view), all header options are grouped and displayed under a hamburger menu button that expands on click:

Web Content Accessibility Support

Enhancements based on DE Accessibility Audit WCAG 2.1 level AA compliance - October 2021 and delivered with April 4, 2024 Release .Stat Suite JS zoo
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 Tab key 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 Tab key of the keyboard allows to navigate through the table axes (Rows, Columns or Row sections) and dimensions in order to change the table layout:
  • use spacebar or enter key to select/unselect a dimension
  • use left and right control keys to move a dimension between axes
  • use up and down control 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.

Login

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 can use Keycloak as the authentication service or any other OpenID-Connect compliant identity provider or proxy.

When clicking on the Log in icon of the DE, it opens an authentication popup webpage in order, if appropriate, to choose the identiy provider and, if required, to enter the username and password.

Once logged in, clicking on the user icon displays a dropdown feature with the user’s name, email address, and the option to log out.

Note that the authentication in the DE supports the auto-login within the same web session, meaning that if an authenticated user opens a second tab of the DE in the same web session, then the authentication will be automatically spread across.

Clicking on Log out will automatically unregister the user and refresh the DE homepage.
In case when there are several authenticated tabs of the DE in the same session, when the user logs out from one, then he will be logged out from all the DE tabs when refreshing the contents.

“Contact us” form

Version history:
Enhanced Form with a new “Subject” field since September 18, 2024 Release .Stat Suite JS baryon
Released in December 5, 2022 Release .Stat Suite JS spin

In order to contact the organisation responsible for the DE instance, the user can use the “Contact us” form icon in the application header and accessible from all DE pages. After clicking on it, a form will is displayed in a popup window allowing the user to:

1. make a choice for 1 of the 3 question types with the following dynamically displayed explanatory texts:

• Content question: “I cannot find the data I’m looking for, the data I found doesn’t correspond to what I expected, or I have another question concerning the data.”
• Technical problem: “I have a technical problem to access, select, configure, view, share or download data, or with any other feature of this web site.”
• Feedback: “I wish to give some feedback on this site to help to improve it or to thank the teams behind it.”

2. complete the additional information:

• personal information (title, full name, organisation, email where at least the email is required); The ’email’ and ‘full name’ entries are prefilled in case the user is authenticated.
• Subject (optional).
• detailed question/information (required).
• whether user can be contacted to help improving the web site (with a tick box).

The form proposes a link to organisation’s privacy policy and an (on/off) configurable) easy-to-use captcha (required, see below).

When the user clicks on “Send”, an email is generated and automatically sent by a pre-configured SMTP server to a pre-configured email address (see below). The user is then informed by a notification popup that the mail has been sent.

The email sent contains:

• email subject: the question type selected (Content question, Technical problem or Feedback), the word " about “ and the DE instance name. It is followed by the subject entered by the user (if any).
• email body: all the information filled in the screen (except for reCAPTCHA) and the current URL used in the DE, meaning the URL of the page from where the user has opened the user feedback form.

See here on how to configure the “Contact us” form, the reCAPTCHA feature and the email settings for the destination email.
Note that the “Contact us” form and/or the reCAPTCHA feature are not displayed if not configured appropriately. They can also be switched off through configuration.

Language

Enhanced behavior when no language is matching the selected locale since September 22, 2022 Release .Stat Suite .NET blueberry

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 the default language being the first language provided in the request (provided as the first language defined by the data owner).

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.

Footer

The Data Explorer footer is common to all pages of the application, and consists of two (left and right-aligned) predefined localised text fields allowing for a logo, rich text and hyperlinks. They can be customised as described here

URL parameters

The Data Explorer pages let the user drives the page content through URL parameters. This allows bookmarking and URL sharing of DE pages.
Note that the URL options allow using the web browser’s Going Back option to roll back to the corresponding previous state and user selections.

Since April 8, 2024 Release .Stat Suite JS zoo, the dataflow version number key df[vs]=1.0 can be omitted or emptied, in order to query for the always latest version of a published datafow. Both following formats are accepted:

• omitted version df[id]=DF_HEALTH_STAT&df[ag]=OECD
• emptied version df[id]=DF_HEALTH_STAT&df[ag]=OECD&df[vs]=

Note that, since the November 30, 2020 Release .Stat Suite JS 6.1.0, the keys in the above table have been shortened in order to reduce the browser url size and avoid reaching browser limitations as much as possible. Previous bookmarked urls with long keys will still work because the application converts them to their shorter match.
As part of this refactoring work, the following keys have also been removed:

• filter (open box in side in viz)
• frequency (frequency of the app)