Content connections

Reading time: 1 minute

Sketch showing a list of content types

How does a piece of content relate to other content?

Learning, conversations, people, places, events, news, policy and procedure…

Not an exhaustive list, and deliberately format-agnostic, but a helpful start when planning and thinking about web and intranet content.

Let there be no cul-de-sacs.

Traffic lights and inclusive design

Reading time: 4 minutes
Traffic Light Tree
Traffic Light Tree. Photo by Squirmelia on Flickr

I’ve been thinking a lot about traffic lights recently.

Why are there three lights? Why are they vertically arranged? And how can the answers help us understand inclusive information design?

We learn from an early age that red means stop and green means go. We also learn the convention is to have red at the top and green at the bottom.

According to¬†a Stanford University research article, “Roughly 1 in 10 men are fully or partly colour blind.” Although colour-blindness affects men and women, men are 20 times more likely to be colour blind than women.

For people with the most common types of colour-blindness, it’s hard to distinguish between red, yellow and green.

At a road junction, someone with red-green colour-blindness can see whether the red or green light is lit because of the additional information provided by the vertical arrangement of the lights.

In the world of project management, a common usage of the traffic light metaphor is as a project reporting device, using red, amber and green (RAG) to denote the current status of a particular aspect of the project. Red usually means there’s a problem, while green is all systems go.

In project reporting it’s common to show a single spot of colour to denote a RAG status (See 1a below).

To someone with colour-blindness the information design has failed.¬†Showing a single traffic light removes the contextual information required to determine whether it’s red or green (See 1b below). That’s quite a fundamental problem.

Example of project summary Red, Amber, Green status
1a. RAG status shown as spots of colour
Project status Red, Amber, Green summary
1b. RAG status shown as spots of colour. Colour-blindness simulation

Once the colours become indistinguishable, it’s no longer possible to use the Gestalt principle of similarity to help us distinguish between the symbols.

One option is to reintroduce the full traffic light, with the RAG-status colour lit. Having three lights arranged vertically means that you don’t have to distinguish between red and green to know what the current status is. You just have to remember that top means stop. This option (not illustrated) would require some reworking of the grid to accommodate readable traffic lights, and would not make efficient use of the space available.

So what other options are there?

Adding the initial letter of the RAG status to the symbol enables us to see the differences (2a).

RAG status shown with initial letters in coloured spots
2a. RAG status shown as spots of colour containing initial letters.
Colour-blindness simulation of RAG status shown with initial letters in coloured spots
2a. RAG status shown with initial letters in coloured spots. Colour-blindness simulation.

However, the colour-blindness simulation (2b) shows it still requires some cognitive effort to read the letters.

Better still, use a different shape for each of the three RAG statuses, as well as the colour (3a and 3b).

RAG status symbols shown as coloured shapes
3a. RAG status symbols shown as coloured shapes.
RAG status symbols shown as coloured shapes. Colour-blindness simulation.
3b. RAG status symbols shown as coloured shapes. Colour-blindness simulation.

It’s easier to scan for triangles than the letter “R”, for example, to quickly identify the Red items.

Whichever you choose, it’s important to include a key in the diagram as well.

There’s a massive drive on at the moment to make public data available, and to use graphic design techniques to make sense of it all. A popular example is to overlay crime statistics on to a map. As data visualisation becomes ever more possible and ever more popular across digital and print media, the principle of inclusive design has never been more essential.

In a nutshell: to ensure your information design is inclusive, don’t rely on colour alone to convey meaning.

Tools and references:

Talking of tabs

Reading time: 1 minute

Make someone’s day!

Tell them they can use the Tab key on their keyboard to move through a web-page.

To those who already know, it seems obvious, taken for granted.

But if you’ve ever watched people filling out boxes on forms on banking websites or when setting up an account on a website using the mouse to move from one input box to the next, you can imagine their relief on learning about the Tab key.

The Tab key “focuses” on links and form elements, such as boxes you need to fill details in, moving from one to the next.

And Shift+Tab does the same thing in reverse.

Of course, this assumes the web-page has been well-designed. You should be able to Tab through the screen in a logical order. This order can be easily specified by the web designer, and is particularly important when it comes to accessibility, so there’s no excuse for not doing it.

Quick user research tip: Open All in Tabs

Reading time: 1 minute

We’ve been running some design research sessions which involve several scenarios, each of which uses a slightly different design version for a website.

Each scenario has its own starting page, each of which we put in a different tab in Firefox.

This means setting up all the tabs and start pages for each research session.

To save time, we set these up once.

We then select Bookmarks > Bookmark All Tabs… > {name the folder}. [Keyboard shortcut for this is Ctrl+Shift+D]

These are then all available for each session via Bookmarks > {folder name} > Open All in Tabs.


If you’re using tabs in Internet Explorer, the same functionality is available via Favorites > Add Tab Group to Favorites > {name the tab group}

The Tab Groups are then available via the “Favorites Center” [Alt+C on the keyboard].

Bonus-centred design

Reading time: 2 minutes

We’ve all seen it.

The dreaded “Skip Intro”.

The picture of the boss on the homepage obscuring any useful content or functionality.

I was just discussing this with a friend and came up with a new name for an old problem “Bonus-centred design”

Here’s how it works:

  • Take direct orders from the boss. Do not ask questions
  • Do not clarify purpose
  • Remember the boss knows what good design is – it must be interactive have things you can click to make other things move around
  • Do not under any circumstances talk to potential users of the site
  • You only need one person to test with. The boss
  • Do tell the boss how many hits the site will get. Forget about task completion
  • Do your best to get a video of the boss on the homepage welcoming people to this amazing online experience
  • Reinforce the design with company branding at every opportunity. The more suited to busines cards and company stationery the better
  • Make it all about the company and not about the people who use your products and services
  • Do not worry about accessibility. It takes time and costs money. And anyway the software supplier assures their product will have an accessibility patch very soon

I’m sure there are more…

Britain’s online newspapers accessibility scores – should do better

Reading time: 2 minutes

Today Martin Belam publishes the scores from his excellent series of articles looking at the accessibility of the UK’s main national newspaper websites.

The Times came out on top, even though it makes no use of an on-screen text-resizing widget, nor of accesskeys as shortcuts for keyboard users.

Overall my conclusion has to be that only a couple of newspapers are taking seriously any obligation to make their services accessible. I was particularly concerned by The Sun and the Daily Mail using CAPTCHA technology with no alternative for users with accessibility issues, but the general pattern for most papers was quite poor. Many are putting completely unneccessary barriers in the way of people reaching their content by making simple decisions like using fixed font sizes, and not including ‘skip navigation’ links.
[source: currybetdotnet]

The results are worrying but not surprising. And as Martin says, he’s still really only “scratching the surface” in his tests.

Sadly all too few website managers understand their obligations as far as accessibility and the law is concerned. Webcredible have a useful summary here, but in a nutshell you can be sued if you do not make reasonable adjustments to provide equal access to your content to everyone.

The RNIB has approached two large companies with regard to their websites. When they raised the accessibility issues of the websites under the DDA, both companies made the necessary changes, rather than facing the prospect of legal action (in exchange for anonymity).
[source: webcredible]

People really shouldn’t need convincing. I wonder if it would make any difference if they realised that by improving the accessibility of their websites, they will also make them more usable and more “readable”. And when it comes to the big internet search engines, being readable means being findable.