This Content Design guide helps you to design and write content that’s usable and inclusive and sets out good practice for links, headings etc.
It’s always a work in progress. If you spot anything that needs updating, or have suggestions for additions, message Josie.
Background to what Content Design is for
Most of how we are able to influence the experience of using I’m a Scientist takes the form of content: words, but also images and tools, chosen and arranged on the page.
Take away this stuff, lose the experience.
I’m a… Content guides and resources:
Style Conventions, Voice and Tone Guide (Gdoc)
Content Design Guide (This guide)
Marketing Strategy Playbook (Gdoc)
These guides help you write and create content for our sites and marketing. Use them to keep information on the site consistent, useful and enjoyable to read.
This means how we construct it matters. Here, we’re mostly talking about wording and formatting for people who are signed up to take part in an activity.
So we’re talking:
- homepages
- booking/applications forms and flows
- buttons, menus and other microcopy
- help pages
- links
- FAQs
- generally the stuff people need to use in a Zone
Sometimes this is also called microcopy writing or UX writing. We like the term content design as it focuses on the idea that there is intention behind every choice we make. It covers longer bits of text, FAQs, etc, and gets across that it’s about more than words.
At-a-glance: Content Design Guidelines rationale
We want every bit of our content to be accessible and readable for everyone. To that end, these guidelines have been closely adapted from the amazing resource Readability Guidelines Wiki. This wiki was developed by leading content designers to stop people needing to reinvent guides like this one by advising on best practice and providing the evidence for choices. It’s well worth reading the original Wiki when you have some time.
How people read
Online, people behave differently. Online, we don’t read; we scan. We’ve known that since about 1997.
Why people do not read
We’re all pressed for time. You have about 3 seconds to capture someone’s attention. Even then you may not get their full attention. They may be multi-tasking. Especially if on a mobile. (And especially if they are teachers.)
What users want
People come to our site to use it. They’re there to do a task, or get information to help them do a task offline.
Even if their task is to gain knowledge, they want to find and add it to their personal information bank, their brain, as quickly as possible. They’d download it directly if they could.
Creating scannable content
Site users are looking for words connected to the task they are trying to carry out. They scan down the left of your page, reading across a few headings, in an F-shaped pattern.
The fewer words you have on the page, and the better structured your content, the easier it is for them. You need to be specific, informative and concise.
Getting the words right
Great online content comes when the content creator is the detective, not the user:
- find, or know, the words our users are looking for
- do desk research (if necessary)
- use Google trends (if necessary)
- test the content with users
Designing, not typing
Resist the temptation to start typing as if you are answering an essay question in a 30 minute exam. Half of good content design is thinking.
Thinking
Ask yourself: what’s the best way to present information our users – teachers, scientists, students – need? The simplest, clearest, easiest, way to convey things.
This might not be a page of words (though for us it usually is). It could be a tool, like a calculator.
Structure
After deciding a page with words is the best, you still need to think about how to structure that using content design elements. These include bullet points, feature boxes. They’ll need to be inclusively designed. And you’ll need good, clear headings.
Sketching
You might want to sketch out your page layout. You might like to show other people in the office your ideas, maybe do some very early user testing, send it to a teacher or scientist.
Writing
Then you can write.
Page design elements
There are a lot of elements involved in designing content within a page, or across multiple pages.
Paragraphs
Divide content up into short paragraphs.
Smaller units of content are easier to process, understand and remember.
Text divided into distinct visual units helps users scan.
Sub-headings
If you have a page with several paragraphs, organise the paragraphs with sub-headings. These should indicate what the paragraph is about.
This helps users scan page content for what they are looking for.
Bullet points
Use bullet points to split up long sentences.
They should usually:
- complete a sentence
- be front-loaded with the most important information
- start with the same language form (verb, noun, adjective)
Anchor links
These are useful for giving a long page (like this one) structure and helping people find what they need quickly.
They are effectively links within the page, instead of to some external page.
You can add anchor links within WordPress’s Block Editor very easily. This page uses them. Ask Emily for help with adding anchor links.
Examples:
If it’s a really long page, it is helpful to include a link that takes the person back to the menu, for example:
Feature boxes
These allow you to promote a particular part of your content.
Check that the contrast between the background and font colours passes WCAG requirements.
Find boxes to use in our IAS Design System Resources
Tools
A content tool is content that users interact with in ways other than reading. We don’t use these much, but we may in future.
Examples:
- Calculator on the Money Savings Expert website
- Birthdate eligibility checker on the GOV.UK website
- Date picker on the Easyjet website
These examples are all inclusively designed.
Images, graphs, infographics and videos
If you decide to present content as images, infographics and videos, make sure it is inclusively designed:
- images, use alt text if the image contains useful information
- infographics, provide a text version of the infographic
- videos, provide captions on the video and a full transcript
Links
Links are very special components of your content. Treat them with respect and they will support your goals and your users.
Spend time thinking about link wording, and how it would be understood out of context, ie. by people using screen readers or people scanning quickly.
- Make link text meaningful
- Avoid mid-sentence links
- ‘Front-load’ your link text
- Make call to action (CTA) links and button text specific
- Start CTA links and button text with a verb
- Make CTA links and button text 2 to 5 words
- Match the destination content
- Use sentence case
Make link text meaningful
Not “More information” and never “Click here”.
Try not to use the actual URL either.
People scan the page for links to find out where to click next to get to the thing they want. If your page is just part of their journey, not the final destination, they are very unlikely to read every word on it.
Making link text meaningful is useful for people who use screen reading software. You can set it to read out all links on a page to decide which next destination is most relevant for you. If all the links say “more information” that tells you nothing. You might leave the website, rather than choose to listen to the whole page.
Examples:
- “Upcoming dates for I’m a Scientist” not “more information”
- “W3C content readability guideline” not “click here”
- “WEBaim contrast checker” not “find out more”
Avoid mid-sentence links
They can be distracting. They may slow down users who scan as they need to stop and read text on both sides of the embedded link. They can cause readability challenges for autistic users.
Example:
Learn more about this project by reading the Readability Guidelines blog posts.
Not:
Learn more by reading the Readability Guidelines blog posts about this project.
‘Front-load’ your link text
Put the most relevant, specific and unique content at the beginning of the link.
Example:
“Sign up for November’s event”
Not:
“Teachers can sign up their classes for many activities here, including November’s event”
Make call to action (CTA) links and button text specific
Not “more information” and never just “click here”.
Users may be reading or hearing the link without its context. For example:
- people skim-reading
- people with a small visual focus field
- people using text to speech software
People need to know where the thing they click on is going to take them. Providing specific link text helps them know what to expect.
Start CTA links and button text with a verb
Calls to action should be direct and use active language. They are there to signpost or encourage the user to take the next step.
Example:
“Apply now”
Make CTA links and button text 2 to 5 words
This is so that they are quick to absorb. Concise CTA text allows users to make an instant decision on whether or not to click. They are also shorter for screen reading software to read aloud.
Examples:
- “Update my application”
- “Apply now”
Sometimes you may need to make them a little longer so that you can include all the words of the thing someone is applying for:
- “Apply for I’m a Scientist activities in June”
Match the destination content
Provide link text that reflects the title of the destination content.
If someone clicks on a link saying “Update my application” and it takes them to a page titled “Profile page” they will be confused at best, frustrated at worst. Even minor differences can puzzle your user.
Example:
- Link on page: “Update my application”
- Destination page title: “My I’m a Scientist application”
NOTE: Intentionally misleading link text
Clickbait link titles should be avoided completely. You will only lose your users’ trust and annoy them. They may complain about your misleading link text to their colleagues or on Twitter. That can affect our reputation even more.
Use sentence case
As with headings and titles, use sentence case for inline links, calls to action and button links. These are more readable. Capital letters are less scannable.
Example:
- “Sign up your class” – specific, active, sentence case
- “Get Started” – not specific, passive, title case
- “Edit your Careers Zone profile” – specific, active, sentence case
- “Profile Pages, Edit All Here” – not specific, passive, title case
Headings and Titles
When you put your headings and titles well to good use, you’ll be helping:
- people in a hurry who need scannable, absorbable content
- people who are stressed who need easy-to-spot, useful headings to help them find things
- people who are multi-tasking who need clear language
- people with cognitive impairments who need easy-to-understand headings and less cognitive load
- people with visual impairments who need labelled headings so screen-reading software can navigate well
- people with motor impairments who need clear and specific headings so they can avoid scrolling up and down
Hurried? Stressed? Multi-tasking? Sounds like a teacher..!
Guidance
- Use specific, meaningful headings
- Front-load headings
- Structure your page with headings
- Use sentence case for headings and subheadings
- Label your headings
Use specific, descriptive headings
Headings need to be meaningful, not generic. When people scan your page they’ll look at headings first. They decide if they are on the right page or not by your headings. The ‘right page’ is whether they are going to get their answer or not.
Title of content: the H1 heading
This is what people will see in the search results. It is the first interaction you will have with your audience and will determine if they are going to give you more than 3 seconds of their time. Use it wisely.
In WordPress, this is what ever you write in the Post Title or Page Title box. WordPress will also create the default URL from the words here.
Be clear, concise and to the point. Action-orientated headings work well.
Example:
“Apply for I’m a Scientist”
Note on: Amusing headings
Headings can reflect a tone and can be engaging. But play-on-words, idioms and colloquialisms can all be hard to decipher for those with English as a second language or reading challenges.
Example:
We could have called this section “Headings up: The latest on heading up your headings”.
We did not do that. Think about the value of your content, the place or channel it’s published on, and the audience you’re trying to talk to, when choosing what type of heading to use.
Front-load headings
Statements work better than questions in headings. They enable you to put the keyword first.
If people are scanning down a page, the word people are looking for will be at the front of the sentence. If you lead with a question, you can’t front-load, you have to start with who, what, when, where, why. This takes time for your audience to read.
Example:
- “Should you front-load your headings?”
- “Front-load your headings.”
You get to the essentials of the information much faster with the second heading.
Structure your page with headings
Using headings gives your page/post structure and hierarchy.
If you take all the user needs for a journey, work out the channel, format and page, you can structure those needs into headings on the page to indicate importance or process.
Example:
[Title]
Apply for I’m a Scientist[Subheadings]
How the activity works
When it takes place
Who is eligible
Time commitment
How to applyIn the example above, you can see a whole process you need, or may need, to go through or understand.
Use sentence case for headings and subheadings
Sentence case is easier to read.
People want to find out things quickly from your page, including whether they are on the right page. So headings need to be easy to scan and absorb.
Example
“Signing up your class – what to consider” not “Signing Up Your Class What To Consider”
Usability evidence around sentence case is in the Readability Guidelines wiki section on capital letters.
Label your headings
Make sure you apply heading styles in WordPress or with using code tags if you’re editing the HTML.
These labels are what screen reading software uses to navigate your page. They also ensure heading size is consistent with heading hierarchy, which helps people understand how important a subsection is when they scan.
In our example, the title would be labelled H1 and the subheads would be H2s. There might be subsections in a section.
For example, How the activity works may have bits for Ask, live Chats, and Vote. These would be H3s, as they are subsections of a subsection.
Example:
[h1] Apply for I’m a Scientist
[h2] How the activity works
[h3] Ask section
[h3] Live Chats
[h3] Vote
[h2] When it takes place
[h2] Who is eligible
[h2] Time commitment
[h3] Get your boss onside
[h2] How to apply
Usability evidence for Headings and title guidance