A short talk I gave about systems thinking at UX Bristol 2014

Reading time: 1 minute

UX Bristol 2014 Short Talk: Nic Price – Systems Thinking in 3 Minutes from Bristol Usability Group on Vimeo.

Okay so it’s nearer 8 minutes.

In which I talk about elephants and bicycles… world view, mental models, Russ Ackoff’s definition of a system, and what happens when you change the boundaries of a system.

For more videos, see the UX Bristol 2014 album on Vimeo.

My five minute talk on analogy at UX Bristol

Reading time: 1 minute

At the end of the excellent UX Bristol back in July, a few of us gave 5 minute talks. These talks are now available to watch online.

I talked about how – when I was running the intranet at the BBC back in 2005 – I was inspired by the transformation programme at London’s South Bank Centre. I found it a useful analogy for the work we were doing to transform our digital workspace.

Useful to a point, I find analogies can become most interesting at the points where they break.

This is a short version of the longer talk I gave at London IA back in November 2010, which Martin Belam blogged about. See also Matthew Solle’s post Conversations Over Coffee for some more background and a little bit of ranting.

Why I think ASUS Padfone misses the point

Reading time: 2 minutes

I’ve just watched the shiny video promo for the new ASUS Padfone.

It’s a tablet (think iPad, Galaxy) with a marsupial-style pouch for a mobile handset.

No longer will you suffer eye-strain trying to read those tiny words on the handset screen. Just pop it in to the tablet, and read them in large print on the tablet.

ASUS promises seamless data transfer between the devices.

We are reassured that they’ve been using Design Thinking to make the product (or is that products? I’m not sure)

Now… am I missing something here?

As the owner of a mobile (smartphone) handset as well as a tablet, the last thing I want is to have to surrender my handset so I can use my tablet.

I’ve already chosen to carry a phone and a tablet around with me.

I like having both, and choose to have both because they serve me in different ways.

Surely data transfer can be just as seamless by pairing my devices using Bluetooth (or its successors). Sure, every now and then, it would be useful to be able to tap a webpage on my phone screen and it offer me the chance to view it on my tablet.

But keep them separate physically, and I’ll choose how and when I use each one.

Find, Understand, Share, Extend

Reading time: 2 minutes

Today is World Usability Day. The theme this year is communication. I’ve chosen to write about something which I find helps teams I work with communicate and explore what we design and put on the web.

Back in 2005, Yahoo! Search announced a “vision statement”.

Enable people to finduseshare and expand all human knowledge.

Somewhat ambitious, sure. A little grand, perhaps. But what a great way to think, not only about search, but also about everything we make on the web.

And it happens to form a handy mnemonic in the shape of the acronym FUSE.

At the time I was working on learning technology and intranet projects at the BBC, and found it was a really useful way to think about everything we designed, built and put out there.

If we design this site, template or widget, if we publish this content, if we make this web app, will people be able to find it, use it (more recently I’ve started using ‘understand’ as well), share it and extend it (which I prefer to ‘expand’)? FUSE?

And on every project I’ve worked in the five years since, it has still come in useful. Whatever becomes of Yahoo!, I for one, have a lot to thank them for.

[For more on FUSE, see this blog post by Tom Coates, not a fan of the acronym! In 2006, the BBC came up with its own version of FUSE – in Find, Play Share (BBC press release, Guardian article) – as its approach to all audience-facing digital output. Both work, but I find FUSE really gets people thinking.]

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:

How would a butterfly inspire your next design?

Reading time: 1 minute

That’s the question currently on the homepage of Ask Nature, a new web-based resource which catalogues the many ways we can learn from nature when we’re trying to solve problems. The project is run by the Biomimicry Institute.

The site was announced this morning at TED Global in Oxford.

Here’s an excerpt:

Anchors of bull kelp protect it from torque by being flexible.

“Kelp’s survival depends on flexibility and extensibility. Each alga can grow up to 20 to 45 m (22 to 49 yd) long and consists of a holdfast, stipe, float, and fronds. The holdfast uses a flexible network of root-like haptera or anchors to attach the kelp to the ocean floor. By being flexible, the haptera allow the kelp’s base to rotate slightly, thus providing some protection from the high torque created by waves.” (Biomimicry Guild unpublished report) [read Bull Kelp article]

Hot from the online edit suite… you can also watch Gordon Brown’s speech at TED Global. The comments make interesting reading.

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].

Keep the change

Reading time: 1 minute

A good reason not to move entirely to virtual money…

I thought the six coins could make up a shield by arranging the coins both horizontally, as with the landscape idea, as well as vertically, in a sort of jigsaw style. I liked the idea and symbolism of using the Royal Arms, where individually the coins could focus on specific elements and when placed together they reveal the complete Royal Arms.

I found the idea that members of the public could interact with the coins the most exciting aspect of this concept. It’s easy to imagine the coins pushed around a school classroom table or fumbled around with on a bar – being pieced together as a jigsaw and just having fun with them.

Mathew Dent, winning designer of the new Royal Mint coins, explaining his brilliant thinking.

The new look BBC homepage and Gestalt

Reading time: 2 minutes

Generally I like the new look BBC homepage which officially went live last week after a couple of months in “beta”.

It’s got most of what I want: news, weather, listings – the iplayer link could be more visible.

Redesigns are rarely straightforward to get right. I’ve overseen a few in my time. You’re damned if you do and you’re damned if you don’t – as they say.

It looks like the feedback from people who’ve commented on the BBC’s internet blog has been mainly positive.

One recurring theme in the feedback, however, and the one thing I would like to see changed, is the use of colour change when different “tabs” are selected.

It goes against human nature and breaks the Gestalt principle of grouping objects by similarity.

Below are four thumbnail images from today’s BBC homepage to illustrate. Click on the thumbnail to see the full size image.

Torchwood game British-Asian music
BBC Food Using this page

When I click on a coloured tab, key elements around the page change colour, using the tab colour as their base.

Sub-consciously I infer a relationship between everything which switches to the new colour-scheme, when in fact there is no relationship.