Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Pattern: login form @DIDOESDIGITAL PRACTICAL UI PATTERNS FOR DESIGN SYSTEMS - Solution: ask for an identifier & authentication - Identifier: username - Authentication: password - Submit button: log in

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Photo by Clément Falize @centelm

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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)

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Photo by Matthew T Rader @matthew_t_rader

Slide 29

Slide 29 text

Hitting the right note includes knowing when not to strike.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Image created by Wolfgang Beyer with the program Ultra Fractal 3

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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)

Slide 58

Slide 58 text

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)

Slide 59

Slide 59 text

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 "

Slide 60

Slide 60 text

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)

Slide 61

Slide 61 text

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)

Slide 62

Slide 62 text

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)

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

#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

Slide 69

Slide 69 text

#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

Slide 70

Slide 70 text

#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

Slide 71

Slide 71 text

#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/

Slide 72

Slide 72 text

https://www.juliezhuo.com

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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