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

کتاب «الگوهای کاربردی رابط کاربری برای سیستم‌های طراحی: تسریع طراحی تعامل برای تجربه کاربری یکپارچه» (Practical UI Patterns for Design Systems) نوشته‌ی دایانا مک‌دونالد، راهنمایی فشرده و کاربردی برای درک و به‌کارگیری الگوهای رابط کاربری در فرایند طراحی محصولات دیجیتال است. این کتاب که در سال ۲۰۱۹ توسط انتشارات معتبر اسپرینگر (Apress) منتشر شده، به طراحان و توسعه‌دهندگان وب کمک می‌کند تا با استفاده از راه‌حل‌های آزمون‌شده برای مشکلات تکراری رابط کاربری، تجربه‌ای یکپارچه و کارآمد برای کاربران خلق کنند و از اتلاف وقت برای طراحی دوباره‌ی چرخ جلوگیری نمایند.

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

موضوع اصلی این کتاب، آشنایی با الگوهای رابط کاربری (UI patterns) و کاربرد آن‌ها در سیستم‌های طراحی است. مک‌دونالد با بیانی روان و ساختاری گام‌به‌گام، به خواننده نشان می‌دهد که چگونه یک الگوی مناسب برای مسئله‌ی طراحی پیش‌رو پیدا کند، الگوها را به‌دقت واکاوی نماید و از محدودیت‌های آن‌ها آگاه شود. کتاب فراتر از معرفی صرف الگوها رفته و مباحث کلیدی مانند تشخیص ضدالگوها (anti-patterns)، ترکیب الگوها با یکدیگر و نقش آن‌ها در شکل‌دهی به سیستم‌های طراحی را نیز پوشش می‌دهد. ایده‌ی محوری کتاب بر این اصل استوار است که استفاده از الگوهای استاندارد و شناخته‌شده، به یکپارچگی و آشنایی بیشتر محصولات دیجیتال منجر شده و در نتیجه، تجربه‌ی کاربری بهتری را رقم می‌زند. این رویکرد نه‌تنها برای حرفه‌ای‌های باتجربه، بلکه برای افرادی که به‌تازگی وارد حوزه‌ی طراحی وب شده‌اند نیز بسیار ارزشمند است. کتاب با در نظر گرفتن تحولات دنیای دیجیتال، مانند رابط‌های مکالمه‌ای (conversational UIs)، واقعیت مجازی (VR) و یادگیری ماشین، بر اهمیت روزافزون سیستم‌های طراحی و جایگاه الگوها در مقیاس‌پذیری آن‌ها تأکید می‌کند.

دربارهٔ نویسنده

نویسنده‌ی کتاب، دایانا مک‌دونالد (Diana MacDonald)، یک طراح محصول اهل استرالیا است که بیش از یک دهه در صنعت فناوری فعالیت داشته است. او تجربه‌ی همکاری با سازمان‌های پیشرویی مانند «کالچر امپ» (Culture Amp)، «بلروی» (Bellroy) و «سایت‌پوینت» (SitePoint) را در کارنامه‌ی خود دارد. مک‌دونالد در نقش طراح ارشد محصول و رهبر تیم در کالچر امپ، مسئولیت راه‌اندازی تیم جدید سیستم‌های طراحی را بر عهده داشته و با ایجاد یک زبان مشترک، فرایند طراحی و توسعه را تسریع کرده است.

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

این کتاب با ارائه‌ی بینش‌های کلیدی، مزایای متعددی برای خواننده به ارمغان می‌آورد که در ادامه به برخی از مهم‌ترین آن‌ها اشاره می‌شود:

• طراحی محصولات شهودی از طریق یکپارچگی و آشنایی: با به‌کارگیری الگوهای استاندارد، کاربران با ساختار محصول آشنا بوده و تعامل با آن برایشان ساده‌تر می‌شود.
• صرفه‌جویی در زمان با اجتناب از دوباره‌کاری: به‌جای طراحی راه‌حل‌های جدید برای هر مسئله، از الگوهای اثبات‌شده استفاده کرده و زمان را برای نوآوری در بخش‌های مهم‌تر ذخیره می‌کنید.
• مستندسازی و ارائه‌ی مستدل تصمیمات طراحی: کتاب به شما می‌آموزد که چگونه با استناد به الگوها و شواهد، انتخاب‌های طراحی خود را به‌درستی توجیه و به تیم یا کارفرما منتقل کنید.
• آشنایی با مفاهیم پیشرفته‌تر مانند ضدالگوها: شما نه‌تنها با الگوهای مفید، بلکه با ضدالگوها و الگوهای تاریک (dark patterns) نیز آشنا شده و از آن‌ها در طراحی خود اجتناب می‌کنید.
• مقیاس‌پذیری کسب‌وکار از طریق طراحی مؤثر: یاد می‌گیرید که چگونه با استفاده از یک سیستم طراحی منسجم و مبتنی بر الگو، نیازهای یک کسب‌وکار در حال رشد را پاسخ دهید.

این کتاب برای چه کسانی مناسب است؟

این کتاب منبعی ارزشمند برای طیف گسترده‌ای از مخاطبان است. طراحان تازه‌کار و حرفه‌ای‌های غیروب که به‌تازگی وارد حوزه‌ی طراحی وب شده‌اند، با مطالعه‌ی آن درک عمیق‌تری از ابزارها و فرایندهای طراحی پیدا می‌کنند. همچنین افرادی که با وب‌سایت‌سازی آشنایی دارند، وبلاگ‌نویسان وردپرسی و بازاریابانی که به‌دنبال خلق تجربه‌های کاربردی و درآمدزا هستند، می‌توانند از مفاهیم این کتاب برای بهبود عملکرد وب‌سایت خود بهره ببرند. در نهایت، این کتاب برای هر کسی که به سیستم‌های طراحی و حوزۀ DesignOps علاقه‌مند است، منبعی مفید و ضروری محسوب می‌شود.

سوالات متداول

آیا برای درک این کتاب نیاز به دانش قبلی در زمینهٔ طراحی دارم؟

این کتاب برای افراد با سطوح مختلف دانش طراحی مفید است. اگرچه برای مبتدیان بسیار کاربردی است و مبانی را پوشش می‌دهد، اما برای طراحان با تجربه‌تر نیز بینش‌های ارزشمندی دربارهٔ سیستم‌های طراحی و الگوهای پیشرفته ارائه می‌کند. آشنایی مقدماتی با مفاهیم طراحی وب می‌تواند به درک بهتر مطالب کمک کند، اما ضروری نیست.

آیا کتاب صرفاً بر روی الگوهای ظاهری (Visual Patterns) تمرکز دارد؟

خیر، این کتاب بسیار فراتر از الگوهای بصری صرف است. مباحثی مانند چگونگی تصمیم‌گیری برای انتخاب الگوی مناسب، تحلیل محدودیت‌های الگوها، تشخیص ضدالگوها و نحوهٔ تأثیر الگوها بر سیستم‌های طراحی و تجربهٔ کاربری را نیز شامل می‌شود.

چه تفاوتی بین الگوهای رابط کاربری و سیستم‌های طراحی وجود دارد و کتاب چگونه این دو را به هم مرتبط می‌سازد؟

الگوهای رابط کاربری، راه‌حل‌های استانداردی برای مسائل تکراری طراحی هستند، در حالی که سیستم‌های طراحی مجموعه‌ای جامع‌تر از مؤلفه‌ها، دستورالعمل‌ها و فلسفه‌ی طراحی هستند. این کتاب به‌وضوح نشان می‌دهد که چگونه الگوها به‌عنوان اجزای سازنده و بلوک‌های اصلی یک سیستم طراحی عمل کرده و به یکپارچگی، مقیاس‌پذیری و کارایی آن کمک می‌کنند.

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