S8080 Blog

www.number10.gov.uk

S8080 are incredibly proud to announce that the new Number10 website was designed in Wales – by us!

The new site, which uses the WordPress platform, was launched a couple of weeks ago after an intensive UX, design and build phase.

More info soon.

We’ve been working on designing number of children focused web sites and micro-sites recently, which is always a real treat. When working on the usability and IA aspects we undertook a lot of research and this recent piece of research form Jakob Nielsen was a real help:

http://www.useit.com/alertbox/children.html

We recently launched a large content managed website for TES Aviation Group – a large international, but Wales based aircraft engine management company.

For Matt and myself, it was one of those dream jobs – a fascinating subject, a great group of people and a thoroughly professional and forward looking organisation. One of the highlights of our initial alignment workshops was the tour of their vast facility in Bridgend, south Wales and getting up close to some of the most powerful engines in the world. A schoolboy dream.

We worked through our UX (user experience) processes, spending considerable time talking with the various teams in the organisation, gathering valuable insight into a very complex industry and its own unique set of interactions between client and supplier.

These interviews, combined with alignment sessions with the sales and marketing director and his team, user journey design, process mapping, competitor review and content audit meant we could design the IA (Information Architecture) and wireframe prototype matching the user’s’ needs tightly to TES’s business objectives.

Then our creative and interactive teams were let loose on the look and feel, extending their existing brand into online. The design was then wrapped around our content management system enabling the TES teams to keep their content up to date from anywhere in the world at any time of day or night (these guys travel a lot!).

The site is attracting a lot of industry interest as the analytics are already proving.

We look forward to a long and interesting relationship with TES. It is worth a visit just to see the most amazing (and valuable) coffee table in Wales – made of scrapped titanium aircraft parts.

The ‘inverted pyramid style’ of writing and structuring information pages for the web, where the first paragraph summarises the key point of the whole page, is tightly aligned with how users scan and gather information from the web.

