Instagram Made Me Rethink About Touch Targets
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.
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.
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.
By Ritwik Mital
About Galaxy WeblinksWe specialize in human-centric user experience design services to our clients across the globe. Our innovative ideas, creative designs, industry best practices, and processes help us improve user satisfaction and solve complex design problems. Contact us for a free consultation!
There’s a popular user experience quote: “A user interface is like a joke. If you have to explain it, it’s not that good.” While clever,…Design UI Design
Incessant scrolling while using an application is perceived as a flaw on both mobile and desktop. To address this concern, a shift to horizontal scrolling…Design UI Design UX
User Experience Design is one of our core competencies. In this blog, we will share with you the best practices of designing buttons for your…Design UI Design UX Web Design
We all love harmony in our lives. Harmony of tones and hues, of perfect shapes and negative spaces. Be it in music, interior design, or…Design Design Process UI Design
Contemporary mobile apps have different ways of onboarding and retaining their users. Duolingo, a very popular language-learning application offers free sessions before they ask you…Design Mobile Design UX
Design System is one of the most excessively used design terms in the software industry right now, so much so that it has given birth…Design Design Process UX
If you’ve looked over these tools before, then you’ve probably wondered how they compare when facing off one with another. What’s InVision’s kryptonite? Why Framer…Design Design Tool user experience Web Design