Avoiding Underground Design Mistakes

Sunday 23rd August, 2009

One of the main challenges in industrial design is guiding people towards successful usage of your product (be it a web page or a transport system). People rely heavily on intuition, and communicating the ideal usage of your product into their subconscious is not a trivial exercise.

People have a habit of making decisions using the first gut feelings they get, rather than slowly and methodically evaluating all the information. Gary Klein published a great book full of fantastic case studies on this subject back in 1999. The consequence for product design is clear; not only do you have to make sure that the usage of your product is obvious, but that there are as few ways as possible the usage could be misinterpreted.


Misinterpreted usage is a common problem, you probably walk past examples of it every day. For example, on my journey to work I catch the District Line from East Putney to Notting Hill, (please say hello if you see me) and on the way I go through Earl’s Court.

At Earl’s Court the eastbound line splits and heads in two directions. Every day I see people get onto the wrong train, either jumping off when they realise or cursing when they realise the train isn’t going in their direction. Why? The departure board quite clearly shows the train destinations and these people evidently know their intended routes, and there are only two eastbound platforms.

Looking at the platform’s departure board it’s not clear why people get it wrong every day.

Departure board at Earl's Court

Departure board at Earl's Court

Things become much clearer when you realise that this departure board is not the first source of information everyone sees when they arrive on the platform. Close to the stairs at the Earl’s Court Road entrance is a map showing the destinations reachable on the eastbound platforms. See what you think (below).

Eastbound District Line platform map

Eastbound District Line platform map

I can see two possible interpretations of this map.

1) The intended meaning; both platforms serve eastbound trains and that the following destinations can be reached.

2) The alternate meaning; the platform on the left serves the line on the left of the map, and the platform on the right serves the line on the right-hand of the map.

This is an example of failure to communicate the successful usage of the train platform to travellers. A proportion of people are looking at the map and assuming it tells them which platform serves trains to which destinations. They then stop looking for further information because they think they’ve navigated successfully.

What to do about it

In the example of passengers at a train station simply watching people on the platform is enough to deduce that there’s something wrong, and possibly what to do about it. On the web things aren’t so simple, you can only track user behaviour at a distance through statistics. This makes problems much harder to track down.

Probably the best solution I’ve come across is to use a user experience lab (e.g. Creative Good in NY). These guys will simulate real world use of your product as closely as possible, and use that to uncover what’s going wrong, or right, for you.

For those on a budget, you can get people in your target demographic delivered to your door via companies like Independent Fieldwork. It’s then up to you to use those victims test users to discover as much as you can. This isn’t an easy job though, I’d recommend getting good help if you can, and dropping as many assumptions as you can.

However you do it, communicating the usage of your product is essential.

On the Subject of Web Browsers

Tuesday 11th August, 2009

Creative agency mogul and Javascript whizz-kid Phil Hawksworth has posted a defence of IE6, arguing that in fact IE6 isn’t really as awful as we sometimes make out, and that its entrenchment (which is the biggest annoyance) is caused by the web development community’s own pandering to the IE feature set after the first great Browser War (BW 1).

It sounds weird to hear it now, but as someone who wrote DHTML in the bad old days when the big guns were Netscape 4 and IE 4 and backward compatability demanded IE3 and Netscape 3, I can tell you that IE6 is a dream come true, just like IE5 was when that came out. Yes, I complain about it too, and I know there’s non-standard behaviour, but there are ways of ironing out those inconsistencies without resorting to browser-specific hacks, or except in specific circumstances separate codepaths (the prime exceptions being XmlHttpRequest, vector graphics, and events).

The required attributes for a web browser these days are:

  1. Standards compliance (implemented forgivingly)
  2. Performance
  3. A decent debugging tool
  4. Distribution deals

With the advent of Chrome and the Iphone it’s clear that although IE still holds dominance in corporate applications, in the open web the two competing layout engines are Gecko and WebKit, with Trident a distant and somewhat lame third place. Sorry IE, any browser that doesn’t include a decent dev tool is really going to suffer.