This short book was published in 2010 and presents 5 elements to describe User Experience, primarily focusing on Web Site Design.

I am interested in the design aspects relevant to individual development now.

  1. The Surface Plane

On the surface you see a series of Web pages, made up of images and text.

Some of these images are things you can click on, performing some sort of function such as taking you to a shopping cart.

Some of these images are just illustrations, such as a photograph of a product for sale or the logo of the site itself.

  1. The Skeleton Plane

Beneath that surface is the skeleton of the site: the placement of buttons, controls, photos, and blocks of text.

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency - so that you remember the logo and can find that shopping cart button when you need it.

  1. The Structure Plane

The skeleton is a concrete expression of the more abstract structure of the site.

The skeleton might define the placement of the interface elements on our checkout page; the structure would define how users got to that page and where they could go when they were finished there.

The skeleton might define the arrangement of navigational elements allowing the users to browse categories of products; the structure would define what those categories were.

  1. The Scope Plane

The structure defines the way in which the various features and functions of the site fit together. Just what those features and functions are constitutes the scope of the site.

For example, some commerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again. Whether that feature - or any feature - is included on a site is a question of scope.

  1. The Strategy Plane

The scope is fundamentally determined by the strategy of the site. This strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well.

In the case of our store example, some of the strategic objectives are pretty obvious: Users want to buy products, and we want to sell them.

Other objectives - such as the role that advertising or content produced by our users plays in our business model, for example - might not be so easy to articulate.

Each plane is dependent on the planes below it. So, the surface depends on the skeleton, which depends on the structure, which depends on the scope, which depends on the strategy.

If you consider your decisions on lower planes to be set in stone before you take on your decisions on higher planes, you will almost certainly be throwing your project schedule - and possibly the success of your final product - into jeopardy.

Instead, you should plan your project so that work on any plane cannot finish before work on lower planes has finished. The important consideration here is to not build the roof of the house before you know the shape of its foundation.

Requiring work on each plane to finish before work on the next can start leads to unsatisfactory results for you and your users.

A better approach is to have work on each plane finish before work on the next can finish.

When the Web user experience community started to form, its members spoke two different languages:

  • One group saw every problem as an application design problem, and applied problem-solving approaches from the traditional desktop and mainframe software worlds. (These, in turn, were rooted in common practices applied to creating all kinds of products, from cars to running shoes.)
  • The other group saw the Web in terms of information distribution and retrieval, and applied problem-solving approaches from the traditional worlds of publishing, media, and information science.

To address this basic duality in the nature of the Web, let’s split our five planes down the middle.

On the left, we’ll put those elements specific to the Web as a platform for functionality.

On the right, we’ll put the elements specific to the Web as an information medium.

On the functionality side, we are mainly concerned with tasks - the steps involved in a process and how people think about completing them. Here, we consider the product as a tool or set of tools that the user employs to accomplish one or more tasks.

On the opposite side, our concern is what information the product offers and what it means to our users. Creating an information-rich user experience is about enabling people to find, absorb, and make sense of the information we provide.

(We can also categorize mobile applications into two types: task tools or information providers.)

  1. The Strategy Plane

The same strategic concerns come into play for both functionality oriented products and information-oriented resources:

  • User needs are the goals for the site that come from outside our organization, specifically from the people who will use our site. We must understand what our audience wants from us and how that fits in with other goals they have.
  • Balanced against user needs are our own objectives for the site. These product objectives can be business goals (“Make $1 million in sales over the Web this year”) or other kinds of goals (“Inform voters about the candidates in the next election”).
  1. The Scope Plane
  • On the functionality side, the strategy is translated into scope through the creation of functional specifications: a detailed description of the “feature set” of the product.
  • On the information side, scope takes the form of content requirements: a description of the various content elements that will be required.
  1. The Structure Plane
  • The scope is given structure on the functionality side through interaction design, in which we define how the system behaves in response to the user.
  • For information resources, the structure is the information architecture: the arrangement of content elements to facilitate human understanding.
  1. The Skeleton Plane

The skeleton plane breaks down into three components.

  • On both sides, we must address information design: the presentation of information in a way that facilitates understanding.
  • For functionality-oriented products, the skeleton also includes interface design, or arranging interface elements to enable users to interact with the functionality of the system.
  • The interface for an information resource is its navigation design: the set of screen elements that allow the user to move through the information architecture.
  1. The Surface Plane

Regardless of whether we are dealing with a functionality-oriented product or an information resource, our concern here is the same: the sensory experience created by the finished product.