Designing Web Interfaces

Designing Web Interfaces

by Bill Scott, Theresa Neil
Released January 2009
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596516253

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Want to learn how to create great user experiences on today's Web? In this book, UI experts Bill Scott and Theresa Neil present more than 75 design patterns for building web interfaces that provide rich interaction. Distilled from the authors' years of experience at Sabre, Yahoo!, and Netflix, these best practices are grouped into six key principles to help you take advantage of the web technologies available today. With an entire section devoted to each design principle, Designing Web Interfaces helps you:

  • Make It Direct-Edit content in context with design patterns for In Page Editing, Drag & Drop, and Direct Selection
  • Keep It Lightweight-Reduce the effort required to interact with a site by using In Context Tools to leave a "light footprint"
  • Stay on the Page-Keep visitors on a page with overlays, inlays, dynamic content, and in-page flow patterns
  • Provide an Invitation-Help visitors discover site features with invitations that cue them to the next level of interaction
  • Use Transitions-Learn when, why, and how to use animations, cinematic effects, and other transitions
  • React Immediately-Provide a rich experience by using lively responses such as Live Search, Live Suggest, Live Previews, and more

Designing Web Interfaces illustrates many patterns with examples from working websites. If you need to build or renovate a website to be truly interactive, this book gives you the principles for success.

Publisher resources

View/Submit Errata

