Tag Archives: messaging

How to Improve the Readability of Your Webpages

Posted on by

Readability for websites isn’t just about people understanding the words, although of course that’s a massive part of it.

After all, if you can’t understand what the words are trying to tell you, you’ll just leave the site without the answers to your questions.

We’ve proven it time and time again – the readability of complex information can be improved by using clear, easy to understand English. It’s just making sure more people can understand it.

What I’d like to focus on for this post is some tips about the other elements that can affect readability; prioritisation of content, page layout, the use of design, and ease of navigation.

Prioritisation of content

What is it that people really need to know about on your page? If you identify it, you can prioritise the content to improve readability. Content should always be created and designed with the user’s needs in mind.

For example, here’s a screen shot of the old version of the postgraduate ‘How to Apply’ section. It had low readability; complex information, use of jargon and too many words! Your eye is also drawn to the box in the middle of the page, which was a little distracting.

example of a hard to read page

Old version of the application page (select to view expanded image)

We reviewed the section, identifying the purpose of the content (get people to apply) and  got to work editing.

We use page titles to help accurately introduce the content for people. A change of title from ‘Newcastle University Application Form’ to a very clear ‘How To Apply’ certainly helped…

Also, editing reduced the content from 12 to just four pages.

example of an edited page

New edited version of the application section (select to view expanded image)

Another way we have improved readability is to use introductions on pages. This ensures people can quickly read a descriptive summary of the page. Take a look at Linda’s post about how to write great introductions.

Page layout

We reviewed the page layout or format, quickly deciding a step-by-step guide would be most effective at helping people though the application process. We even added a relevant video to support our primary messages.

content page with tabs

Pages of content were re-worked into a simple step-by-step guide using tabbed content (select to view expanded image)

Use of design

We’ve blogged before about how design can help people navigate around your site, but it can also help draw attention to key content/things you want people to do.  And no…I’m NOT talking about flashing animation here, but more subtle design devices.

I’ll explain – we often use expandable boxes on pages to hold content for specific audiences. It’s so that content can be seen – but doesn’t have to be opened unless it is relevant to you.

We use expandable content on the Undergraduate website for a long list of entry requirements, see the screen shot below. Don’t panic at all the options! Relax and simply choose the content relevant to you…

Image of expandable boxes on the undergraduate website

Using expandable boxes in content to help readability (select to view expanded image)

Test, test and test again

We’ve tested the content on the new postgraduate application pages using Clarity Grader (a website content analysis report) and the results are really positive:

Readability has increased from 48 to 55 (we aim for 60).

Long sentences (harder to read) were at a whopping 19.69% before we re-developed the page and have decreased to 7.97% (we aim for 5%).

This is all the more impressive when you consider the content is mostly complex and detailed information on application procedures.

Final tip

One of the key things to remember – is that you can always go back to pages and improve readability. It might be a slight tweak to a sentence, or a layout change – the main thing is that you can always improve it.

We ran some extensive testing on the postgraduate content. After all, a lot of what we did, not just to the content, but to the layout and design, then formed the master plan for Go Mobile – so it needed to be right. Did we do it?

Oh yes. You can read about the excellent results in an earlier post of mine. A particular favourite is the below word cloud created from user feedback about first impressions of the postgraduate website. The most popular words that users used to describe the site included: easy, simple and clear.

Word cloud showing first impressions of the PG website

Go on, take the challenge – have a go! Choose one of your pages and see how you’d improve readability. I’d love to hear what you get up to!

Related posts

Share this post:
Share

How to Improve your Website Images and Videos

Posted on by

Images and video are used as supporting content on the University’s websites.
People don’t tend to prioritize our websites specifically for images or videos – they visit for information; your content.

That said, content can be greatly enhanced by using images or video to support your messages if they are used in the right context. So what is the right way to use them?

Choosing an image/video

High Quality

Use only high quality images. Images should not be blurry, stretched or pixelated. There is a range of University photography you can use in the photo library. Always preview your image to check the quality before publishing.

Videos should be selected from an official University YouTube channel and embedded in your site. Don’t upload the original video file directly to your website.

Support the content

