Key benefits of reusable components

  • We can build consistently and focus on workflows and logic, not web forms and list items
  • We can reuse code instead of roping in a developer
  • We can maintain our code by seeing our patterns in one place, define elements in our application, and keep redundancy to a minimum

MailChimp Pattern Library

Modularizing designs

What Federico points out is that a ship, a building, and a car are merely collections of components. Components are manageable and flexible. So long as the components join together seamlessly in the end, modularizing the pieces translates to flexibility, speed, and paradoxically both independence and collaboration.

“I began to think in terms of “designing software for mass manufacture.”

“The end result is a system—a system of individual and interchangeable parts that start at the smallest possible level and grows from there. Components are then assembled from these individual parts, and these components make up some of the core parts of our app. Once a group of components are assembled, we get a fully functioning page inside our application that is consistent in design and architecture with the other pages of our app—all because the pages share the same architecture.”

Architecting a Pattern Library by Federico Holgado

Search design patterns

10 major search design patterns:

  • Autocomplete/suggestions
  • Best (results) first: Relevance, Date, Popularity, Format, Personalisation, Diversity
  • Federated search (simultaneous search of different databases)
  • Faceted navigation
  • Advanced search
  • Personalisation
  • Pagination
  • Structured results
  • Actionable results
  • Unified discovery

Morville and Callender (2010). p: 81-130

Ajax design and functionality patterns

Content Widgets

  • Drilldown To let the user locate an item within a hierarchy, provide a dynamic drilldown.
  • Microcontent Compose the page of “Microcontent” blocks – small chunks of content that can be edited in-page.
  • Microlink Provide Microlinks that open up new content on the existing page rather than loading a new page.
  • Popup Support quick tasks and lookups with transient Popups, blocks of content that appear “in front of” the standard content.
  • Portlet Isolated blocks of content with independent conversational state.

Form Widgets

  • Live Command-Line In command-line interfaces, monitor the command being composed and dynamically modifying the interface to support the interaction.
  • Live Form Validate and modify a form throughout the entire interaction, instead of waiting for an explicit submission.
  • Live Search As the user refines their search query, continuously show all valid results.
  • Data Grid Report on some data in a rich table, and support common querying functions.
  • Progress Indicator Hint that processing is occurring.
  • Rich Text Editor e.g.
  • Slider Provide a Slider to let the user choose a value within a range.
  • Suggestion Suggest words or phrases which are likely to complete what the user’s typing.

Page Architecture

  • Drag-And-Drop Provide a drag-and-drop mechanism to let users directly rearrange elements around the page.
  • Sprite Augment the display with “sprites”: small, flexible, blocks of content.
  • Status Area Include a read-only status area to report on current and past activity.
  • Virtual Workspace Provide a browser-side view into a server-side workspace, allowing users to navigate the entire workspace as if it were held locally.

Visual Effects

  • One-Second Spotlight When a page element undergoes a value change or some other significant event, dynamically manipulate its brightness for a second or so.Responded
  • One-Second Mutation When a page element undergoes a value change or some other significant event, dynamically mutate its shape for a second or so.
  • One-Second Motion Incrementally move an element from point-to-point, or temporarily displace it, to communicate an event has occurred.
  • Blinkieblinkpattern When an element is blinking
  • Highlight Highlight elements by rendering them in a consistent, attention-grabbing, format.


  • Lazy Registration Accumulate bits of information about the user as they interact, with formal registration occurring later on.
  • Direct Login Authenticate the user with an XMLHttpRequest Call instead of form-based submission, hashing in the browser for improved security.
  • Host-Proof Hosting Server-side data is stored in encrypted form for increased security, with the browser decrypting it on the fly.
  • Timeout Implement a timeout mechanism to track which clients are currently active.
  • Heartbeat Have the browser periodically upload heartbeat messages to indicate the application is still loaded in the browser and the user is still active.
  • Autosave Autosave un-validated forms to a staging table on the server to avoid users losing their work when their session expires if they get called away from their desk while filling out a long form.
  • Unique URLs Use a URL-based scheme or write distinct URLs whenever the input will cause a fresh new browser state, one that does not depend on previous interaction.

From Some of the items/links in the original source have been removed, this is the list as copied on April 14, 2010

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

    Pullown menus sensitive?

    “The point is, it’s not productive to ask questions like ‘Do most people like pulldown menus?’ The right kind of question to ask is ‘Does this pulldown, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?”

    From: Krug, S. (2006), Don’t Make Me Think: A Common Sense Approach to Web Usability, Berkeley, CA: New Riders, p.129

    Search patterns (Morville)

    1. Behaviour Patterns
      1. narrowing results down e.g. by adding search terms
      2. browsing
      3. ‘pearl-growing’: picking one document and use metadata (author,
        links etc.) to expand on results
    2. Design Patterns

      1. Best Bets for popular search terms
      2. Federated Search (?)
      3. Faceted navigation as means of narrowing down results
      4. Auto suggest
      5. Structured results
      6. Social search (Using ocial data for improvement of search results, e.g.
      7. Media Search
      8. Mobile Search

    Source: P. Morville, IA summit 2008