Menu Search
Jump to the content X X

Sponsored Article Experience Design 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. Designers love to get the big picture right, but if the details aren’t handled properly, the solution will fail. The magic is all in the details. That’s why well-designed microinteractions make experiences feel crafted.

To get a better understanding of how your design benefits from microinteractions, it will help to sketch out your app ideas. Adobe introduced a new design and wireframing app called Experience Design (or Adobe XD) which lets you design wireframes and make them interactive. You can download and test Adobe XD1 for free.

Further Reading on SmashingMag: Link

Show System Status Link

Jakob Nielsen’s first heuristic for UI design states, “The system should always keep users informed about what is going on, through appropriate feedback in a reasonable time.” This means that the user interface should keep the user abreast of what is happening by providing feedback. The app shouldn’t keep the user 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 great opportunities for creative animated microinteractions.

microtwo18

Data downloading animation (Image: Nick Buturishvili9)

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.

microtwo210

Pull down to refresh (Image: Toma Reznichenko11)

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

Make Buttons And Controls Tangible Link

User interface elements such as buttons and controls should appear tangible, even though they are behind a layer of glass. Visual and motion cues can bridge this gap by acknowledging input immediately and animating in ways that look and feel like direct manipulation. UI buttons can mimic interaction with common physical objects. Simply put, you can add clarity through visual responses to the user’s input.

microtwo312

(Image: Google13)

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

Build Meaningful Transitions Link

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

Icons can morph from one shape to another, serving dual functions at different times.

microtwo414

(Image: Google15)

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 those screens.

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

microtwo516

(Image: Rian Van Der Merwe17)

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

microtwo618

(Image: Ehsan Rahimi19)

Takeaway: Microinteractions can establish a visual connection between pages and add clarity to the UI.

Help The User Get Started Link

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

microtwo720

Smooth onboarding (Image: Ramotion21)

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

Highlight Changes In The UI Link

Microinteractions can direct the user’s attention. In many cases, animation is used to attract their attention to an important detail (such as a notification). However, be sure that the animation serves a functional purpose and is appropriate to your users.

microtwo822

Notification (Image: Arjun Kani23)

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

Add Delightful Details Link

The most basic use of a microinteraction animation is in transitions. However, an app can truly delight users 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.

microtwo924

Social media sharing (Image: Kei Sato25)

Takeaway: Focus on user emotions, which play a huge role in UI interactions.

What To Consider When Designing Microinteractions Link

When you create a visual design containing the elements discussed above, keep a few things in mind:

  • Make microinteractions almost invisible and completely functional.
    Make sure the animations fit a functional purpose and do not 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 hundredth use.
  • Follow the KISS principle26.
    Over-designing a microinteraction can be lethal. Microinteractions shouldn’t overload the screen and cause a long process of loading. Rather, they should save time by instantly communicating valuable information.
  • Don’t start from zero.
    You will almost always know something about your target audience and their context. Use that knowledge to make your microinteractions more precise and effective.
  • Create visual harmony with the other UI elements.
    Microinteractions should match the general style of the application, supporting a harmonious perception of the product.

Conclusion Link

Microinteractions show 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 make your app stand out from the competition because they can be either practical and forgettable or impressive, useful and unforgettable.

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.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app27 is made for a fast and fluid UX design process, as it lets you sketch out ideas, create interactive prototypes, test and share them all in one place.

You can check out more inspiring projects created with Adobe XD on Behance28, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free29.

(ms, vf, il, al)

Footnotes Link

  1. 1 http://adobe.ly/2aNMUAX
  2. 2 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  3. 3 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  4. 4 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  5. 5 https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
  6. 6 https://www.smashingmagazine.com/2016/07/quick-ux-prototyping-with-adobe-xd-shortcuts-pdf-cheatsheet/#comments
  7. 7 https://www.smashingmagazine.com/2016/08/prototyping-for-success/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo1-large.gif
  9. 9 http://www.materialup.com/posts/download-animation
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo2-large.gif
  11. 11 https://dribbble.com/shots/2101933-GIF-for-Pull-Down-Space-Ship
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo3-large.gif
  13. 13 http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo4-large.gif
  15. 15 https://www.google.com/design/spec/material-design/introduction.html
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo5-large.gif
  17. 17 http://www.elezea.com/2013/09/ios7-parkour/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo6-large.gif
  19. 19 https://dribbble.com/shots/1640866-Alarm-Material-UI
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo7-large.gif
  21. 21 https://dribbble.com/shots/1849030-Onboarding-for-Muzo-App
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo8-large.gif
  23. 23 https://dribbble.com/shots/1646262-Twitter-Bell-Animated
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/07/microtwo9-large.gif
  25. 25 https://dribbble.com/shots/1961558-Twitter-share-button
  26. 26 https://en.wikipedia.org/wiki/KISS_principle
  27. 27 http://adobe.ly/2aNMUAX
  28. 28 http://adobe.ly/1U9LS0E
  29. 29 https://creative.adobe.com/products/download/experience-design

↑ 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

    Good. Now how do we go about creating these animated icons? Which tools do we use?

    13
  2. 6

    Jonas Sandstedt

    August 11, 2016 7:40 am

    Is it only me, or is a page transition really a micro interaction? Would be curious how you would define micro interaction. I believe it’s only for smaller (hence micro) UI elements such as buttons and icons, not content or larger UI animations.

    4
  3. 7

    I think there is misinterpretation of the term microinteraction. This article just speaks about visual feedbacks and micro animations. The interaction cant’ be micro, what is micro sometime is the UX

    4
  4. 8

    Very interesting, Microsoft uses animation on their live titles, what do you think of it?

    0

↑ Back to top