{"id":1402,"date":"2016-01-21T10:00:57","date_gmt":"2016-01-21T10:00:57","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1402"},"modified":"2016-01-25T12:34:23","modified_gmt":"2016-01-25T12:34:23","slug":"how-to-improve-the-readability-of-your-webpages","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2016\/01\/21\/how-to-improve-the-readability-of-your-webpages\/","title":{"rendered":"How to Improve the Readability of Your Webpages"},"content":{"rendered":"

Readability<\/strong> for websites isn’t just about<\/strong> people understanding the words,<\/strong> although of course that’s a massive part of it.<\/p>\n

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.<\/p>\n

We’ve proven it time and time again – the readability of complex information can be improved by using clear, easy to understand English.<\/a>\u00a0It’s just making sure more people can understand it.<\/p>\n

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

Prioritisation of content<\/h2>\n

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<\/strong> should always be created and designed<\/strong> with the user\u2019s needs<\/strong> in mind.<\/p>\n

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.<\/p>\n

\"example<\/a>

Old version of the application page (select to view expanded image)<\/p><\/div>\n

We reviewed the section, identifying the purpose of the content (get people to apply) and\u00a0 got to work editing.<\/p>\n

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

Also, editing reduced<\/strong> the content from 12 to just four pages.<\/strong><\/p>\n

\"example<\/a>

New edited version of the application section (select to view expanded image)<\/p><\/div>\n

Another way we have improved readability is to use introductions<\/strong> 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.<\/a><\/p>\n

Page layout<\/h2>\n

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

\"content<\/a>

Pages of content were re-worked into a simple step-by-step guide using tabbed content (select to view expanded image)<\/p><\/div>\n

Use of design<\/h2>\n

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

I’ll explain – we often use expandable boxes<\/strong> 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.<\/p>\n

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…<\/p>\n

\"Image<\/a>

Using expandable boxes in content to help readability\u00a0(select to view expanded image)<\/p><\/div>\n

Test, test and test again<\/h2>\n

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:<\/p>\n

Readability has increased <\/strong>from 48 to 55 <\/strong>(we aim for 60).<\/p>\n

Long sentences<\/strong> (harder to read) were at a whopping 19.69% <\/strong>before we re-developed\u00a0the page\u00a0<\/strong>and have decreased to 7.97% <\/strong>(we aim for 5%).<\/p>\n

This is all the more impressive<\/strong> when you consider the content is mostly complex<\/strong> and detailed information on application<\/strong> procedures.<\/p>\n

Final tip<\/h2>\n

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

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?<\/p>\n

Oh yes. You can read about the excellent results<\/a> 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<\/strong>.<\/p>\n

\"Word<\/a><\/p>\n

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

Related posts<\/h2>\n