User Experience Posts:

Designers – Leave the interface elements alone!

Wednesday, June 24th, 2009

Most desktop applications make heavy use of standardised GUI components such as drop-down menus, tabs, and buttons. Some applications, often web applications, try something different… and fail.

Flash scrollbars are a classic example

Here’s why you should stick to the standards:

  • Familiarity – people are used to, and expect these consistent elements in applications. They already know how they work and will be frustrated if yours don’t work in the same way.
  • Free research! – You’ll probably find that the original elements underwent much experimentation, analysis and research until an optimum was found. This is all yours for free with the standard element!

As such, it’s important not to bastardise these elements without understanding the thought process behind them. Let’s take a look at some examples…


Windows Vista's standard tab interface shows correct tab usage.

Vista's standard tab interface shows correct tab usage.

Tabs are a great interface control – they provide a mechanism to make extra information easily available without overloading the user. When used correctly, as per the standard Windows (see right) and Mac controls they also create a great physical metaphor – new users can relate the interface to traditional paper tabs and know what to expect.

What often happens when people mess with tabs, is that they they break that metaphor. For tabs to work, they need to be a different colour when selected, and that colour should be the same as the page displayed below. Just as they would with paper tabs.

A poor web implementation of tabs.

A poor web implementation of tabs.

The image to the right shows an example where the designers have not thought about this metaphor and as a result have produced less usable tabs. They have lost the affordance of tabs – it’s no longer clear what is selected, nor what clicking the tabs will do.

Someone at IBM put a lot of thought into how tabs would work best – let’s not put it to waste by thinking we know better, not until you understand the though process behind the design.

See Steve Krug’s “Don’t Make Me Think” for more detail on the correct design of tab controls.

Scroll Bars

No honestly, that is a scrollbar!

No honestly, that is an actual scrollbar!

Time and time after again we see designers, often of Flash sites, try and reinvent the scroll bar. Not once have I seen anyone offer an improvement over the standard. As well as the risk that users won’t recognise or understand your scroll bar, they ignore what makes the standard element so good:

  • Recognisable scroll buttons with arrows pointing in direction of movement
  • The slider (or ‘thumb’) gets larger when you have less to scroll, providing a larger target when less accuracy is required
  • Clicking in the trough jumps the content up or down
  • Holding down the mouse makes it scroll faster
  • It works horizontally or vertically
  • Only appears when required
  • Works with mouse scroll wheels

I’ve seen all these rules broken simply because the designers wanted something looking different. It gets worse still when they try and make them behave differently, such as those that scroll on hover, instead of on click.

The example to the right, is possibly the worst scrollbar I’ve come across. So much so that you might struggle to spot it. The plus and minus sign along with the bullet points actually form a disjointed scrollbar. If you hover over plus or minus the content moves vertically within it’s box. If you click a bullet it scrolls to specific points. Clicking or hovering anywhere else does nothing. What makes it worse is that this is a small part of the page not a whole screen, so there’s not even the expectation that it might scroll!

Application Close Button

Photoshop CS4's non-standard close/resize buttons

Photoshop CS4's non-standard close/resize buttons

Here’s the problem that prompted me to write this post in the first place – Photoshop CS4′s close button.

You might be thinking there’s not much to go wrong with that little buttons in the top right of your screen, but therein lies the important factor – they need to be at the top right, the very top right!

The top right corner is one of the easiest places on the screen to reach – you can get there in an instant with just a blind fling of your mouse. Move the button just a coupe pixels in from that corner and you lose this – as Abode have done. Worse still, they’ve made the button smaller which makes it harder to use, as Fitts’ Law explains:

The time required to move to a target area is a function of the distance to and the size of the target.

The edges of your screen are effectively of an infinite depth – however far your arm moves the mouse, the cursor stays at the edge. Therefore they represent the biggest click targets and are prime real estate for common functions.

The positioning of the standard close button is no coincidence. As we’ve found, there’s science and research behind all successful interface design, despite the fact that it may not seem immediately obvious. As such, unless you’ve got a genuine reason not to, please leave the interface elements alone!

A Ticketmaster User Experience Rant!

Monday, March 16th, 2009

Did anyone else waste hours of their life failing to buy Michael Jackson tickets?

For those of you who didn’t, the experience went like this:

  1. Go to Ticketmaster website and click Michael Jackson promo
  2. View a list of 50 dates at the same venue and choose one
  3. Wait 5 minutes for a page to load then select number of tickets
  4. Wait 15-30 minutes for a page to load saying there are no tickets available
  5. Return to step 2 and select a different date
  6. Repeat until you hear on the radio that all tickets are gone
  7. Leave Ticketmaster website and hope you never have to come back again

Now why oh why, could I not have just said that I want Michael Jackson tickets – and I don’t care when for – and then have it find me a date with tickets available?

You’d have thought a company so universally detested for their extortionate fees might prioritise a decent user experience in order to claw back some goodwill, but apparently not…

The less you say, the more we listen

Wednesday, February 18th, 2009

eye tracking heatmap

The Problem

I’ll keep this brief because you’re probably not going to read it all anyway. In fact, that’s my point – web users don’t read, they scan.

The adjacent heatmap shows eye activity on a typical product page. This is fairly normal behaviour and displays what Nielson calls F Pattern reading, after the shape the eyes follow on the page.

The Solutions

So if they’re not going to read it all, make sure they read what you want them to – lose everything else.

  • Steve Krug’s advice in his book is “lose half your words, then lose half of what’s left”. I’d say that’s a good start. Just keep taking out words until every last one is vital
  • Front-load your text – Put the important stuff at the beginning, because people probably won’t get to the end. Screen-reader users especially will skip content if the start isn’t engaging
  • Formatting – Headers, bullet lists and bolding help direct the eye to the important places and are easier to read that large text blocks
  • Practice on twitter – the 140 character limit should help!