{"id":20408,"date":"2015-02-12T08:00:15","date_gmt":"2015-02-12T16:00:15","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=20408"},"modified":"2024-04-03T03:05:02","modified_gmt":"2024-04-03T10:05:02","slug":"getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples","title":{"rendered":"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples"},"content":{"rendered":"

Designer Charles Eames once said “The details are not the details. They make the design.” In line with this idea, many designers have started to change the way they think about user experience. Instead of looking at the big picture and mapping out the entire user journey, a new approach called Micro UX flips the experience design process on its head. In this article, you’ll learn what Micro UX is, how it can improve your designs, and five ways to incorporate it brilliantly.<\/p>\n

<\/span>What is Micro UX?<\/span><\/h2>\n

\nMany designers tackle UX with a sort of big-to-small<\/em> approach. That is, they think of a fundamental concept for a design or site, analyze what the end user will want to do, and consider how they can facilitate these tasks. Micro UX actually reverses that process, looking at projects with a small-to-big<\/em> approach. It involves thinking about the smallest details of the design first, and assembling those to create the bigger picture.
\nWhen designing with Micro UX in mind, think about how a user will interact with specific functions on the site rather than the general motivation to use it. Start out with individual aesthetic or functional elements that you know you want to incorporate into the site, and assemble those smaller elements in order to create the bigger, more complete design. Designers and developers focusing on Micro UX may go into a design without the complete picture in mind and let the small details determine the outcome of the overall product.\n<\/p>\n

<\/span>Micro Vs. Macro UX<\/span><\/h2>\n

\nTo understand how Micro UX relates to Macro UX, consider cooking burgers. Facing the challenge with a Macro UX approach, you would concentrate on planning out the experience of a full, flavorful bite. You would probably worry about things like finding toothpicks to hold the whole thing together, and making sure that burgers are served hot off the grill.
\nFocusing on Micro UX, on the other hand, would make you think in terms of individual ingredients. You’d work hard on finding the best available beef (perhaps angus?), whipping up a distinctive sauce, or even baking the buns yourself. Your beef patty may be so special that people end up eating it without a bun! In Micro UX we focus on making each small component delightful, attractive and innovative so that the user’s experience as a whole may exceed his or her expectations.
\nAs you’ve probably realized, the general plan for this experience is just as important as the detailed surprises found in each component. That’s why integrating Macro and Micro UX is one of our greatest opportunities as designers. It is also a challenge that certainly brings rewards in terms of user satisfaction.
\n\"Micro\n<\/p>\n

<\/span>When Is Micro UX More Useful?<\/span><\/h2>\n

\nSometimes it might make more sense to focus on Micro UX. Going back to the burger example, what if you weren’t sure what the final product should look like? As far as you’re concerned, this could easily become a sandwich along the way. In that case, focusing on the quality of the ingredients might be a better approach. Think about it: if you shift all your efforts to perfecting the individual parts (i.e. making an amazing bun or special sauce), wouldn’t the final product, whatever that is, end up tasting better?
\nThis approach is particularly useful with new, innovative projects – ones whose audience is not predetermined and the level of use and success is unknown. It’s also a great choice for a new website or product that is aimed at competing with or supplanting an existing one. In this case, the site can take the basic form of that of a competitor and improve on its details. Finally, it’s a great choice for any site that needs to be updated but not overhauled. Approaching a site with a Micro UX approach can allow small, noticeable improvements to be made without overhauling a system that has already been proven to work.\n<\/p>\n

<\/span>Micro UX in Action<\/span><\/h2>\n

\"Micro<\/a><\/p>\n

\nThis map marker’s animation calls the user’s attention to the company’s location. Despite being subtle, it does manage to stand out in the one-page flow of the Mugatu Business Theme<\/a> for WordPress.
\n\"Micro<\/a>
\nThere are many ways to present a speaker schedule, but the way this table was crafted certainly makes it easier for the viewer to navigate time slots, talk descriptions and event dates. From the Conference WordPress Theme<\/a>.
\n\"Micro<\/a>
\nThis accordion layout makes the job of looking for an answer much easier. Frequently asked questions are grouped by topic, and the user can quickly read each answer by clicking on the plus sign. Found in Scorilo<\/a> for WordPress.
\n\"Micro<\/a>
\nA well-thought-out typographic treatment can dramatically improve a user’s experience with our site’s content. In this case, the Hagu theme<\/a> features drop caps and other exquisite details.
\n\"Micro<\/a>
\nThis rich mega-menu features quick product descriptions, vivid imagery and a clear emphasis on price reductions. Online shoppers will find this seemingly small detail very useful when trying to find a few products to focus on. Found on the PTS Goodnight<\/a> Prestashop theme.\n<\/p>\n

<\/span>Use Micro UX Wisely<\/span><\/h2>\n

\nThere is certainly a growing focus in the industry on Micro UX, and designers will have to incorporate it in order to set themselves and their products apart. However, an ideal solution is that where Macro and Micro UX work together to ensure that a user gets what he or she wants out of the product, but is also blown away by its tiny, easy-to-use and aesthetically pleasing details.
\nPS – Did you think the animated GIFs above made a difference? That’s Micro UX in action!<\/em>
\nImages created using Burger Vector Illustration<\/a>, iPhone 5 + Sketchbook – Mockup # 1<\/a> and the True North Font Pack<\/a>.\n<\/p>\n

\n

Write for Creative Market<\/strong><\/p>\n

\nWe’re always looking for talented, paid contributors to help out with the blog. If you’re interested, fill out our contributor form<\/a>.\n<\/p>\n

\n","protected":false},"excerpt":{"rendered":"

Designer Charles Eames once said “The details are not the details. They make the design.” In line with this idea, many designers have started to change the way they think about user experience. Instead of looking at the big picture and mapping out the entire user journey, a new approach called Micro UX flips the […]<\/p>\n","protected":false},"author":73,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[59],"tags":[438],"topics":[],"class_list":["post-20408","post","type-post","status-publish","format-standard","hentry","category-design-trends","tag-themes"],"acf":[],"yoast_head":"\nGetting Started with Micro UX: a Simple Guide & 5 Fascinating Examples - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples\" \/>\n<meta property=\"og:description\" content=\"Designer Charles Eames once said “The details are not the details. They make the design." In line with this idea, many designers have\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-12T16:00:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T10:05:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03023013\/BURGER.jpg.webp\" \/>\n<meta name=\"author\" content=\"Laura Busche\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Busche\" \/>\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\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples\",\"name\":\"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/02\\\/03023013\\\/BURGER.jpg.webp\",\"datePublished\":\"2015-02-12T16:00:15+00:00\",\"dateModified\":\"2024-04-03T10:05:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/e49444db004baa7d03b048743c86efe6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/02\\\/03023013\\\/BURGER.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/02\\\/03023013\\\/BURGER.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples - Creative Market Blog","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:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples","og_description":"Designer Charles Eames once said “The details are not the details. They make the design.\" In line with this idea, many designers have","og_url":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2015-02-12T16:00:15+00:00","article_modified_time":"2024-04-03T10:05:02+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03023013\/BURGER.jpg.webp","type":"","width":"","height":""}],"author":"Laura Busche","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Laura Busche","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples","url":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples","name":"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03023013\/BURGER.jpg.webp","datePublished":"2015-02-12T16:00:15+00:00","dateModified":"2024-04-03T10:05:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/e49444db004baa7d03b048743c86efe6"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03023013\/BURGER.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/02\/03023013\/BURGER.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/getting-started-with-micro-ux-a-simple-guide-5-fascinating-examples#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/20408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=20408"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/20408\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=20408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=20408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=20408"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=20408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}