Usability charter
This page has moved to https://github.com/rero/developer-resources/blob/master/interface/layout-charter.md
- The Bootstrap 4 framework is used to date (January 2020).
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.
Web applications: multi-windows is managed through the web browser tabs.
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.
- Use mostly outline buttons.
- Except if a specific action is to be encouraged (call to action): this is a primary button. Only once per page. Primary buttons are not mandatory.
- All destructive actions are to be red (danger).
- When there's enough room, use a label. An additional icon is optional.
⚠️ In the same group of button, do not mix button with or without icon. Example:
- When place is scarce, use a button with an icon only. Try to make it
accessible
Example:
| Primary action enabled/disabled |
Secondary action enabled/disabled |
|
|---|---|---|
| Usage: define the main action, only one per page if possible. Ex: save, request, delete (in delete confirmation popup) | Usage: for standard actions. Ex: edit, cancel, add | |
| Standard |
 class="btn btn-primary" |
 class="btn btn-outline-primary" |
| Negative Usage: destructive actions. Ex: cancel, delete |
 class="btn btn-danger" |
 class="btn btn-outline-danger" |
In general, using of 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
Location of buttons
- The buttons are placed on the right of the objects concerned (examples: delete, edit).
- Save button
- placed at the bottom right (and top right?) of the object concerned
- visible at any time on an editor's page: sticky position
- always associated with the cancel button on its left.
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.
Example
JSON schema field: placeholder
Definition
- 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.
Examples are:
JSON schema field: validation / messages
Definition
- 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.
Translated with www.DeepL.com/Translator (free version)