90 percent of everything : Usability Blog

Written by Harry Brignull

I promise to stop ranting about the evils opt-in / out-out design patterns, but I noticed a real gem today that I had to share with you:

It’s funny how the honest business objective of keeping in touch with your customers can get so twisted and contorted that it ultimately becomes this.

It runs full circle from “We want our customers to become loyal friends” to “Customers are just conversion statistics, and we will pull any trick in the book boost the numbers.”.

A big fat race to the bottom.

You may have noticed that Google changed their Advanced Search page eariler this month. The new version certainly is a lot tidier than the old one, which was a complete dogs dinner - take a look at a screen grab of the old version below, the green lines added to emphasise the layout issues.

So is the new version better? In a nutshell, it’s tidier but not much better.

Back in January, Stephen Turbek wrote an interesting article on Advanced Search interfaces. Among other things, he pointed out that after a search is performed on Google, the “advancedness” is lost. You get taken back to the standard search results page, with a few boolean operators thrown into the search box.

There’s a certain degree of arrogance in this behaviour - the user says, very explicitly “I want you to help me to do an advanced search”. Google replies “Hmm, sure, but what you really to do is learn how to use boolean operators like a pro. That way you can use our standard search page instead, see?”

In fact the entire advanced search page is designed to teach you how to manually construct boolean searches rather than to help you do an advanced search. Take a look at the contextual help tips, for example. If you click a “tip” link it tells you how to construct a standard search with boolean operators. So, you ask for help on one thing, and it tells you help on another.

To use an analogy, if a kid asked you for help riding a bike, you’d give them stabilizers. You wouldn’t start telling them about clutch control on a motorbike straight away. So why isn’t Google giving novice searchers any love, compared to Yahoo and their rather nice AJAX search assist tool?

An impressively awful dialog design from Dell. Bad on so many levels.

Some stunningly awful usage of the evil asterisk by three.co.uk for their X-series package (The UK mobile operator) -

Actually, if you dig into the Ts & Cs, the limit is 1GB a month. This is a big difference from unlimited, but not unreasonable since it’s an ok price. Why not just be honest and say it?

Actually, you have 5000 minutes of skype-to-skype calls. This isn’t bad, but they don’t make it clear that they mean skype calls only (no skype out, i.e. no calls to real phones included).

Actually, you have a hard limit of 10,000 messages a month. This is plenty, but by this point, you are likely to feel very suspicious of the asterisk. What’s silly here is that the X-Series package is a pretty nice deal by UK standards. There’s no need for all this cloak and dagger stuff. Good, honest simplicity would get them a lot further.

Imagine it’s 4.30pm on a weekday. Are you allowed to park here? if so, how long for?

This is a great example of disinformation design from Haringey council in North London. Because the council profits from poor information design, this sign is unlikely to ever get fixed.

Poor readability > parking mistake > £100 ticket > profit for council

I’m sure we’d all love to be in a position where bad design makes you MORE money. But of course that never happens on the web, does it? Or does it?

“The Kindle will be to traditional books as the Segway is to walking.” (via slashdot)

“The Kindle’s so ugly, Speak-and-Spells run away crying when it comes in the room” (overheard)

“Amazon is touting this as the iPod of e-book readers … it’s actually the Zune of e-book readers.” (via slashdot)

“Is it just me, or is there something a bit weird about naming a product for reading books with a word which means “to set on fire”? Now, maybe as a name for Dell laptop…” (via slashdot)

Interesting piece of copy in this Windows Vista dialog box. Basically it’s saying:

1. Type your product key in now.
2. But you don’t have to.
3. But if you don’t, you could loose everything.
4. And you might have to buy another copy of Vista.
5. So on second thoughts, you probably should enter your product key in now after all.

Luckily, due to the way people scan-read when using a computer, few will actually read this paragraph and most will skip ahead to fill in their product key without even noticing the content.

Thanks to Peter Otto for picking up on this.

“Oh shucks Sandy, you’re such a card! I wasn’t going to, but since you said it was going to be delightful, I think I diddly-will sign up to your newsletter.”

… For the record, when you want to entice newsletter subscriptions for your site, tell the user (i) how often it will be sent in real terms, (ii) what will actually be in it, and (iii) as a bonus, link to an example of your newsletter so they can see what they’d be signing up to.

> visit IWantSandy.com

In Office 2007, you sometimes get shown this funny little dialog box when saving a large document. Have you ever noticed it?

So what happens if you click cancel - does it cancel saving the document? Or does it just dismiss the dialog box? And why does it appear for a second or so, then disappear, unprompted, equally quickly?

It’s obviously intended to let users escape from a really slow save (e.g. a big document over a slow network), but most of the time it doesn’t quite work.

This kind of design mistake is like a vestigial feature. It exists in its current form mainly because it’s not quite bad enough to get any design attention.

Before I start I’d like to say I’m not a Microsoft Hater. I’m actually very, very impressed with Office 2007 - the UI design is great. And when I saw today’s splurge of blog posts about the new Zune, I have to say I thought it looked pretty tasty.

Check out Zune.net now before you read this article. See if you can notice any usability or user-experience problems. If you’re like me, you will probably be wondering how so many serious problems managed to slip by. Given their scale and massive resources, Microsoft should know better. Right?

As a User Experience consultant I see these kind of ‘obvious’ mistakes all the time. It’s unlikely that it was because of a stupid design team. It was probably smart people using a stupid design process. The bottom line is, there was no love on this project. I bet nobody was given the role of loving this site, cherishing it and calling it their baby. Everyone did their bit in their cubicle, someone else glued it together, then they all moved onto something else. They were probably hugely multitasking with a million other things too. You can imagine the office where it happened - nobody chatting, an uncomfortable atmosphere, and everyone retreating into their headphones.

