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:

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:

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

Low learning curve: At a glance

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

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):

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

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:

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):

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

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

Tags: gallery, navigation, User experience

This entry was posted on Sunday, May 4th, 2008 at 12:41 pm and is filed under User experience. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.