DonnaM » navigation

Posts Tagged ‘navigation’

Reducing the learning curve

Sunday, May 4th, 2008

In my last post, one of the things I most criticised Peugeot for was providing navigation based on a series of numbers, and making me decipher the numbering system before I could start to learn about their cars.

This numbering system (or strange names) problem exists throughout the car industry. It is just one of the things that a consumer needs to learn before starting to navigate the car world. It has been around for a long time, is fairly embedded, and there are plenty of people who know the system. Just not everyone.

The thing that we can do, as user experience designers, is to make sure things work on both levels – to provide ease of access to those who know the system, and help people who don’t know the system to learn it quickly – to lower the barrier to entry.

So given I’ve been spending too much time on car websites recently, I thought it would be worth looking at some examples of how some brands are managing this.

High learning curves

First, here’s the some bad examples.

Peugeot’s model range page is based on numbers and provides no further information:

The model range page, showing an image and larger numbers

Alfa Romeo doesn’t have a ‘models’ landing page so the only entry is through the navigation in the middle of the page. A simple addition would be to add the model name to the scrolling banner image – at least I could then watch the image and get an idea:

Alfa Romeo home page - model numbers in navigation

Citroen are the same – no ‘model’ landing page, so all entry is through the number-based navigation at the top of the page:

Citroen home page - navigation via the numbers in top navigation

Low learning curve: At a glance

Renault and Volkswagen both show names and thumbnails at a glance. Nicely done and easy to understand.

Renault passenger cars page - thumbnails of each car with their model names

VW model page - thumbnails of each car and their names

Audi have a go at it, but the thumnails are a bit small to tell the cars apart (I do like that they show starting price here – that’s handy too):

Audi model page - thumbnail image of each car and its model name

BMW tries as well, but the images are too busy to see detail of the car:

BMW automobiles page showing thumbnail and models
This is the most common approach with other manufacturers doing it with varying levels of usefulness

Low learning curve: Easy to reach

Fiat has a ‘Model range’ widget on the home page that lets you scroll through the range, so you can visually connect the picture to the name:

Fiat thumbnail and name

Fiat thumbnail and name

Low learning curve: details on hover

Saab have thumbnails of the models on the home page, with good detail on hover (and consistent navigation options for each):

Saab home page showing details for one model

Holden too have a ‘more details on hover’, interestingly attached to flyout navigation (I did nearly miss this though):

Holden navigation showing thumbnail

Just goes to show, it is possible to do better…

And now I should get back to work and stop thinking about cars (though ping me if you love/hate your recent-model Peugeot, Alfa or Fiat).