Book index: Designing Web Interfaces

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


  • Dialog Overlay
  • Detail Overlay
  • Input Overlay

  • 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

    IA/UX: Making stuff meaningful

      My job is making applications and Web sites meaningful (wow, big word). How does that work?

    • Thinking relevance. I ensure that functionality and content is relevant to what users actually want or is in the scope of what they might want.
    • Thinking logic. I develop a structure that is consistent but does not exclude users with a different view on the content’s organisation.
    • Thinking culture. I explore shared values, ideas, and activities of users in order to create a meaningful digital environment.
    • Thinking narrative. Every product wants to tell a story. I apply that story to the structure, the navigation journeys, and the placement of contextual information.

    The trade-offs between elements adjacent in space versus stacked in time

    The trade-offs between elements adjacent in space versus stacked in time are always in the mind of a UI designer. Placing many elements on the same screen reduces the need for navigation and gives users a comprehensive feeling of “it’s all at my command.” Moving focus from one element to another is instant and seamless. On the flip side, separating elements onto different screens slows things down with navigation while increasing clarity. There is more room for explanation and luxurious space when fewer elements occupy the page. The eye has less to filter through. The course of action is more obvious.

    From Ryan in the Article ‘Learning from bad UI

    Experience Design

    1. Experience design is remediating design: (…) it understands its relationship to earlier media forms
    2. Experience design is diverse (…) it welcomes the multiplicity of digital media forms
    3. Experience design is embodied design (…) it recognizes how digital technologies seek to embody he virtual
    4. Experience design is contextual design (…) it understands the importance of the cultural and economic contexts in which it will function

    From: Bolter, Jay David and Gromala, Diane (2003), Windows and Mirrors: Interaction Design, Digital Art, and the Myth of Transparency, Cambridge, MA: MIT Press, p. 148