Designing Interfaces. Patterns for Effective Interaction Design. 3rd Edition - Helion

ebook

Autor: Jenifer Tidwell, Charles Brewer, Aynne Valencia-Brooks
ISBN: 9781492051916
stron: 600, Format: ebook
Data wydania: 2019-12-18
Księgarnia: Helion

Cena książki: 186,15 zł (poprzednio: 216,45 zł)
Oszczędzasz: 14% (-30,30 zł)

Osoby, które kupiły tę książkę, wybierały także »

Designing 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

Osoby które kupowały "Designing Interfaces. Patterns for Effective Interaction Design. 3rd Edition", wybierały także:

Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
DevOps w praktyce. Kurs video. Jenkins, Ansible, Terraform i Docker 190,00 zł, (39,90 zł -79%)
Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)

Spis treści

Designing Interfaces. Patterns for Effective Interaction Design. 3rd Edition eBook -- spis treści

Preface to the Third Edition
- Why We Wrote This Book
- Design Patterns Remain Relevant
- Software Is Systems Now
  - Focus: Screen-Based, Web, and Mobile
  - Whats Not in This Edition
    - Voice
    - Social media
    - Streaming digital television
    - Augmented reality/virtual reality/mixed reality
    - Chatbots and conversational design
    - Natural user interfacesgesture-based interfaces (beyond touch)
- Who This Book Is For
- How This Book Is Organized
  - Introduction and Design Discussion
  - The Patterns
    - What
    - Use when
    - Why
    - How
    - Examples
- Conclusion
- Conventions Used in This Book
- OReilly 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
  - Designs 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
    - Design for both novice and experienced users
  - Multiple Channels and Screen Sizes Are Todays 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
    - What
    - Use when
    - Why
    - How
    - Examples
      - Content-centric websites
      - Commerce- centric websites
      - Task-centric websites
      - Search with facets and filters
  - Mobile Direct Access
    - What
    - Use when
    - Why
    - How
    - Examples
  - Streams and Feeds
    - What
      - News/content streams
      - Social streams
      - Business collaboration
    - Use when
    - Why
    - How
    - Examples
      - News/content streams
      - Social streams
      - Business collaboration
  - Media Browser
    - What
    - Why
    - How
      - The media browser
      - The browsing interface
      - The single-item view
    - Examples
      - Browse a collection of objects
      - Manage and edit media assets
  - Dashboard
    - What
    - Why
    - How
    - Examples
  - Canvas Plus Palette
    - What
    - Use when
    - Why
    - How
    - Examples
  - Wizard
    - What
    - Use when
    - Why
    - How
      - Chunking the task
      - Physical structure
    - Examples
  - Settings Editor
    - What
    - Use when
    - Why
    - How
    - Examples
  - Alternative Views
    - What
    - Use when
    - Why
    - How
    - Examples
  - Many Workspaces
    - What
    - Use when
    - Why
    - How
    - Examples
  - Help Systems
    - What
      - Inline/display
      - Tool tips
      - Full help system
      - Guided tours
      - Knowledge base
      - Online community
    - Use when
    - Why
    - How
    - Examples
      - In-screen help: labels and tool tips
      - Help systems
      - New user experiences: guided instruction
      - Online community
  - Tags
    - What
    - Use when
    - Why
    - How
    - Examples
- 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
    - Broad global navigation
    - Put frequently accessed items directly in the global navigation
    - Bring steps together
- Navigational Models
  - Hub and Spoke
  - Fully Connected
  - Multilevel or Tree
  - Step by Step
  - Pyramid
  - Flat Navigation
- The Patterns
  - Clear Entry Points
    - What
    - Use when
    - Why
    - How
    - Examples
  - Menu Page
    - What
    - Use when
    - Why
    - How
    - Examples
  - Pyramid
    - What
    - Use when
    - Why
    - How
    - Examples
  - Modal Panel
    - What
    - Use when
    - Why
    - How
    - Examples
  - Deep Links
    - What
    - Use when
    - Why
    - How
    - Examples
  - Escape Hatch
    - What
    - Use when
    - Why
    - How
    - Examples
  - Fat Menus
    - What
    - Use when
    - Why
    - How
    - Examples
  - Sitemap Footer
    - What
    - Use when
    - Why
    - How
    - Examples
  - Sign-In Tools
    - What
    - Use when
    - Why
    - How
    - Examples
  - Progress Indicator
    - What
    - Use when
    - Why
    - How
    - Examples
  - Breadcrumbs
    - What
    - Use when
    - Why
    - How
    - Examples
  - Annotated Scroll Bar
    - What
    - Use when
    - Why
    - How
    - Examples
  - Animated Transition
    - What
    - Use when
    - Why
    - How
    - Examples
    - Further Reading
