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