UI Patterns for Design Systems

Stories that inspired a new book about patterns and design systems. Tales of how shared language can fast-track consistent design.

DesignOps Meetup, August 2019, Melbourne.

Link: https://didoesdigital.com

Transcript

1. UI Patterns for Design Systems AUGUST 2019 Given the rise of companies competing on design and usability, now is the time to think about UI patterns and design systems to foster shared language and fast-track consistent design. DIANA MACDONALD PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
2. Diana MacDonald @DiDoesDigital WHO AM I? PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Design Systems Team Lead - Product Designer - Coder - Author AUGUST 2019
3. Culture Amp Design Systems PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS @DIDOESDIGITAL - Leading a design systems team - Kaizen accelerates UI design and development - We empower designers and front-end engineers
4. Practical UI Patterns for Design Systems @DIDOESDIGITAL 1. Introducing UI patterns 2. Tap into patterns 3. Deciding which pattern to use and when 4. Patterns in design systems 5. Anti-patterns and dark patterns 6. Mixing and matching patterns 7. Conclusion
5. Practical UI Patterns for Design Systems @DIDOESDIGITAL - UI patterns - Anti-patterns - Design systems - Shared language
6. UI Pattern: a recurring solution to a digital problem in a context @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 1. A named solution describing what the pattern does 2. The problem the user is facing or why the pattern is needed 3. The context for when to use the pattern
7. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Solution: ask for an identifier & authentication - Problem: the user wants to access private, personalised information - Context: when the user is trying to access their content and they are not logged in
8. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Solution: ask for an identifier & authentication - Identifier: email address - Authentication: password - Submit button: log in
9. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Solution: ask for an identifier & authentication - Identifier: username - Authentication: password - Submit button: log in
10. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Problem: the user wants to access private, personalised information
11. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Problem: the user wants to access private, personalised information
12. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Context: when the user is trying to access their content
13. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Context: when the user is trying to access their content ❌
14. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Context: when the user is trying to access their content ❌
15. Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Context: when the user is trying to access their content ❌
16. Components are NOT patterns @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Components are a distinct piece of UI - Components are built for a domain - Patterns are abstract guides - Patterns aren't always visual - Components execute patterns
17. Benefits to learning and using patterns @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Create familiar and predictable interfaces - Reduce design decisions and save time - Communicate decisions - Use smart defaults without extensive product design experience
18. Photo by Clément Falize @centelm
19. The world is full of obvious things which nobody by any chance ever observes. - Sherlock Holmes in “The Hound of the Baskervilles” 
 by Sir Arthur Conan Doyle
20. Anti-pattern: recurring solution that creates more problems than it solves @DIDOESDIGITAL - A named “solution”, including the symptoms - A tempting reason why you might be lured in - The missing context for when it could have been viable - Some recovery steps explaining how to recover PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
21. Anti-pattern: Mystery meat… @DIDOESDIGITAL - Processed meats with unidentified sources - Clear to the creator but not the consumer GPL, https://commons.wikimedia.org/w/index.php?curid=685293 PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
22. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL - "Solution": - Links that do not have a clear destination - You need to hover over the link to reveal the link’s destination or follow it blindly - Makes products harder to understand & operate Photo by Sandy Millar @sandym10 To learn more about bees, click here. PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
23. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL - Tempting reasons to use "click here": - Common staple of the early Web - Explicit about what you want the user to do - … how else do you finish a sentence starting with "To learn more…"? Photo by Sandy Millar @sandym10 To learn more about bees, click here. PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
24. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL - This is a visual representation of how someone using a screen reader might perceive this page click here PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
25. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL Photo by Sandy Millar @sandym10 PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Missing context for icon buttons: - Extremely experienced, highly engaged users - Limited number mystery meat nav. items - Used with high frequency - (Facebook)
26. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL - Recovery step: use meaningful link text Photo by Sandy Millar @sandym10 Learn more about bees. PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
27. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL - Recovery step: use meaningful link text about bees PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
28. Photo by Matthew T Rader @matthew_t_rader
29. Hitting the right note includes knowing when not to strike.
30. Design System: shared source of truth to build consistent products @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - You either have one source of truth or multiple sources of lies - Parts and processes: documentation, design and code - To efficiently build consistent products
31. Photo by WOCinTech Chat Design System: considerations PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS @DIDOESDIGITAL DIANA MACDONALD - Substance: design, code, content - Framing: context, audience, purpose - Workflows: onboarding, reviews, testing - What to document: unique & contentious topics
32. Design System: Culture Amp @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Documented UI Kit and code components - Primary audience: product designers & 
 front-end engineers - Purpose: accelerate UI delivery - Unique challenge: Elm + React