- Conclusion
4. Layout of Screen Elements
- The Basics of Layout
  - Visual Hierarchy
    - Visual hierarchy in action
  - What Makes Things Look Important?
    - Size
    - Position
    - Density
    - Background color
    - Rhythm
    - Emphasizing small items
    - Alignment and grid
  - Four Important Gestalt Principles
    - Proximity
    - Similarity
    - Continuity
    - Closure
  - Visual Flow
  - Using Dynamic Displays
    - Scroll Bars
  - Responsive Enabling
  - Progressive Disclosure
  - UI Regions
- The Patterns
  - Visual Framework
    - What
    - Use when
    - Why
    - How
    - Examples
  - Center Stage
    - What
    - Use when
    - Why
    - How
    - Examples
  - Grid of Equals
    - What
    - Use when
    - Why
    - How
    - Examples
  - Titled Sections
    - What
    - Use when
    - Why
    - How
    - Examples
  - Module Tabs
    - What
    - Use when
    - Why
    - How
    - Examples
  - Accordion
    - What
    - Use when
    - Why
    - How
    - Examples
  - Collapsible Panels
    - What
    - Use when
    - Why
    - How
    - Examples
  - Movable Panels
    - What
    - Use when
    - Why
    - How
5. Visual Style and Aesthetics
- The Basics of Visual Design
  - Visual Hierarchy
    - Clarity
    - Actionability
    - Affordance
  - Composition
    - Consistency
    - Alignment
  - Color
    - Warm versus cool
    - Dark versus light background
    - High versus low contrast
    - Saturated versus unsaturated
    - Combinations of hues
    - Dont rely on color alone
    - Color references and resources
  - Typography
    - Types of typefaces
    - Serif
    - Sans serif
    - Display
    - Monospace
    - Size
    - Leading
    - Tracking and kerning
    - Font pairing
    - Paragraph alignment
    - Numbers
  - Readability
  - Evoking a Feeling
    - Spaciousness and crowding
    - Angles and curves
    - Texture and rhythm
  - Images
    - Photography
    - Icons
    - Icon references and resources
    - Cultural references
    - Repeated visual motifs
- Visual Design for Enterprise Applications
  - Accessibility
- Ranges of Visual Styles
  - Skeuomorphic
  - Illustrated
  - Flat Design
    - For more details on 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
    - What
    - Use when
    - Why
    - How
    - Examples
  - Filmstrip
    - What
    - Use when
    - Why
    - How
    - Examples
  - Touch Tools
    - What
    - Use when
    - Why
    - How
    - Examples
  - Bottom Navigation
    - What
    - Use when
    - Why
    - How
    - Examples
  - Collections and Cards
    - What
    - Use when
    - Why
    - How
    - Examples
  - Infinite List
    - What
    - Use when
    - Why
    - How
    - Examples
  - Generous Borders
    - What
    - Use when
    - Why
    - How
    - Examples
  - Loading or Progress Indicators
    - What
    - Use when
    - Why
    - How
    - Examples
  - Richly Connected Apps
    - What
    - Use when
    - Why
    - How
    - Examples
- Make It Mobile
7. Lists of Things
- Use Cases for Lists
- Back to Information Architecture
- What Are You Trying to Show?
  - When the user selects an item from a list, where should I show the details of that item?
  - How can I show a list of items that have heavy visuals?
  - How can I manage a very long list?
  - How can I show a list thats organized into categories or hierarchies?
- The Patterns
  - Two-Panel Selector or Split View
    - What
    - Use when
    - Why
    - How
    - Examples
  - One-Window Drilldown
    - What
    - Use when
    - Why
    - How
    - Examples
  - List Inlay
    - What
    - Use when
    - Why
    - How
    - Examples
    - Further reading
  - Cards
    - What
    - Use when
    - Why
    - How
    - Examples
    - Further reading
  - Thumbnail Grid
    - What
    - Use when
    - Why
    - How
    - Examples
    - Further reading
  - Carousel
    - What
    - Use when
    - Why
    - How
    - Examples
  - Pagination
    - What
    - Use when
    - Why
    - How
    - Examples
  - Jump to Item
    - What
    - Use when
    - Why
    - How
    - Examples
  - Alpha/Numeric Scroller
    - What
    - Use when
    - Why
    - How
    - Examples
  - New-Item Row
    - What
    - Use when
    - Why
    - How
    - Examples
