In the world of usability and user experience, clickability is a bit of a contentious and problematic subject. This is due to a few things, one of which being the boom in mobile-centric design. We’ve already talked about the perils of adopting a mobile first mentality, especially this soon. So I won’t spend your time nitpicking on that again, but it bears saying that that foolhardy mentality is part of the problem with this.
Clickability entails a number of attributes including visibility, control scale and addressing of input methodologies. The biggest problem is that it’s easy, from a detached design perspective, to think that tapping on a screen to click something is mechanically no different than clocking a button with a mouse in the more traditional, removed mechanic.
However, this isn’t true. On top of touch screens insidiously making the whole situation different, the type of touch screen matters as well. Conventionally, there are three types of touch interfaces commonly used today – magnetic proximity (which graphics tablets also use), resistive and capacitive. Each of these has its own set of hurdles. In all reality, the most precise one is the magnetic proximity model, but very, very few tablet PCs and mobile devices use these. It’s a pity (though understandable), because the precision of this particular method is almost analogous to mice and pen tablets.
Resistive touch screens are sensitive to human fingers, but do not support multi-touch. PDAs and early smart phones exemplify the use of this technology. Capacitive touch screens, which are the most imprecise, ironically allow the most complexity with multi-touch. It’s a mess for clickability.
The problem is, you don’t know what kind of device is going to be rendering your design at any given time, so you’re left with no choice but to try to optimize your controls, links and other content so that it’s easy to hit no matter what.
The best way to do this is to have at least five pixels of separation between collections of clickable items, first and foremost. This way the less precise finger clicks don’t overlap the control boundaries.
Along with this, keeping controls away from the extreme borders of the screen area is very important. When it comes to mobile apps and web designs, I’ve had trouble clicking things along the top and bottom of the screen, having to mash the heck out of them. This unintentional multiple pressing instinct is one of the biggest problems with clickability.
Finally, it’s best to avoid clicks based on right clicking. This is because with mobile devices, you have to use what’s called a “long tap” in its place, and it’s awkward at best.
Finally, make sure the user knows they’ve clicked the button or control, so they don’t feel the need to keep trying to press it. Use mouse down animations, border highlighting and the like to show that the control felt the click.
Clickability is a bit more of an involved science than you might have thought, isn’t it? It’s almost entirely because of the multi-platform multi-input device industry that currently exists. Once the input methods and technologies in mobile begin to suck a little less than they still kind of do, it’ll be less convoluted, most likely. Still, for now, bear these things in mind if you want a positive user experience.
