Practical UI Patterns for Design Systems (eBook)

Table of Contents 5
About the Author 12
About the Technical Reviewer 13
Acknowledgments 14
Introduction 15
Chapter 1: Introducing UI patterns 19
What’s a UI pattern? 19
Elements of a UI pattern 24
Other pattern details 27
Why care about patterns? 29
Design efficiently 29
Consistency and familiarity 30
Consistency and reuse 32
Communicating decisions 33
Communicating within teams and tools 34
Evidence-based solutions 36
Context-specific, tailored solutions 37
Content contributors without a web design background 37
Learning from the experts 37
Learning how to improve experiences from patterns 38
Summary 39
Chapter 2: Tap into patterns 40
Learning new patterns (sharpening the saw) 40
Pattern collections 41
Pattern galleries 42
Platform guidelines 43
UI frameworks 45
Pattern libraries, design systems, style guides, and anti-patterns 46
Inspiring visual style 46
Pattern: Walkthrough 47
Workflow walkthroughs 50
Concept walkthroughs 51
Pattern: Playthrough 54
Setup playthrough 55
Sandbox playthrough 56
When to use a playthrough 57
Pattern: Newsletter signup 60
Pattern: Validation feedback 65
Identifying relevant patterns 70
Searching for patterns 71
Pattern: Social signup 73
Pattern: Lazy signup 74
Competitive analysis 75
Learn from the best 77
Pattern: Notifications 78
Containers for notifications 80
The opportune moment 84
Pattern: Good defaults 85
Pattern: Coachmarks 86
Implementing and tailoring patterns 90
Pattern: Progressive disclosure 91
Pattern: Staged disclosure 92
Pattern: Progressive reduction 96
Bringing it all together 98
Pattern: Login form 98
Example: Redesigning a login form 100
From the pattern 101
Pattern resources 103
Searching for patterns 105
Competitive analysis 106
Learning from the best 107
Summary 108
Chapter 3: Deciding which pattern to use and when 109
Context 109
Pattern: Autocomplete 110
Autosuggest 112
User context and performance 114
Pattern: Search filters 115
Information architecture 118
Multiple filters 120
Filter feedback 121
Choosing filters 123
Live filters 124
Batch filters 125
Error prevention and recovery 127
Pattern: Activity feed 128
Pattern: Favorites 131
A rose by any other name 133
Microcopy 135
Pattern: Pagination 136
Where to draw the line 137
Accessibility 138
Pattern: Infinite scroll 139
Principle of choices in action 141
Principle of disclosure in action 142
Inclusive design 143
Infinite scroll vs. pagination 144
Infinite scroll and favorites 144
Pattern: Follow 145
Pattern: Friend’s list 147
Friends and followers 148
Interaction and motion design 149
Triggers 150
Action 152
Feedback 152
When is a pattern a bad idea? 153
Example: Login form 153
Summary 158
Chapter 4: Patterns in design systems 159
What’s in a name? The devil is in the details 159
Pattern libraries 160
Design systems 160
Related design, code, and content resources 161
Editorial style guides 161
Brand guides 163
Design guidelines and visual language 165
Style guides relating to code 167
Front-end style guides 167
Living style guides 169
Code style guides 170
Component libraries 171
Templates and Content Management Systems (CMSs) 174
Building design systems using patterns 174
When to use a design system 175
Framing 176
Context 176
Audience 177
Purpose 177
Workflows and design processes 178
Pattern previews 180
Interactive previews 182
Live markup and styling 185
Static images, animations, and videos 187
Code assets 192
Prototyping in the browser 192
Writing code 193
Converting design elements to code 194
Design assets 196
Writing and content 198
Documenting patterns or components 198
Extra design system features 199
Growing a design system 202
Kick off 202
Assembly 203
Versioning 204
Serving assets 207
Tools 207
Evolution 208
Summary 208
Chapter 5: Anti-patterns and dark patterns 209
What are anti-patterns? 209
Why care about anti-patterns? 211
Anti-pattern: Hamburger basement 212
What are dark patterns? 218
Manipulinks and Confirmshamers 219
Design smells 222
Too Much Information (TMI) 223
Modals and pop-ups 225
Modal UI pattern 225
Modal design smell 229
Pop-up anti-pattern 230
“Overall pattern” design smell 235
The lifetime of a bad pattern 236
Chapter 6: Mixing and  matching patterns 238
How to combine patterns successfully to build a more complex UI: Scoped searches example 239
Reuse elements across patterns: Categories as search filters 240
Cut duplicate content from combined patterns: Categories as search terms 246
Efficiently combine patterns to avoid the need for others: Autosuggest and thumbnails 248
Interstitial patterns: Autosuggest and navigable categories 251
Visually combine and distinguish patterns: Categories in tabbed navigation 258
Preserve or discard data in repeated use of patterns: Clearing filters on new searches 264
Clarify repeated patterns: Inline tags 267
Evaluate resulting trade-offs: Infinite scroll 268
Other forms of scoped search 271
Favoriting becomes wish listing 271
Wish lists/wish listing 272
Combining wish listing and lazy signup 274
When and how to break away from patterns 275
Investigate design smells 275
Review pattern principles for identified usability problems 276
Review problem and context 277
Strive for predictability 278
Innovate 279
How to break the rules 280
When to break patterns in design systems 282
Summary 283
Chapter 7: Conclusion 285
Looking to the future 286
Appendix: Suggested reading 288
Chapter 2 288
Chapter 3 293
Chapter 4 294
Chapter 5 298
Index 300