Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI Patterns for Design Systems

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

Diana MacDonald

August 07, 2019
Tweet

More Decks by Diana MacDonald

Other Decks in Design

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. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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)
  25. 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
  26. Anti-pattern: Mystery meat nav. @DIDOESDIGITAL - Recovery step: use meaningful

    link text about bees PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
  27. 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
  28. 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
  29. 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
  30. Design System: Google @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    - Design: guidelines and themes - Develop: components and tutorials - Resources: downloads, tools, patterns
  31. Design System: Atlassian @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    - Brand, marketing, product - Principles, personality, assets - Processes: sparring and prototyping
  32. Design System: Shopify @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    - Content - Design - Components - Patterns & guides
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. Hidden costs: conversations @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    - Designers and developers spend a lot of time clarifying details
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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)
  48. 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)
  49. 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 "
  50. 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)
  51. 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)
  52. 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)
  53. If we waste $100k / year re-hashing conversations, how much

    do we waste re-building…? @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
  54. 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
  55. Example: Links vs Buttons @DIDOESDIGITAL - What about cards as

    links? Bees PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
  56. Example: Links vs Buttons @DIDOESDIGITAL - What about nested links

    and buttons? Buy bees Learn more PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
  57. 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
  58. #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
  59. #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
  60. #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
  61. #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/
  62. 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
  63. 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
  64. Key takeaways @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS Shared

    language 1. UI patterns 3. Design systems 2. Anti-patterns
  65. 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
  66. UI Patterns for Design Systems @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR

    DESIGN SYSTEMS - Find the book at DiDoesDigital.com - Tweet @DiDoesDigital