Nuxeo Core Developer Guide

User Interface Guidelines

Updated: October 22, 2018 Page Information Edit on GitHub

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 GB for 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
2 months ago manonlumeau NXDOC-1650 fix about integrating changes, add mention on multiple attempts
3 years ago Manon Lumeau 15 | eplace "access rights" by "permissions"
3 years ago Solen Guitter 14
3 years ago Solen Guitter 13
3 years ago Solen Guitter 12
3 years ago Solen Guitter 11
3 years ago Solen Guitter 10
3 years ago Solen Guitter 9
3 years ago Solen Guitter 7
3 years ago Solen Guitter 8
3 years ago Solen Guitter 6
3 years ago Solen Guitter 5
3 years ago Ronan Daniellou 4 | Fixed capitalization
3 years ago Lise Kemen 3
3 years ago Ronan Daniellou 2
3 years ago Ronan Daniellou 1
History: Created by Ronan Daniellou

We'd love to hear your thoughts!

All fields required