Ten guidelines for university websites from the Nielsen Norman Group

University Websites: Top 10 Design Guidelines by Katie Sherwin on NNG

University Websites: Top 10 Design Guidelines by Katie Sherwin on NN/g

Last week (Sunday 19 January) the Nielsen Norman Group published an incredibly helpful article offering ten design guidelines for university websites: University Websites: Top 10 Design Guidelines.

Their summary:

Effective university websites can increase conversions, strengthen institutional credibility and brand, improve user satisfaction, and save time and money.

The web team are currently writing a business case and strategy detailing how we propose to take the University website forward over the next few years, particularly as access to the web using mobile devices is predicted by some to overtake desktop/laptop use this year.

Our focus will be on three activities:

  1. Standardise
  2. Simplify
  3. Consolidate

Publication of his article has come at just the right time for us, and is a good companion to this oft-referenced cartoon on xkcd: university website.

Readability on the web

How users read

Gov.uk have published their Service Design Manual, an amazingly comprehensive resource about digital service delivery. This particular section outlines the background to the Government Digital Service’s thinking when it comes to writing content.

Users only really read 20-28% of a web page. With services, where users just want to complete the task as quickly as possible, you have added user impatience so you may find users skim words even more.

Website reading: It (sometimes) does happen

We know that on average users only read around a quarter of the text on a webpage. But we also know that sometimes users do read more. Jakob Nielsen assessed what makes a user start reading word for word. He highlights good information architecture and good page layout with well-written subheadings as being essential.

…helpful IA and effective page layout are key to getting users to read your copy. However, our eyetracking data also detected a third ingredient for converting users from scanners to readers: high-quality writing.

Sorry, no real surprise — although we’ve identified 83 detailed guidelines for web content, they really boil down to that. Having guided people to your content, it must be good.

The Readability Test Tool

When writing for the web, it is important to write clearly and avoid jargon. You can check text against a variety of readability tests using this tool.

Opinions vary on which tests are the most accurate or valid. But it can still be useful to check text to ensure that it can be easily understood by as many people as possible.

Carousels: advantages and disadvantages

This week, a series of articles about the advantages and disadvantages of carousels. We begin with a couple of articles from usability expert Jakob Nielsen.

Auto-forwarding carousels and accordions annoy users and reduce visibility

Carousels are often useful for organisations like Universities to use for political reasons – to get more information on prominent pages. But often this is at the expense of the usability of the page.

This study analyses how easy users find carousels, and the results are very poor. One major reason for this is banner blindness, the phenomenon whereby users avoid looking at anything that looks like it might be an advert. It includes the following remarkable finding about some core information that a user was looking for, that appeared to be in a prominent position:

The user’s target was at the top of the page in 98-point font. But she failed to find it because the panel auto-rotated instead of staying still.

When the UI is too fast

Jakob Nielsen has a cautionary tale on user interfaces that move too quickly, ultimately confusing and frustrating users.

This often happens in carousel, rotators, and other auto-forwarding design elements. Once you decide that something might be of interest, it’s yanked off the screen — replaced by something you don’t want.

This is particularly problematic for slower users, such as international customers who don’t read your language well or old or disabled users who might need extra time dealing with the user interface and are thus disproportionally harmed by rapidly changing screens.

Let’s establish a simple usability principle: avoid taunting the customers.

Carousels

Another look at the pros and cons of using carousels, and how best to implement them.

From universities to giant retailers, large organizations endure their fair share of politics. And boy does that homepage look like a juicy piece of prime real estate to a roomful of stakeholders. It’s hard to navigate these mini turf wars, so tools like carousels are used as appeasers…

And finally…

Should I use a carousel?

This webpage demonstrates the point about carousels nicely.

All this is not to say that we should necessarily ban carousels completely. But we should think carefully about what the carousel would be for, and bear in mind the usability problems they may introduce.

First steps into mobile

I thought I would try and take the advice of Brian Kelly who has suggested that web team members write a post a month about their work. It is particularly interesting that after coming back from IWMW I was struck by just how much focus there was on the mobile web. It felt like it was becoming something we would be getting stuck into sooner rather than later.

Sure enough, since my return I have spent around a week working on how web pages are displayed on mobile devices. It has been a tricky problem to solve, not just because of the complexity of developing a website for mobile devices, but also because of the nature of this particular project.

Integration with mobile applications

The part of the website in question is the new web version of the Student Handbook. In this past, the Student Handbook has been produced as a physical booklet. This year, for the first time, the handbook is being offered on the web — and not as a hard copy.

One of the drivers for this has been the development of mSaint, the new mobile application that is due to launch in time for the start of this coming academic session. The application is being designed to give students access to important information any time, any where. The Student Handbook will be one of the guides incorporated into mSaint.

The challenge has been to make the new Student Handbook webpages integrate well with mSaint without compromising the standard version of the webpages. The mSaint application works by linking to the individual webpages, opening up in a new browser window on the mobile device. As such, these pages need to be displayed without the website’s normal navigation, as this is different to the navigational structure of mSaint.

This has provided us with the ideal opportunity to take our first steps into designing for mobile devices. But it has also posed a tricky problem. We need to optimise these webpages for mSaint without it having an adverse effect on the experience of other users.

Foremost in my mind has been the experience of those who are navigating through the website on a mobile browser, rather than accessing these pages through mSaint. It is (relatively) trivial to create a separate stylesheet for mobile devices. But creating an mSaint-specific stylesheet or section that does not impact on other mobile users has been an impossibility so far.

It looks like for the time being we will have to make do with offering a stripped-down version of the Student Handbook to all mobile users. Perhaps we will put a disclaimer about how the Student Handbook should be viewed on a mobile device via mSaint  — but this is far from ideal. Thankfully, the regular ‘desktop version’ (if that is what you can call it) of the Student Handbook will be unaffected.

In a separate post tomorrow I will write about what I had to do to make these webpages more mobile-friendly.

Next steps

This has been a steep learning curve. There is a lot still to learn. Just as you always learn while developing for a desktop environment, there is more than this to keep on top of for mobile.

The mSaint project has brought mobile into focus a bit more quickly than I was perhaps expecting. We are anticipating that a good mobile experience will come to be expected across the University website, and it will become a larger part of our work over time.