{"id":5764,"date":"2022-07-05T08:51:15","date_gmt":"2022-07-05T08:51:15","guid":{"rendered":"https:\/\/www.pixeltie.com.sg\/blog\/?p=5764"},"modified":"2022-08-16T08:13:46","modified_gmt":"2022-08-16T08:13:46","slug":"consistency-in-ux-design-to-what-extent-is-best-practice-the-right-choice","status":"publish","type":"post","link":"https:\/\/www.pixeltie.com.sg\/blog\/2022\/07\/05\/consistency-in-ux-design-to-what-extent-is-best-practice-the-right-choice\/","title":{"rendered":"Consistency in UX Design: To what extent is \u201cbest practice\u201d the right choice?"},"content":{"rendered":"\n

Consistency, and all of its different layers, is widely considered as one of the key best practices in the design world. Through research in UX and psychology that produced the Gestalt Law of Similarity<\/a>, Jakob\u2019s Law, and Nielsen and Norman\u2019s Fourth Design Heuristic<\/a>, designers have developed a formula (otherwise known as \u201cbest practice\u201d) for keeping users happy. Nevertheless, one design can\u2019t always fit all. This article explores the implementation of consistency in UX design, its benefits, drawbacks, and how we as designers can find a compromise.<\/p>\n\n\n\n

Benefits<\/h2>\n\n\n\n

Visual Consistency<\/h3>\n\n\n\n

It improves learnability by creating recognisable patterns and visual hierarchy. It is implemented in a variety of formats and pertains to several design characteristics that use colour, shape, and size to align information with a visual hierarchy. Visual consistency lessens the user\u2019s cognitive load of organising information into an understandable format, and the user can focus on their task.<\/p>\n\n\n\n

Branding Guidelines<\/h4>\n\n\n\n

They are self-made rules on how brands present themselves and communicate. Brands curate their identity with strategic decisions regarding their vision, voice, tone, typography, imagery, user experience and more. By following these guidelines, companies differentiate themselves from competitors and make it easier for consumers to connect with them on an emotional level. <\/p>\n\n\n\n

\"\"
Tagit<\/strong> branding guidelines<\/em><\/figcaption><\/figure>\n\n\n\n

Design Systems<\/h4>\n\n\n\n

They are the self-made standards and procedures of a design team. They usually include a library of components, patterns and layout templates. Before development begins, a dedicated team creates or adapts an existing design system, and teaches it to the design and development teams. Design systems increase the efficiency of the design team by creating a unified language for everyone to adhere to. <\/p>\n\n\n\n

\"\"
CommScope<\/strong> design system<\/em><\/figcaption><\/figure>\n\n\n\n

Functional Consistency<\/h3>\n\n\n\n

Functional consistency improves predictability by having a mechanism work the same way across the entire interface. When one component functions the same across screens, users are less likely to make mistakes because they aren\u2019t surprised by one component completing different functions in different parts of the system. For example, components like hamburger menus in mobile banking apps<\/a> must be functionally consistent, or else navigation would be impossible. <\/p>\n\n\n\n

\"\"
Chinabank<\/strong> mobile app<\/figcaption><\/figure>\n\n\n\n

Internal Consistency<\/h3>\n\n\n\n

Internal consistency, which is the combination of visual and functional consistency, hastens mastery by reusing the same hierarchy and functionalities across the entire product. When visual and functional pairs are consistent across screens, users feel a mastery over the interface since they can easily complete their task without having to think about how to actually do it. Health apps that track multiple metrics, like this one made for SportSG by Pixel Tie<\/a>, are good examples of internal consistency as different trackable metrics like sleep and screen time have similar information hierarchies, which demonstrates a consistent application of visual and functional consistency. <\/p>\n\n\n\n

\"\"
SportSG<\/strong> mobile app<\/em><\/figcaption><\/figure>\n\n\n\n

External Consistency<\/h3>\n\n\n\n

External consistency, which refers to how consistent an interface is with other unaffiliated systems, improves generalisability by using industry conventions to flatten the learning curve so that users can reuse knowledge from other systems. Considering Jakob\u2019s Law and Nielsen\u2019s Fourth Design Heuristic, users carry over knowledge from other systems and expect new interfaces to work the same way. They might not even realise it, but users expect an icon that looks like a magnifying glass to trigger a search query, a bell icon should show their notifications, and the gear can only<\/em> mean settings. By meeting these expectations, users don\u2019t have to learn how to do simple tasks and can focus on the content. <\/p>\n\n\n\n

Drawbacks<\/h2>\n\n\n\n

Consistency vs. Coherence<\/h3>\n\n\n\n

\u201cBest practice\u201d was developed because the majority of users behave similarly, but what if your users don\u2019t? As such, the potential risk of sticking to the tried and true depends on how well you know your users.<\/p>\n\n\n\n

Consistency stipulates creating and following rules to achieve benefits like learnability and predictability. When aiming for consistency, assumptions made about the user\u2019s needs throughout their journey are untested, in favour of the uniformity of the design system.<\/p>\n\n\n\n

Coherence<\/a>, on the other hand, asks if the user understands the design rather than if the design is consistent with everything else. Thinking about the user at a miniscule scale is resource-intensive, but it can also delight the user immensely. Complex digital products that struggle with stickiness and onboarding like the one below have benefited from Pixel Tie\u2019s redesign based on insights from rigorous user persona and usability testing. Whilst the original design was consistent, the users could not make sense of it, so it lacked coherence.<\/p>\n\n\n\n

CommScope<\/strong> Ruckus Analytics cloud service<\/em><\/figcaption><\/figure>\n\n\n\n

Designing Inclusively<\/h3>\n\n\n\n

How can you design with external consistency without excluding users who have different levels of pre-existing knowledge, like very young, elderly, disabled, or internet illiterate users? Aside from accessibility issues, some best practices regarding external consistency come under question when users don\u2019t have the pre-existing knowledge designers are taught to assume they do.<\/p>\n\n\n\n

Balancing New and Expert Users<\/h3>\n\n\n\n

Expert users who don\u2019t need hand-holding can be stifled by guardrails meant to provide guidance and consistency for new users. Nielsen\u2019s Seventh Design Heuristic<\/a> stipulates that systems should be designed in a way that allows users to complete a task in a variety of methods. Should designers focus on consistency for the learnability of new users or flexibility for the efficiency of expert users? Or better yet, how might designers make discoverable accelerators that don\u2019t startle users? Pixel Tie\u2019s SportSG project<\/a> had to be accessible and informative for all Singaporeans regardless of their age, background, and fitness levels. To provide guidance for new users without hindering others, step-by-step instructions are positioned unobtrusively at the bottom of the screen throughout the mobility test, which also creates internal consistency.<\/p>\n\n\n\n

\"\"
SportSG<\/strong> mobile app<\/em><\/figcaption><\/figure>\n\n\n\n

The Cost of Design Systems<\/h3>\n\n\n\n

Resource-intensive design systems may slow down productivity as they require a lot of work to function properly. For example, a dedicated team must work upfront to create the design system. They then have to continuously update the design system to evolve with the design team\u2019s work, and then teach the updated system to the team. This tedious work is the cost of consistency<\/a> at a large scale. Will the work required to implement the design system pay off in the long run? <\/p>\n\n\n\n

Coherence<\/h2>\n\n\n\n

While consistency has some pitfalls, the guaranteed benefits of it are better than the potential drawbacks, and far outweigh an inconsistent design. A good compromise between consistency and user-centricity is to aim for coherence instead, which rests on how well a designer knows their users.\u00a0<\/p>\n\n\n\n

So, whilst it’s easier and cheaper to stick to best practice because the majority of people automatically assume your interface follows industry convention, it is more user-centric to develop a user persona and design based on their needs, especially in niche markets or for people who find conventional digital interfaces inaccessible. <\/p>\n\n\n\n

Lastly, it’s important to test rigorously<\/a> before rolling out convention-breaking interfaces. Conduct tests to validate any assumptions made about users, and see if they think the value added by these changes is better than the status quo. Additionally, ensure the interface is flexible enough for multiple ways of doing the same task so that users don\u2019t get frustrated when they\u2019re forced to learn a new system.<\/p>\n\n\n\n

***<\/p>\n\n\n\n

For further reading<\/h3>\n\n\n\n