The Elements of User Experience by Jesse James Garrett

Book cover: The Elements of User ExperienceYou're on your way to becoming a bona fide designer with the five planes of user experience design.

This slim book should be required-reading for anybody that puts their hands on a web site. From strategic planing to layout and visual design, Jesse James Garrett brings a wide range of concepts together into one easy-to-grasp model.

Ignoring user experience design costs you money.

Call them life's little miseries. You're late for work because the switch on the alarm clock was in the middle position instead of all the way to the left. You rear-end the car in front while fiddling with your phone. You loose unknown numbers of sales because your web visitors are not filling out the contact form properly.

User experience design makes sure that everything that happens on your site is planned-for and on-purpose. This book breaks it down into five easy-to-understand planes:

  1. Strategy plane
  2. Scope plane
  3. Structure plane
  4. Skeleton plane
  5. Surface plane

1. It all starts with strategy

Most sites that fail do so because nobody explicitly defines what they want out of the site, and what users need from it. What are your objectives? Your business goals? How are you going to measure success?

This plane examines user needs, research, creating personas, identifying team members and stakeholders. It's the foundation that the other four planes build on.

2. Defining scope isn't just about what you will and won't build.

It's about identifying potential rough spots in the process. It's about having all team members on the same page. It's about avoiding the dreaded "scope creep."

Here, you're gathering requirements from stakeholders and users. You're coming up with functional specs and content requirements.

Most importantly, you're deciding which ideas not to implement. Instead, prioritize them based on your strategic goals.

In my experience, the two most-often overlooked planes are Scope and Strategy. Too many people think that they need a web site "just because" (lack of strategy) and then simply copy/paste everything they have into it (lack of scope).

3. The Structure plane is the realm of interaction design and information architecture.

This is where the abstract ideas behind strategy and scope become more tangible.

Begin to address what works best for the user here, rather than waiting until you reach the skeleton plane or surface plane.

As a Drupal developer, I was pleasantly surprised to see terms such as node, controlled vocabulary, and metadata introduced here. My life would be so much easier if everyone were familiar with them.

4. The skeleton plane defines form and function.

This plane begins to bring visual elements into focus. It has three key aspects that work closely together:

  • Interface design is about making sure the most important things get noticed.
  • Navigation design gives users a sense of "geographical" awareness. It gives them a way to understand where they are and where they can go.
  • Information design communicats information in a way that makes sense to the user.

This is where page layouts come together in the form of wireframes. They are used to establish the visual design, as well as to check progress against the strategy, scope, and structure of the site.

5. The surface plane address how elements are presented visually.

Visual design is not really about aesthetics or taste. (If that were the case, it would be called "decoration.") The ultimate goal of visual design is to reinforce, not distract from, the structure defined in the skeleton plane.

A good visual designer uses many tools, including:

  • Contrast
  • Uniformity
  • Consistency
  • Color
  • Typography

The user's eye should have a path to follow-- a short "guided tour" of what's on the page.

These ideas scale

The five planes can (should!) be applied to every web project, no matter the size or budget. What may seem like unnecessary overhead or busy-work will end up saving you time and producing better results.

The Elements of User Experience should be on every web professional's shelf next to other classics like Jared Spool's Web Site Usability and Steve Drug's Don't Make Me Think.

Comments

Brooke's picture

There are all key point that I will need to consider as I rebuild my site! Thanks for breaking it down!

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.