Menu Search
Jump to the content X X

Sponsored Article In-App Gestures And Mobile App User Experience

Remember the days when hovering and clicking using the mouse were the most used trigger for interaction with site or app? Those days are gone. When Apple introduced the iPhone, multi-touch technology became mainstream and users learned that they could not only point and tap on the interface, but also pinch, spread, and swipe. Gestures are the new clicks.

The rise of touch and gesture-driven devices has dramatically changed the way we think about interaction. Gestures are more than merely entertaining, they are very useful and feel familiar. Today, the success of a mobile app significantly depends on how well gestures are implemented into the user experience. Even Adobe introduced a new design and wireframing app called Experience Design CC (Adobe XD) that lets you prototype on everything from simple wireframes to multiscreen experiences. You can download and test Adobe XD1 for free.

Further Reading on SmashingMag: Link

The Power Of Gesture-Driven User Interfaces Link

The main reason gesture controls feel so natural and intuitive to us is because they resemble interacting with a real object. There are three main reasons to use a gesture over a button:

  • Less Clutter
    The more an app relies on gesture controls, the less buttons appear onscreen, leaving more space for valuable content. This makes the app content-focused and lets the user do what’s most important without obstructions or distractions.
  • Ease of Use
    A gesture, once discovered and learned by a user can become a delightful part of the user experience and can improve interaction by reducing steps in the user flow. For example, when you need to delete items on a mobile device, tapping one item at a time to delete is time consuming. A simple shortcut is to swipe to delete.
  • Seamless Interaction
    While buttons might seem to be useful triggers, gestures have great potential to make interaction with content more intuitive.

Clear is a good example of a “gesture driven” app. The app is based solely on the use of gestures: swipes, pulls, and pinches. It has a minimalist user interface (there are no buttons), and yet, it’s surprisingly simple to use.

Gestures in Clear app for iOS6
Gestures in Clear app for iOS (Image credit7) (Large preview8)

The Role Of Animations In Gesture-Based Design Link

Gestures are invariably linked to animations in mobile apps. Animations play a very important role in maintaining an illusion of interactivity for users. When paired with gestures, animation essentially makes the brain believe that it’s interacting with tangible objects.

Also, animation is invaluable in providing visual feedback to the user. Without animations, users wouldn’t have enough feedback informing them if they’ve successfully completed a gestural action.

Even a very innovative gestural interaction, such as Pull-To-Refresh9, paired with animation has become standard. It feels so intuitive that countless list-based applications adopted this gesture simply by convention.

Pull-To-Refresh action10
Pull-To-Refresh action (Image credit11) (Large preview12)

The Dark Side Of Gestures Link

When designing mobile apps we sometimes assume that the gestures we use in our applications are so natural (natural for us, not for users) that we don’t need to follow basic usability principles. But visibility is still a very important principle to consider when designing mobile apps.

As Thomas Joos points out13, the biggest downside of the gesture controls is a learning curve. Every time you remove UI clutter, the app’s learning curve goes up. This happens because gestures have a lower discoverability — they are always hidden and people need to be able to identify these options. That’s why the more your UI relies on gestures over visible buttons, the greater the possibility for confusion.

Touch Gesture Cards14
Touch Gesture Cards (Image credit15) (Large preview16)

Other things you should take into account before designing a gesture-based interface:

  • Increased User Effort. Most gestures are neither natural nor easy to learn or remember. For example, in most apps a single finger gesture means one thing, the same gesture with two fingers means another, and yet another with three or four.
  • Lack of Feedback. In most cases gestures do not leave behind any record of their path, which means if one makes a gesture and either gets no response or the wrong response, there is little or no information available to help understand why.
  • Lack of Consistency. Most gestures aren’t standard and consistent across apps yet. They are not always obvious for users. Even a simple gesture like swiping over an email item might work differently in various mail apps. For example, in Apple Mail to delete an unread item you should swipe left across the unopened mail and the interface reveals the option to delete the item. In Gmail, swiping to the left marks an email as unread.

Explicit Hints Link

You should design user interfaces (UI) in a way that gives cues to users about the availability of a gesture, because without visual cues users might get confused on how to interact with an app. When it comes to teaching users to use your UI, you should provide a set of visual hints together with animation and progressive disclosure17.

