Make complete button surface active and enhance usability
Buttons are everywhere – both on web and on desktop applications. Being so widespread and known to end-users they should be as usable as possible. However, there are lot of mistakes when designing buttons and they kill the usability. One of the biggest mistakes is making just part of the button active. Even MySpace fails in this case.
Introduction: Active button surface
Let me start by defining “active button surface” – simply said – that is an area sensitive to user’s action. Meaning that active button surface will trigger some events when user clicks on it or, in some cases, when it positions mouse cursor over the button. Some UX guys even call it “hot spot” are but I think that is not proper term for this case.
The rest, inactive part of button is sometimes called “dead zone” or “dead pixels”. Only thing that really dies in this case is user’s experience and usability of your applications – both desktop or web.
In the rest of this post I am outlining some well-know interfaces showing you good and bad examples.
Desktop
Windows operating system comes with Start button from Windows 95 and it is there even now in Windows 7 (though it has changed during the time). But even Start button failed in this specific aspect of having the whole button surface active.
Prior to Windows XP there has been 1 row of pixels on left side and 1 row of pixels bottom that was dead, inactive. Even worse – there have been 2 pixels bellow Start button and bellow buttons on Taskbar (marked red and yellow, respectively on picture). In total: 3 dead pixels. Clicking on those pixels wouldn’t do a thing. Click again – nothing. God knows how many clicks have been wasted and how many users have been frustrated clicking around while nothing was happening.
Well, it seems that they were loud enough and Microsoft has changed this poor design and Windows XP featured brand new Start button will all pixels active – even though it was not rectangular. Windows Vista and Windows 7 are even better – though “Orb” is circle in its nature, positioning your mouse cursor anywhere near it will enable you to click on Start button as you can see illustrated on following picture.
Web (Usability case: MySpace vs Facebook buttons)
This is a tough one – though we have number of different desktop platforms to deal with and different tools enabling us to build user interfaces, web is much, much more vibrant with different approaches and tools leading to even more cases where button usability fails.
My favourite example is MySpace. I am not active user on this social network but I’ve stumbled upon its Log In / Sign – Up form when I was playing with some usability reviews. So, I’ve clicked close to left edge of their button and – nothing happened. Clicked again – nothing!
And I am not talking about 1 or 2 pixels in this case. Take a look for yourself on the following picture:
Active button area is within red rectangle – everything out of it – dead area.
Left inactive margin is 14 pixels, right inactive margin is 15 pixels. Total width of this button is 77 pixels. Meaning that 39 out of 77 pixels in this particular button are wasted – that is more than 50% of the button’s width! Seriously, why do they hate their users?
What about Facebook guys?
Again, let’s take a look at the image:
As you can see, situation is much better with Facebook – there is only 1 row of pixels that are dead – and it is located and the right border of the button. Total button width is 67 pixels and there is just 1 dead.
As you can see, it’s easier to sign up or log in to Facebook rather than to MySpace – and the difference is significant.
Suggestion
This one comes as a no-brainer – design your buttons to be responsive and covered completely with active surface. Where possible and where it makes sense (for example if your button is positioned close to corners), make even button’s surroundings active surface same as if they were part of the border (Vista or Windows 7 case).
When you are using buttons you are using them to enable users to execute some command (bold text, send e-mail, log in or buy your product from your website). Make sure that your users can do it when they click on the button – FIRST TIME. Don’t make them think and try to hit active area surface of your button – for them – whole button should be single active surface – and so it should for you. It’s simple as that!
21 Responses to “ Make complete button surface active and enhance usability ”
Trackbacks
- Vibor Cipan
- Vibor Cipan
- Vibor Cipan
- Vibor Cipan
- Diego Priliac
- Designing CSS Buttons: Techniques and Resources - Smashing Magazine
- typoglyphic.com » Designing CSS Buttons: Techniques and Resources – Smashingmagazine.com
- Designing CSS Buttons: Techniques and Resources | Programming Blog
- Designing CSS Buttons: Techniques and Resources
- Designing CSS Buttons: Techniques and Resources | Buddy's Blog
- Barker Design | Graphic & Web Development » Blog Archive » Designing CSS Buttons: Techniques and Resources
- Wordpress Blog Services - Designing CSS Buttons: Techniques and Resources
- Vibor Cipan
- Flammend
- Designing CSS Buttons: Techniques and Resources - Webreweries.com
- Designing CSS Buttons: Techniques and Resources | WORDPRESS-TEMPLATES-PLUGINS-RSS
- Designing CSS Buttons: Techniques and Resources | Master Design
- Designing CSS Buttons: Techniques and Resources | WebsGeek
Would you apply this to links within table cells? Are there times where too much button “hit” coverage would be a usability problem?
Hi Jon, thanks for comment and interesting question! I think I would go on case-by-case consideration in this situation. Generally speaking I would say YES, make the cell link as well (this blog fails at doing so for links in menus, I am aware of that…). That would lower the number of missed clicks on any given hyperlink. Even in Vista, Microsoft has decided to use this approach when selecting rows in Windows Explorer.
As for usability issues with this scenario – I can see one and that is fact that two “linked cells” will share a common border so if user is clicking really close to that border they might be selecting cell / link that they did not want to select in the first place. However, taking all things into account, users do spend most of their time clicking close to labels and central parts of hyperlinks / buttons / cells so this “border case” should not be a problem.
Just make the target as big as possible – without being silly.
Example: you have a table cell that contains clickable text eg
“Print
this
page”
Best way is to make the whole cell into a link so its easier.