Text is prevalent throughout the FutureLearn platform, and using text consistently and clearly is a critical component of UI design.
Labelling & capitalisation
Labels for interface elements should be clear and easy to understand. We try to be as specific as possible in any element that require the user to make a choice, such as radio buttons, checkboxes, and push buttons. We always aim for short, concise labels, whilst never sacrificing the clarity of the explanation with a shorter label.
We capitalise interface labels in sentence style. Sentence style means that the first word is capitalised, and the rest of the words are lowercase, unless they are proper nouns or proper adjectives.
Examples of correct capitalisation in labels:
- Mark as complete (not ‘Mark as Complete’)
- Sign in (not ‘Sign In’)
- Join this course (not ‘Join This Course’)
The title case, where every word is capitalised, is not generally used for interface labelling but it is used in other elements, such as course titles. The use of title case is documented in more detail in a separate ‘Tone and Style’ guide, used by everyone who creates content for the courses.
Abbreviations can save space in a user interface, but they can be confusing if users don’t know what they mean. It is therefore important that we use abbreviations consistently. Here is a list of abbreviations used throughout the FutureLearn platform (Source: Oxford English Dictionary).
- 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) they may be abbreviated to 'm' for minutes and 'h' for hours as on the Comments block on smaller screens.
This is the preferred date format to use on the platform:
26 June 2017
When the long date takes up too much space this format that abbreviates the month may be used:
26 Jun 2017
When there is a small amount of space this format that omits the year may be used. This must only be used when there is no ambiguity as to which year the date refers to.
Guidelines for writing feedback messages
Don’t use redundant words
Avoid using words that add no value to the message, such as “something happened successfully.” Don’t overuse “please”. Aim to be direct and to the point.
Use shortened version of words or word groups, to sound less formal, e.g. “We’ve” rather than “we have”, “thanks” rather than “thank you.”
Avoid passive voice
Say “We couldn’t change your password” rather than “Your password could not be changed.” Passive voice makes us sound robotic.
Don’t sound robotic...
Aim to sound human and avoid messages such as “This session has been terminated.”
...But avoid an overly jokey, light-hearted tone
Stay true to FutureLearn’s personality. Generally we wouldn’t say something along the lines of "Woohoo! You’re a rock star!”.
When something goes wrong, take responsibility...
Say “We couldn’t [do something]”, rather than “You failed” e.g. “We couldn’t sign you in.”
But when there’s a success, give credit to the learner
Say “You’ve done it,” e.g. “You’ve changed your email address,” rather than “We’ve changed your email address.”
Use full-stops and commas correctly
Remember to put full stops at the end of every message. Don’t link separate sentences with commas – use a full stop or a dash, e.g. “We couldn’t change your password. Check below and try again.”
Tell people what to do if something goes wrong
It’s always best to prevent errors from happening. But if an error must be displayed, try to suggest, when possible, what people can do to correct it.
Yours vs Mine
The consensus is that 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.”