33. Design System: Google @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Design: guidelines and themes - Develop: components and tutorials - Resources: downloads, tools, patterns
34. Design System: Atlassian @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Brand, marketing, product - Principles, personality, assets - Processes: sparring and prototyping
35. Design System: Shopify @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Content - Design - Components - Patterns & guides
36. Benefits to creating and growing a design system @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Document, share, and spark conversations around design decisions - Streamline workflows that maximise consistency and save time - Reduce hidden costs
37. Image created by Wolfgang Beyer with the program Ultra Fractal 3
38. There is a saying that every nice piece of work needs the right person in the right place at the right time. - Benoît Mandelbrot
39. UI patterns & design systems foster shared language @DIDOESDIGITAL - Shared language fast-tracks consistent design - Design systems reduce hidden costs PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
40. UI patterns & design systems fast-track consistent design @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
41. UI patterns & design systems fast-track consistent design @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
42. UI patterns & design systems fast-track consistent design @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
43. UI patterns & design systems fast-track consistent design @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
44. UI patterns & design systems fast-track consistent design @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
45. UI patterns & design systems fast-track consistent design @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
46. Hidden costs: CSS stats @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Shows colors, typography, spacing, borders & layout - Shows CSS complexity and file size - Highlights inconsistencies and opportunities CSSstats.com
47. Hidden costs: CSS stats @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Shows colors, typography, spacing, borders & layout - Shows CSS complexity and file size - Highlights inconsistencies and opportunities CSSstats.com
48. Hidden costs: interface inventory @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Shows components, such as buttons and modals - Highlights inconsistencies that confuse users - Highlights code complexity and a source of bugs
49. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Designers and developers spend a lot of time clarifying details
50. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS What shade of blue is that? - Designers and developers spend a lot of time clarifying details
51. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS What shade of blue is that? Where's the logo file in SVG? - Designers and developers spend a lot of time clarifying details
52. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS What shade of blue is that? Where's the logo file in SVG? How many pixels is the padding? - Designers and developers spend a lot of time clarifying details
53. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS What shade of blue is that? Where's the logo file in SVG? How many pixels is the padding? Is this a new button? Are we updating all the buttons? - Designers and developers spend a lot of time clarifying details
54. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) - Designers and developers spend a lot of time clarifying details
55. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) - Designers and developers spend a lot of time clarifying details
56. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$30 per hour (AUD) - Designers and developers spend a lot of time clarifying details
57. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$30 per hour (AUD) x27 - Designers and developers spend a lot of time clarifying details designers / developers (or anyone)
58. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$30 per hour (AUD) x27 = $101k per year (direct salary cost) - Designers and developers spend a lot of time clarifying details designers / developers (or anyone)
59. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$30 per hour (AUD) x27 designers / developers (or anyone) = $101k per year (direct salary cost) - Designers and developers spend a lot of time clarifying details "
60. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$30 per hour (AUD) x12 = $45k per year (direct salary cost) - Designers and developers spend a lot of time clarifying details designers / developers (or anyone)
61. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$50 per hour (AUD) x80 = $500k per year (direct salary cost) - Designers and developers spend a lot of time clarifying details designers / developers (or anyone)
62. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Direct cost of employee salary - Opportunity cost of employee time 30 minutes per day (0.5 hours per day) x250 days per year (5 days * 50 weeks) x$50 per hour (AUD) x80 = $500k per year (direct salary cost) designers / developers (or anyone)
63. If we waste $100k / year re-hashing conversations, how much do we waste re-building…? @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
64. Example: Links vs Buttons @DIDOESDIGITAL - Links navigate somewhere - Buttons perform actions Photo by Sandy Millar @sandym10 Learn more about bees. Buy bees PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
65. Example: Links vs Buttons @DIDOESDIGITAL - What about cards as links? Bees PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
66. Example: Links vs Buttons @DIDOESDIGITAL - What about nested links and buttons? Buy bees Learn more PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
67. Example: Links vs Buttons @DIDOESDIGITAL - What cursor do we use? Buy bees Learn more Cursor icons from Entypo by Daniel Bruce PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
68. #1 Tip: disagree & commit @DIDOESDIGITAL - Agree to disagree - Avoid inaction - Note your decision - Revisit with research Buy bees Learn more Cursor icons from Entypo by Daniel Bruce PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
69. #2 Tip: aim for cohesion @DIDOESDIGITAL - Cohesive, not consistent - Follow the "spirit" not "letter" of design systems, giving the impression of consistency - Use design principles to help people understand when and how to bend the rules PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
70. #2 Tip: aim for cohesion @DIDOESDIGITAL - Cohesive, not consistent - Follow the "spirit" not "letter" of design systems, giving the impression of consistency - Use design principles to help people understand when and how to bend the rules PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
71. #3 Tip: At least 30% better @DIDOESDIGITAL - Don't reinvent the wheel unless you can achieve at least a 30% improvement in your measurable outcomes Chris Pratley, Microsoft OneNote product founder — PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS https://medium.com/the-year-of-the-looking-glass/
72. https://www.juliezhuo.com
73. Obviousness comes from conforming to people’s existing mental models. Don’t waste time reinventing common UI patterns or paradigms unless they are at least 2x better, or you have some critical brand reason to do so. - Julie Zhuo, VP Product Design at Facebook
74. Obviousness comes from conforming to people’s existing mental models. Don’t waste time reinventing common UI patterns or paradigms unless they are at least 2x better, or you have some critical brand reason to do so. - Julie Zhuo, VP Product Design at Facebook
75. Key takeaways @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS Shared language 1. UI patterns 3. Design systems 2. Anti-patterns
76. Key takeaways @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS #1 Tip: disagree & commit #2 Tip: aim for cohesion #3 Tip: At least 30% better Design systems reduce hidden costs
77. UI Patterns for Design Systems @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Find the book at DiDoesDigital.com - Tweet @DiDoesDigital