Designing for tap and hold durations in mobile UX

Whether you tap long and hard or short and lightly, mobile app screens and flows should accommodate different tap lengths.

The problem

I first observed this while watching my mother-in-law using her phone. She’s learnt how to use a smartphone later in life compared to millenials, but she’s incredibly adept. She uses Whatsapp and browses the internet, takes/shares/receives photos and video, and uses phone and messaging functions. 

An interesting problem she frequently encountered was that she tapped slightly longer than perhaps the “average” smartphone user would. This led to one of several possible errors occurring:

  • if there is a button on the next screen exactly underneath where the finger is and therefore the original tap, then the screen will effectively “skip” a screen and suddenly become something else, and she could be confused why she is on that screen

  • a long tap vs a short tap can now mean different things in different phones and apps, and produce an edge or undesired effect

  • with 3D touch, screens are now even sensitive to the weight of the touch, which can also product different results depending how much force you put into the tap

  • the keyboard has all kinds of extra shortcuts and symbols that can be triggered with different tap length, stroke, or double taps

  • double taps are sensitive to speed — not everybody interprets it the same way, so it might be useless to some people

All these errors essentially boil down to something confusing and often annoying happening when the tap length is outside the normal range. 

Solutions using accessibility features

I decided to dig a little deeper into tap lengths, and I actually found very little information on it. 

iPhone accessibility features have lots of ways to adjust the way you touch your phone and how it registers. You can change the 3D touch sensitivity on iPhones, and even change the hold duration (duration you have to touch a screen before its recognized) and tap assistance. There’s even some options for this on Android phones.

 
fullsizeoutput_4042.jpeg
 

But as great as these accessibility tools get, it doesn’t excuse apps that are poorly designed or create inconvenient flows if the user has different tapping behavior. Even though the accessibility functions are powerful, they can still lead to error, because as humans we are not perfect and consistent. It would still be preferential to have apps that avoid this problem altogether and work for all different types of tappers.

Some possible solutions

I thought about some of the easiest ways that can help create buttons or CTAs that avoid any such problems to do with tap duration:

  • Don’t involve fancy interactions with buttons or links that are sensitive to double tap or long/short taps (unless it’s a game)

  • Do not place buttons directly underneath another button in an app flow

 
Tapping on the first button for too long might lead to accidentally clicking the button on the next screen unintentionally.

Tapping on the first button for too long might lead to accidentally clicking the button on the next screen unintentionally.

 
  • Don’t make buttons too small, so that you can still see the button state change as it is tapped, which gives the indication to let go

 
You could easily miss the buttons on the left screen.

You could easily miss the buttons on the left screen.

 
  • Create a clear outline where the button begins and ends, to avoid mis-taps which can be frustrating

 
To avoid tapping outside the button boundary, outline it so that you can still see where you are tapping in case of a state change.

To avoid tapping outside the button boundary, outline it so that you can still see where you are tapping in case of a state change.

 
  • Use clear visual state change when the tap has been recognized

  • Fingertips are approximately 8-10 mm in diameter, so make sure your button is sized accordingly

Although this might seem like an “edge” case, I actually think it’s not. As users we are inconsistent - we don’t always tap for the same length of time, we might be juggling a phone and other things or trying to do something quickly while walking to minimize the distraction. Many factors could lead us to tap or hold inconsistently or unnecessarily. By creating apps that don’t create as much confusion or error when this happens, we create more seamless experiences.

So that’s my brief take on tap and hold durations in mobile UX design. Designing inclusively means designing for the better, so I think it’s always important to be thinking about cases like these.