{"id":8824,"date":"2021-05-06T11:33:06","date_gmt":"2021-05-06T09:33:06","guid":{"rendered":"https:\/\/userlutions.com\/blog\/about-us\/micro-interactions\/"},"modified":"2023-08-07T16:39:05","modified_gmt":"2023-08-07T14:39:05","slug":"micro-interactions","status":"publish","type":"post","link":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/","title":{"rendered":"Let&#8217;s get emotional &#8211; create unique and likeable products with Micro Interactions"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>It&#8217;s the little things in life: Being woken up by the chirping of birds, the smell of coffee in the morning, a smile and a kind word from the newspaper seller&#8230; without these details, life would be a lot less fun.<\/p>\n<p>The same is true in web design. A website may work without small animations, nice messages and aesthetic design, but used correctly, small details can contribute a lot to a good user experience. And that includes Micro Interactions&#8230;.<br \/><br class=\"clear\"><\/p>\n<h2>What are Micro Interactions?<\/h2>\n<p>Micro-interactions are short events that ostensibly serve a single purpose. We use thousands of them every day: When we turn off the alarm clock in the morning, when we turn up the volume of the music, when we turn on the coffee machine and when we turn on the tap. And most of the time, we don&#8217;t notice them until they don&#8217;t work.<br \/>Implemented well, they can therefore make the difference between a product that the user loves and one that he tolerates to the maximum.<\/p>\n<p>Good micro-interactions delight users: they welcome them, they encourage them to interact, and they make a technical product seem human. Used correctly, they make a product exciting and contribute to an emotional connection between users.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/Form-klein.gif\" alt=\"Possible Micro Interaction in a form\" width=\"300\" height=\"439\" class=\"aligncenter wp-image-5956 size-full\"><\/p>\n<p>Some international online shops and apps are already consciously using this form of human-machine interaction. In Germany, however, good micro-interactions are not yet widespread, mostly still gathering dust in the portfolios of UX &amp; UI designers.<br \/><br class=\"clear\"><\/p>\n<h2>Why are Micro Interactions important?<\/h2>\n<p>For example, let&#8217;s look at this Micro Interaction:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/ButtonProgress-klein.gif\" alt=\"Micro Interaction during file upload\" width=\"300\" height=\"439\" class=\"aligncenter wp-image-5958 size-full\"><\/p>\n<p>Superficially, it is used to start the upload. However, it also fulfils these tasks:<\/p>\n<ul>\n<li>It shows the status and progress of the upload<\/li>\n<li>Users receive clear feedback<\/li>\n<li>It shows the user the result of his action<\/li>\n<\/ul>\n<p>This little animation is a big win for the user experience!<br \/><br class=\"clear\"><\/p>\n<h3><strong>The benefits of Micro Interactions at a glance:<\/strong><\/h3>\n<ul>\n<li><strong>Nonverbal communication:<\/strong> They act as a kind of body language for digital products.<\/li>\n<li><strong>User guidance:<\/strong> Users are taken by the hand and guided better through the product.<\/li>\n<li><strong>Emotionality:<\/strong> Micro interactions make the product appear more likeable and emotional, which increases identification with the product.<\/li>\n<li><strong>Gamification:<\/strong> They can also be used for playful elements, which increases the motivation of users to use a product (permanently).<\/li>\n<li><strong>Comprehensibility:<\/strong> Whether for digital natives or for older target groups &#8211; micro interactions are organically designed and follow the physical laws of nature so that they can be understood by everyone.<\/li>\n<li><strong>Uniqueness:<\/strong> They give their product character and individuality. It therefore remains in the user&#8217;s memory, also because micro interaction is currently not used very often.<\/li>\n<\/ul>\n<h2>Best Practices for Micro Interactions<\/h2>\n<p>Used correctly, Micro Interactions are great for UX, but there are a few things to keep in mind:<\/p>\n<ul>\n<li><strong>Clear triggers:<\/strong> The user must immediately recognize how to execute the micro interaction, for example by clicking a button.<\/li>\n<li><strong>Clear feedback:<\/strong> The user must be informed immediately and reliably about success, failure or the duration of the action.<\/li>\n<li><strong>Be careful with animations:<\/strong> Small animations are often used for micro-interactions, but caution is advised here:\n<ul>\n<li>As short as possible: According to Google, animations should not last longer than 400 miliseconds. They should not be perceived as delaying the process.<\/li>\n<li>Not too fancy: What might be a nice surprise the first time, wears off quickly and can even be perceived as annoying after a while.<\/li>\n<li>Detailed guidelines for the use of animation: <a href=\"https:\/\/material.io\/design\/motion\/#principles\">material.io<\/a><\/li>\n<\/ul>\n<\/li>\n<li><strong>Simplicity:<\/strong> Only what is really necessary should be presented, nothing distracting.<\/li>\n<\/ul>\n<p><br class=\"clear\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/Basket-klein.gif\" alt=\"Product is added to the shopping cart with a Micro Interaction\" width=\"230\" height=\"337\" class=\"alignnone wp-image-5948 size-full\">   <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/Swipe_Carousel-klein.gif\" alt=\"Micro Interactions when swiping through an image gallery\" width=\"230\" height=\"337\" class=\"alignnone wp-image-5949 size-full\">   <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/Input-klein.gif\" alt=\"Progress bar with Micro Interaction\" width=\"230\" height=\"337\" class=\"alignnone wp-image-5950 size-full\"><br \/><br class=\"clear\"><\/p>\n<h2>Conclusion: Consider Micro Interactions in the Design Process<\/h2>\n<p>Focusing on micro interactions when <a href=\"https:\/\/userlutions.com\/en\/ux-and-design\/ui-design\/\">designing websites and apps<\/a> pays off &#8211; they&#8217;re the details that make all the difference.<\/p>\n<p>Therefore, look at your existing user interfaces to see what micro interactions exist and whether they can be simplified or made more playful. Perhaps even individual steps, elements, or interactions can be eliminated or combined to increase usability and improve the UX.<\/p>\n<p>The design of micro interactions should always be taken into account in <a href=\"https:\/\/userlutions.com\/en\/ux-and-design\/prototype-design\/\">new conceptions<\/a>.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s the little things in life: Being woken up by the chirping of birds, the smell of coffee in the morning, a smile and a kind word from the newspaper seller&#8230; without these details, life would be a lot less fun.The same is true in web design. A website may work without small animations, nice [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":7115,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","inline_featured_image":false},"categories":[98],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating unique products with micro interactions<\/title>\n<meta name=\"description\" content=\"The benefits of Micro Interactions: emotionality, comprehensibility, uniqueness, user guidance and much more. How To and Best Practices read here....\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating unique products with micro interactions\" \/>\n<meta property=\"og:description\" content=\"The benefits of Micro Interactions: emotionality, comprehensibility, uniqueness, user guidance and much more. How To and Best Practices read here....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\" \/>\n<meta property=\"og:site_name\" content=\"Userlutions\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/userlutions\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-06T09:33:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-07T14:39:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/micro-interactions-fb.jpg\" \/>\n<meta name=\"author\" content=\"Jakob Sawal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/micro-interactions-twitter.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Userlutions\" \/>\n<meta name=\"twitter:site\" content=\"@Userlutions\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jakob Sawal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\"},\"author\":{\"name\":\"Jakob Sawal\",\"@id\":\"https:\/\/userlutions.com\/#\/schema\/person\/a357a7a9d83209529a26efd83d628121\"},\"headline\":\"Let&#8217;s get emotional &#8211; create unique and likeable products with Micro Interactions\",\"datePublished\":\"2021-05-06T09:33:06+00:00\",\"dateModified\":\"2023-08-07T14:39:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\"},\"wordCount\":731,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/userlutions.com\/#organization\"},\"articleSection\":[\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\",\"url\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\",\"name\":\"Creating unique products with micro interactions\",\"isPartOf\":{\"@id\":\"https:\/\/userlutions.com\/#website\"},\"datePublished\":\"2021-05-06T09:33:06+00:00\",\"dateModified\":\"2023-08-07T14:39:05+00:00\",\"description\":\"The benefits of Micro Interactions: emotionality, comprehensibility, uniqueness, user guidance and much more. How To and Best Practices read here....\",\"breadcrumb\":{\"@id\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/userlutions.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Let&#8217;s get emotional &#8211; create unique and likeable products with Micro Interactions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/userlutions.com\/#website\",\"url\":\"https:\/\/userlutions.com\/\",\"name\":\"Userlutions\",\"description\":\"UX-Agentur aus Berlin\",\"publisher\":{\"@id\":\"https:\/\/userlutions.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/userlutions.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/userlutions.com\/#organization\",\"name\":\"Userlutions GmbH\",\"url\":\"https:\/\/userlutions.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/userlutions.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/userlutions.com\/wp-content\/uploads\/2021\/03\/UL-logo-big.png\",\"contentUrl\":\"https:\/\/userlutions.com\/wp-content\/uploads\/2021\/03\/UL-logo-big.png\",\"width\":1668,\"height\":850,\"caption\":\"Userlutions GmbH\"},\"image\":{\"@id\":\"https:\/\/userlutions.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/userlutions\/\",\"https:\/\/twitter.com\/Userlutions\",\"https:\/\/www.linkedin.com\/company\/10692792\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/userlutions.com\/#\/schema\/person\/a357a7a9d83209529a26efd83d628121\",\"name\":\"Jakob Sawal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/userlutions.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dad55faf36097f15af5e34f7c9ea6ad2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dad55faf36097f15af5e34f7c9ea6ad2?s=96&d=mm&r=g\",\"caption\":\"Jakob Sawal\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jakob-sawal-91132b134\/\"],\"url\":\"https:\/\/userlutions.com\/en\/blog\/author\/jakob-sawal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating unique products with micro interactions","description":"The benefits of Micro Interactions: emotionality, comprehensibility, uniqueness, user guidance and much more. How To and Best Practices read here....","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/","og_locale":"en_US","og_type":"article","og_title":"Creating unique products with micro interactions","og_description":"The benefits of Micro Interactions: emotionality, comprehensibility, uniqueness, user guidance and much more. How To and Best Practices read here....","og_url":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/","og_site_name":"Userlutions","article_publisher":"https:\/\/www.facebook.com\/userlutions\/","article_published_time":"2021-05-06T09:33:06+00:00","article_modified_time":"2023-08-07T14:39:05+00:00","og_image":[{"url":"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/micro-interactions-fb.jpg"}],"author":"Jakob Sawal","twitter_card":"summary_large_image","twitter_image":"https:\/\/userlutions.com\/wp-content\/uploads\/2020\/03\/micro-interactions-twitter.jpg","twitter_creator":"@Userlutions","twitter_site":"@Userlutions","twitter_misc":{"Written by":"Jakob Sawal","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/#article","isPartOf":{"@id":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/"},"author":{"name":"Jakob Sawal","@id":"https:\/\/userlutions.com\/#\/schema\/person\/a357a7a9d83209529a26efd83d628121"},"headline":"Let&#8217;s get emotional &#8211; create unique and likeable products with Micro Interactions","datePublished":"2021-05-06T09:33:06+00:00","dateModified":"2023-08-07T14:39:05+00:00","mainEntityOfPage":{"@id":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/"},"wordCount":731,"commentCount":0,"publisher":{"@id":"https:\/\/userlutions.com\/#organization"},"articleSection":["UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/","url":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/","name":"Creating unique products with micro interactions","isPartOf":{"@id":"https:\/\/userlutions.com\/#website"},"datePublished":"2021-05-06T09:33:06+00:00","dateModified":"2023-08-07T14:39:05+00:00","description":"The benefits of Micro Interactions: emotionality, comprehensibility, uniqueness, user guidance and much more. How To and Best Practices read here....","breadcrumb":{"@id":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/userlutions.com\/en\/blog\/ux-design\/micro-interactions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/userlutions.com\/en\/"},{"@type":"ListItem","position":2,"name":"Let&#8217;s get emotional &#8211; create unique and likeable products with Micro Interactions"}]},{"@type":"WebSite","@id":"https:\/\/userlutions.com\/#website","url":"https:\/\/userlutions.com\/","name":"Userlutions","description":"UX-Agentur aus Berlin","publisher":{"@id":"https:\/\/userlutions.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/userlutions.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/userlutions.com\/#organization","name":"Userlutions GmbH","url":"https:\/\/userlutions.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/userlutions.com\/#\/schema\/logo\/image\/","url":"https:\/\/userlutions.com\/wp-content\/uploads\/2021\/03\/UL-logo-big.png","contentUrl":"https:\/\/userlutions.com\/wp-content\/uploads\/2021\/03\/UL-logo-big.png","width":1668,"height":850,"caption":"Userlutions GmbH"},"image":{"@id":"https:\/\/userlutions.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/userlutions\/","https:\/\/twitter.com\/Userlutions","https:\/\/www.linkedin.com\/company\/10692792\/"]},{"@type":"Person","@id":"https:\/\/userlutions.com\/#\/schema\/person\/a357a7a9d83209529a26efd83d628121","name":"Jakob Sawal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/userlutions.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dad55faf36097f15af5e34f7c9ea6ad2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dad55faf36097f15af5e34f7c9ea6ad2?s=96&d=mm&r=g","caption":"Jakob Sawal"},"sameAs":["https:\/\/www.linkedin.com\/in\/jakob-sawal-91132b134\/"],"url":"https:\/\/userlutions.com\/en\/blog\/author\/jakob-sawal\/"}]}},"_links":{"self":[{"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/posts\/8824"}],"collection":[{"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/comments?post=8824"}],"version-history":[{"count":0,"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/posts\/8824\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/media\/7115"}],"wp:attachment":[{"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/media?parent=8824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/categories?post=8824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/userlutions.com\/en\/wp-json\/wp\/v2\/tags?post=8824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}