You will find here the guidelines regarding the design of user interface (aspect, text, position, etc.).
Dialog Windows
Buttons
There are 3 kinds of buttons:
- primary or positive buttons, for logical actions depending of the context, e. g. Save, Create, Add, Continue, or Accept.
- neutral buttons, for options or alternatives to the primary action, e.g. Do it later, Save & do another thing in addition, …
- back buttons or negative buttons, e.g. Back, Cancel, Discard.
Position
The primary buttons should be located on the right side of the dialog window, following the reading direction Left to Right. The last thing the user read should be the logical action to do. Often, the primary button has a specific class to be highlighted in comparison to the other actions.
The neutral buttons should be located just before the primary button, as an alternative before the suggested action to do.
The back buttons should be located on the left, separated from the other actions.
Labels
Capitalization
We consider there are two capitalization styles:
- Title capitalization Example: Labels Capitalization and Punctuation See http://titlecapitalization.com/ (Chicago Manual of Style option) when in doubt.
- Sentence capitalization Example: To start the search, please type at least 0 character(s).
| Element | Capitalization Style | Example |
|---|---|---|
| Button & Actions | Title | Add to Collection Edit Status Save Clear List |
| Browser window title | Title | Nuxeo Platform - Home |
| Popup titles | Title | Add a Permission Add 1 Item to Collection |
| Gadget titles | Title | Last Modified Documents |
| Tab labels | Title | Permissions Summary Comments |
| Field names (forms, layouts) | Title | Last Contributor Title Last Modified at |
| Titles in layout | Title | Common Metadata |
| Column headers | Title | Last Contributor Due Date First Name |
| Feedback messages | Sentence | 1 document copied. No user or group selected. |
| Options (radio, checkbox, dropdown) | Sentence (no final dot) | Anonymous proxy Less than 100 KB |
| Placeholders | Sentence (no final dot) | Select a value |
| Help messages | Sentence | This folder contains no document. The table below shows all the tasks for which you have been requested to perform an operation. |
| Tooltips | Sentence | This field is used by virtual navigation. Current version of the document |
| Popup messages | Sentence | Delete selected document(s)? |
Punctuation
- Don't put spaces before double punctuation signs (
: ; ?) in English. However, note that in French these signs require a non-breaking space before. - Don't use
!in feedback messages. - Don't forget the final dot at the end of sentences.
- Don't put a
:after the field label in forms. - Use a non-breaking space between value and unit to avoid them being split by word wrapping. For example, write
2 GBfor 2 GB.
Terminology and Spelling
| OK | Not OK |
|---|---|
| addon | add-on |
| hotfix | hot-fix, HotFix |
| lifecycle | life cycle lifecycle |
| plugin | plug-in |
| username | user name |