Use actions to provide links and allow people to perform tasks.
Multiple actions can be grouped into an Action List.
There are 3 types of action.
1. Icon Right
2. Opens In New Window
3. Icon Left
Usage
Use an action to provide a link back up one level in the page hierarchy.
Use the custom icon variant of the action to include a specialised icon that can help users to understand task it will perform.
Use the ‘open in new window’ variant to indicate that the link will take the user to external content.
Avoid using long text labels that run onto two lines.
Writing an action
- Imagine finishing this sentence in as few words as possible: "On the next page, you can [functional task]"
-
Now, see if you can phrase that task in even fewer words using a verb and noun (action and name).
Remember, Actions should be an ideal of 2 words, absolute maximum 5 words.
- use sentence case
- lead with a verb (an action word, for example 'Go', 'Find', 'Change')
- be as clear as possible about what the action will do
- focus on the function
- put it as simply as possible
- use active language
- respect that the customer knows what’s best for them
- check it's accessible for screenreaders –
- can this copy stand alone without body copy and still make sense?
- be overly dramatic or pushy
- use punctuation at the end of the copy
- use a question
- be redundant – vary this copy from headlines and other copy on the page
- use words like 'Click here', 'Learn more', or 'Get started', which are vague or and not compelling
- use first person - for example 'my', 'I'
- try to lure users back in - this isn’t the right moment
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links
- UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts