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.

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.

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).

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

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.

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.

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.

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.