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…

Tabs

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.

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

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!