It’s a classic piece of pass-the-baton relay race design. On paper it ticked all the boxes and it got released. But box ticking doesn’t capture user experience, and this is how it slipped out without being noticed.

How could Microsoft have avoided it?
They should have employed a user-centred design (UCD) process. With UCD you take the guesswork out of design and you catch mistakes before they get released. With UCD, your design team ‘lives’ the user experience before it even exists - while it’s still sketches and post-it notes. They periodically spend time in contact with end-users, observing interviews, watching highlight videos of user tests and engaging in various kinds of participatory design. UCD creates an atmosphere where team members are respected, not hated, if they speak up when they see something isn’t right.

Now lets look at some of the mistakes the Zune.net designers made, and how you can avoid making them yourself.

Design mistake 1: ignoring user expectations

Look at those lovely shiny Zunes on the front page of zune.net. Don’t you just want to play with them? If you’re like me, you’d probably now wiggle your mouse over them to see what cool interactive wizardry might happen. And what happens? … Nothing. It’s a static jpeg, just like it is below. So then you’d probably click on the image, the text, and the buttons. Still nothing happens. Thousands of users like you have just done exactly the same thing today. An instantly disappointing first experience.

Lesson learned: never ignore user expectations. Use paper sketches to test your designs early on. Always be up-to-speed on contemporary best-practice guidelines and heuristics. Your entire team should know Nielsen’s heuristics off by heart, and should be able to recite Steve Krug’s ‘Don’t make me think’. It’s easy stuff. Basic usability training only takes one or two days.

Design mistake 2: no clear call to action

So what now? You’d probably look around the page looking for the main ‘thing to do’. Usually there is one prominent button or link that entices your attention. This is known as a ‘primary call-to-action‘, and the Zune homepage doesn’t have one.

Lesson learned: use prominence to indicate a primary call to action. User testing takes the guesswork out of this.

Design mistake 3: missing proposition

If you’re like me, you probably arrived at the site wondering what makes the new Zune different. Is it smaller than the new iPod? What new things does it do? What old things does it do better? What’s it like to use? Basically, should I put my iPod on eBay? The front page doesn’t tell us anything. We are left guessing.

Lesson learned: communicate your proposition clearly on the front page. Your front page proposition is like an elevator pitch: first impressions count. Hire a competent web copyrighter. 10-seconds tests are also a great method for front page proposition communication - you show a user the page for roughly 10 seconds, hide it, then ask them what it was all about. If they ask lots of questions back at you, then your page needs work.

Design mistake 4: misuse of space below the fold

The fold (i.e. the bit below the bottom of your screen) is something you should take advantage of as a designer. And what did the designers put there on zune.net? A useless gulf of white space, and then something unforgivable.

Lesson learned: in Judo, you’re taught to take advantage of the momentum of your attacker. You need to do this with the fold: rethink a negative situation into a positive one. Instead of seeing it as a place that’s of no value for primary content, you should see it as a great place for secondary content.

Design mistake 5: poor text contrast

Small white text on a very pale beige background. I’m trying hard to resist ranting here, but who on earth would actually find this readable?

Lesson learned: I’m not going to get into accessibility here, but it suffices to say that this and other basic accessibility mistakes can be easily avoided using the W3C WCAG guidelines.

Design mistake 6: lack of feedback from user actions

Try clicking on the ‘meet zune’ link from the front page. What happens? If you haven’t got a very big monitor, you’ll answer ‘absolutely nothing!’. Above the fold, the page barely changes. A new page does load, but above the fold, it looks identical. You have to scroll down. And what do you get? More similar pictures of the Zune. Some light-brown on beige writing, Some small text, and a row of five coloured buttons.

Design mistake 7: no understanding of shopping behaviour

If you click on one of those coloured buttons, What would you expect to happen? Would you expect it to pop up a new window containing the page shown below? No. Personally, I’d expect to see a photo of a Zune in that colour.

If you think about about natural shopping behaviour, people tend to want to explore, learn, compare options, and then purchase. Currently the Zune site assumes that on arrival, with barely any factual information, you are already ‘hot’ enough to make a purchase. This is just wrong. At this point most people are ice cold and they aren’t going to get their wallets out if they don’t know what they are buying.

Design mistake 8: making the user work

If you look at this page, you’ll notice some very sloppy information architecture. The nav bar shows you as being in the ‘accessories’ section. But the Zune itself is not an accessory, its the core product. (A car charger is an accessory.) The photo of the Zune is small, and in a jarring white box Barely any product information is stated: “Internal Hard Drive, FM Tuner, 14 Hours - MPN: JS800016.” If you stop a random person on the street and ask them what the Zune features are they’d come up with a better list.

Then, in a strange font, the phrase ‘calculate your bottomlineprice including shipping and tax’ is shown. Since when was bottomlineprice ever written as one word? What’s worse, this is actually a GIF image. Then when you scan down the page you have to stop and think: “Why is wallmart fifty bucks more?” “What is all this nonsense about entering zip codes?” “Do I actually have to type my zip code in to get the price?” Imagine this as a conversation with a sales assistant:

“Hi, how much is that Zune in the window?”
“It’s between two hundred and two fifty bucks. Whats your zip code?”
“What?”
“I said, what’s your zip code, buddy, what’s your zip code?”
“Why? Does the two fifty model have more disk space?”
“I can’t tell you. Now what’s your zip code?”
(and so on)

Lesson learned: when you have a feeling there is something wrong with your design but you can’t quite articulate what, try acting out a dialogue between the site and the user. As you can see above, it emphasises the temporal details of the interaction. (I think this is originally an Allan Cooper method.)

Okay I’ve run out of steam now, but there’s 8 whoppers and I’ve barely even scratched the surface. What other design mistakes can you see? I’d love to hear your ideas in the comments section…