In the digital realm of design, every pixel, color, and interaction plays a role in shaping a user's experience. While there are many different elements, it's important to maintain a level of consitency throughout your e-commerce store.
That's where design consistency comes in. In this blog, we take a deep dive into what this term means as well as the core areas where it should be implemented on your Shopify store.
What is Design Consistency?
Design consistency is the act of keeping all of the repeating elements of your Shopify store’s website the same throughout. Consistency is a key factor in web design for both visual and functional elements, as your users will keep coming back knowing what they to do or see in order to interact and transact with your website.
Why is Design Consistency Important?
Design consistency ensures that your website looks coherent and works harmoniously across all its different elements. Having the same functions, styling, symbols, animations, etc. throughout your website will help the usability and learnability.
When your design is consistent, your users aka customers, are able to transfer past knowledge they had about your website to other pages which improves their user experience and journey across the site.
Implementing Design Consistency
There are four core areas where you need to implement design consistency:
1. Visual
2. Functional
3. Internal
4. External
We’ll break down the importance and value of consistency in each element below.
Visual Design Consistency
The easiest inconsistencies to spot on any website will be the visual ones which we in the industry would call the UI. This would typically include the colours, the fonts, any image techniques you’re adopting, icons, shapes, animations and much more.
Other elements such as call to action Buttons, Dropdowns, Tabs, other forms of Selectors, Checkboxes, Product Cards, Navigation, and whatever your site uses, should stay visually consistent throughout the site. Keeping your styling the same across the site will create harmony and users will be able to immediately perceive your UI as coherent.
A part of the Style Sheet for one of our clients.
It’s very useful to create a stylesheet of any repeating assets on the site. Those might include text styles, colours, buttons, and more. While it may be tempting to go crazy with the number of individual styles, we recommend starting with three.
Having too many might overwhelm your users. These would form a basic structure to your digital brand guidelines helping anyone who is helping you maintain your site familiar with the core consistencies it needs.
UX Tip: Research Design Systems and Atomic Design to get better at visual consistency.
Consider Simplifying Your Site
Mentioned before in our first day of UX, the more clutter on a site, the more difficult it is to keep your content and elements in check. Having a lot of different Text styles, Colours, Button types, etc. can make the UI confusing. Simplifying what UX you already have might be a great way to make it easier for your users to learn your UI.
Functional Design Consistency
This type of consistency defines a site's usability. In simple terms, functional consistency helps users get used to what different elements do and how they do it. That means that the same functionalities, like navigation, should behave in the same way on every page or section.
Example of Functional Design
Do your drop-downs close when someone moves away from them? Or clicks off of them? Functional consistency here could be apparent in the fact that ALL of your menus close the same way. If some of them close on click and some close on moving the mouse away, that can become frustrating to your users and in the long run make them bounce.
Internal Design Consistency
Internal consistency is a combination of Visual and Functional consistency; this refers to when we change or add content to a website. In any of those cases, both visual or functional, it is crucial for us to make sure that the changes we make are in line to keep the internal consistencies in check.
Microsoft is a great example of Internal Consistency between their 365 Office Apps.
For example, when adding a link to the navigation we want to make sure it has the same styling as the rest of the other links that appear in the menu, otherwise the design will look inconsistent.
However, if the intention is for it to be a focal point and draw your users in as a primary call to action, then you can consider implementing a different style.
We also want to make sure that any functions that the link performs are the same as the other links, so if it opens a menu, that menu should work just like other menu options.
External Design Consistency
External consistency means that visuals and functionalities are kept in-line across multiple products, platforms, websites, etc.
That is something you might have to consider if you have, for example, an international e-commerce store. So essentially, you having multiple stores that look and feel the same will help users feel they are being shown the right elements, even though technically, they are different. An example of this might be Nike or Apple.
Apple manages to stay consistent between macOS and iOS apps.
Understand the Importance of Design Consistency?
Consistency is crucial if you want your audience to feel comfortable on your site. It allows new users to learn your UI quickly, and recurring users to use it efficiently and confidently.
Setting up a "style sheet" for your site will help you and your developers achieve a consistent look and feel across your store.
When implementing those and any other elements on the site make sure they work the same way.
Combining those two will give you an Internal Consistency and Expanding those rules across more than one application (eg. same store in different countries; two different websites) will give you an External Consistency.
Want to learn more about how to keep it simple with UX, check out our latest blog on it here.
Of course, if you require help in this area, please feel free to get in touch with our team of experts and learn about our Shopify store redesign service.
Published: November 22, 2021
Last updated: October 23, 2024
