Make complete button surface active and enhance usability

Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today. 

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.

Start button and Taskbar in Windows during time

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:

MySpace Log In button usability failure

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:

Facebook guys are better when it comes to active surface and button surface ratio

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!

Comments (3)

  1. Would you apply this to links within table cells? Are there times where too much button “hit” coverage would be a usability problem?

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

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

Trackbacks

  1. Pingback: Vibor Cipan

  2. Pingback: Vibor Cipan

  3. Pingback: Vibor Cipan

  4. Pingback: Vibor Cipan

  5. Pingback: Diego Priliac

  6. Pingback: Designing CSS Buttons: Techniques and Resources – Smashing Magazine

  7. Pingback: typoglyphic.com » Designing CSS Buttons: Techniques and Resources – Smashingmagazine.com

  8. Pingback: Designing CSS Buttons: Techniques and Resources | Programming Blog

  9. Pingback: Designing CSS Buttons: Techniques and Resources

  10. Pingback: Designing CSS Buttons: Techniques and Resources | Buddy’s Blog

  11. Pingback: Barker Design | Graphic & Web Development » Blog Archive » Designing CSS Buttons: Techniques and Resources

  12. Pingback: Wordpress Blog Services – Designing CSS Buttons: Techniques and Resources

  13. Pingback: Vibor Cipan

  14. Pingback: Flammend

  15. Pingback: Designing CSS Buttons: Techniques and Resources – Webreweries.com

  16. Pingback: Designing CSS Buttons: Techniques and Resources | WORDPRESS-TEMPLATES-PLUGINS-RSS

  17. Pingback: Designing CSS Buttons: Techniques and Resources | Master Design

  18. Pingback: Designing CSS Buttons: Techniques and Resources | WebsGeek