1. Guiding principles of the interface
- The Bootstrap 4 framework is used to date (January 2020).
2. Information architecture
Header & menus
Prov : The main navigation consists of a horizontal bar composed of different menus, which open in mousehover. In the version for small screens, this bar is grouped into a hamburger menu.
Administration bar (administration functions)
Web applications: multi-windows is managed through the web browser tabs.
3. Navigation and interaction
Intern to RERO ILS
- All internal links open in the current window.
- When the opening of a link results in the loss of current transactions, a modal window opens and asks for confirmation.
External to RERO ILS
- All links to another application (RERO or not) open in a new tab and are marked by a small icon, on the example of Wikipedia1.
|In general, using Bootstrap's Outline buttons|
|Buttons for indirect action, i.e. leading to an intermediate stage before the action is carried out, have a label followed by three small points|
|The call to action buttons use Bootstrap's solid basic style, in the same color.
Examples of call to action: Save (when changes have been made), Reserve (specific to the user interface), confirmation pop-ups
Location of buttons
- The buttons are placed on the right of the objects concerned (examples: delete, edit).
- Save button
- placed at the bottom right of the object concerned, in principle at the bottom right of the page
- visible at any time on an editor's page: sticky position
- always associated with the cancel button on its left.
Colours (for buttons and feedback infos)
4. Form design
Help and description aspects
JSON schema field: description
In the context of RERO ILS
- The description is displayed as a tooltip when hovering over the name of a field with the mouse.
- Use description only if necessary/useful
- Objective: that the user understands the content of the field. It is a simplified help within the system.
- For cataloguing: indicate RDA toolkit extracts and MARC equivalences.
JSON schema field: placeholder
- A placeholder is a text that appears inside an input field, in light gray. When text is inserted into this field, the placeholder disappears.
In the context of RERO ILS
- Use placeholder only if necessary/useful
- Objective: that the user knows how, in what form, to enter the data.
- Use the placeholder only for examples of allowed values or formatting.
- Prefix it with the word "Example" so as not to confuse it with a value already entered or default value.
- For cataloguing: indicate examples or RDA terms when they are only recommendations (see example below). If a field consist of a closed list of accepted values, a drop-down menu is displayed and no placeholder is needed.
JSON schema field: validation / messages
- A validation messages appears in red close to the field it applies to. It can exist only if a constraint has been defined in the data model, like a pattern (ex: e-mail), a datatype (ex: date as 4 integer) or a required field.
5. Error handling and help
6. Wait time management
Translated with www.DeepL.com/Translator (free version)