Skip to content

Usability charter

Igor Milhit edited this page Mar 17, 2020 · 10 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.


  1. Use mostly outline buttons.
  2. 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.
  3. All destructive actions are to be red (danger).
  4. When there's enough room, use a label. An additional icon is optional.
    :warning: In the same group of button, do not mix button with or without icon. Example:
  5. When place is scarce, use a button with an icon only. Try to make it accessible
Primary action
Secondary action
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
class="btn btn-primary"

class="btn btn-outline-primary"
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

button 2

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