Categories / Trends

Getting Started with Micro UX: a Simple Guide & 5 Fascinating Examples

Laura Busche March 31, 2021 · 5 min read

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.

What is Micro UX?

Many designers tackle UX with a sort of big-to-small 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 approach. It involves thinking about the smallest details of the design first, and assembling those to create the bigger picture.
When 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.

Micro Vs. Macro UX

To 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.
Focusing 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.
As 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.
Micro UX vs. Macro UX example

When Is Micro UX More Useful?

Sometimes 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?
This 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.

Micro UX in Action

Micro UX Example in the Mugatu WordPress Theme
This 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 for WordPress.
Micro UX Example in the Conference WordPress Theme
There 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.
Micro UX Example in the Scorilo WordPress Theme
This 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 for WordPress.
Micro UX Example in the Hagu WordPress Theme
A well-thought-out typographic treatment can dramatically improve a user’s experience with our site’s content. In this case, the Hagu theme features drop caps and other exquisite details.
Micro UX Example in the PTS Goodnight Prestashop Theme
This 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 Prestashop theme.

Use Micro UX Wisely

There 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.
PS – Did you think the animated GIFs above made a difference? That’s Micro UX in action!
Images created using Burger Vector Illustration, iPhone 5 + Sketchbook – Mockup # 1 and the True North Font Pack.


Write for Creative Market
We’re always looking for talented, paid contributors to help out with the blog. If you’re interested, fill out our contributor form.


Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
Tags:
About the Author
Author
Laura Busche

Brand strategist. Creating design tools to empower creative entrepreneurs. Author of the Lean Branding book. MA in Design Management from the Savannah College of Art and Design (SCAD).

View More Posts
Go to My Shop
Related Articles
3 Comments
  • This is a very interesting article, and the first time I've heard of "Micro UX" as a named thing. It's a cool concept especially when you don't know what the end product is going to look like. But I'd argue against the fact that Micro-UX would be used as-is for a website update, because since the end product is already existing and known, it's important to take in the encompassing structure and hierarchy when redesigning a smaller part of a site. So about the burger pieces: the parts are super important and can make delicious parts of the burger or whatever it ends up being, but it still has to fit within the construct of "must be edible" and "must work well together". 7 years ago
  • Agree @Jennifer Coyle. Thanks for reading! "Must be edible" and "must work well together" are definitely important considerations. Even established sites can benefit from Micro UX, but there's a certain consistency that has to be preserved. 7 years ago
  • Great article, and awesome examples. A good example of Micro UX helping the overall picture might be how Creative Market awesomely uses products from its own ecosystem as examples in its blog posts! haha. So good. 7 years ago