The Interactive Imperative in Mobile Design

App Design • UX DesignChris Bank • July 11, 2014 • 6 minutes READ

How gestures and animations are changing the game for mobile app designs

In this article, Chris Bank of UXPin – The UX Design App discusses the importance of interactivity in mobile apps and its impacts impact on mobile design patterns – they’re covered in more detail with examples from over 50 hot mobile apps in UXPin’s free e-book, Mobile UI Design Patterns 2014.

At the heart of many of many new UI design patterns is the evolution of gestures and animations in mobile development.

Moving beyond the stunning new phase of mobile games – where interactivity is king – and branded websites tailored to the latest marketing campaign, mobile app designers and developers have learned the importance of interactivity. Today, applications in every market seem to have some level of interactivity User actions, navigation, and socializing – a recent development this past decade – are all being refined to fit the new form factor of mobile devices and adhere to unique mobile contexts which, until now, have never existed.

In Mobile Design Patterns: A Practical Look, I summarized how to think about mobile design patterns and want to dive deeper into how gestures and animations are dramatically changing implementations of long-existing patterns and allowing for brand new ones to be conceived. To help illustrate my point, I’ve deconstructed an abundance of mobile design patterns and elements from the hottest mobile applications around – Uber, Pinterest, Tinder, OKCupid, Spotify, Instagram, Dropbox, Secret, Flipboard, Snapchat, Mailbox and many, many more –in UXPin’s new e-book, Mobile UI Design Patterns 2014. Some of the UI design patterns and elements are also covered in UXPin’s free Web Design Trends, Mobile Design Trends, and The Guide to Wireframing e-books – bookmark them for another time since there’s a lot to catch up on.

Gestures

Remember the days when clicking, hovering, scrolling, and keyboard shortcuts were the only triggers for web interactions? Although they’re not the only triggers today, they certainly dominate the user experience across the web.

Mobile application design, on the other hand, has exploded with new design patterns and their implementations. Made possible by advancing hardware and software capabilities, the mobile space is developing with unprecedented levels of human-computer interactions. These solutions are largely empowered by new gestures. And, marked by responsive design advancements, web and mobile design is rapidly converging so applications may be build for all device shapes and sizes — this will have a dramatic and re-invigorating impact on design of the web experience.

If we look at Android’s current gestures, you get a sense of how many ways someone could interact with a pattern as simple as a calendar, message or picture gallery.

 

If we glimpse into Apple’s treasure trove of multi-touch gesture patents, your mind might explode with the possible solutions you could design. While the gesture examples below are from a 2010 patent filing, many have yet to be implemented and Apple’s archive of gesture patents extends far beyond these examples. Consider it a glimpse into the “Minority Report” future.

Android, iOS, and other mobile platforms will continue to provide an increasing variety of gestures natively that can be implemented for taking particular actions or navigating through the app. Not only does this help preserve screen real-estate by eliminating some of the on-screen buttons, but it also makes the experience intuitive and fun. Combine this with various animations, and you can have a field day with the ways you can implement UI design patterns in your mobile applications.

Animations

The best thing about using gestures on mobile is that they feel so intuitive and responsive in the same way a real object would. Animations play a very important role in maintaining that illusion for users and keeping them grounded in the UI.

Beyond the tangibility of animations, they’re often used to delight users by manipulating the laws and lens of nature. Timing, velocity, bounciness, image and color transitions, scrolling, and myriad other settings allow designers to tweak the user experience in seemingly limitless ways that can be both surprising and amazing.

The sheer variety of animations coupled with gestures not only adds an element of fun to the experience, but are invaluable in providing visual feedback and affordance to the user. We touch on it briefly here but will go in-depth later on our blog and design library.

Captivate is a great site to see animations from popular mobile apps.

If you want to see a ton of transitions without the frills, Dan Silver has some inspiration.

A Prime Example of Interactivity

Pinterest, one of the most notably immersive and interactive e-commerce companies of our time, shines once again with it’s implementation of the “Discoverable Controls” design pattern in it’s mobile app. Below, I’ve detailed the problem this pattern is solving and how the solution uses animations and gestures beautifully.

The User’s Problem

The user wants to interact with content without obstructing the experience.

Pinterest’s Solution

Pinterest clears the typical clutter on e-commerce or content sites by removing almost all extra information or action buttons in the primary application view. This minimalist approach let’s the user do what’s most important on a site like this – dive into the content by viewing, dragging, swiping, touching, etc. without any obstructions or distractions.

As expected, when users tap on the image, they’re taken to a detailed view of it to explore more information about a picture that captures them. There, they can also take primary actions such as pinning, sending, or editing the image as you can do on the website. There is no indication that they can do anything else. However, if they hold on the image, they’ll discover these same actions when 3 separate bubbles spring out from under the user’s fingertip. The user may try to tap on one of these buttons by releasing their finger from the screen, only to find that they’ve disappeared back under the fingertip as it’s removed. After repeating this process once or twice, the user will quickly learn that they must hold on the screen and drag their finger to one of the bubble buttons to take an action. When doing so, the button they hover over fades quickly into red to let the user know it’s been selected. Once the user removes their finger, the action is taken.

This entire experience is both delightful because of the playful animations used for the discoverable controls but also because the gestures used to interact with the controls are intuitive. Unique to Pinterest and other sites like it, this implementation of the “discoverable controls” design pattern also makes the content itself feel more tangible – similar to how Tinder’s swiping of dating profiles has become remarkably addictive.

Ride The Interactive Wave

It’s an exciting time for mobile design, and the examples of how gestures and animations are being used in mobile applications is exploding. For a deeper look at how some of the hottest companies are using them for new and existing design patterns and elements, check out UXPin’s new e-book, Mobile UI Design Patterns 2014. Use what you need and scrap the rest – but make sure to tailor them to solve your own problems and, most importantly, those of your users.