Clear and consistent copywriting is vital to good UI design - and it's especially important on FutureLearn, because there's text everywhere!
Labelling & capitalisation
Labels for interface elements should be clear and easy to understand. Be as specific as possible when writing copy for any element that requires the user to make a choice, such as radio buttons, checkboxes, and push buttons. Aim for short, concise labels, but don't sacrifice clarity for a shorter label.
Interface labels are written in sentence case: the first word is capitalised, and the rest of the words are lowercase, unless they are proper nouns (or the less common, proper adjectives).
- 'Mark as complete' not ‘Mark as Complete’
- 'Sign in' not ‘Sign In’
- 'Join this course' not ‘Join This Course’
We don't use title case for interface labels, but we do use it in other instances, like course titles.
Abbreviations can save space in a user interface but they can be confusing if users don’t know what they mean. It's important that we think carefully about using abbreviations. We should always considering whether they are common enough to be used, and ensure we use them consistently.
Abbreviations we use on the FutureLearn platform include:
- Day of the week: Mon, Tue, Wed, Thu, Fri
- Months: Jan, Feb, Mar, Sep, Oct, Nov, Dec
- Time units: min (minute), mins (minutes), hr (hour), hrs (hours)
Where there is not enough space to show even the abbreviation (e.g. on small screens) we might shorten the copy even further. For instance 'mins' might be abbreviated to 'm' and 'hrs' to 'h'.
We use the following date format on the site.
17 May 2018
When the long date takes up too much space we use this format, that abbreviates the month:
17 Nov 2018
When there is a small amount of space we leave out the year. This format should only be used when there is no ambiguity as to which year the date refers to.
Feedback messages are longer than average microcopy so it's important to think carefully about how you use those extra words. Here are some general dos and don'ts:
Do get to the point
Attention spans are limited, make sure you message is clear and direct.
Do use contractions
Use shortened version of words or word groups, to sound less formal. For instance “We’ve” rather than “we have”, “thanks” rather than “thank you.”
Do give the user the credit
Say “You’ve done it,” e.g. “You’ve changed your email address,” rather than “We’ve changed your email address.”
Do use proper grammar
These messages might be a few sentences. Make sure you use appropriate grammar including a full stop at the end of the message.
Do tell people what to do if something goes wrong
If an error code has to be displayed try to suggest, when possible, what people can do to correct it.
Do think about yours vs mine
We should see UI as a medium to hold a dialog with the user. This means that when we are “talking” to the user we should say “You,” e.g. Your courses, Your progress, etc. But when the user is “talking” to us, “I” or “Me” is more appropriate, e.g. “Email me when I have a new follower.”
Don't use passive voice
Say “We couldn’t change your password” rather than “Your password could not be changed.” The passive voice can sound robotic.
Don’t use jargon
Again this came make us sound robotic, for instance “this session has been terminated.” It's can also be confusing to the user.
Don't be too jokey
Stay true to FutureLearn’s tone of voice. We wouldn’t say something along the lines of "Woohoo! You’re a rock star!”.
Don't blame the user
Say “We couldn’t [do something]”, rather than “You failed".