Skip to content

UX charter

Nicolas Prongué edited this page Feb 27, 2020 · 4 revisions

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

Navigation areas


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 button 1
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 button 2
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
button 3

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.
button save

Input/search fields

Drop-down menus

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.

Example Description example


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.

Examples are: placeholder_example

Validation aspects

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 (free version)

You can’t perform that action at this time.