Table of contents

  1. Foreword
  2. Preface
    1. What Happened
    2. Why We Wrote This Book
    3. What This Book Is About
      1. Design Patterns
    4. Who Should Read This Book
    5. What Comes with This Book
    6. Conventions Used in This Book
    7. Using Examples
    8. We’d Like to Hear from You
    9. Safari Books Online
    10. Acknowledgments
      1. Bill’s Acknowledgments
      2. Theresa’s Acknowledgments
  3. I. Make It Direct
    1. 1. In-Page Editing
      1. Single-Field Inline Edit
        1. Considerations
          1. Discoverability
          2. Accessibility
      2. Multi-Field Inline Edit
        1. Considerations
          1. Readability versus editability
          2. Blending display and edit modes
          3. WYSIWYG
      3. Overlay Edit
        1. Considerations
          1. Why an overlay?
      4. Table Edit
        1. Considerations
          1. Activation
      5. Group Edit
        1. Considerations
          1. Discoverability
          2. Discoverability versus readability
          3. Symmetry of Interaction
      6. Module Configuration
        1. Considerations
          1. Visual noise
      7. Guidelines for Choosing Specific Editing Patterns
    2. 2. Drag and Drop
      1. Interesting Moments
        1. The Events
        2. The Actors
        3. Interesting Moments Grid
      2. Purpose of Drag and Drop
      3. Drag and Drop Module
        1. Considerations
          1. Placeholder target
          2. Insertion target
          3. Drag distance
          4. Drag rendering
      4. Drag and Drop List
        1. Considerations
          1. Placeholder target
          2. Insertion target
          3. Non-drag and drop alternative
          4. Hinting at drag and drop
          5. Drag lens
      5. Drag and Drop Object
        1. Considerations
          1. Drag feedback: Highlighting
          2. Drag feedback: Dragged object versus drop target
          3. Drag feedback: Drag positioning
          4. Drag feedback: Drag start
      6. Drag and Drop Action
        1. Considerations
          1. Anti-pattern: Artificial Visual Construct
          2. Natural Visual Construct
      7. Drag and Drop Collection
        1. Considerations
          1. Discoverability
          2. Teachable moment
      8. The Challenges of Drag and Drop
    3. 3. Direct Selection
      1. Toggle Selection
        1. Considerations
          1. Scrolling versus paging
          2. Making selection explicit
      2. Collected Selection
        1. Considerations
          1. Keeping the selection visible
          2. Collected Selection and actions
      3. Object Selection
        1. Considerations
          1. Desktop-style selection
      4. Hybrid Selection
        1. Considerations
          1. Confusing two models
          2. Blending two models
  4. II. Keep It Lightweight
    1. 4. Contextual Tools
      1. Interaction in Context
      2. Fitts’s Law
      3. Contextual Tools
      4. Always-Visible Tools
        1. Considerations
          1. Clear call to action
          2. Relative importance
          3. Discoverability
      5. Hover-Reveal Tools
        1. Considerations
          1. Visual noise
          2. Discoverability
          3. Contextual Tools in an overlay
          4. Anti-pattern: Hover and Cover
          5. Anti-pattern: Mystery Meat
          6. Activation
      6. Toggle-Reveal Tools
        1. Considerations
          1. Soft mode
      7. Multi-Level Tools
        1. Considerations
          1. Radial menus
          2. Activation
          3. Default action
          4. Contextual toolbar
          5. Muttons
          6. Anti-pattern: Tiny Targets
      8. Secondary Menu
        1. Considerations
          1. Conflict with browser menu
          2. Discoverability
          3. Accessibility
          4. Acting on multiple objects
  5. III. Stay on the Page
    1. 5. Overlays
      1. Dialog Overlay
        1. Considerations
          1. Lightbox Effect
          2. Modality
          3. Staying in the flow
          4. Anti-pattern: Idiot Boxes
          5. Using JavaScript alerts
      2. Detail Overlay
        1. Considerations
          1. Activation
          2. Anti-pattern: Mouse Traps
          3. Anti-pattern: Non-Symmetrical Activation/Deactivation
          4. Anti-pattern: Needless Fanfare
          5. Anti-pattern: Hover and Cover
      3. Input Overlay
        1. Considerations
          1. Clear focus
          2. Display versus editing
          3. Anti-pattern: Hover and Cover
    2. 6. Inlays
      1. Dialog Inlay
        1. Considerations
          1. In context
      2. List Inlay
        1. Considerations
          1. Accordion: One-at-a-time expand
          2. Accordion: More than one pane visible at a time
          3. Parallel content
      3. Detail Inlay
        1. Considerations
          1. Combining inlays and overlays
      4. Tabs
        1. Considerations
          1. Traditional tabs
          2. Content tabs
          3. Personal assistant tabs
      5. Inlay Versus Overlay?
    3. 7. Virtual Pages
      1. Virtual Scrolling
        1. Considerations
          1. Desktop-style applications
          2. Loading status
          3. Progressive loading
      2. Inline Paging
        1. Considerations
          1. In-page update
          2. Natural chunking
          3. Back button
          4. Interactive content loading
      3. Scrolled Paging: Carousel
        1. Considerations
          1. Time-based
          2. Animation direction
      4. Virtual Panning
        1. Considerations
          1. Natural Visual Construct
          2. Gestures
      5. Zoomable User Interface
        1. Considerations
      6. Paging Versus Scrolling
    4. 8. Process Flow
      1. Google Blogger
      2. The Magic Principle
      3. Interactive Single-Page Process
        1. Considerations
          1. Responsiveness
          2. Keeping users engaged
          3. Benefits
      4. Inline Assistant Process
        1. Considerations
          1. Quick and easy
          2. Additional step
          3. Blending quick and easy with the additional step
      5. Dialog Overlay Process
        1. Considerations
          1. Making it feel lightweight
          2. Clear status
      6. Configurator Process
        1. Considerations
          1. Immediate feedback
          2. Out of view status
      7. Static Single-Page Process
        1. Considerations
          1. Making it feel lightweight
          2. Multiple pages are not necessarily evil
  6. IV. Provide an Invitation
    1. 9. Static Invitations
      1. Call to Action Invitation
        1. Considerations
          1. Visual noise
          2. Blank Slate Invitation
          3. Unfinished invitation
      2. Tour Invitation
        1. Considerations
          1. Not a Band-Aid
          2. Keep it simple
          3. Introducing new idioms
    2. 10. Dynamic Invitations
      1. Hover Invitation
        1. Considerations
          1. Visual cues
          2. Interactive versus static
          3. Enhancing Hover Invitation
      2. Affordance Invitation
        1. Considerations
          1. Bridging the new with the familiar
          2. Multiple idioms
          3. Perceived affordance
      3. Drag and Drop Invitation
        1. The Events
        2. Considerations
          1. Invitation to drag
          2. Advertising drag and drop
          3. Invitation to drop
      4. Inference Invitation
        1. Considerations
          1. Intelligent interaction
      5. More Content Invitation
        1. Considerations
          1. Hinting with animation
          2. Hinting by providing a sneak peek
      6. The Advantage of Invitations
  7. V. Use Transitions
    1. 11. Transitional Patterns
      1. Brighten and Dim
        1. Considerations
          1. Importance
          2. Active
          3. Not ready
      2. Expand/Collapse
        1. Considerations
          1. Expand/Collapse Inlays
          2. Expand/Collapse as Overlay
      3. Self-Healing Fade
        1. Considerations
      4. Animation
        1. Considerations
          1. Zoom back
          2. Drop animation
          3. Cut it in half rule
      5. Spotlight
        1. Considerations
          1. Signaling change
    2. 12. Purpose of Transitions
      1. Engagement
      2. Communication
        1. Maintain Context While Changing Views
          1. Slide In and Slide Out
          2. Faceplate
          3. Flip
          4. Carousel
          5. Accordion
        2. Explain What Just Happened
          1. Opposite effect
        3. Show Relationships Between Objects
        4. Focus Attention
        5. Improve Perceived Performance
        6. Create Illusion of Virtual Space
  8. VI. React Immediately
    1. 13. Lookup Patterns
      1. Auto Complete
        1. Considerations
          1. Typing
          2. Matching
          3. Selecting
          4. Kayak Auto Complete
      2. Live Suggest
        1. Considerations
          1. Typing
          2. Matching
          3. Selecting
        2. More Considerations
          1. Typing
          2. Matching and selecting
      3. Live Search
        1. Considerations
          1. Typing
          2. Matching and selection
          3. Contextual results
          4. Previews in Live Search
          5. Narrowing too quickly
          6. Combining Live Suggest and Live Search
          7. Live Search can be expensive
      4. Refining Search
        1. Considerations
          1. Avoid page refreshes
          2. Even smoother transitions
          3. Custom filters
          4. Think outside the box
          5. When to trigger a search
    2. 14. Feedback Patterns
      1. Live Preview
        1. Considerations
          1. Immediate feedback
          2. Engagement
          3. In context
          4. Showcasing products
      2. Progressive Disclosure
        1. Considerations
          1. Keeping it lightweight
      3. Progress Indicator
        1. Considerations
          1. Perceived performance
          2. Immediate feedback
          3. Showing upload status
          4. Deferred loading
      4. Periodic Refresh
        1. Considerations
          1. Visual noise
          2. Pausing Periodic Refresh
  9. Principles and Patterns for Rich Interaction
    1. The Principles
      1. Make It Direct
      2. Keep It Lightweight
      3. Stay on the Page
      4. Provide an Invitation
      5. Use Transitions
      6. Be Reactive
    2. Staying Up to Date
  10. Index
  11. About the Authors
  12. Colophon
  13. Copyright

Product information

  • Title: Designing Web Interfaces
  • Author(s): Bill Scott, Theresa Neil
  • Release date: January 2009
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596516253