Well executed UI gestures can often be found in games which tend to implement visual hints and progressive disclosure. It’s well known fact that the best games are the ones that let people learn tricks over time, rather than guiding them. For example, Pudding Monsters’ game mechanics are based solely on gestures, but they allow users to get the basic idea of what to do without guessing too much. They showcase a scenario with animation and it immediately becomes clear for users what to do.

Pudding Monsters for iOS18
Pudding Monsters for iOS (Image credit19) (Large preview20)

Conclusion Link

Are gestures a powerful mode of interaction? Yes. Mobile devices have evolved from a brick to sophisticated computers powered by our fingers. Touch and gesture interactions have a lot of potential to make mobile experiences easier and more interesting.

There’s no way to design a mobile app without thinking about gestures. They should serve as facilitators and time savers. In order to design a meaningful gesture you should tie it to an action and allow the gesture to stand with the action. It’s very important to provide feedback, explicit hints as to possible action, and guides for how a gesture is to be conducted.

Footnotes Link

  1. 1 http://adobe.ly/2bVGJg5
  2. 2 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  3. 3 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  4. 4 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/
  5. 5 https://www.smashingmagazine.com/2013/03/sci-fi-interaction-designers-gestural-interfaces/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2-inappgestures-large-opt.jpg
  7. 7 http://realmacsoftware.com/clear/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2-inappgestures-preview-opt.jpg
  9. 9 https://www.macstories.net/news/loren-brichter-talks-about-pull-to-refresh-patent-and-design-process/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/10/3-inappgestures.gif
  11. 11 https://www.behance.net/gallery/24541501/Gear-Powered-Pull-to-Refresh-UI-animation
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/10/3-inappgestures.gif
  13. 13 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/#the-learning-curve
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1-inappgestures-large-opt.png
  15. 15 http://static.lukew.com/TouchGestureGuide.pdf
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1-inappgestures-large-opt.png
  17. 17 https://en.wikipedia.org/wiki/Progressive_disclosure
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-inappgestures.gif
  19. 19 https://itunes.apple.com/us/app/pudding-monsters/id569185650?mt=8
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-inappgestures.gif

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Yantram Studio

    October 6, 2016 10:28 am

    It’s a Very useful article for every one.

    0
  2. 2

    alfieindesigns

    October 6, 2016 1:01 pm

    Actually gesture is a must in every mobile app and yes always a challenge to make it more obvious.

    Maybe some UX solution if to offer user an option like:
    a. To use gesture-driven (default)
    b. To show buttons (optional)

    Just my thoughts :D

    Thanks and God bless always!

    3
  3. 3

    Michał Sadowski

    October 7, 2016 9:11 am

    There’s a thing that’s been bothering me a lot – why so few websites use a draggable menu for mobile? It’s something so simple to write every front end dev should be able to do so, and it’s such a tremendous convenience for an end user. Why?

    1
  4. 4

    Anyone that have good examples of responsive websites (not apps) that uses gestures in an interesting way (in mobile mode)?

    0
  5. 5

    Multitouch gestures in a mobile web UI might be “cool”, but before you invest time and money into implementing such, you might want to consider that the user expectation of how mobile websites work will be working against you. Users aren’t likely to discover gestures on a website by accident because other websites have taught them to expect that gestures don’t work. And this isn’t a bad thing in itself — links and buttons are a universal UX language that’s easy to understand and grasp across different websites.

    Likewise, any time you implement custom event handlers for multitouch events in JavaScript, you’re introducing performance overhead that doesn’t necessarily need to be there.

    Consider a desktop web comparison: drag-and-drop has existed on the desktop for decades, but is not a universal UI paradigm on the web. Ever think about why?

    0
  6. 6

    Chris Raymond

    October 10, 2016 2:16 am

    It’s in the whole area of discoverability that Apple and iOS have gone down the wrong path. Macs used to be synonymous with ease of use. With iOS, it is harder and harder to figure out how to use the basic interface without finding someone to teach you the hidden gestures, or find an online video to show you.

    3

↑ Back to top