How to Improve the Readability of Your Webpages

Posted on 21 January, 2016 by nueconsoc

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.

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.

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.

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.

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!

Share this post:

Expert Approval for Our Content Strategy

Posted on 16 December, 2015 by nueconsoc

Our team has successfully implemented two huge content strategy projects (Undergraduate and more recently Postgraduate) yet we’re always looking to improve our skills in this area. Lisa and I attended the latest Nielsen Normal Group (NNG) training on Content Strategy to pick up even more pointers.

We weren’t disappointed. It was a really inspiring and practical course, full of great ideas for techniques to help with content creation, and client buy-in.

We came back fired-up with loads of ideas to improve our processes and firm up our strategy – I left with a long ‘to do list’.

And the even better news? Turns out that by following the guidance from NNG and other experts in content strategy, we’ve done a fantastic job at the University, and we can take pride in what we have achieved so far.

Approval from the experts

Affirmation from a room-full of content professionals that the work we are doing is; absolutely the right thing to do to improve our websites, pretty advanced and even admired – followed by requests to share our best practice with others…well, wow!

It sure felt like a pat on the back from our peers that understand what we are trying to achieve, and a real boost to the team just when we needed it.

Discover for yourself

If you’re interested in where we got our content strategy inspiration from – and more importantly why content strategy is so important for websites – there is a wealth of guidance available.

I’d recommend ‘Content Strategy for the Web’ by Kristina Halvorson and Melissa Rach. It’s a really easy read, and pretty much a step by step guide that has lived on my bedside table for many a month.

Share this post:

A Brand New Mobile World: Case Study of Central Sites

Posted on 15 October, 2015 by nueconsoc

Phase 1 of Go Mobile is now complete and we thought it timely to do a little show and tell of what we’ve been up to with this Go Mobile malarkey.

Two of our central sites to get the Go Mobile treatment were Research and About. These are clearly important sites for a research-intensive Russell group university, like Newcastle. These sites should showcase our achievements, but also need to explain some complex strategic content.

So they need to be able communicate effectively, but now with the added requirement of working just as well for smaller mobile devices.

We’ve posted previously about what Phase 1 of Go Mobile entailed and also talked about new ways we have of doing things, so here I’ll showcase some new layouts.

This post will focus on a core page on the Research website and the homepage for the About website. I’m going to include screen shots of the sites before and after Go Mobile, and explain why we’ve done these developments.

Research website

Take a look at the old Research Support section, one of the core pages of the research site:

The page is quite informative and clearly formatted (short paragraphs and a bulleted list of hyperlinks) but not really engaging. It’s also not visually impressive, with only a small image to the right of the content.

Now look at the new Research Support section:

Note the:

new ‘masthead’ design for section landing pages
big impactful image to set the scene
new teaser text overlay on the image to help introduce the section
quote to substantiate our claims
use of bold to emphasise key messages in content
content written for mobile; direct, informative with relevant hyperlinks

Now, take a look at the new page on mobile:

The page title clearly indicates the topic of this page and the teaser text is now used as an introduction to the page. This helps you quickly understand which page you are visiting.

The content is split into ‘blocks’ that can re-stack on mobile. The priority of content has been optimised; the image re-sizes and drops under the text.

About website

Here you can see the old About homepage:

You can see that:

boxes are built for top tasks, so people can find the most popular pages quickly
there are links under each top task box to pages within that section
images are small
there are no key messages
the page is not very inspiring…

On mobile, this old page simply shrunk a bit to try to fit your mobile screen (but not very well) as it was not mobile responsive.

Now compare the new About homepage on desktop:

Note the:

top task boxes are still in use, to help people find what they are looking for
side menu is now visible to help with navigating the site
larger images are used to enhance the page
subheadings to help introduce content, and put it in context
use of video to help support our key messages

And see it on a mobile screen:

The new page re-stacks all content for mobile, including video. All content, including images and video re-size to fit your mobile device.

We’ve improved section naming ‘About the University’ rather than ‘About’ helps give people more context of which site they are on and where they are in the site.

The hamburger menu at the top gives access to the secondary navigation (the side menu on desktop).

We’ll keep you posted!

Now, prepare yourself – as we move onto Go Mobile Phase 2 more things will change.