Images and videos are supporting messages. They should always make sense to the user, their job is to help to enhance the meaning of your page. Your content should provide the context for the image/video.

It’s important your images and video is relevant to the content on the page. User testing increasingly shows that people are feeling more and more negative towards the use of generic stock images.

Less is more

If you have too many images or videos on a page, you can compromise the effectiveness of your content. They can:

  • slow page load times
  • interrupt the reading experience
  • make pages disjointed and harder to read

Images of text and complex images, like flowcharts or graphs, can also present a barrier for users accessing your content, and should be avoided.

This content in the image is effectively invisible to users of screen readers and anyone viewing the text only version of your site, for example a mobile user with images turned off. It is also impossible for search engines to index this content – so if you want people to find this information, use content!

If you must include a complex image in your site then a text alternative of the essential information contained in the image is required.

Image size and orientation

For sites edited via Contribute the standard image size is 320 x 180 pixels. We recommend that you use landscape images. Specific templates may have alternative sized images for banners and grid layouts.

Sites edited in T4 have many image options. For these size requirements you can view the image guide on our demo site (University login required).

Keep an eye out for a future post on editing images.

As videos are embedded onto your webpage, your website template should automatically provide you with the right size and a preview image for the box. Just look at our support pages to find out how to embed a video (University login required).

Alt text

Alt text provides alternative, textual content when an image cannot be displayed or for users of screen readers. It should be descriptive, but not necessarily a literal description of the image. Think about describing what the image represents.

Linking images

Many of our websites contain pages with grids of images, for example the Open Day landing page. Linking the image used here increases the area a user can ‘click’ or ‘tap’.

This is useful for mobile users who may be trying to select links using their finger or a stylus. Image links should always be supported by links in the text of your page.

Social media

Individual posts and campaigns run on social media are ideal for hosting video content. These channels tend to be seen as more engaging for people, as they can so easily share content – but more importantly, they enable people to talk directly to us.

Consider using social media alongside your website in this way to help your messaging. Social media can help direct people to your website, and your website should connect people to your social media.

Find out more about using social media in this way from the University’s Social Media Team.

Final thoughts

So that’s your whistle stop tour of improving images and videos for your website. These assets should always be used to enhance your pages, to enable people to better engage with your content. Find out more from our guide to images (University login required).

Share this post:
Share

Experts to Inspire You

Posted on by

We like to keep ourselves up to date with the latest developments in the web industry by reading. A lot.

We read books, articles, websites and blogs and thought we’d pick some of the quotes we really, really like. Hopefully you can spot why…

Usability

“When I look at a web page it should be self-evident. Obvious. Self-explanatory.

“I should be able to ‘get it’ – what it is and how to use it- without expending any effort thinking about it.”

Steve Krug
Don’t make me think

“It is very important that your website is visually pleasing. However it is much more important your website is useful.”

Gerry McGovern
Killer Web Content

Your content is important

“Language is at the heart of communication, and the only purpose of a website is to communicate.”

Seth Godin
The First Rule of Web Design

“Your writing is important. At the end of the day, you’re a person communicating with other people.”

Nicole Fenton and Kate Kiefer Lee
Nicely said. Writing for the web with style and purpose

“If the heading is the hook, the summary is the line that pulls you in. The summary gives readers all the information they need to decide whether to read on or not.”

Gerry McGovern
Killer Web Content

“A person who produces content without understanding the tasks the content needs to support is a dangerous person indeed.”

Gerry McGovern
The Stranger’s Long Neck

“With the limitations of the mobile screen as a guideline and a barrier, you’d naturally have to write differently.

  • You’d get to the point.
  • You’d put the most important information up front.
  • You’d remove all the marketing jargon and fluff.
  • You’d write short declarative sentences.
  • You wouldn’t use a long word when a short one would do.
  • You’d make every word earn its place.

Writing this way isn’t just good for writing for mobile. It’s good writing for everyone.”

Karen McGrane
Content Strategy for Mobile

Going mobile

“Use going mobile as a lens to make all our content better regardless of platform.

“It’s a big chance to create a better user experience by improving the quality of our content. Let’s not waste it.”

Karen McGrane
Content Strategy for Mobile

