Design flaws and why best practices fail

Just before Christmas, I was having lunch with a friend and former colleague (no prizes for guessing where from). As per usual, out came the gadgets. Including my iPod and his Zune.

Let’s rewind back to when I first got an iPod. It seemed obvious how to scroll through the menus – move your finger around the wheel. Less obvious was how to adjust the volume when playing music. It took a couple of attempts at prodding the forward and rewind buttons, despite the labels telling me they were not the volume controls, before realising that the same action to scroll through menus applied to adjusting the volume.

The iPod

No manual required and all pretty logical really. The colour and texture help guide your finger around the wheel. You immediately discover that the centre of the wheel is the button you click to select. And the remaining actions are clearly labeled – press menu to get the menu, forward to go forward, rewind to go backwards and play/pause to play or pause.

So fast forward to the present and the Zune. My friend hands over the Zune and then sighs as I attempt to use it like an iPod. The Zune looks vaguely like an iPod but isn’t an iPod.

The Zune

The big button in the middle isn’t quite a circle but is a long way from being a rectangle with rounded edges so we will refer to it as the circle for the rest of this post. Net result. I try moving my thumb in a circular motion to scroll through the menu. That doesn’t work. You press the top of the circle to go up the menu and the bottom of the circle to go down the menu. Once shown how, you can also swipe up and down to accelerate through the menu. There are two other buttons. One has the familiar play/pause icon. The other has an arrow. Can’t remember what it does but would assume it’s simliar to the MENU on an iPod.

The reason the iPod wheel is so easy to use is that the shape is logical to the action. The reason the Zune is so confusing is because the shape does not match the action. Compare the two images below.

On the left is how the iPod works. 6 possible actions all contained on a single wheel: 5 buttons and a circular sliding motion. Your thumb is guided around the wheel by using a different texture for the wheel than the rest of the iPod (including the centre of the wheel). The circular motion works both clockwise and anti-clockwise, as you would expect. Four buttons at North, South, East and West and a fifth button in the middle.

On the right is how the Zune works. 8 possible actions: On the circle there are 5 buttons and two sliding motions. There are 2 additional buttons either side of the circle. The sliding motions are up/down and left/right, not that you would know from the look and feel of the circle. The motions do not match the shape. And you have to assume that there are buttons on the circle, because there is no indication icon-wise.

Why did Microsoft choose to use a circle on the Zune?

I have zero formal design or usability qualifications. But if I were given the spec of designing a large ‘button’ interface that you press at the top to go up, the bottom to go down, and can stroke up or down to accelerate (and similar applies for left and right), I would have used a shape that matched the action. Something like this:

My version of the Zune

And it’s a small point, but if you can’t fit the word ‘menu’ on a button and you are Microsoft, why wouldn’t you just use the same icon you use on Windows? Most people would figure out what it means… They certainly wouldn’t mistake it for the rewind button.

There’s an ironic twist to this. Two years ago, a YouTube video appeared – What if Microsoft designed the iPod packaging? It is hilarious and embedded at the end of this post in case you’ve not seen it. It was later revealed that the video came from within Microsoft. When the Zune launched, it shipped in a simple box.

So why did Microsoft choose to use a circle on the Zune? Was it to make it look like the iPod? A daft decision when the form does not match the function.

This is a common mistake and not just confined to design or usability. How many organisations implement a ‘best practice’ on the basis it worked for a similar organisation, and yet fail? It is rare to find a perfect match in terms of context and conditions. Instead, it is better to apply lessons learned but adjust them to your own situation, not bend your situation to fit the lesson. Apple’s lesson was that form and function should be as simple as possible and align. Microsoft followed the form but changed the function. Wrong.

If Microsoft designed the iPod packaging