- 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
    - What
    - Use when
    - Why
    - How
    - Examples
  - Hover or Pop-Up Tools
    - What
    - Use when
    - Why
    - How
    - Examples
  - Action Panel
    - What
    - Use when
    - Why
    - How
      - Putting the Action Panel on the UI
      - Structuring the actions
      - Labeling the actions
    - Examples
  - Prominent Done Button or Assumed Next Step
    - What
    - Use when
    - Why
    - How
    - Examples
  - Smart Menu Items
    - What
    - Use when
    - Why
    - How
    - Examples
  - Preview
    - What
    - Use when
    - Why
    - How
    - Examples
  - Spinners and Loading Indicators
    - What
      - Spinners
      - Loading indicators
    - Use when
    - Why
    - How
    - Examples
  - Cancelability
    - What
    - Use when
    - Why
    - How
    - Examples
  - Multilevel Undo
    - What
    - Use when
    - Why
    - How
      - Design an undo or action history stack
      - Presentation
    - Examples
  - Command History
    - What
      - Undoable actions
      - Browser history
    - Use when
    - Why
    - How
    - Examples
  - Macros
    - What
    - Use when
    - Why
    - How
      - Defining the macro
      - Running the macro
    - Examples
- Conclusion
9. Showing Complex Data
- The Basics of Information Graphics
  - Organizational Models: How Is This Data Organized?
  - Preattentive Variables: Whats 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
    - What
    - Use when
    - Why
    - How
    - Examples
  - Data Spotlight
    - What
    - Use when
    - Why
    - How
    - Examples
  - Dynamic Queries
    - What
    - Use when
    - Why
    - How
    - Example
  - Data Brushing
    - What
    - Use when
    - Why
    - How
    - Examples
  - Multi-Y Graph
    - What
    - Use when
    - Why
    - How
    - Examples
  - Small Multiples
    - What
    - Use when
    - Why
    - How
    - Examples
  - The Power of Data Visualization
10. Getting Input from Users: Forms and Controls
- The Basics of Form Design
  - Form Design Continues to Evolve
    - Required versus optional
    - Floating labels
  - Further Reading
- The Patterns
  - Forgiving Format
    - What
    - Use when
    - Why
    - How
    - Examples
  - Structured Format
    - What
    - Use when
    - Why
    - How
    - Examples
  - Fill-in-the-Blanks
    - What
    - Use when
    - Why
    - How
    - Examples
  - Input Hints
    - What
    - Use when
    - Why
    - How
    - Examples
  - Input Prompt
    - What
    - Use when
    - Why
      - Not the same as floating labels
    - How
    - Examples
  - Password Strength Meter
    - What
    - Use when
    - Why
    - How
    - Examples
  - Autocompletion
    - What
    - Use when
    - Why
    - How
    - Examples
  - Drop-down Chooser
    - What
    - Use when
    - Why
    - How
    - Examples
  - List Builder
    - What
    - Use when
    - Why
    - How
    - Examples
  - Good Defaults and Smart Prefills
    - What
    - Use when
    - Why
    - How
    - Examples
  - Error Messages
    - What
    - Use when
    - Why
    - How
    - Examples
- Conclusion
11. User Interface Systems and Atomic Design
- UI Systems
  - An Example Component-Based UI System: Microsofts Fluent
- Atomic Design: A Way of Designing Systems
  - Overview
    - Break it down
    - Style guide
    - Consistency
    - Modularity
    - Nesting
    - Build it up
    - Not tied to any technology
  - The Atomic Design Hierarchy
    - Atoms
    - Molecules
    - Organisms
    - Templates
    - Pages
- UI Frameworks
  - Overview
  - Benefits
  - The Rise of UI Frameworks
  - A Look at Selected UI Frameworks
    - Bootstrap
    - Foundation
    - Semantic UI
    - Materialize
    - Blueprint
    - UIkit
- Conclusion
12. Beyond and Behind the Screen
- The Ingredients: Smart Systems
  - Connected Devices
  - Anticipatory Systems
  - Assistive Systems
  - Natural User Interfaces
- Conclusion
Index