Book index: Designing Web Interfaces

February 1, 2010

Bill Scott: Designing Web Interfaces: Principles and Patterns for Rich Interactions

Principle one: Make it direct

    In Page Edit

  • Single Field Inline Edit
  • Multi Field Inline Edit
  • Overlay Edit
  • Table Edit
  • Group Edit
  • Module Configuration
    Drag and Drop

  • Drag and Drop Module
  • Drag and Drop Object
  • Drag and Drop Action
  • Drag and Drop Collection
  • The Challenges of Drag and Drop
    Direct Selection

  • Toggle Selection
  • Collected Selection
  • Object Selection
  • Hybrid Selection

Principle 2: Keep It Lightweight

    Contextual Tools

  • Fitt’s Law
  • Contextual Tools
  • Always Visible Tools
  • Hover-Reveal Tools
  • Toggle Reveal Tools
  • Multi Level Tools
  • Secondary Menu

Principle 3: Stay on the Page

    Overlays

  • Dialog Overlay
  • Detail Overlay
  • Input Overlay
    Inlays

  • Dialog Inlay
  • List Inlay
  • Detail Inlay
  • Tabs
  • Inlay Versus Overlay?
    Virtual Pages

  • Virtual Scrolling
  • Inline Paging
  • Scrolled Paging: Carousel
  • Virtual Panning
  • Zoomable User Interface
  • Paging versus Scrolling
    Process Flow

  • Interactive Single Page Process
  • Inline Assistant Process
  • Dialog Overlay Process
  • Confirgurator Process
  • Static Single Page Process

Principle 4: Provide an Invitation

    Static Invitations

  • Call to Action Invitations
  • Tour Invitation
    Dynamic Invitations

  • Hover Invitation
  • Affordance Invitation
  • Drag and Drop Invitation
  • Inference Invitation
  • More Content Invitation
  • Principle 5: Use Transitions
    • Transitional Patterns

    • Brighten and Dim
    • Expand/Collapse
    • Self-Healing Fade
    • Animation
    • Spotlight
      Purpose of Transitions

    • Engagement
    • Communication

    Principle 6: React Immediately

      Lookup Patterns

    • Auto-Complete
    • Live Suggest
    • Live Search
    • Refining Search
      Feedback Patterns

    • Live Preview
    • Progressive Disclosure
    • Progress Indicator
    • Periodic Refresh
    Advertisements

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s