Not only will other websites get the Go Mobile deluxe treatment, but we are still developing the technology, how we do things – constantly testing and improving what we’ve already done.

You can always keep an eye on what we’re up next to with our fortnightly updates.

Share this post:

Team Update 1 – 14 October

Posted on 14 October, 2015 by nueconsoc

Phew! so we’ve pretty much finished phase 1 of Go Mobile, and we’re already busily planning and refining work for phase 2 ….read on.

Go Mobile programme

The whole team got together for an away (half) day. We reviewed all the stages of the programme so far and worked out what went well and what we needed to improve.

It was great to get all our team together to share experiences, our success and of course a bit of cake! We’ll use the notes from the day to help plan the next phase of the programme.

Feedback on the new sites

We put a feedback form on the University’s homepage (and all sites in the new template) when we launched the new responsive design.

We’ve had 23 responses (with the majority coming from University staff). Staff feedback focuses on tasks associated with working at the University eg the location of the people search and accessing internal services like Human Resources and the Safety Office.

The staff homepage contains all of these links – it’s our recommended starting point for staff seeking internal information.

You can access the staff homepage from the global top menu: Staff & Students

We’ve also had some comments on the design of the search box in the top right so we’ll be improving that over the coming weeks.

Design and Technical developments

Finishing touches are being made to the new Press Office website, due for launch on October 19.

Certainly not ones to sit back – the tech team is already working on the latest iteration of the University homepage. We’re adding dynamic menus to the top level menu. This will help people to find other parts of the University’s website, and also reduce the number of clicks it takes to get there.

Training and support

Anne’s developed some bespoke T4 training for the Press Office. This is so they can get to grips with their new website, and also the new ways of publishing and writing press releases on the web.

Some fairly detailed hand-over notes are being prepared for the editor of the Research website. With a new Research Impact campaign already in the initial stages, it will soon be all-change for the current impact case studies on the website. So those big visual boxes will change to reflect the new case studies coming along.

We are still working on developing our next phase of training for Go Mobile. We’ve got some sessions in November and December ready for the editors of phase 2 sites, and catching back-up editors from phase 1.

Emma C delivered the first of our new Website Media Management training sessions on 12 October. The sessions were well received, one participant said: ‘I thought the session was extremely helpful. Very interactive and easy to follow’. We’ll be running more sessions for Go Mobile editors in the coming months.

We’ve received 30 support requests through the NU Service Helpdesk and have resolved 12 of them.

Campaigns and web developments

Steve has launched a new site for the Institute for Agri-Food Research and Innovation (IAFRI).

Catherine has launched a new site for the Newcastle Academic Health Partners.

Lisa wrote this month’s newsletter for the blog and is writing a post about improving page titles/headlines.

Plans for the next few weeks

Continuing work on our evil plan… oops sorry Phase 2 of Go Mobile!
Phase 2 is scheduled to start January 2016 and finish December 2016, the next batch of sites are still being prioritised and agreed by Faculty Steering Groups and central senior management – so watch this space.

Feedback

Let us know what you think about our new mobile responsive websites – leave a reply.

Share this post:

Excellent Results for Postgraduate Website Testing

Posted on 24 September, 2015 by nueconsoc

We posted an article earlier this year about user testing that the Corporate Web Development team undertook on the Postgraduate (PG) website. Our testing was completed a few months after go live, last October.

Since then, as part of the final stages of the PG website project, there has been a range of extensive evaluations run and co-ordinated by the Postgraduate Marketing Team.

From clarity tests of the content, use of Google Analytics, interviews, remote user testing by our PG target audience – even an externally-run expert review.

There was also a chance to review the new website against our competitors – well it would be rude not to…and anyway we had a clear content strategy to test:

“The new Postgraduate website will have audience driven, engaging content that inspires ambitious high-flying global students to make us their confident choice for PG study”

Headline results

Overall – the new website has performed excellently, with some outstanding feedback alongside some further ideas for development.

Which is great, since the PG website project has paved the way for all our Go Mobile work!

It’s important to note once a website has been launched and tested – that’s not the end. Actually it’s just the beginning; of making further improvements, developments, finding solutions to issues and continually trying to do the best thing for our users.

Read on to find out how we did…

First impressions

