Consistency — Elements & Functionality
Build consistent behaviors to increase product’s retention rate and make it cost-effective
Consistency is concerned with making sure UI looks and behaves uniformly throughout the product. This consistent behavior helps in ensuring that user assumptions while interacting and perceiving the product hold true.
Let us consider a relatable example, you wouldn’t spend hours looking for a spoon/utensil in your kitchen if they are in the same usual place for a long time. You do not require deeper thought if things are usual. We subconsciously act as they are consistent.
Consistency is the key principle of UX design. The essence of being consistent is to be able to replicate the same action or element multiple times, and still be able to support the user in achieving the task.
Free & Discounted Udemy Courses — Explore Now
There are 4 different types of consistency, they are:
1. Visual consistency
Elements with similar types of functionality should be perceived in the same way. It increases the learnability of the product. Fonts, sizes, buttons, labeling, colors need to be consistent across the product to keep visual consistency.
The image shows visual consistency in terms of buttons, icons, sizes
2. Functional consistency
It states that throughout the interface similar elements/controls should behave the same, matching the user expectation. It increases the predictability of the product. Predictability leads to users feeling safe and secure.
The functionality of the back button, search, reload behave consistently across the product
3. Internal consistency
It is the consistency of different elements within the product. This will include functional and visual consistency within the product. It improves the usability and learnability of the product. Key elements that should be taken care of for internal consistency are color, typography, terminology, location, layout, and all of its graphical elements. Even when you introduce new features/pages users will have an easy way of using them as long as you keep the internal consistency.
4. External consistency
It refers to the consistency of our interface with other similar products. It’s about designing in accordance with established user habits. This way the user’s knowledge for one product can be reused in another.
Example
The pattern used in the finder is commonly used by many other applications like Safari and Photoshop. Users are familiar with this type of pattern as they are commonly used.
Hence the elements, design, content, and interaction should be consistent to create a great user experience. The below example portrays the issue of inconsistency in the website for Xfinity by Comcast Corporation, an American mass media company. Let’s take a look and compare the three different pages of the website: Homepage, My Xfinity, and TV.
This is the homepage of the Xfinity website. The highlighted part in the application (Header + Navigation) continuously changes in different tabs of the same website. Check the below images
This is the TV page of the Xfinity website. What makes it confusing for the user is the colors, layout, and font styles which are looking different from the home page.
This is the My Xfinity page of the Xfinity website which doesn’t have a secondary menu bar.
If you observe the navigation menu in all three pages above, you can find that they are inconsistent in colors, layout, and font styles. These differences make it confusing and disorienting for the user to navigate to and fro and it no longer feels like one website, which may result in user drop-offs.
Tips / Best Practices
- Define the design guidelines (which include colors, fonts, sizes, design patterns, etc.) before starting the design and follow them throughout the design
- Maintain the same type of language throughout the design
- Understand the kind of design frameworks your users are familiar with and try to be as consistent as possible
- Try to explore similar product websites to get an idea of what the users will expect more
- Do multiple reviews with a group of people to make sure everything is consistent
Checklist
- Functionality of similar elements in the UI is consistent
- The interactions were consistent and predictable by the users
- Every element in the UI is taken from the design guidelines defined
- Take self-reviews/peer reviews for your designs
- Reused similar UI components throughout the design
- Don’t use more than 2 type families and 3 typefaces
- Primary colors should be no more than 2
- Use similar visual language to convey similar emotions
- Review with enough users to make sure if any net new element or functionality is added in the design
Related Topics
Quick Question
What are all the areas where consistency should be maintained?
1. Content
2. Same functionality for a similar type of elements
3. Elements
4. All of the above
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
