The Elements of User Experience

elements of user experience

The Elements of User Experience by Jesse James Garrett

User experience encompasses all aspects of a customer’s interactions with a company’s products, services, and people. We don’t evaluate a company and its products based on individual elements; we leave an encounter with a positive or negative sense holistically. Taking a broad view of your offering allows you to build a powerful chain of touch points that add up to a great experience. The experience is what your customers will remember. If you forget to think about the manual, the box,  the customer support phone tree options, and the technical operations requirements, the experience your customers have of you will slowly erode. The Elements of User Experience breaks down the user experience for a website and presents a two-dimensional design framework.

The Five Planes

Garrett breaks down User Experience into five planes:

  • The Surface Plane: This plane contains the the web page and its constituent visual elements. Visual design defines this plane.
  • The Skeleton Plane: The skeleton corresponds roughly to the page layout; the grid that defines placement of individual components on the page. Defining deliverables here include information design, interface design, and navigation design.
  • The Structure Plane: The structure plane takes the pages defined in the skeleton and surface and describes how they relate. This plane contains the site information architecture and interaction design.
  • The Scope Plane: The scope defines the functions and features that the site implements. Functional and content specifications describe this plane
  • The Strategy Plane: The site’s strategy defines the goals of site owner and end-users. User needs and site objectives define this plane.

The planes define a movement from the abstract (strategy) to the concrete (surface). Garrett suggests that the design of one plane does not need to be completed before the design of the next plane begins. However, one the design of the previous plane should complete before the subsequent plane is finished.

He divides the planes in half vertically into “web as software interface” and “web as hypertext system.”The interface portion views the site as a tool and is mainly concerned with features, functions and the process by which user goals are completed. The hypertext side focuses on the information contained in the site and what it means to the end users.


The Strategy Plane

Web sites most often fail because, before the first line of code was written, the first pixel was pushed, or the the first server was installed, nobody bothered to answer two very basic questions: What do we want to get out of this site?
What do our users want to get out of it?

The Strategy plane describes both the business and user experience goals for the site. On the business side it includes all revenue, usage, and brand identity objectives along with their associated success metrics. Usability and user research contributes to persona development and an understanding of user needs. Garrett lists a number of research methods including contextual inquiry, direct testing with target users, and card sorting to prioritize content and functional requirements.

The Scope Plane

Strategy becomes scope when you translate user needs and site objectives into specifics requirements for what content and functionality the Web site will offer its users.

In the Scope plane, the site builders turn from asking “why are we building it?” to “what are we building?” The hypertext side of the plane is focused on content requirements while the software side of the plane is concerned with functional specification. This plane is where requirements are identified. Cross functional teams are very effective in providing multiple perspectives on requirements. Looking at what competitors are doing is another view point from which to consider what the site should do. When talking to users, Garrett points out that requirements come in three varieties: 1) requirement statements that are pointers toward what the user actually wants; 2) descriptions of features that will end up in the final product; and 3) features that users don’t know they want yet. To be effective, functional requirements must be positive, specific, avoid subjective language, and must be falsifiable. Content requirements have their own characteristics:

  • Content type (multimedia, streaming, static, text only)
  • Update frequency
  • Storage size
  • Who is the owner?
  • Who is the audience?
  • Digital rights

A content inventory is always required to understand the universe of what is currently available.

The Structure Plane

After the requirements have been collected and prioritized, we have a clear picture of what will be included in the final product. The requirements, however, don’t describe how the pieces fit together to form a cohesive whole. This is the next level up from scope: developing a conceptual structure for the site.

Interaction design and information architecture come together in the Structure plane to define “patterns and sequences in which options will be presented to users. A fundamental goal in this plane is understanding your end-users, how they go about doing their work, and how they think about their job and goals. Interaction design focuses on describing all possible user behavior in scope of the system and how the system will respond and support those behaviors.

The conceptual model of the site is defined in this plane and is used to guide design decisions. A common conceptual model for retail sites is a shopping cart. An alternative would be an order form where you “edit” the order instead of “adding” and “removing” items to the cart. Another model is a magazine metaphor where you turn pages instead of clicking on page numbers to navigate to a new page.

An important consideration for user interaction design in this phase is error handling. The designer asks:

  • What does the system do when people make mistakes?
  • What can the system do to stop those mistakes from occurring in the first place?

Garrett provides a three layer framework: Prevention, Correction, and Recovery. However, he notes that Correcting errors can be very irritating. Do you want to do that? Are you sure you want to do that?

Information architecture is a key deliverable for this plane. The hierarchy of information can be formed from the top-down (goal-oriented) or bottom-up (based on an existing content hierarchy). The content nodes can be related in several ways:

  • Hierarchical – a traditional tree structure
  • Matrix – nodes can relate to one another in multiple dimensions
  • Organic – node relationships are not prescribed but can occur in a variety of ways
  • Sequential – one content node follows another in order

The Skeleton Plane

On the skeleton plane, we further refine [the] structure, identifying specific aspects of interface, navigation, and information design that will make the intangible structure concrete.

User interface elements such as drop downs, radio buttons, and check boxes. Navigation elements and the presentation of information elements are also specified. The primary deliverable for this plane is the wireframe which specifies page layout details. Carefully reviewing user interface conventions is required in order to decide whether to break with tradition or keep to common patterns.

The Surface Plane

Here, content, functionality, and aesthetics come together to produce a finished design the fulfills all the goals of the other four planes.

The designs and specifications from the lower four planes find a matching visual expression in the Surface plane. This choice is not a matter of subjective aesthetics; visual design decisions are made based on all other planes along with brand goals and guidelines. Color palettes, typography, and overall page layout are considered here. Deliverables from this phase include design comps and style guides which inform the implementation of future additions and extensions to the site.

Garrett ends the book with a few key ideas:

  • Understand the problem you are trying to solve
  • Understand the consequences of your solution to the problem

The book illustrates how each plane is tied together. For a successful site, the choices made in each plane must be in alignment and validated with users. Design by default, design by mimicry, and design by fiat will kill a site design. A thoughtful approach which considers each plane individually and in relation to others will help avoid those three common pitfalls.

More on User Experience

The Elements of User Experience (slideshare)

4 Myths About User Experience — And How to Bust Them

User Experience Design defined

The Elements of User Experience: User-Centered Design for the Web and Beyond 


Leave a reply