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

    User-centred approaches to interaction design

    1. Involving users in the design process helps with expectation
      management and feelings ownership, but how and when to involve
      users is a matter of dispute.
    2. Putting a user-centered approach into practice requires much
      information about the users to be gathered and interpreted.
    3. Ethnography is a good method for studying users in their natural
    4. Representing the information gleaned from an ethnographic study
      so that it can be used in design has been problematic
    5. The goals of ethnography are to study the details, while the
      goals of system design are to produce abstractions; hence they
      are not immediately compatible.
    6. Coherence is a method that provides focus questions to help guide
      the ethnographer towards issues that have proved to be important
      in systems development.
    7. Contextual Design is a method that provides models and techniques
      for gathering contextual data and representing it in a form
      suitable for practical design.
    8. PICTIVE and CARD (collaborative analysis of requirements and
      design) are both participatory design techniques that empower
      users to take an active part in design decisions.

    From: Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer Interaction, New York: Wiley, p. 312

    Design, prototyping and construction

    1. Prototyping may be low fidelity (such as paper-based) or high fidelity (such as software-based)
    2. High-fidelity prototypes may be vertical or horizontal.
    3. Low-fidelity prototypes are quick and easy to produce and modify and are used in the early stages. There are two aspects to the design activity: conceptual design and physical design.
    4. Conceptual design develops a model of what the product will do and how it will behave, while physical design specifies the details of the design such as screen layout and menu structure.
    5. We have explored three perspectives to help you develop conceptual models: an interaction paradigm point of view, an interaction mode point of view, and a metaphor point of view.
    6. Scenarios and prototypes can be used effectively in conceptual design to explore ideas.
    7. We have discussed four areas of physical design: menu design, icon design, screen design and information display.
    8. There is a wide variety of support tools available to interaction designers.

    From: Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer Interaction, New York: Wiley, p.277-8