I’m sure you might have come across numerous articles on the web that talk about why we need adequate touch targets for each interactive element on any touch-based interface. (Especially mobiles which have a relatively smaller landscape.)
A ‘touch target’ refers to the area associated with an element that triggers the interaction when users tap on it. This area usually extends beyond the visual shape of an element when it isn’t an explicit part of its design.
Have a look at these two buttons, for instance; one is filled while the other is just textual.
Even though the button on the right does not have a visual shape like the other one, its touch target (although not explicitly visible) extends way beyond the text area.
Ideally , these touch targets should be at least 1cm x 1cm (or 38px x 38px) in size, as suggested by Nielsen Norman Group, to promote better capability for users.
Now, I’ve been an avid user of Instagram - which I’m sure you may know, has been one of the world’s most popular apps for quite a long time now - and lately, it struck me that most of the elements on its interface do not follow the common norms for touch targets.
Have a look at this shot, for instance.
Horizontal spacing
In the first highlight, you may notice that all the tags are very close by with hardly any horizontal space left in between. When tags are relatively long, they are much easier to tap on even if they are set close to each other.
Vertical spacing
This type of spacing is usually more concerning in the case of small screens, as no matter how big an element is horizontally, if it is stuffed tightly between two other interactive elements, it’ll be difficult to tap on it.
The same is happening with elements in the second highlight. The action to ‘view comments’ and the ‘profile names’ are very closely stacked.
Another example would be the location link just above the picture in the shot below.
Despite all the discrepancies in spacing, I do not remember a single instance wherein I tapped on an element which I wasn’t intending to tap on!
And I think most of you guys did not, either. Unusual, right? Considering how tight those elements are spatially.
This leads me to believe that the area that we cover when we tap is not that large, after all.
The bigger yellow circle has a dimension of 1cm X 1cm (or 36px X 36px), while the smaller oval (formed by tapping with the right thumb) is 24px (or 0.6cm) long and 15px (or 0.4cm) high - which is essentially how much area we cover while tapping - and it may even be smaller.
If we go by this logic, maybe we can mend our designs to fit more content in a relatively small landscape without sacrificing accessibility… or not? I’d love to know your thoughts on this.