The word cloud below shows first impressions of the PG site. The most popular words that users used to describe the site included: easy, modern, simple, clear, professional, clean and cool.

Website content

“Everything is very clear, the words actually stand out because the design of the site is very lean and clean cut…There are no useless pieces of information.”

User tester

Ranked 1st or 2nd in comparison to competitor PG content according to Clarity Grader, a website content analysis tool
An improvement in quality and consistency of content
Users found the content clear, detailed, straightforward and organised and with good comprehension
Test participants commented on the quality of course entries they found. Users specifically found the following useful:
- modules
- course delivery and duration
- facilities
- employment infographics and related courses

some future developments

New content quality and consistency measures are being developed
Continued focus on the use of terminology, ensuring the content is accessible by our key audiences
Further development of supplementary information, scheduled by a web editorial calendar
Develop stronger links between supplementary information and course information

Design

“Wow, this one’s layout is different, I like it, it’s colourful, it’s not boring”

User tester

The design was well received in all testing
Gives a great first impression to users
Newcastle compares favourably in comparison to our competitors

some future developments

User experience testing helped to influence our Go Mobile template design
Further development of the PG homepage and the flow of information
Developments to the course search call to action and visibility on the homepage

Course search/funding search

“This is amazing. I came here the last time and I don’t believe I could find things so easily. This actually shows that the website has improved and this is actually a very good filtering that the website has added to its system”

User tester

Newcastle’s content performed well in comparison to competitor sites. One user stated they “strongly favoured the course navigation and content over Manchester”
New course search was well received and proved to be the most used method of finding a course in comparison to the A-Z list
The advanced search filters are being well used
Tab layout of the course information on desktop was well received
The new step-by-step guide was well received and recognised as providing useful information

Some future developments

Further development of search filters to ensure accurate and precise results
Development of additional tools to sort search results, eg by relevance, A-Z
Streamlining of the course and funding search functionality across all devices

Calls to action

Good to have recognisable calls to action
Footer calls to action are used well
Improvement in number of sessions resulting in the creation of a new (applicant) account

Some future developments

Renaming of some calls to action for consistency
Revising of placement of some calls to action
More visible course start dates and application deadline where they exist

Navigation

Users reported on the ease of navigation through the website
Use of tabs on course profile pages are well received on desktop

some future developments

Development of mobile menus: main menu; secondary menu; and tabbed menus
Consistent application of hyperlinks – already addressed as part of ongoing development
Review of the breadcrumbs design and functionality

Conclusion

So, has the new PG website been a measurable success? I would argue a resounding YES!

All the testing, evaluation and competitor analysis shows this is largely the case. Phew.

Back to the original plan then:

“The new Postgraduate website will have audience driven, engaging content that inspires ambitious high-flying global students to make us their confident choice for PG study”

Audience driven – Check. All content has been created, developed and designed with the user’s needs in mind.

Engaging content – Check. We’ve used new technology and design to enhance the user experience where appropriate; a mobile responsive design, new course search, infographics and videos to supplement course pages.

Ambitious high-flying global students – Time will tell. It’s hard to test or measure whether applicants are deciding to apply due to our marvellous new website. There are after all numerous other factors to influence an applicant – but still, shouldn’t we have an inspirational strategy to work to?

Find out more

If you’d like to learn more about the results of the PG user testing, and watch videos of the testing watch the Prezi online.

Read about our earlier user testing of the PG Website.

Share this post:

Go Mobile Blog

Author Archives: nueconsoc

How to Improve the Readability of Your Webpages

Prioritisation of content

Page layout

Use of design

Test, test and test again

Final tip

Related posts

Expert Approval for Our Content Strategy

Approval from the experts

Top five tasks on our content strategy ‘to do list’

Discover for yourself

A Brand New Mobile World: Case Study of Central Sites

Research website

About website

We’ll keep you posted!

Team Update 1 – 14 October

Go Mobile programme

Feedback on the new sites

Design and Technical developments

Training and support

Campaigns and web developments

Plans for the next few weeks

Feedback

Excellent Results for Postgraduate Website Testing

Headline results

First impressions

Website content

some future developments

Design

some future developments

Course search/funding search

Some future developments

Calls to action

Some future developments

Navigation

some future developments

Conclusion

Find out more