We’re Blend Commerce

Contact our team using the options below

hello@blendcommerce.com
+44 (0) 1789 765 822
+1 (833) 456-4236

Courtyard Offices, 55 High St, Alcester B49 5AF

Search our shop

    We’re Blend Commerce

    Getting in Touch

    Contact our team using the options below

    hello@blendcommerce.com
    +44 (0) 1789 765 822
    +1 (833) 456-4236

    Courtyard Offices, 55 High St, Alcester B49 5AF

    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.

    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.

    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.

    Typography

     

    A part of the Style Sheet for one of our clients.

     

    In itself, it’s very useful to create a stylesheet of any repeating assets on the site. Those might include text styles, colours, buttons, and more. However, a great way to start is with those three. Don't go too crazy with the number of individual styles, tho. 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 the 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 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

    Do your dropdowns 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

    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 it’s not going to be consistent unless the Intention is for it to be a focal point and draw your users in as a primary call to action. 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

    Apple manages to stay consistent between macOS and iOS apps.

    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.

    Also Sign-up for our newsletter today and keep up to date with our 12 Days of UX. You don’t want to miss these!

    About the author

    Wojciech, UI/UX Designer

    Wojciech

    UI/UX Designer

    Wojciech has a keen eye for design for and great knowledge of the development world too. His main responsibilities at Blend is the continuous improvement work for our clients, documenting UI/UX audits and joint Brand Ambassador to Blend. He brings fresh and unique ideas and contributes these to our ever growing list of Growth Partnership clients.

    Let's achieve better Shopify store performance. Together.

    We help clients achieve significant results. On average, clients who work with Blend on design & development projects for their Shopify store achieve these results after 3 months: