کتاب طراحی رابط‌های کاربری، ویرایش سوم

طراحی برای انسان‌ها

Context • Know Your Audience • Interactions Are Conversations • Match Your Content and Functionality to Your Audience • Skill Level • Goals: Your Interface Is Just a Means to Their Ends • Ask Why • Design’s Value: Solve the Right Problem, and Then Solve It Right • Research: Ways to Understand Context and Goals • Direct Observation • Case Studies • Surveys • Personas • Design Research Is Not Marketing Research • The Patterns: Cognition and Behavior Related to Interface Design • Safe Exploration • Instant Gratification • Satisficing • Changes in Midstream • Deferred Choices • Incremental Construction • Habituation • Microbreaks • Spatial Memory • Prospective Memory • Streamlined Repetition • Keyboard Only • Social Media, Social Proof, and Collaboration • Conclusion

سازماندهی محتوا: معماری اطلاعات و ساختار برنامه

Purpose • Definition • Designing an Information Space for People • Approach • Separate Information from Presentation • Mutually Exclusive, Collectively Exhaustive • Ways to Organize and Categorize Content • Alphabetical • Number • Time • Location • Hierarchy • Category or Facet • Designing for Task and Workflow-Dominant Apps • Make Frequently Used Items Visible • “Chunk Up” Jobs into a Sequence of Steps • Multiple Channels and Screen Sizes Are Today’s Reality • Display Your Information as Cards • Designing a System of Screen Types • Overview: Show a List or Grid of Things or Options • Focus: Show One Single Thing • Make: Provide Tools to Create a Thing • Do: Facilitate a Single Task • The Patterns • Feature, Search, and Browse • Mobile Direct Access • Streams and Feeds • Media Browser • Dashboard • Canvas Plus Palette • Wizard • Settings Editor • Alternative Views • Many Workspaces • Help Systems • Tags • Conclusion

گشت‌وگذار: ناوبری، تابلوهای راهنما و مسیریابی

Understanding the Information and Task Space • Signposts • Wayfinding • Navigation • Global Navigation • Utility Navigation • Associative and Inline Navigation • Related Content • Tags • Social • Design Considerations • Separate the Navigation Design from the Visual Design • Cognitive Load • Keep Distances Short • Navigational Models • Hub and Spoke • Fully Connected • Multilevel or Tree • Step by Step • Pyramid • Flat Navigation • The Patterns • Clear Entry Points • Menu Page • Pyramid • Modal Panel • Deep Links • Escape Hatch • Fat Menus • Sitemap Footer • Sign-In Tools • Progress Indicator • Breadcrumbs • Annotated Scroll Bar • Animated Transition • Conclusion

چیدمان عناصر صفحه

The Basics of Layout • Visual Hierarchy • What Makes Things Look Important? • Four Important Gestalt Principles • Visual Flow • Using Dynamic Displays • Responsive Enabling • Progressive Disclosure • UI Regions • The Patterns • Visual Framework • Center Stage • Grid of Equals • Titled Sections • Module Tabs • Accordion • Collapsible Panels • Movable Panels

سبک بصری و زیبایی‌شناسی

The Basics of Visual Design • Visual Hierarchy • Composition • Color • Typography • Readability • Evoking a Feeling • Images • Visual Design for Enterprise Applications • Accessibility • Ranges of Visual Styles • Skeuomorphic • Illustrated • Flat Design • Minimalistic • Adaptive/Parametric • Conclusion

رابط‌های کاربری موبایل

The Challenges and Opportunities of Mobile Design • Tiny Screen Sizes • Variable Screen Widths • Touch Screens • Difficulty of Typing Text • Challenging Physical Environments • Location Awareness • Social Influences and Limited Attention • How to Approach a Mobile Design • Some Worthy Examples • The Patterns • Vertical Stack • Filmstrip • Touch Tools • Bottom Navigation • Collections and Cards • Infinite List • Generous Borders • Loading or Progress Indicators • Richly Connected Apps • Make It Mobile

فهرست‌ها

Use Cases for Lists • Back to Information Architecture • What Are You Trying to Show? • The Patterns • Two-Panel Selector or Split View • One-Window Drilldown • List Inlay • Cards • Thumbnail Grid • Carousel • Pagination • Jump to Item • Alpha/Numeric Scroller • New-Item Row • Lists Abound

انجام کارها: کنش‌ها و دستورات

Tap, Swipe, and Pinch • Rotate and Shake • Buttons • Menu Bars • Pop-Up Menus • Drop-Down Menus • Toolbars • Links • Action Panels • Hover Tools • Single-Clicking Versus Double-Clicking Items • Keyboard Actions • Shortcuts • Tab Order • Drag-and-Drop • Typed Commands • Affordance • Direct Manipulation of Objects • The Patterns • Button Groups • Hover or Pop-Up Tools • Action Panel • Prominent “Done” Button or Assumed Next Step • Smart Menu Items • Preview • Spinners and Loading Indicators • Cancelability • Multilevel Undo • Command History • Macros • Conclusion

نمایش داده‌های پیچیده

The Basics of Information Graphics • Organizational Models: How Is This Data Organized? • Preattentive Variables: What’s Related to What? • Navigation and Browsing: How Can I Explore This Data? • Sorting and Rearranging: Can I Rearrange This Data to See It Differently? • Searching and Filtering: How Can I See Only the Data That I Need? • The Actual Data: What Are the Specific Data Values? • The Patterns • Datatips • Data Spotlight • Dynamic Queries • Data Brushing • Multi-Y Graph • Small Multiples • The Power of Data Visualization

دریافت ورودی از کاربران: فرم‌ها و کنترل‌ها

The Basics of Form Design • Form Design Continues to Evolve • Further Reading • The Patterns • Forgiving Format • Structured Format • Fill-in-the-Blanks • Input Hints • Input Prompt • Password Strength Meter • Autocompletion • Drop-down Chooser • List Builder • Good Defaults and Smart Prefills • Error Messages • Conclusion

سیستم‌های رابط کاربری و طراحی اتمی

UI Systems • An Example Component-Based UI System: Microsoft’s Fluent • Atomic Design: A Way of Designing Systems • Overview • The Atomic Design Hierarchy • UI Frameworks • Overview • Benefits • The Rise of UI Frameworks • A Look at Selected UI Frameworks • Conclusion

فراتر و پشت پرده صفحه نمایش

The Ingredients: Smart Systems • Connected Devices • Anticipatory Systems • Assistive Systems • Natural User Interfaces • Conclusion