Mastering UI Consistency: How To Create Seamless User Experiences
Have you ever felt the frustration of navigating through a website or app and not understanding how it works? Of course you have.
The reason behind your frustration is most likely a badly designed interface that does not let you intuitively navigate it. Instead, you have to stop and analyze each element to understand how it works and what it is for.
One of the most common mistakes leading to bad product design is inconsistency in UI.
Apart from being one of the prevalent mistakes out there, it is also a really easy one to fix or avoid overall. So, let’s understand what UI inconsistency is about and how you can make sure that your users stay away from it.
Understanding UI Consistency
As the name implies, UI consistency is about having identical UI elements, atomic design, and overall user experience for the same kind of action or entity on your product.
If you have primary buttons in multiple places in your interface, they should all look the same (UI) and act the same (UX). For instance, if you log into your Dropbox account and browse the different sections in there, you will notice that all primary action buttons are identical.
If you look closer, it is not just the primary action buttons that are consistent in their looks in Dropbox, but pretty much all elements.
There are several important reasons design teams pay close attention to consistent user interface design. Namely:
- It looks clean and easy to the eye. Diversity is not the best thing to have on user interfaces. Having too many types of visuals for elements makes the interface heavy and hinders readability.
- It looks professional. A clean user interface leaves an impression of professionalism and skillfulness. Users tend to trust the brands more if their websites or products are well-designed.
- It improves user experience. If you see a black button somewhere on Dropbox and identify it as their primary action, then, every time you see a button that looks identical, you will know that it’s a primary action too. Therefore, you will not have to think about what this button is supposed to do every time you encounter one.
Finally, there is also the factor of developing this interface. If you have consistent UI elements everywhere in your product, then the frontend team does not have to develop every new element from scratch. Instead, they will create a single element and reuse it in the new screens they need to develop. This way, you are drastically reducing the time it takes to create new interfaces and functionality.
Despite its importance and impact on user experience, consistent design is not present there. Even big tech products are guilty of this issue. Android’s settings menu is my favorite example.
Please look at the different elements on this list and tell me which ones are clickable (buttons) and which are just informative text. The chances are that you can’t say unless you open the same menu on your phone and start tapping everything.
Even if you did guess it right (It’s "Google Account data" and "Photos & videos"), it took you a bit of cognitive processing to do so.
That’s not how UX is supposed to work. After all, the famous quote by UX guru Steve Krug says:
Don’t make me think.
By the way, I highly recommend you read his book along with the “bible” for UX by Don Norman - The Design of Everyday Things.
The general notion here is that your users will be able to recognize elements on your UI automatically without having to think about what it is and navigate through your app on the “muscle memory” level.
Fundamentals Of UI Design
Before we move forward with understanding how to keep your design consistent, let’s revisit the fundamental design principles in design that make user-friendly UI and consistency possible in the first place.
Clarity and Simplicity
Gone are the days of websites with flashing gifs and all the colors of the rainbow represented on the UI (millenials, do you remember those?).
The more people started using the internet, the more UI and UX designers paid attention to the way they perceive and interact with user interfaces.
What they found soon is that having too many colors and visual elements is obstructing users from performing the tasks they wanted. Instead, the only thing they get from browsing such UIs is eye fatigue.
So, naturally, we moved towards minimalism and simplicity. UI consistency, in fact, is another way you can make your interface simpler.
Visual Hierarchy
When you have many elements on your screen, it becomes hard for you to understand the relationship between them. For instance, how do you know if a certain piece of text is an article header or just part of the text?
You help your users understand these relationships with visual hierarchy. By placing items to the top, making them bigger, colorful, bold, and using other tricks, you can help users easily tell that they are the more important than other items on the screen. So, the users will intuitively look at that element first before moving on to the second.
There’s a famous meme that demonstrates the magic of visual hierarchy.
You smiled reading the text here, didn’t you? That’s right, just like any other human being, your vision is hardwired to follow visual hierarchy too.
Feedback
Every time your user performs an action on your product, they expect to understand if that action happened or not.
If you click on the delete button and nothing happens afterward, you might get confused. Did the delete happen, or was there an error? To help users with this, you will need to provide them with visual (or audio and even haptic) feedback that tells them about the results of the action.
If your system successfully processed the delete request, tell them that the item was deleted. If you encounter an error instead, again, tell them about it. This way, they will know that their item was not deleted, and they need to try again or contact you for support.
Best Practices for Achieving UI Consistency
At first glance, UI consistency is very straightforward, and any designer should be able to achieve it. That’s true, assuming that you are the only person working on the product and the product itself is small and simple.
The moment you start working as part of a larger team (where each designer has their own individual style) and on a product that consists of dozens of pages and features, keeping elements consistent becomes a real challenge.
You just can’t physically remember what every single element in the entire product looks like and replicate it in the new feature you’re working on.
Luckily, there are lots of processes and frameworks that let you mitigate the risk of adding inconsistency to your design. Here are the three that are considered industry standards.
Style Guides: This is a document that outlines the design standards for your product and represents your brand identity. It includes the typography (a.k.a. fonts, their size, placements, etc.) for different types of text (e.g. headings, body, comments, etc.), iconography, your color palette, and other core design elements.
With a style guide, you are making sure that the entire design team is working within the same global standards and keeping your content, colors, and icons consistent across the entire product.
Apple is probably the best example of enforcing its style guide everywhere, including for the companies that develop apps for its products.
The example here is the style guide for the button that you can place on your website to let users download your app from the App Store. As you can see, Apple is very clear about the way you can use this button.
Pattern Libraries: This is another guiding document that focuses on describing the low-level details of your design standard, unlike the previous one that gives you the high-level design essentials. Design pattern libraries are a common deliverable when your team is practicing atomic design.
The concept of atomic design is to have clearly defined small UI elements that, combined, create more complex ones. The common categories of elements and their combinations in this framework include:
- Atoms (hence, the name): Basic elements such as forms, buttons, icons, and others. These are elements that you cannot break down further.
- Molecules: Combination of atoms that serve a specific purpose. Examples are pagination for your lists, breadcrumbs for navigation, etc.
- Organisms: More complex interface elements consisting of multiple atoms and molecules that represent entities. These are cards, search bars, and others.
- Templates: Combinations of reusable organisms that you can add to your pages. They can be search result lists, product description sections, etc.
- Page: The end result of your design and the place where the user interacts with it. As the name implies, those are the different pages on your product like your homepage.
A pattern library is a collection of standardized molecules and organisms that you can use in your design. You achieve consistency by always reusing the same elements in different parts of your product since users will instantly recognize the element the moment they open a specific page.
Design System: This is the overall combination of high-level style guides, typefaces, color schemes, and descriptions of tiny UI elements, as well as a collection of ready-made UI components that you can use both in your design and when developing the product.
Nearly all large tech companies develop their own design system to ensure visual consistency. Google has Material, Shopify has Polaris, and Apple has Human Interface. There are also standalone open-source systems that you can easily integrate into your product and use for free. My favorite one among those is ant.design.
Just like other design systems, it comes with both a design library that you can use in Figma or other popular tools and a component library precoded in popular frameworks (e.g., react) that you developers can use in their code.
Tools For Maintaining UI Consistency
To keep your design consistent across all of your teams and parts of your product, you will need to document your guidelines and make sure that your entire team collaborates on it.
For documenting and applying your design standards to your everyday feature and screen designs, you can take advantage of the specialized features of many modern design tools.
Figma, for instance, lets you create scalable components that you can store in your design system file and let everyone in your company use it.
It also supports UI Kits, a premade library of design guidelines and rules that you can download from Figma’s library and use in your products. Here’s a kit for Google’s Material Design.
This particular kit gives you a wide variety of elements for designing an Android app in compliance with Google’s design standards.
Now, the collaboration part. Without proper collaboration in your design team, you are doomed to have elements that do not follow your guidelines and break your visual consistency. Luckily, there are UX/UI design tools for fostering collaboration, too.
Zeplin, for instance, helps your designers and developers collaborate more effectively by creating developer-friendly versions of the design where the coding team can find exact CSS specifications for the elements as well as easily download the images, icons, and other assets from the design. It also integrates with other tools for UI development to help you easily port your designs from where you have made it into Zeplin.
Testing And Iterating For UI Consistency
Just like your product requirements or your strategy, design guidelines are not static documents either. You will always end up making changes to it and keeping it up to date.
Some of the common reasons for changing your guidelines will include:
- Adding new elements that were absent in the library.
- Adopting new design trends and best practices.
- Finding issues and “design bugs” that need to be fixed.
Finally, it is a great practice to let your design team review it occasionally and make small improvements to it.
Apart from improving the overall look and the quality of your design, the latter also lets you perform something called a “UI consistency test” when your design team actively seeks inconsistencies in your design system and fixes them.
You can also run a similar test on your ready designs. There’s always a chance that several features contain elements not present in the UI Kit or don’t look how they are supposed to.
Apart from running internal tests, I would also suggest you actively involve your users in the testing process. There are two ways of doing it.
- Ask for feedback on the design, understand your users’ needs, and actively iterate it based on their comments.
- Perform usability tests to understand the level of consistency on your interface.
Regarding the latter, imagine that you have used your primary action button in 10 different places all over your product. Are you sure that in all these 10 cases, your users will identify it as the primary action?
You can’t be sure unless you run moderated or unmoderated usability tests with prototypes built on your UX tool and see the way they interact with it.
Based on these tests and user feedback, you can then make data-informed design decisions.
Don’t Make Me Think
Consistency is one of the core elements of a great UI design. By keeping everything simple and visually identical, you are making sure that your users are not lost in your interface. Instead, they intuitively understand the purpose of each element on their screen and easily perform their tasks.
Don't forget to subscribe to our newsletter for more product management resources and guides, plus the latest podcasts, interviews, and other insights from industry leaders and experts.
