الگوهای کاربردی رابط کاربری برای سیستم‌های طراحی: تسریع طراحی تعامل برای تجربه کاربری یکپارچه

Understanding UI patterns is invaluable to anyone creating websites for the first time. It helps you make connections between which tools are right for which jobs, understand the processes, and think deeply about the context of a problem. This is your concise guide to the tested and proven general mechanisms for solving recurring user interface problems, so that you don't have to reinvent the wheel. You'll see how to find a pattern you can apply to a given UI problem and how to deconstruct patterns to understand them in depth, including their constraints. UI patterns lead to better use of existing conventions and converging web standards. This book shows you how to spot anti-patterns, how to mix and match patterns, and how they inform design systems. By helping the non-web professionals and junior web professionals of the world use basic patterns, the web industry can put its best foot forward as new interfaces such as VR/AR/MR, conversational UIs, machine learning, voice input, evolving gestural interactions and more infiltrate the market. Given the emerging popularity of design systems and space of DesignOps, as well as the rise of companies competing on design and usability, now is the time to think about how we use and evolve UI patterns and scale design systems. What You'll Learn Produce intuitive products through consistency and familiarity. Save time instead of starting from scratch. Communicate design decisions with evidence to support solutions. Use smart defaults without extensive product design experience. Improve a user's experience. Scale growing business with design. Who This Book Is For Those familiar with creating websites and want to learn more, WordPress bloggers, or marketers who want to weave components together into a usable, revenue-generating experience. 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