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

    View full-size slide

  2. Diana MacDonald
    @DiDoesDigital
    WHO AM I?
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Design Systems Team Lead
    - Product Designer
    - Coder
    - Author
    AUGUST 2019

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  5. Practical UI Patterns
    for Design Systems
    @DIDOESDIGITAL
    - UI patterns
    - Anti-patterns
    - Design systems
    - Shared language

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  10. Pattern:
    login form
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Problem: the user wants to access private,
    personalised information

    View full-size slide

  11. Pattern:
    login form
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Problem: the user wants to access private,
    personalised information

    View full-size slide

  12. Pattern:
    login form
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Context: when the user is trying to access
    their content

    View full-size slide

  13. Pattern:
    login form
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Context: when the user is trying to access
    their content

    View full-size slide

  14. Pattern:
    login form
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Context: when the user is trying to access
    their content

    View full-size slide

  15. Pattern:
    login form
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Context: when the user is trying to access
    their content

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  18. Photo by Clément Falize @centelm

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  27. Anti-pattern:
    Mystery meat nav.
    @DIDOESDIGITAL
    - Recovery step: use meaningful link text
    about bees
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  28. Photo by Matthew T Rader @matthew_t_rader

    View full-size slide

  29. Hitting the right note includes
    knowing when not to strike.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Design System:
    Shopify
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Content
    - Design
    - Components
    - Patterns & guides

    View full-size slide

  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

    View full-size slide

  37. Image created by Wolfgang Beyer with the program Ultra Fractal 3

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  40. UI patterns & design systems
    fast-track consistent design
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  41. UI patterns & design systems
    fast-track consistent design
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  42. UI patterns & design systems
    fast-track consistent design
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  43. UI patterns & design systems
    fast-track consistent design
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  44. UI patterns & design systems
    fast-track consistent design
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  45. UI patterns & design systems
    fast-track consistent design
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  49. Hidden costs:
    conversations
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Designers and developers spend a
    lot of time clarifying details

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  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)

    View full-size slide

  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
    "

    View full-size slide

  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)

    View full-size slide

  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)

    View full-size slide

  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)

    View full-size slide

  63. If we waste $100k / year re-hashing
    conversations, how much do we
    waste re-building…?
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  66. Example:
    Links vs Buttons
    @DIDOESDIGITAL
    - What about nested links and buttons?
    Buy bees
    Learn more
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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/

    View full-size slide

  72. https://www.juliezhuo.com

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  75. Key takeaways
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    Shared language
    1. UI patterns 3. Design systems
    2. Anti-patterns

    View full-size slide

  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

    View full-size slide

  77. UI Patterns for
    Design Systems
    @DIDOESDIGITAL
    PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS
    - Find the book at DiDoesDigital.com
    - Tweet @DiDoesDigital

    View full-size slide