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
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
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
- 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
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
FOR DESIGN SYSTEMS - Create familiar and predictable interfaces - Reduce design decisions and save time - Communicate decisions - Use smart defaults without extensive product design experience
@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
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
"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
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)
@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
UI PATTERNS FOR DESIGN SYSTEMS - Document, share, and spark conversations around design decisions - Streamline workflows that maximise consistency and save time - Reduce hidden costs
SYSTEMS - Shows components, such as buttons and modals - Highlights inconsistencies that confuse users - Highlights code complexity and a source of bugs
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
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
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
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)
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)
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 "
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)
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)
- 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)
- 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
- 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
- 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
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/
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
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
didoesdigital
ncdc
mosmos_noki
cyberagentdevelopers
itoaya116
stmn
takuto_yonemichi
base
haruki556
baasie
zakkerooni
bcantrill
marcduiker
panda_program
palkan
hatefulcrawdad
aki_iinuma
lara
speakerdeck
chriscoyier
eileencodes
rocio
jonyablonski
