Adobe Creative Cloud

April 21, 2016 /UX/UI Design /

XD Essentials: Animated Microinteractions in Mobile Apps

Dariel Fitzkee, the famous magician, once said, “Magic is both in the details and in the performance.” Interaction design is just like that. It could be said that designers love to get the big picture right, but even if the big picture is right, if the details aren’t handled properly, the final solution fails. The magic is all in the details. That’s why well-designed microinteractions make experiences feel crafted.

This article will explore how animated microinteractions take mobile apps from usable to undeniably delightful. In case you missed it, you might want to check out my previous post on microinteractions and their macro impact on user experience first.

Microinteractions as elements of the mobile user experience can be used in a variety of places, around any potential action. In general, they tend to come up in the following areas:

Show System Status

Jakob Nielsen’s first heuristic for UI design said, “The system should always keep users informed about what is going on, through appropriate feedback in a reasonable time.” This means that user interface should keep the user enlightened about what is happening by providing a feedback. The app shouldn’t keep the users guessing — it should tell the user what’s happening, and microinteractions can help you make that known via appropriate visual feedback.

Data uploading and downloading processes are a great space for creative animated microinteractions.

microtwo1

Data downloading animation. Image credit: Materialup

Another well-known animation for this group is ‘pull down to refresh,’ which initiates a process of content updates on mobile devices. A cheerful refresh animation can make users chuckle.

microtwo2

Pull down to refresh. Image credit: Dribbble

Takeaway: Animation provides real-time notification of app’s process status, enabling the user to quickly understand what is going on.

Make Buttons and Controls Tangible

User interface elements like buttons and controls should appear tangible, even though they are behind a layer of glass. To bridge this gap, visual and motion cues acknowledge input immediately, and animate in ways that look and feel like direct manipulation. You simply add clarity through visual reactions on user’s input.

UI buttons imitate interaction with common physical objects.

Takeaway: Visual feedback works because it appeals to the user’s natural desire for acknowledgement. It simply feels good to click through an app and always feel like you know what’s happening.

Build Meaningful Transitions

You can use animation to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.

Icons change from one image to another to serve dual functions at different times.

Motion design can effectively guide the user’s attention in ways that both inform and delight. This is especially good for mobile devices and smartwatches, because it’s impossible to fit a lot of information on a single screen.

Apple iOS UI is a good example of meaningful transitions. In example below, a user selects a folder or app and it zooms into its detailed view (or directly to the app’s main screen).

microtwo5

Image credit: elezea

Another good example is animation that creates visual connections between two states through color and persistent elements. This makes transitioning smooth and effortless.

microtwo6

Image credit: Dribbble

Takeaway: Microinteractions can establish a visual connections between different pages and add clarity to the user interface.

Help the User To Get Started

Microinteractions are very helpful during onboarding. Flawless UX and animations in the onboarding flow have a tremendous impact on how first-time users will engage with an app. They guide and educate users after the launch of an app by highlighting most important features and controls.

microtwo7

Smooth onboarding. Image credit: Dribble

Takeaway: Microinteractions help reveal information and help user to efficiently reach their goal.

Highlight Changes in User Interface

Microinteractions can direct user attention. In many cases animations are used for attracting user’s attention to important details (i.e. notifications). However, you must be sure that animations serve a functional purpose and are appropriate for your users.

microtwo8

Notification. Image credit: Dribble

Takeaway: Microinteractions can be good visual cues for the users.

Add Delightful Details

The most basic use of a microinteraction animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the standard scope of actions. The button below seamlessly changes states and serves dual functions – to inform the user and to create a moment of wonder.

microtwo9

Social media sharing. Source: Dribble

Takeaway: Focus on user emotions, because they play a huge role in user interactions.

What Should You Consider When Designing Microinteractions

When you create a visual design of these elements, keep a few things in mind:

  • Make microinteractions almost invisible and completely functional. Make sure animations fit a functional purpose, and don’t feel awkward or annoying. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
  • Keep longevity in mind . Microinteractions must survive long-term use. What seems fun the first time might become annoying after the 100th use.
  • Follow the KISS principle. Over designing a microinteraction can be lethal. Microinteractions shouldn’t overload the screen causing long process of loading. Instead they should save time by instantly communicating valuable information.
  • Don’t start from zero. You almost always know something about your target audience and the context and that knowledge can make your microinteractions more precise and effective.
  • Create a visual harmony with other UI elements. Microinteractions should correspond with the general style of the application to support a harmonic perception of the product.

Conclusion

Microinteractions prove that attention to small details can deliver big and powerful results. As Charles Eames once said, “The details are not the details. They make the design.” Every element of the design matters. Details are what make your app stand out from your competition, because they can be either practical and forgettable, or impressive, useful, and unforgettable.

You should always design with care and don’t forget that a great design has to happen “full-stack,” from the functional parts down to the microinteractions.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD

Join the discussion

  • By juerg - 1:26 PM on April 21, 2016  

    Why turns the “Data downloading animation” counter clockwise? Irritating.

  • By thanh - 6:14 PM on April 21, 2016  

    This new use’s interface, new awesome design on

  • By Jason - 10:54 AM on April 25, 2016  

    Excellent article.

    • By Nick - 3:22 PM on April 26, 2016  

      Jason, thanks!

  • By Rob - 11:43 AM on April 27, 2016  

    Very cool the way we barely notice a lot of the subtle transitions.