DonnaM » 2008 » May

Archive for May, 2008

Web directions UX: Getting content right

Monday, May 19th, 2008

Here’s my presentation from Web Directions User Experience, titled ‘Getting content right’.

The description for it was:

“We all know that great content is a core part of the website user experience. So why is it so hard to find content that isn’t dull, lifeless and uninteresting – blah, blah, blah?

Web content can be vibrant, interesting and fun. It can draw you in, fill your head and make you learn without having to think. And it’s not really hard to write. Three simple tricks can turn poor content into a great experience – remember that readers care more about themselves than you; write in real words with authentic voice; play show and tell.

This presentation will discuss these principles, with plenty of funny and not-so-funny examples. You’ll go away with practical steps to make your writing kick-ass. And you won’t even have to think.”

I think it went well. Good questions at the end, and a number of people commented that the tips actually were things they could do (which was the aim).
(Lots of car references in there too…)

IA & collaborative design – workshop

Tuesday, May 6th, 2008

Yet another workshop announcement…

On 7&8 August, I will be teaching a 2-day master class on information architecture and collaborative design, run via Ark Group. The thing that is slightly different about this workshop compared to my IA workshop is that, duh, it includes a lot of collaborative design.

I’m adding more material on user research, design games, usability testing and designing in teams – I don’t usually get to teach these in a one-day workshop. And 2 days allows more hands-on, practical stuff than one, and that is always good.

So if you know someone who may be interested, and can get to Sydney, please pass on the details: Information architecture and collaborative design workshop.

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

Peugeot’s website made me want to buy …

Saturday, May 3rd, 2008

… any car other than a Peugeot.

The back story …

I’ve recently started to think about buying a new car. I don’t mind my current one (it’s a Nissan X-trail) but it is a bit bigger than I need and sort of just not me. I’ve been thinking about buying a Peugeot for well over a year – they’re terribly green (very low fuel use, low emissions, and supposedly would run on biofuel if it ever turns up) terribly sexy and quite well-priced. Every time one goes by me I notice it and think about buying one. I hadn’t even considered buying anything else.

Until I visited their website.

I’m a girl – you probably know that. For me buying a car is a bit of a scary idea – every car purchase I’ve previously been involved in had a boy part to it. That shouldn’t be so scary, but there are still great big blocks of the consumer world where girls are treated differently (wine stores and wineries are the other, but I’ll whine about that later).

And I’m sort of organised, which is why I’m a decent information architect. You’d hardly expect me to do something so important without research. And I’m a web chick so the website was the natural place to start.

When I approached the website, I had three goals in mind – to find out about the new model that I had seen advertised, figure out which model was good for me, and learn enough to sound sensible when I went to the dealer. Sounds like a decent, straightforward research task.

Problem #1 – The home page:

Peugeot home page - one car image and little buttons with model numbers

Not much help there – a big picture and a bunch of numbers.

Problem #2: The ‘Model range’ page

Peugeot home page - one car image and lots of big buttons with model numbers

Another big picture and a bunch of numbers. This number problem is consistent in the whole car industry – you have to decipher the numbering system before doing anything.

Problem #3: The ‘Build your own car’ page

A filtering system, with yet another set of model numbers

No image this time, but still the numbers.

So I just dug around for a while (like, an hour) to figure out the numbering system and to vaguely figure out what I might want. I narrowed it down to a 207 (small hatchback), 307 (medium hatchback) and 308 (new, medium hatchback) with 5 doors and diesel. My main criteria are a hatch so I can drop the seats and put stuff in the back, low fuel use and low emissions.

Guess what I might want to do next? I might want to compare the specs for these three narrowed-down options side-by-side. Compare dimensions, options, fuel use, emissions and price. I’d sort of like a neat table that lets me scan and compare each.

Let’s give that a go – the ‘Build your own car’ so doesn’t build a car, but does let me filter into all the possible cars and display results.

Problem #4: The comparison results

After choosing 5-door hatch, diesel, it told me there were three models and 8 versions, so I thought that was enough. Here are the results:

Compare three families of car

I can choose each of these, but not compare. My only choice now is to open up each ‘family site’ and dig through it. No side-by-side comparison. Nothing but sending me into three different organisational silos (oh, and the links don’t work anyway, so I can’t go anywhere; and what the * does ‘visual no contractual’ mean).

Problem 5: No consistency

You know what makes this all worse. I could just cope with having to dig into three different ‘family sites’. If they were consistently done, I could find the specifications part for each and flick between browser tabs. But no, each family site is structured differently.

The page for the peugeot 207 series - one look and nav options

The page for the peugeot 307 series - another look and nav options

The page for the peugeot 308 series - another look and nav options

Different visual approach, different navigation options, different styles of content. I still can’t compare. I’d be better driving to the dealer, getting brochures and putting them side-by-side on my kitchen table. And what’s the point of having a website?

The conclusion…

You know, I only tolerated this because I really, really, really wanted to buy a Peugeot. But every minute and every further moment frustration decreased my love.

I started by being totally convinced a Peugeot was the car for me. I finished by making a stop this morning at the Alfa dealer.

And just as a last image, do you think they talking about the car, or bandwidth:

Do you want the 'high speed version' or the 'low speed version'