Consistent Ecommerce Design
Written by: Shane Whittaker, On: Tuesday 22nd December 2020
Consistent design is intuitive and is one of the molecules of design DNA.
When elements are consistent in look and function, usability and learnability improve. Consistent design allows a user’s knowledge to transfer from page to page without any hidden surprises, this helps to form a bond of trust with the user.
This in turn helps to eliminate confusion, which is very important as confusion will lead to a frustrated user and a poor user experience. When users visit your site, they’re bringing expectations that they have experienced on other sites, so it’s good practice to stick to design standards. You do not want there to be a learning curve for new users because you have deviated from design standards.
Magento 2 Luma theme has good consistency across the site but if you want to implement your own design, you need to remember to stay consistent. To help achieve consistency in my projects, I follow these rules.Visual Consistency
Similar UI elements across the site such as fonts, buttons and font sizes all make up visual consistency and really helps the users learnability of the site. These elements should be defined in one place, any designer will tell you that brand guidelines are a must for consistency when designing a site and it’s no different when building a site using Magento 2. Magento 2 uses LESS and using LESS variables during your build will help you keep that consistency throughout the build process.Functional Consistency
Buttons, price sliders, dropdowns that function in the same way will increase the predictability of your site, creating functional consistency and forming trust.Internal Consistency
Internal consistency is achieved by combining visual and functional consistencies in your site. When you introduce new section/pages etc, users will already know the UI making for a smooth transition. This will also help improve the usability and learnability of your site.
Most importantly, following standards and being consistent will free up your time during the design and build phases allowing you to take more time to improve your sites user experience elsewhere.