QReg5 Design System

Texts for web elements

Buttons

Always start with an actionable verb (save, sign, edit, etc.). Try to stick to a maximum of three words in the button text. In connection with buttons - never write "click the button to…" and the like. Users know they can click buttons.

Dialogues

There are two types of dialogues:

  1. Decision dialogs - asks a question to the user with the aim of getting confirmation and/or preventing him or her from making a mistake. Used in important situations. Preferably write the heading as a question. Then try to match the heading verb in the button text.

  2. Information dialogues - usually a friendly reminder about something.

Help texts

The rule of thumb is: If what the user can or should do in the current view is not completely obvious, add a help text.

Tooltips

Use tooltip to:

  • give a brief explanation of buttons, icons or anything else that changes the situation

  • display the entire text if it is truncated in the user interface

Write a tooltip like this:

  • Title is optional

  • In the body text, write the most necessary and meaningful information to keep the user on track

  • At the end of the body text, you can add a "read more" link to a help article if available (opens in a new tab or window)

Empty states

In our case, for example, an empty list of registrations of a patient for whom nothing has yet been registered. Instead of just having an empty list, we use the surface to give the user a good start - for example, we add info on how to start registering. Examples of this can be seen in the various components of the Design System.

Headings

Headings should not have full stops. Make sure the heading reflects the page content. Use the same word for the same things, so the heading should match the content.

Text under headings should be in full sentences including full stops and commas.

Lists

Lists are a way for the user to make a choice.

  • Never write in the style of "select x from the list….". Simply type "select x"

  • Make sure that the contents of the list are of the same type / variety

  • Be consistent with uppercase / lowercase letters

Navigation

In menus:

  • use a single word as far as possible

  • the word should be a noun

  • the word should describe the destination and what the user can do or find there