Skip to content

Best practices

Transitional text to show something is happening

  • Use -ing verbs and ellipses (…)
  • Do not use informal, transitional wording
  • Confirmation messages: Use the same verb as the transitional text

Do's

  • Updating user roles...
  • Submitting log files...
  • Saving project... > Project saved
  • Training models... > Models trained

Don'ts

  • Getting ready...
  • Getting ready...
  • Saving project... > Project uploaded
  • Training models... > Training done

Empty-state

  • Empty-state wording tells the user the empty space is intentional and should be there, i.e. not an error
  • Use the Empty state component with three parts of a message: 1. title 2. explanation 3. action
  • Use wording to move the user forward
  • Use wording to help users understand the function of the empty state
  • Do not over communicate
  • Use wording to show users how to resolve the empty state, e.g. with an action, click, etc.
DosDon'ts
(Title) No users
(Explanation) Add users to current site
(Action) Add users
No allocated users
(Title) Nothing to display
(Explanation) Select a project to see users
(Action) Select project
No rows to show
(Title) No projects
(Explanation) Create a project to use the app
(Action) Create project
No projects saved

Except where otherwise noted, content on this site is licensed under MIT License.