Designing Interfaces: Patterns for Effective Interaction Design 3rd Edition
Designing Interfaces: Patterns for Effective Interaction Design Third Edition:
esigning good application interfaces isnâ??t easy now that companies need to create compelling, seamless user experiences across an exploding number of channels, screens, and contexts. In this updated third edition, youâ??ll learn how to navigate through the maze of design options. By capturing UI best practices as design patterns, this best-selling book provides solutions to common design problems.
Youâ??ll learn patterns for mobile apps, web applications, and desktop software. Each pattern contains full-color examples and practical design advice you can apply immediately. Experienced designers can use this guide as an idea sourcebook, and novices will find a road map to the world of interface and interaction design.
- Understand your users before you start designing
- Build your softwareâ??s structure so it makes sense to users
- Design components to help users complete tasks on any device
- Learn how to promote wayfinding in your software
- Place elements to guide users to information and functions
- Learn how visual design can make or break product usability
- Display complex data with artful visualizations
Additional ISBNs:
∗ eText ISBN: 1492051918, 978-1492051916, 9781492051916
- See additional information on the Amazon.
More Details
Designing Interfaces: Patterns for Effective Interaction Design 3rd Edition:
Cover
Copyright
Table of Contents
Preface to the Third Edition
Why We Wrote This Book
Design Patterns Remain Relevant
Software Is Systems Now
Focus: Screen-Based, Web, and Mobile
What’s Not in This Edition
Who This Book Is For
How This Book Is Organized
Introduction and Design Discussion
The Patterns
Conclusion
Conventions Used in This Book
O’Reilly Online Learning
How to Contact Us
Acknowledgments
1. Designing for People
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
2. Organizing the Content: Information Architecture and Application Structure
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
3. Getting Around: Navigation, Signposts, and Wayfinding
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
4. Layout of Screen Elements
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
5. Visual Style and Aesthetics
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
6. Mobile Interfaces
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
7. Lists of Things
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
8. Doing Things: Actions and Commands
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
9. Showing Complex Data
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
10. Getting Input from Users: Forms and Controls
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
11. User Interface Systems and Atomic Design
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
12. Beyond and Behind the Screen
The Ingredients: Smart Systems
Connected Devices
Anticipatory Systems
Assistive Systems
Natural User Interfaces
Conclusion
Index
About the Authors
Colophon
Reviews
There are no reviews yet.