It’s common practice in UX/UI design that the priority is to optimise usability, discoverability and learnability for new users. The navigation and affordances designed should provide sufficient cues to new users to evaluate the system and execute the desired actions.
As users get accustomed to the app and repeatedly use it, they’ll naturally want to complete certain actions faster. This can be achieved by using accelerators.
Accelerators, also known as shortcuts, are UI features that speed up an interaction or process. They make the system more flexible and efficient, which is one of Jakob Nielsen’s ten usability heuristics.
"A highly flexible system satisfies both experienced and inexperienced users by allowing each to complete an action by whatever method works best for them."
As a UX designer for 4 years, I’ve learnt to be more cognizant of the experience I derive from the products and mobile apps I use regularly. From my observations, some of these apps have adopted touch-based gestures as accelerators to improve the user experience.
In this blog post, I will share four tips on how to use touch-based shortcuts for mobile apps.
Use it for an action that is used repeatedly and meaningfully
Certain UI features in apps are helpful and also necessary to support user engagement. For example, in social media apps like Instagram and TikTok, users can tap on a visible heart-shaped icon to show that they like the content.
Both apps also adopt a touch-based accelerator of letting users double-tap on the content to instantly like it. Typical observations among users show that the double-tap is more often used than tapping of the actual icon itself.
Double-tap on the content to like in Instagram
As the content takes up a larger touch area as compared to the heart icon, it takes less effort for the user to double-tap on the content even though a double-tap is an extra tap.
This can be attributed to Fitt’s Law (in respect to UX design) which states that the time to acquire a target is a function of the distance to and size of the target, which simply means — the larger the touch target, the easier and faster it is to execute an action.
Use standard gestures for easy recall
As touch gestures may lack visual cues, there’s a mental load for users to learn and then recall the gestures. On top of that, the gestures also have to be meaningful enough so that the user will repeatedly use it.
One way to make the action easy to recall is to replicate gestures for the same desired actions. As seen in the double-tap-to-like example above, TikTok probably got inspired by Instagram which has been around longer.
And the same gesture can be repurposed for other actions in other apps to suit their own experience. For example, in Youtube’s app, double-tapping on either the right or left side of a video lets users instantly rewind or fast forward by an incremental set of 10 seconds.
Double-tap on the right or left to fast-forward or rewind the video on Youtube
Another example of a common touch-based accelerator will be swiping left. Swiping left on an email in apps like Gmail and Outlook lets users archive that email, while swiping left on a song in the Spotify app lets users add the song to a list of queued songs.
By using common gestures, users don’t have to make the effort to learn a new gesture. They would already have built a mental model from other apps through the same gesture. And by having the gesture associated with a meaningful and useful action to the experience relative to that app, it’ll make it easier for them to repeat the action as they will most likely do so again.
Use shortcuts to supplement and not replace visible UI features
Most touch-based accelerators serve as alternatives to features that are visually seen — either upfront or through progressive disclosure and discovery.
Visible UI is not only helpful to provide clear cues for new users, but also for those who might not easily recall such accelerators. Some users might have difficulty with the app even with repeated usage, perhaps due to poor UI design of the app on some parts.
On the other hand, making the UI invisible and just relying on a touch-based shortcut would just exacerbate the poor experience.
For example, in the Gmail app, users can switch across their different email accounts by tapping on the avatar badge in the search bar and a modal appears with a list of accounts to choose from.
Tap on the avatar badge (yellow circle) to switch accounts in Gmail app
After tapping on the avatar badge, a modal appears
Gmail also introduces a shortcut to supplement the action above which is letting users swipe down on the avatar badge and the accounts will be switched immediately.
Swipe down on the avatar badge to switch accounts in Gmail app
Even though the first UI is only apparent upon discovery, the avatar badge should give cues for the user to recall, such that the next time they tap on it will bring up the modal to switch accounts and also complete other related actions. Swiping down the badge is just a supplementary action to switch the accounts instantly — not a total replacement.
Keep in mind that touch-based accelerators are meant to supplement the visible UI features and not replace them.
Provide a visual feedback for positive reinforcement
A last tip to help users recall the shortcut for the app is to give visual feedback that can provide both confirmation and a sense of delight. With the help of animations and smooth transitions, it makes it easier to implant a positive reinforcement to that action.
"Positive reinforcement means giving a reward to the subject when they perform the desired action so they associate the action with the reward and do it more often. The reward is a reinforcing stimulus."
For instance, some appropriate feedback can come in the form of pulsating, bouncing or mini confetti animations. This creates a delightful stimulus which reinforces users to recall that action and repeat it in the future.
In summary, designers can use the tips above as well as other best practices for touch gestures to add on to the positive user experience for advanced users of the app without compromising the experience for new users.
You can refer to Apple’s and Google’s design guidelines on standard touch gestures for each OS below:
