{"id":27832,"date":"2016-08-29T23:02:31","date_gmt":"2016-08-29T15:02:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27832"},"modified":"2018-04-09T18:36:33","modified_gmt":"2018-04-09T10:36:33","slug":"mobile-app-design-microinteractions","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/mobile-app-design-microinteractions\/","title":{"rendered":"Understanding Microinteractions in Mobile App Design"},"content":{"rendered":"

Usability is one of the key components of mobile UI design<\/strong>. Great usability often involves microinteractions<\/strong> which are small responses and behaviors from an interface<\/strong> dictating how the UI should be used. These microinteractions define behaviors, encourage engagement, and help users visualize how an interface should work.<\/p>\n

Digital interfaces<\/strong> are the middlemen between users and their desired goals. Interface designers create experiences that help users perform certain tasks<\/strong>. For example, a todo list app has an interface that helps users organize their tasks. Just like a Facebook app gives users an interface to interact with their Facebook account.<\/p>\n

In this guide, I will delve further into microinteractions for mobile apps<\/strong>. Small interactions may seem trivial but they can have an immense impact<\/strong> on the quality of a user\u2019s experience. When done properly, microinteractions feel like a genuine part of the overarching mobile user experience.<\/p>\n

The Power of Microinteractions<\/h2>\n

In most cases the goal of a microinteraction is to provide feedback<\/strong> based on the user\u2019s action. This can help users visualize how the interface moves or behaves<\/strong>, even though it\u2019s purely digital on a flat screen.<\/p>\n

Microinteractions have power because they create an illusory experience<\/strong>. On\/off sliders don\u2019t really move like physical switches, but they can appear to move this way through animations.<\/p>\n

\"IOS
IMAGE: Dribble<\/a><\/figcaption><\/figure>\n

I found an incredible quote in this post<\/a> discussing the immense value of microinteractions for mobile apps:<\/p>\n

\u201cThe best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.\u201d<\/p><\/blockquote>\n

The small details<\/strong> may seem insignificant from a development standpoint, but from a user experience standpoint they genuinely make the difference<\/strong> between an OK app UI and an extraordinary app UI.<\/p>\n

Great microinteractions make the user feel rewarded<\/strong> for taking an action. These actions can be repeated<\/strong> and ingrained into the user\u2019s behavior<\/strong>. They can learn how to use an application based on these smaller microinteractions. When the user performs a behavior, these small interactions signal \"yes, you can interact with me!\"<\/p>\n

Take a look at the examples found in Google\u2019s material design specs<\/a>. The documentation actually has an entire section dedicated to material motion<\/a>. Spatial relationships<\/strong> are a big part of this equation, but motion can dictate more than just spatial relationships.<\/p>\n

Here are the most common uses of animation and motion<\/strong> in mobile UI\/UX design:<\/p>\n