{"id":13885,"date":"2017-12-18T12:14:11","date_gmt":"2017-12-18T12:14:11","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13885"},"modified":"2017-12-18T12:14:11","modified_gmt":"2017-12-18T12:14:11","slug":"microinteractions-secret-great-app-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/","title":{"rendered":"Microinteractions: The Secret of Great App\u00a0Design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The best products do two things well: features and details. Features are what draw people to your product. <em>Details <\/em>are what keep them there. And details are what actually make our app stand out from our competition.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Microinteractions are one of the best techniques for giving delightful feedback.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All roads lead to a <em>human-centered design<\/em> approach, where the user is the prime focus. Often considered accessory or secondary, microinteractions actually create a feeling of well-being once they are discovered by users. As a designer, recognizing the invisibility of microinteractions is just as important as designing them. You have to create something that feels <em>human <\/em>and accomplishes a task.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What is a Microinteraction Anyway?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Microinteractions are the contained product moments that <em>do one small task<\/em>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As first described in Dan Saffer\u2019s book<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.amazon.com\/Microinteractions-Color-Edition-Designing-Details\/dp\/1491945923\"> Microinteractions<\/a>, these tiny details typically serve these essential functions:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Communicate feedback or the result of an action.<\/li>\n<li>Accomplish an individual task.<\/li>\n<li>Enhance the sense of direct manipulation.<\/li>\n<li>Help users visualize the results of their actions and prevent errors.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some examples of specific microinteractions include:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>The vibration notification together with silent mode icon on display when you switch an iPhone to mute.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/0pBCJ7LOFDOXbVpCp.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/0pBCJ7LOFDOXbVpCp.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Interface animation that either shows ability to click (a button that changes color when hovered over).<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1NwFMv5XNa-o73ZtLy6pP1g.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1NwFMv5XNa-o73ZtLy6pP1g.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Source: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2522574-Favourite-micro-interaction\">Dribbble<\/a>.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Why Microinteractions Work<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Microinteractions work because they appeal to the user\u2019s natural desire for <em>acknowledgement<\/em>. The user instantly knows their action was accepted and she wants be delighted by visual rewards. Also microinteractions can guide users in how to work the system.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Identifying Opportunities<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Part of the beauty of microinteractions is that they can be inserted in a variety of places, around any potential action. In general, though, they tend to come up in the following areas:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Show System\u00a0Status<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The first <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\">usability heuristic principle<\/a> by Jakob Nielsen states: keep your user informed about what is going on. And users expect to get responses immediately. But there are situations when an app needs some time before an action is completed.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So, the interface should keep the user enlightened about what is happening.<\/p>\n<div id=\"attachment_6580\" style=\"width: 938px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1QlxjNdUhGAv3bfycfvp0Rw.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1QlxjNdUhGAv3bfycfvp0Rw.gif\" alt=\"\" width=\"928\" height=\"640\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Progress Bar for uploading and downloading. Source: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/1853526-Download\">Dribbble<\/a>.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Or where the user is:<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/125uROlsf4CoKLwRBjqLLBA.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/125uROlsf4CoKLwRBjqLLBA.jpeg\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Scrolling Bar\u00a0Progress<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway: <\/strong>Don\u2019t let your user get bored \u2014 keep the user informed and show them progress (e.g. a loading bar engages the user and prevents confusion).<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Highlight Changes<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sometimes we have to show notifications to make sure the user sees it. Animation can help. It will attract users attention and not let them overlook what you think is important.<\/p>\n<div id=\"attachment_6580\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1872ngtrZTXe6e-4rfXOx-A.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1872ngtrZTXe6e-4rfXOx-A.gif\" alt=\"\" width=\"600\" height=\"450\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">New incoming message. Source: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/1070802-Mail\">Dribbble<\/a>.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway: <\/strong>In many cases animation effects are used for attracting user\u2019s attention to important details. You should use <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/KISS_principle\">KISS principle\u00a0<\/a>\u2014 microinteraction is supposed to be small and simple.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Keep Context<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen. This is especially true for mobile devices and smart watches, because it\u2019s simply impossible to fit a lot of information on one screen.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1qpFT0fZrw0jROh4hT8NK8w.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1qpFT0fZrw0jROh4hT8NK8w.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Material Design<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway: <\/strong>Keep clear navigation between different pages; so the user understands what appeared from where. Transitioning between two visual states should be clear, smooth, and effortless. Unify in a theme \u2014 create a unifying theme to tie together all interactions.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Visualize Input<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Data input is one of the most important elements of any application. And micro-interactions turn this process into something special. You can use existing elements to deliver feedback.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1j2ae_WE7dBpDe3puFdqqzQ.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1j2ae_WE7dBpDe3puFdqqzQ.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Source: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2187649-Credit-card-Checkout-flow-AMEX\">Dribbble<\/a>.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong> Microinteractions help reveal information and help user to reach their goal.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Call to\u00a0Action<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Microinteractions have the power to encourage users to actually interact. They can bring <em>empathy <\/em>in user experience. But make sure the visual cues and animations are appropriate for your users. And keep longevity in mind \u2014 will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1CcA0g8SdxrVMawVw5ypWZQ.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1CcA0g8SdxrVMawVw5ypWZQ.gif\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway: <\/strong>Focus on user emotions because they play a huge role in user interactions. Draw from context &amp; user research and design for repeated use.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Things to\u00a0Remember<\/h2>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Microinteractions act as <em>facilitators for interactions<\/em>, with feedback, notifications and instructions.<\/li>\n<li>Microinteractions should <em>save time<\/em> by instantly communicating information in a way that <em>doesn\u2019t bore or distract the user<\/em>. They should catch the user\u2019s attention like a sly wink.<\/li>\n<li><em>Knowing your users<\/em> and the context behind the microinteractions will make them more precise and effective.<\/li>\n<li>Microinteractions must<em> survive long-term use<\/em>. What seems fun the first time might become annoying after the 100th use.<\/li>\n<li>Add humanity to the microinteraction and focus on visual harmony. The motion should feel fluid to make the microinteraction come to life.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design with care. Think about how people work with and use their devices and mirror common patterns of thought as you design these small bits. Attention to each and every detail is key to your success making human-computer interaction easy to use. Great design has to happen \u201cfull-stack\u201d, from functional part down to micro-interactions.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Originally published at <\/em><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/babich.biz\/microinteractions-the-secret-of-great-app-design\/\"><em>babich.biz<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The 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. Microinteractions are one of the best techniques for giving delightful feedback. All roads lead to a human-centered design approach, where the user is&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":165,"featured_media":13857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Microinteractions: The Secret of Great App\u00a0Design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The 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. Microinteractions are one of the best techniques for giving delightful feedback. All roads lead to a human-centered design approach, where the user is... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-18T12:14:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/usr.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1643\" \/>\n\t<meta property=\"og:image:height\" content=\"873\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/12\/usr.png\",\"width\":1643,\"height\":873},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/\",\"name\":\"Microinteractions: The Secret of Great App\\u00a0Design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#primaryimage\"},\"datePublished\":\"2017-12-18T12:14:11+00:00\",\"dateModified\":\"2017-12-18T12:14:11+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\"},\"headline\":\"Microinteractions: The Secret of Great App\\u00a0Design\",\"datePublished\":\"2017-12-18T12:14:11+00:00\",\"dateModified\":\"2017-12-18T12:14:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/microinteractions-secret-great-app-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2b91d9b457afee054f90b68440ad9e23902300b23c8109206f0a7d32fe0fbea4?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"I\\u2019m a software developer, tech enthusiast and UI\/UX lover. http:\/\/babich.biz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/165"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=13885"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/13885\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/13857"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=13885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=13885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=13885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}