In a previous post ‘What are navigation pages / pathway pages’ (http://www.s8080blog.com/2009/07/what-are-navigation-pages-pathway-pages/) I looked at rules of thumb for navigation pages, how to get users to the detailed information quickly.

Now your users have got to the information pages we’ll talk about what to put in them and how to structure them – the ‘inverted pyramid style’, this is relevant for both blog pages and deep content in a site.

What are the user goals on information pages?

• Scan to check that they got where they thought they were going
• Scan to see if what they are looking for is on the page
• Scan to find the key point of the page
• Possibly read more details to get background information

User research clearly shows users look at the page title, the headings and scan for key words in the text – primarily the first paragraph and then decide if they are going to read the whole page or note.

So how do I write information pages in the ‘inverted pyramid style’

• Put the key message / main point first – users tend to be selective (and lazy) they will read a few words or a paragraph before deciding if the information is relevant.
• Sum up the point of the page in a single summary paragraph at the top of the page
• Then add supporting information, which is ordered relevant to users
• Finally add history, background, additional links to find our more detail and detailed documents

Why a pyramid?

The pyramid represents the number of users who’ll read the different layers of the page, only a few get to the end – that’s why it’s so important to summarise the key point in the top paragraph of your page.

Who supports the inverted pyramid style?

Web usability gurus such as Jakob Nielson: http://www.useit.com/alertbox/9606.html

Finally you may find these posts useful:

Writing copy for the web:
http://www.s8080blog.com/2006/08/writing-website-copy/

How much do we read online:
http://www.s8080blog.com/2008/12/how-much-do-we-read-online/

Words and scanning lists:
http://www.s8080blog.com/2009/04/first-2-words-are-critical-for-scanning-lists-and-headings/

F-shaped pattern for reading online:
http://www.s8080blog.com/2009/01/f-shaped-pattern-for-reading-online/

In this post I wanted to talk about the user’s needs and general rules of thumb for navigation or pathway pages…

So what’s navigation page?

Navigation pages are the pages between the home page and the information pages. The aim of navigation pages is to get the user quickly to the information they are looking for.

Most site visitors are on a hunt – they have a goal or task and the navigation page is THE way to get them there quickly (by increasing the scent of information and giving clear links as next steps).

Above: Navigation pages – where they sit in the site hierarchy

From our observations, and other research, people don’t want to read a lot when they are ‘hunting / foraging’ for information. Only when the user has reached the page which screams ‘here’s the information you are looking for’ does the user suddenly turn from information hunting to gathering, they are now ready to feast, read – and devour information!

Some rules of thumb for navigation pages:

• Navigation pages are really table of contents – they give a quick overview of what’s offered and show the user where to go next
• Cut the text – most users won’t read even a paragraph of text on a navigation page, the page needs to tell them what to click on / do without reading
• Links with a short one line of text which includes trigger words / keywords helps
• Images can help too – make sure they add to the users understanding of what is behind the link and are not just ‘eye candy’
• Bullet points work really well
• Marketing messages and copy will be ignored – on navigation pages just make sure user can find the information they are hunting for quickly
• Don’t panic about the “3 click rule” (or rather “3 click myth”), observing users has taught us they are happy to go beyond 3 clicks if these are quick clicks and the information scent is getting stronger
• Don’t make people think on navigation pages – use simple language, bullet points, big obvious links to all speed up navigation

An example of a navigation page we designed for visitwales.co.uk – the aim for users to be able to move to the information they need VERY quickly

Directgov (www.direct.gov.uk) has lots of really good navigation pages, here’s one for Motoring:

Lots of quick links and bullet points making a highly scannable and therefore quick navigation page.

Of course on many bigger sites we have a couple of layers of navigation page, as long as the information scent gets stronger as the user clicks through these they are fast links and get the user to their destination really quickly.

From the motoring page on DirectGov site clicking on “registering a vehicle” takes the user to another navigation page which then goes to the full information page

What about users landing inside the site?

Many users will land directly in your site, maybe on a navigation page so that’s why its important that navigation pages include:

• Site logo, name
• Strapline (make the logo a link to the home page)
• Global navigation device
• Home link
• Site search box if there is one on the site
• Footer and utility navigation devices

Finally users aren’t perfect!

On navigation pages we see uses clicking / choosing the first option that looks like it fits the bill. Therefore when organising the navigation page make sure:

• the ordering of lists and priorities on the page are carefully considered
• the most important information and links are high up the page
• if you want to persuade users to click one link over another put the priority link above the other one

Once you’ve built the navigation pages test them with users against tasks and goals.

For more information on writing for the web this book is great: ‘Letting go of the words – writing for the web’ by Janice (Ginny) Redish

We’ve just got back from some detailed user testing and the importance of getting the home page to answer VERY LOUDLY the user’s immediate question’s “What is this site? What is the purpose of the site? Who is it for? What can I do here” is clearly still so important…

If the purpose of the site is not clear to the user within the first few seconds of landing on the home page then the user often makes up a site purpose in their mind. This distorts their whole experience of the site making it much harder for them to interpret the site, ultimately meaning they will misinterpret something, get frustrated and leave.

When users do “get it”, understand the purpose of the site, they are much much more likely to understand the rest of the site, follow the carefully crafted user journeys and information scents – achieve their goals and have a good experience…

Getting the purpose of the site across

Every element on the home page builds a users understanding of the purpose of the site and what they can do on the site.

That being said when testing with eye tracking we really saw users scan two areas of the page where they expect to find a concise and easy to understand statement of the purpose of the site, these were the ‘tag line / strap line’ – right next to the logo and the ‘welcome blurb’.

By tweaking the text in the tag line and welcome blurb we were able to ensure participants “got it”

• The tag line – right next to the Logo / Site ID is one of the most valuable bits of ‘real estate’, when users saw some text visually connected to the Logo / Site ID they knew it was meant to be a description summarising the whole site
• The welcome blurb – this short description of the site, above the fold in an obvious position should be a terse description of the site, try and keep it to less than 30 words, we found this really reinforced the tag line if it echoed the tag line and expanded on it slightly.

see: www.wales.com (this wasn’t the site we were testing but is a good example of the principle)

Why have both a tag line and welcome blurb?

Not everyone will use both these elements; if someone is deep linked into the site then there will be no welcome message so the tag line but the tag line next to the logo should give the user a good summary of the purpose of the site. So have both on the home page and use the tag line throughout the site.

In a nutshell – getting the message across

• Don’t be subtle… don’t take the approach “we don’t need to, it’s obvious”
• Use a tag line right next to the site’s Logo – and make sure it is easy to understand
• Use welcome blurb to reinforce the tag line
• Good tag lines are clear and informative
• Vague tag lines are bad

If you can test the site on someone who hasn’t been involved in the site’s design asking the question “What do you think the purpose of the site is”, if the participant can give you a credible answer you’ve cracked it – nice work…

….and it helps with search engine optimisation (SEO)

Twitter and Facebook do it

see: www.twitter.com

Of course some sites don’t need to follow these principles – because they are huge global brands: Apple, BBC etc.

See also:

For a really great no nonsense summary of usability read this book: Steve Krug: Don’t Make Me Think – a common sense approach to web usability.

Here’s the latest snippet of usability testing from useit.com who tested how well users understand the first 11 characters of web site links & headlines

In a nutshell:

Lists are great for scanning and web copy and therefore used all over web sites (search results, category pages, news lists, blog lists, twitter feeds, table of contents, site maps, bulleted and numbered lists in content etc etc).

The research finds users scan and typically see about 2 words for most list items, approximately 11 characters.

The best links had these characteristics:

• Plain and simple language
• Specific terminology was used
• Follow conventions for naming common features
• Action oriented
• Show numbers as numerals in web text to catch the users eye and get more into the headline and links

The worst links had these characteristics:

• Generic, bland words
• Made up words or terms were used
• Start with waffle

SEE the full article: http://www.useit.com/alertbox/nanocontent.html

I must admit I thought this was a clever way to get images tagged, the Google Image Labeller turns the laborious task of tagging images into a game you play with another user online.

Here’s a neat article from Smashing magazine summarising whether to open a new browser window or not:

http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/

A quick summary / rule of thumb is open links in a new window only if:

• The link is to a non HTML document e.g. a PDF, XLS, MP3 etc, in this case use a popup window without browser control toolbar
• The link provides help / assistance (so the user doesn’t have to navigate away fro the page they are currently on)
• The link interrupts an ongoing process (e.g. filling in a form, checkout forms) so a user doesn’t lose information that they have already typed in
• The link is to a large image which takes time to load (opening the image in a new window allows the user to read the content while the big image is loading)

Everything else should open in the same page unless explicitly stated that links are opened in a new window – and don’t open a new window unless there’s a really good reason.