The Elements of User Experience

In one sentence

User experience design is not an aesthetic pursuit but a structured engineering process of translating human goals and business needs into a coherent, navigable digital architecture.

Why read this (and who it's for)

Most people think "UX" means making things look pretty or ensuring buttons are easy to find. This book argues that those are the last steps in a much deeper, more rigorous process.

This book is for:

• Product Designers who feel like they are "guessing" what to build next and want a repeatable framework.
• Engineers who want to understand why certain design decisions are made (and how those decisions impact system architecture). . Product Managers who need to communicate effectively with designers about the scope and structure of a product before jumping into mockups.

After reading this, you will be able to stop "designing" by intuition and start designing by decomposition—breaking a complex problem down into its strategic, functional, and structural components before a single pixel is moved.

The big idea

Garrett argues that the primary reason products fail is not because of poor visual design; it is because the product fails to align with the user's mental model. A mental model is the internal map a person has for how something works (e.g., "a folder holds files," or "a shopping cart holds items"). When a designer creates an interface, they are essentially trying to build a bridge between the user’s mental model and the system's actual functionality.

The core thesis is that UX design is a sequential progression of abstraction. You cannot jump from a vague idea ("I want to sell shoes") to a finished screen ("Here is the checkout button"). If you skip the middle steps, the final product will feel disjointed, confusing, and logically inconsistent.

Garrett proposes a five-stage framework—the Five Planes of UX—to ensure that every design decision is grounded in a previous layer of logic. You must first define the Strategy (who/why), then the Scope (what), then the Structure (how it's organized), then the Skeleton (how it looks on paper), and finally the Surface (how it looks to the eye). If you fail at any one of these layers, the "surface" will be a lie that doesn't serve the user.

Key ideas

The Five Planes of UX

What it is — A framework for decomposing the design process into five distinct stages: Strategy, Scope, Structure, Skeleton, and Surface. Each plane represents a different level of abstraction. Why it matters — It prevents "designing in a vacuum." By forcing you to define the strategy before the skeleton, it ensures that every button and menu item has a logical reason for existing based on user goals. In the book — Garrett illustrates this by showing how a designer might jump straight to "Surface" (visuals) without understanding the "Structure" (how information flows), leading to an app that looks good but is impossible to navigate.

Strategy: Goals and Personas

What it is — The foundation of any product: Who are we building for? What do they want to achieve? What does the business need? Why it matters — Without a clear strategy, you are designing for everyone (which means no one) or for yourself. You must identify User Goals (what the user wants to accomplish) and Business Goals (how the company will succeed). In the book — Garrett emphasizes that "Personas" aren't just fictional characters; they are archetypes of behaviors and motivations. If you don't know who your persona is, you can't predict their needs when they encounter a friction point in the UI.

Scope: Functional, Content, and Interaction Requirements

What it is — The "What" of the product. It defines the features (Functional), the information needed to support those features (Content), and how the user will interact with them (Interaction). Why it matters — This is where most projects fail because they conflate these three things. A feature might be "Search," but the content requirement is "a database of products," and the interaction requirement is "auto-complete suggestions." You must define all three to have a complete scope. In the book — Garrett argues that many designers forget the Content Requirements. If you know what the feature does (Functional) but don't know what information needs to be displayed to make it useful, the design will feel empty or confusing.

Structure: Information Architecture and Interaction Design

What it is — The "How" of the product. It defines how the content is organized (Information Architecture) and how the user moves through that organization (Interaction Design). Why it matters — This is the blueprint for navigation. If your IA is poor, the user will get lost in a maze of menus. Interaction design here refers to the flow—the sequence of steps a user takes to complete a task. In the book — He distinguishes between Information Architecture (the taxonomy of things) and Interaction Design (the path taken through those things). You can have a great map but a terrible route, or a great route that leads nowhere.

Skeleton: Wireframes and Interface Design

What it is — The "Where" of the product. It defines the layout of individual screens, the placement of elements, and the visual hierarchy of information. Why it matters — This is where you decide how much space a button gets or where the search bar lives. It’s about Interface Design—the arrangement of components to facilitate the user's mental model. In the book — Garrett uses wireframes as a tool for communication, not just a "draft" of the UI. Wireframes are meant to test if the Skeleton supports the Structure. If you can't navigate a wireframe, no amount of pretty colors will save the design.

Surface: Visual Design

What it is — The "Look" of the product. This includes typography, color, spacing, and aesthetic polish. Why it matters — While this is what people see first, it is the least important layer for functionality. It serves to reinforce the mental model by providing visual cues (e.g., a blue underlined word usually means a link). In the book — Garrett warns against "Style over Substance." If the Surface is beautiful but the Structure is broken, the user will still fail to complete their task. The Surface should only be applied once the underlying planes are validated.

Frameworks & tools

The 5 Planes of UX (The Design Roadmap)

Use this checklist before starting any new feature or product design to ensure you haven't skipped a critical layer of thinking.

Phase 1: Strategy (The "Why")

1. Identify User Goals: What is the user trying to do? (e.g., "Find a flight under $300").
2. Identify Business Goals: How does this help the company? (e.g., "Increase booking conversions").
3. Create Personas: Who is doing this? What are their technical skills and motivations?

Phase 2: Scope (The "What")

1. Functional Requirements: List every action the system must perform (e.g., "Filter by date," "Sort by price").
2. Content Requirements: What data does each function need? (e.g., "Flight numbers," "Departure times").
3. Interaction Requirements: How will they interact? (e.g., "Toggle switches for filters," "Real-time updates").

Phase 3: Structure (The "How")

1. Information Architecture: Create a taxonomy of the content. How is it grouped?
2. Interaction Design: Map out the user flow. What are the steps from A to B?

Phase 4: Skeleton (The "Where")

1. Wireframing: Sketch the layout of each screen in the flow.
2. Interface Design: Determine the placement of buttons, inputs, and navigation elements.

Phase 5: Surface (The "Look")

1. Visual Design: Apply colors, fonts, and imagery to the validated skeleton.

Memorable examples & stories

The ATM vs. Vending Machine

Garrett uses the comparison of different machines to explain mental models. A vending machine has a very specific "mental model": you see an item, you press a button, it drops. An ATM is more complex because it involves a sequence of states (Insert card -> Enter PIN -> Select Action). The Lesson: Design must respect the established mental model of the device type; if you break that expectation, the user becomes confused.

The "Search" Example

When discussing Scope, Garrett breaks down a simple search feature into three requirements: Functional (the system searches), Content (it needs an index of products), and Interaction (how the results are displayed). The Lesson: Most designers only think about the Functional part, which is why "Search" features often feel clunky or unhelpful.

The Wireframe as Communication

Garrett argues that wireframes are often misused as "early-stage UI." Instead, he views them as a way to communicate the Skeleton. They should be used to test if the layout supports the user's flow before any visual styling is applied. The Lesson: If you can’t explain how a feature works using a black-and-white wireframe, your design isn't ready for the "Surface" layer yet.

Key quotes

"User experience design is about creating a mental model that allows users to interact with a system in a way that feels natural and intuitive." (Paraphrased) Why it matters: It shifts the focus from "how does this look?" to "how does the user think?"

"The most important part of UX design is not the UI; it’s the strategy behind why the UI exists." (Paraphrased) Why it matters: It reminds us that a beautiful button on a useless feature is still a failure.

"Design is a process of moving from the abstract to the concrete." (Paraphrased) Why it matters: This is the core methodology of the 5 Planes. You must move through each layer of abstraction sequentially.

How to apply it

This week

1. Audit a "Broken" App: Find an app or website you find frustrating. Identify which of the 5 Planes failed. Was it a Strategy failure (they don't know what they want)? A Structure failure (you can't find the menu)? Or a Surface failure (the buttons are too small)?
2. The "No-UI" Exercise: Take one feature you are currently working on and describe its Scope (Functional, Content, Interaction) in a bulleted list without mentioning any colors, fonts, or button styles.

Ongoing

1. The Strategy First Rule: Never allow a design meeting to start until the User Goals and Business Goals have been explicitly stated and agreed upon.
2. Wireframe Validation: Before moving to high-fidelity mockups, present wireframes to a stakeholder/user specifically to test the Skeleton (layout) and Structure (flow), not the aesthetics.

Common pitfalls

• The "UI as UX" Fallacy: The biggest mistake is thinking that "User Experience" is synonymous with "User Interface." UI is just the Surface layer. If you only focus on UI, you are ignoring 80% of the design process.
• Skipping to the Skeleton: Designers often want to start drawing screens immediately because it feels like "real work." However, if you haven't defined the Scope or Structure, you will end up with a "pretty" screen that doesn't actually solve the user's problem.
• Over-Engineering the Surface: Spending too much time on shadows and gradients before the Information Architecture is validated. This leads to "polishing a mess."

Connects to

• The Design of Everyday Things by Don Norman: Provides the psychological foundation for why mental models matter (affordances, signifiers).
• Don't Make Me Think by Steve Krug: A practical companion that focuses on the Structure and Skeleton layers—ensuring the interface is never a puzzle to solve.

If you remember only three things

• UX design is a sequence of 5 planes: Strategy, Scope, Structure, Skeleton, and Surface.
• You must move from Abstract (Goals) to Concrete (Pixels). Skipping steps leads to incoherent products.
• The goal of design is to align the system's functionality with the user's mental model.

Internalize it

• Reflection questions

  1. Look at your current project: Can you clearly state the User Goal and the Business Goal for every single screen?
  2. If I stripped away all colors and images from my app, would the layout alone still make sense to a new user?
  3. Am I spending more time on "Surface" (visuals) than I am on "Structure" (how information is organized)?

• Flashcards Q: What are the Five Planes of UX? A: Strategy, Scope, Structure, Skeleton, and Surface.

Q: What is a "Mental Model"? A: The internal map or set of expectations a user has about how a system should work based on their past experiences.

Q: What is the difference between Functional and Interaction requirements? A: Functional refers to what the system does (e.g., "Search"); Interaction refers to how the user does it (e.g., "Auto-complete").

Q: Why is Information Architecture part of the Structure plane? A: Because IA defines how content is grouped and categorized, which dictates how a user navigates the system.

Q: What is the primary purpose of a Wireframe in Garrett's framework? A: To communicate the "Skeleton"—the layout and placement of elements—without the distraction of visual style.

Fidelity note

I have high confidence in the 5 Planes of UX as they are the foundational framework of this book. The distinction between Functional, Content, and Interaction requirements is also a core pillar of Garrett's argument. However, because I am summarizing from memory, some specific "real-world" anecdotes used by the author to illustrate these points may be summarized or generalized. Readers should verify the specific examples in the "Scope" and "Structure" sections to see the full breadth of his illustrations.