“The work you do now, to structure content for reuse and get it ready for mobile, is going to also make that content more prepared for wherever the future takes it.

“Considering all the different devices on which your content may be displayed forces you to focus – to take stock of what’s really important and to get rid of things that aren’t.”

Sara Wachter-Boettcher
Content Everywhere

Your messaging

“Messaging is the art of deciding what information or ideas you have that you want to give to – and get from- your users.”

Kristina Halvorson and Melissa Rach
Content Strategy for the Web

“Use the mobile screen’s constraints to help prioritise your primary, secondary and supporting messages.”

Karen McGrane
Content Strategy for Mobile

“You must have an ending to your content that is a call to action. Good web content is always task-focused, and the best ending allows your customers to go about completing their tasks.”

Gerry McGovern
Killer Web Content

A final thought…

“Today, many websites are damaging the reputation of the organization. Every time someone finds the wrong content or clicks on a broken link, the brand is hurt.”

Gerry McGovern
Killer Web Content

Feel inspired

So, do you feel inspired? And can you tell why we like these quotes?

These experts all advocate good writing practice to improve the website experience for all.

They all absolutely, utterly agree on one thing: content is king.

You don’t have to be a designer or a developer to create a useful, successful website at the University (we’ll do that for you) but you do have to care about your content.

References

Share this post:
Share

How to Structure Content on a Webpage

Posted on by

Before you can start writing effective web content you need to be clear about what you’re trying to achieve with your site and who your main users are.

For every page you plan, ask yourself:

  • Why am I creating this page?
  • Who am I creating this page for?
  • What do I want the user to do after reading it?

People generally come to a site to find something out so it’s important that you answer their questions with your content.

Once you know the messages you need to communicate and who you’re communicating them to, you can start prioritising content.

The fold

‘The fold’ is a term used in web development to refer to the point on a webpage where people need to scroll.

Amy Schade (Nielsen Norman Group) in The fold Manifesto: Why the Page Fold Still Matters explains that people will only scroll if content ‘above the fold’ appears relevant to them. So it’s essential that web content at the top of your page is an accurate indicator of what information appears further down the page to encourage users to scroll.

This is a really useful concept to bear in mind when structuring content on your webpage.

The inverted pyramid

It’s also helpful to think about structuring a webpage in the same way that journalists structure a news article – by using the inverted pyramid.

The inverted pyramid is the idea of turning a story on its head. You start with the key point and then provide more detail further down the page. This ensures that essential information is at the top of the page. This is vital for mobile devices as a smaller screen size means that less content will appear ‘above the fold’.

Inverted pyramid showing where primary, secondary and supporting messages appear (primary at the top, secondary in the middle and supporting at the end)

Karen McGrane in her book, Content Strategy for Mobile, recommends thinking about your primary, secondary and supportive messages to help prioritise content on a page.

Primary message

Your primary message is the main point of the page. This should be communicated through your page title and introduction so that users can quickly see what the page is about.

Page titles should be clear and descriptive so that users can understand them at a glance. Similarly, your introduction should be concise and engaging. It should also contain key words for search engine optimisation. The introduction should summarise the main message in 50 words or less to grab the reader’s attention and encourage them to scroll down the page.

Secondary message

The secondary message is the body copy of your page. It expands on your main message and provides more detail. The body copy should answer your users’ questions and be concise and scannable.

Supporting messages

The supporting messages are qualifiers and additional information to support your main messages. They can include quotes, images and videos. Supporting messages can also provide a next step, such as a call to action like booking a place at an event or taking a virtual tour.

Summary

People spend less time reading online and will only scroll if they think that information further down the page will be useful to them. It’s vital to prioritise content so that your primary message is easily visible. Structuring content effectively is therefore fundamental to ensuring your main message is conveyed to your users.

References

Amy Schade, The fold Manifesto: Why the Page Fold Still Matters, Nielsen Norman Group, 1 February 2015

Karen McGrane, Content Strategy for Mobile, A Book Apart, 2012

Jakob Nielsen, F-Shaped Pattern For Reading Web Content, Nielsen Norman Group, 17 April 2006

Related posts

Share this post:
Share