hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

In-App Gestures And Mobile App User Experience

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 XD1for 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
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20

↑ Back to top

Tweet itShare on Facebook

Article source:


Submit a Review

If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.