Download as PDF, PPTX
Uploaded byRemy Rey De Barros
Consistency in UX Design
The document discusses the importance of consistency in UX design, highlighting its benefits such as improved learnability and predictability, while also addressing its potential drawbacks, particularly when users have diverse pre-existing knowledge. It emphasizes the distinction between consistency and coherence, advocating for a user-centric approach that considers the needs of all users. The author suggests balancing best practices with user testing to create designs that are both familiar and accessible.
More Related Content
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Consistency in UX Design
- 1. Consistency in UXDesign: To what extent is “best practice” the right choice? BY RÉMY REY-DE BARROS PRODUCT DESIGN Pixel Tie
- 2. Consistency, and allof 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, Jakob’s Law, and Nielsen and Norman’s Fourth Design Heuristic, designers have developed a formula (otherwise known as “best practice”) for keeping users happy. Nevertheless, one design can’t always fit all. This presentation explores the implementation of consistency in UX design, its benefits, drawbacks, and how we as designers can find a compromise. Introduction Pixel Tie
- 3. It improves learnabilityby 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’s cognitive load of organising information into an understandable format, and the user can focus on their task. Visual Consistency Benefits Pixel Tie
- 4. They are self-maderules 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. Branding Guidelines Benefits Pixel Tie
- 5. Branding Guidelines Tagit brandingguidelines Benefits Pixel Tie
- 6. They are theself-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. Design Systems Benefits Pixel Tie
- 7. Design Systems CommScope designsystem Benefits Pixel Tie
- 8. Functional consistency improvespredictability 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’t surprised by one component completing different functions in different parts of the system. For example, components like hamburger menus in mobile banking apps must be functionally consistent, or else navigation would be impossible. Functional Consistency Benefits Pixel Tie
- 9. Functional Consistency Chinabank mobileapp Benefits Pixel Tie
- 10. Internal consistency, whichis 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, 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. Internal Consistency Benefits Pixel Tie
- 11. Internal Consistency SportSG mobileapp Benefits Pixel Tie
- 12. External consistency, whichrefers 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’s Law and Nielsen’s 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 mean settings. By meeting these expectations, users don’t have to learn how to do simple tasks and can focus on the content. External Consistency Benefits Pixel Tie
- 13. “Best practice” wasdeveloped because the majority of users behave similarly, but what if your users don’t? As such, the potential risk of sticking to the tried and true depends on how well you know your users. Consistency stipulates creating and following rules to achieve benefits like learnability and predictability. When aiming for consistency, assumptions made about the user’s needs throughout their journey are untested, in favour of the uniformity of the design system. Consistency vs. Coherence Drawbacks Pixel Tie
- 14. Coherence, on theother 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’s 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. Consistency vs. Coherence Drawbacks Pixel Tie
- 15. Consistency vs. Coherence CommScopeRuckus Analytics cloud service Drawbacks Pixel Tie
- 16. How can youdesign 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’t have the pre-existing knowledge designers are taught to assume they do. Designing Inclusively Drawbacks Pixel Tie
- 17. Expert users whodon’t need hand-holding can be stifled by guardrails meant to provide guidance and consistency for new users. Nielsen’s Seventh Design Heuristic 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’t startle users? Pixel Tie’s SportSG project 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. Balancing New and Expert Users Drawbacks Pixel Tie
- 18. Balancing New andExpert Users SportSG mobile app Drawbacks Pixel Tie
- 19. Resource-intensive design systemsmay 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’s work, and then teach the updated system to the team. This tedious work is the cost of consistency at a large scale. Will the work required to implement the design system pay off in the long run? The Cost of Design Systems Drawbacks Pixel Tie
- 20. While consistency hassome 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. 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. Coherence Pixel Tie
- 21. Lastly, it’s importantto test rigorously 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’t get frustrated when they’re forced to learn a new system. Coherence Pixel Tie
- 22. How to createa brand style guide – 99designs The Ultimate Guide to Branding in 2022 – Hubspot A comprehensive guide to design systems – Invisionapp Design Systems 101 – Nielsen Norman Group Maintain Consistency and Adhere to Standards (Usability Heuristic #4) – Nielsen Norman Group Flexibility and Efficiency of Use: The 7th Usability Heuristic Explained – Nielsen Norman Group Abandoning Best Practices in UX – Nielsen Norman Group 10 Usability Heuristics for User Interface Design – Nielsen Norman Group Design principle: Consistency – UX Design CC Human Computer Interaction – Medium Consistency in Design is the Wrong Approach – UIE The Difference Between Design Systems, Pattern Libraries, Style Guides & Component Libraries – UXPin Top 8 Design System Examples – UXPin Law of Similarity – Laws of UX User Experience: Insights Into Consistency in Design – Tubik Blog Design for Coherence, not Consistency – UX Magazine For further reading For further reading Pixel Tie
- 23. We are PixelTie, a digital-first creative studio based in Singapore. We combine storytelling, design thinking and technology to craft digital experiences that amplify brands. See Projects / See Showreel Crafting digital experiences that amplify brands