Site Planning & Information Design

Site Planning with Garrett's 5 Planes of User Experience

Preparing for Site Structure and Information Architecture

A web site is comprised of one or more web pages, and though those pages may contain different content and functionality, users expect to interact with the pages as if they are a unified whole. We generally refer to this as the user experience, however we should note that the user experience is not limited to the surface interactions; a successful user experience involves far more than the user can see. A web designer's work in pre-planning and planning contributes to that success, as does the site structure and information architecture, though we usually hope the user won't notice these aspects.

We begin this lesson by examining the various aspects of the user experience in order to better understand and hone in on site structuring and information architecture. Jesse James Garrett identifies five planes of the user experience which provide another conceptual framework for our understanding of the process of web design.

This excerpt from is made available according to "Fair Use" guidelines for educators and the "TEACH" act. You are not allowed to retain or redistribute this excerpt.

Jesse James Garrett, Elements of the User Experience

excerpt from Chapter 2 - Meet the Elements (22-23)

The Five Planes

Most People, at one time or another, have purchased a book over the Web. The experience is pretty much the same every time--you go to the site, you find the book you want (maybe by using a search engine or maybe by browsing a catalog), you give the site your credit card number and your address, and the site confirms that the book will be shipped to you.

That neat, tidy experience actually results from a whole set of decisions--some small, some large--about how the site looks, how it behaves, and what it allows you to do. These decisions build upon each other, informing and influencing all aspects of the user experience. If we peel away the layers of that experience, we can begin to understand how those decisions are made.

  1. surface icon - eyeball

    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 book cover or the logo of the site itself.
  2. skeleton icon - wire frame

    The Skeleton Plane

    Beneath that surface is the skeleton of the site; the placement of buttons, tabs, photos, and blocks of text. The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency--so that you rememeber the logo and can find that shopping cart button when you need it.
  3. structure icon - site map

    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 definie the arrangement of navigational itemes allowing the users to browse categories of books; the structure would define what those categories actually were.
  4. scope icon - bulleted list

    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. Some sites that sell books offer a feature that enables users to save previously used addresses so they can be used again. The question of whether that feature--or any feature--is included on a site is a question of scope.
  5. strategy icon - lightbulb

    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 bookstore example, some of the strategic objectives are pretty obvious: Users want to buy books, and we want to sell them. Other objectives might not be so easy to articulate.
The 5 Planes move from concrete to abstract

Do any of Garrett's planes sound familiar? They should, as these five planes fit very comfortably with the first 4 stages of the Web design process identified earlier in this lesson, but in reverse:

  1. Define the Project = Strategy Plane, Scope Plane
  2. Develop Site Structure & Organize Information = Structure Plane
  3. Develop Page Structure & Organize Interactions = Skeleton Plane
  4. Design Graphic User Interface = Surface Plane

Thinking about the stages of Web design as matching these planes from a bottom to top process helps us focus on our Web site goals, and to continually realign our activities to address the user experience.

Getting Started With Site Structure and Information Architecture

Garrett agrees that a solid web site strategy is the first concern for a web designer, and hopefully you've conquered this already by composing a clear, succinct, complete objective and strategy statement for the project. The next step is to consider the content of the web site, and orgainze that information into a structure that will support usability.

Content Is King

The phrase "content is king" holds true for all web sites. This means that user's access to content should take priority over everything else; usability must be facilitated by information design, and should not be infringed upon by interaction design or graphic design.

Proper chunking of content at this stage helps us utilize XHTML more effectively and according to Web standards, for in the modern world of Web design XHTML should only be used as XML is used: to describe and define the content it encapsulates. While CSS is for controlling the look of the surface end of things. This shouldn't sound contraversial if you've taken Web Essentials from me, but rest assured we'll learn more about how XHTML and CSS help us keep content in the throne in later lessons, but first we should consider what to do with the content that the client gives us.