The Elements of User Experience: User Experience Design Basics

Solid fundamentals are everything! It is true for any field, and UX design is no exception. In this article I’d like to talk to you about basics of UX design, to be more specific about The Elements of User Experience… not the book, but the framework presented in the book.

The Elements became a career defying framework for me. It shaped my thinking as a UX designer. I’ve been using it for almost 10 years now to design and redesign applications and websites of various complexity, and it never failed me. I strongly believe that every serious UX designer needs to know and understand The Elements.

The Elements of User Experience is a brilliant model as it serves several important functions:

• it itemizes most important components (or elements) that need to be considered in order to design great products
• it explains how different design terms fit together (terms like Information Architecture, Interaction and Interface Design). It also helps with making sense out of more obscure term like UI/UX…
• it informs UX design process. By following this model we can ask the right questions and focus on the right problems at the right steps of the UX design process.

There is a lot to unpack here, so let’s dive right in.

This article is of 2 parts. In the first part I’ll talk about The Elements in a way of introducing the model. In the second part I’ll show you how The Elements can inform and help with UX design process.

Part I. Meet The Elements

We will look at the history of the framework, and then we will look at 5 planes of the model in detail. We will also briefly talk about UX terms and how they map to the planes.

History of The Elements of User Experience

The Elements of User Experience is a framework (or a model, if you will) designed by a very smart fellow Jesse James Garrett.

It was published as a stand alone diagram in 2000 (that’s 20 years ago!):

The diagram was expanded into a book in 2002 (with second edition released in 2011) which, in my humble opinion, is the most important book on UX design published to date:

Even though I’ll get into details of The Elements in this article, it is by no means a substitute for reading the book… Get the book and read it… it is very good! It is fairly short too!

Check out reviews and buy The Elements of User Experience on Amazon (It is an affiliate link. You don’t pay anything extra, but I get a small commission from every purchase which encourages me to continue writing about UX design).

5 Planes of UX

In its basic form The Elements are represented by 5 planes (all conveniently starting with S):

Let’s see how these planes fit together by looking at an example.

We will be looking at one of many product pages on Amazon.com website… but this same process will work for any website or application. The only reason I chose Amazon is because most of you probably used it at least once especially in recent times.

In a sense, we will be reverse engineering Amazon website to understand how design decisions made on each plane impact user experience.

This is a good exercise that you can do on your own with some apps or website you use.

Let’s look at the planes one by one starting from the Surface.

5. Surface Plane

This is a typical product page on Amazon’s website:

Looking at the surface we can talk about colors, fonts, buttons (calls to action), images. These items are designed a certain way not just to make the page look good. Largely, this is the domain of UI design or Visual Design… So called “look and feel”…

Each item is styled and placed intentionally taking into account all the underlying planes to facilitate users’ navigating the application (Skeleton and Structure planes), and ultimately to support user needs and business objectives (Scope and Strategy planes).

The visual design follows certain conventions (see affordances a concept defined by Don Norman in The Design of Everyday Things). Interactive elements are made to look familiar, so users can tell which parts of the text are clickable (links), which parts are buttons, which parts have more to it (menus, dropdowns, etc.)

The visual choices also reinforce the branding, so we are certain that we are on Amazon’s website and not on Bestbuy or Ebay.

Surface is an important element of the UX design, but it is just one of many elements. Unfortunately, when many talk about UI/UX they mostly talk about the Surface. You might hear comments like: “It looks a bit bland! Can you make it pop?” or “This looks amazing. I love this UX!”. There is nothing wrong with comments like that, but as you are about to see, there is so much more to UX (and UI) design.

So let’s look below the surface (pun intended).

4. Skeleton

Ignore for some time colors and font choices and other design decisions that make the design “pop”. Perhaps squint a bit to blur out the details. You will not see all the fine details that make up the Surface, but you will see some important features of the page:

You will see the Skeleton plane.

Here we can talk about the placement of elements like buttons, text and images… We can also talk about how related elements are grouped together, as well as the layout and hierarchy of the page.

You will notice that some information on the page is intentionally given more prominence. Take another look at the image above? What elements of the page stand out to you the most?

Placement of elements is not accidental either… Product ratings, “Add to cart” and “Checkout” buttons are placed strategically and were designed for optimal effect and efficiency.

Designers often use wireframes to explore different options for Skeleton design. More on that later.

The Skeleton plane supports the more abstract structure of the website.

3. Structure

Product page is just one of many pages on the Amazon’s website. It is very likely that this product page is not the first page the user visited. It is (hopefully) is not the last one either.

That’s why talking about the Structure of the website we often talk about user flows (that is how users come to a given page and where they can go from here):

Again, in a well designed application or website the user flows are often well thought through, and are designed with intent.

In a more abstract way Structure defines how various features and functions fit together. What those features and functions are is defined on the Scope plane.

2. Scope

On the Scope plan we can talk about features as they relate to different pages:

This makes sense when we reverse engineer existing website, but most commonly we will be working with a plain list of features:

The list might be prioritized with more important features on top. It might be rather general or fairly detailed. We will talk more about the scope plane later.

Fundamentally, Scope is determined by the Strategy.

1. Strategy

Strategy plane is the most abstract plane of them all. This is where we can talk about user needs and business objectives and finding balance between the two.

Ultimately, this is the most important plane as it is a foundation of the successful product.

It is often a responsibility of a UX designer to uncover user needs as they relate to business objectives and present them to the stakeholders and the product team. Ideally, every team member involved in working on the project needs to understand user needs and business objectives and how they are can be balanced.

There is a whole lot we can talk about for each plane, but I am trying to keep these descriptions brief so you have a general understanding of the model and don’t get lost in fine details. Some of them I’ll cover later in this article, and some you will have to learn by reading the book.

Hopefully, as we deconstructed the 5 planes and peeled them one by one going deeper you can see the relationship between the planes. I will talk about each plane in more details as we put the planes back together and talk about how The Elements fit into the UX design process.

But before we do that, let’s talk about two other important feature of The Elements model.

UX Design Terms and a Basic Duality

The field of UX design is notoriously confusing because of the various terms designer use:

The Elements maps these terms to the 5 planes in a neat way:

I will talk about these terms in more detail as we talk about UX design process.

As you can see there is a fine vertical line that splits the diagram in 2 parts. It represents a basic duality of digital products: websites and applications (both web and mobile).

To understand this basic duality a bit better, let’s look at the history of the Web.

When Web started it was mostly about information: texts and images. It stayed that way for a fairly long time. It is just in the recent 10-15 years with the advance in technology where things have changed drastically on a global scale.

Now apps of various complexity run in the browser. Software as a service (SaaS) became a standard delivery model. You have apps like Gmail, Google Docs (largely replacing Microsoft Word and Excel), and even advanced design tools (like Figma) running in the browser…

Now, many digital products (on the Web and mobile) are often a mix of content/information and features/functionality. This is true for Amazon.com, Facebook (and other social media apps), and even to some extend Wikipedia (if you consider editing functionality).

Of course, there are still lots of content/information heavy websites like company or product websites, news sites and blogs. But those are normally designed by Web Designers, and rarely by UX designers.

It is important to understand this basic duality and how each plane is split into finer elements. I’ll explain each one of them in more detail in the section below, but it is best if you get the book as Jesse James Garrett gets into details that I won’t be covering here.

Let’s move on to the design process.

Part II. The Elements and UX Design Process

Now when you are somewhat familiar with The Elements and the planes that make it we can talk about UX design process. We will also briefly talk about different activities, deliverables and questions that come up along the way:

Essentially, when we are building digital product we are building it plane by plane working from the bottom up, from more abstract to more concrete planes.

1. Strategy

This is where all projects begin.

he Strategy plane is all about discovering user needs and balancing them with business objectives.

No projects start in a vacuum. If you are working for an established business you will very likely be given a brief describing business objectives and some general idea for a product and target market.

You might have to talk to stakeholders (stakeholder interviews) to make sure you are absolutely clear about the business objectives, and project timelines.

Business objectives can be rather vague in the beginning. Clarity comes with understanding the users. This is where user research comes in.

UX research is fascinating. Jesse James Garrett right pointed out ““If you are doing user research properly it will always surprise you” (JJG at Developer Summit in 2013). For me, user research is like a fuel for design. The better research the easier it is to design a good product.

There might be a dedicated UX researcher on the team, or you might have to carry out the research yourself. In any case, the goal is to understand the users in general, and their goals, needs, context of use in particular.

Most common activities associated with user research are surveys, user interviews, and observation (or field studies). Surveys can be a great way to kick off the user research, and find leads for interviews. You can interview several existing users if you are redesigning an application, or potential users for a new product. User interviews can be a great way to learn about the users. However what they are saying and what they are doing might not always match. So it is best to compliment interviews with observation. You can ask to tag along and observe the user as they go about their tasks.

You will want to capture your findings and formalize them in some way. Most commonly that will be personas, mental models, user stories, or story maps.

As you learn about the users and their needs you should check what you find against the business objectives, but be careful to avoid confirmation bias. Try to be as objective in observing and interviewing users as possible. It might mean that stakeholders will have to reconsider their objectives once your research is done.

It is not that easy to stay objective, especially if you are genuinely interested in helping people and designing the best solution for them. Some UX designers decide to advocate for the users, and they go above and beyond to defend the user needs (and wants) forgetting all about business objectives.

The questions that needs to be answered on the Strategy plane are mostly about who and why:

• who are the users?
• why do they do what they do?
• why do they do it a certain way?
• who are the stakeholders?
• why do they care?
• why is it a problem worth solving?

2. Scope

Scope plane is about features or requirements. Depending on the project we can talk about functional or content requirements, or often both.

While Jesse James Garrett separates Scope from Strategy I like to think of user needs, business objectives and features all together. Actually, many times when the original brief for a project comes in it often already outlines the features that business would like to include in the product. The requirements can be rather general or fairly specific.

UX designers don’t always have a say in what features should or should not be included. Often the list comes from a business unit that did market research and competitive analysis. It is very common for designers to question the value of certain features. Sometimes the questioning is based on the designers knowledge and intuition, at other times it comes from not fully understanding user needs and business objectives. While it is good to seek clarity and come to a common understanding, it is important not to get into analysis paralysis kind of a situation where designers get stuck in trying to fully understand the users and the business before proceeding any further in the design process.

Business might be operating under tight deadlines, and there might not be enough time for extensive user research. In many cases, it is best not to spend too much time upfront on research and learn just enough about users and move to the next steps in the design process. A good design process will allow for quick iteration cycles where you can design something, test it, learn from it, iterate again, and continue until you come up with a solid design.

Another problem some UX designers have is a desire to design and deliver all features at once. Giving users some features and having them wait for others is not a good UX! While it makes sense from user point of view, digital product are rarely (if ever) are released with all the features. For example, first iPhone was released without copy/paste feature…

There are different business reason for it, being first to market for example. Sometimes business needs to release an MVP (Minimum Viable Product) to validate an idea, and to see if the it is worth pursuing. At other times there are limited resources and tight deadlines.

The best a UX designer can do is understand the requirements, development timeline, and how features are prioritized against it. As you design a product you will have to keep both short and long term goals in mind, and design accordingly.

3. Structure

Work on the Strategy and Scope planes is mostly about discovery and understanding the problem, the users, the business, and the feature. Actual design work starts on the Structure plane.

You can’t start design work unless the Strategy and Scope planes are somewhat clear. A UX designer needs to have some understanding of user needs, business objectives and features as they pertain to the product in question. Like I said before, you don’t need to be absolutely clear and certain about everything. Clarity will come as you design and test the product.

At this point you should know what features you will be working with thus you can start painting with broad strokes. You can figure out the general flow of the application, that is how features can be connected and joined together in a way that makes sense to the user.

Depending on the nature of the product (content vs functionality) you will be practicing Interaction Design, Information Architecture (IA), or both.

Interaction Design is about developing flows that facilitate user tasks, defining how the users will interact with available features. And IA is design of the information space to facilitate intuitive access to content.

Two common activities associated with the Structure plane are Design Studio and Card Sorting. Both are fun and interactive ways to come up with design ideas as a group.

You can capture the structure of the product in a series of flow charts (or a general sitemap). Don’t be carried away by the details at this point. The main idea is to take the raw features and start shaping the product.

At this point you might have additional questions about user needs, business objectives, or how the features fit together so you might have to go back to do more research to fill in the gaps. You might also have something to share with the users and the business to make sure you are on the same page.

In fact, I highly recommend sharing your progress as often as possible (especially with key stakeholders). Even better, get them involved in different activities.

The worst thing a designer can do is take the requirements and vanish for weeks or months expecting to emerge with a perfect design that everyone will immediately accept. This rarely works, and it makes stakeholders very uncomfortable, so don’t do it.

4. Skeleton

As we move to higher planes the design becomes more and more concrete. While we could get away with simply talking about the Strategy, Scope, and even Structure words are not sufficient on the Skeleton plane.

Here we need to take care of the Interface Design, that is design of interface elements like layout, Navigation Design, that is design how user can move between the features and content using menus, links, etc., as well as Information Design, that is how information should be presented to the users (it includes data display as tables, charts and so on).

Skeleton plane is best defined by wireframes, or low fidelity mockups.

Interactive prototypes might come handy too, as you can start conducting usability testing and start collecting feedback from people who will be using your product. You might have to explain that what you are showing is not the final look and feel of the product.

It is important to understand the best practices and design patterns. Often these are design ideas that are not innovative and exciting, but that are commonly used and thus very familiar to the users. There is a rarely a need to deviate from these standards.

It is also important to understand the medium you are designing for. If you are designing for the web, you should be familiar with ideas of responsive design and the fold.

If you are designing a mobile application (or website) you should be aware of the “thumb zone”:

When you are working on the Skeleton plane your design should be feature complete (meaning it should include and cover all the features that were defined on the Scope plane). It should also look like a fairly complete product (albeit with a plain design).

But before you move to work on the look and feel, you stakeholders might ask you add more features (or remove some). Don’t be surprised, and don’t resist! It might be that just at this stage of the design process the product took enough shape for stakeholders to see and meaningfully evaluate it.

5. Surface

If you look at everything that comes before this last step, Visual Design is really like an icing on the cake. But don’t take me wrong. I am not trying to belittle Visual Design. It is a very crucial element!

It is important to design aesthetically pleasing interfaces that support underlying planes and uphold the company’s brand. It definitely takes a special skill to do that.

If you have a background in graphic design, you should have easier time with this.

There is not much I can say about the Surface plane as I don’t consider myself a very strong UI designer. All I know is there is a ton to learn about typography, colors, whitespace, etc.

In my practice, I found that I don’t necessarily separate Visual Design from working on the Skeleton. I often use low to mid fidelity mocks to explore layout and interaction ideas, but also colors and fonts.

Most often the final designs are presented as a high fidelity mockups. Sometimes they are combined into an interactive prototype. You can use it to conduct a final round of user testing, as well as demo the app to the stakeholders for final approval.

Even though this final design can be handed off to developers, and it might be tempting to sign off the project and move on, the design is not done until it is released to the public. It is critical for designers to work with developers to make sure design is implemented as intended, or necessary adjustments are made if there are technical (or time) limitations.

Conclusion

It might seem like we have to complete the work on one plane before we move to the next one, but that rarely works that way. Rarely (if ever) you will have a chance to know everything you need to know about users before you have to start working on the Structure plane. You might feel like you didn’t have enough time to explore all the options for the Skeleton… And that’s ok.

As designers we always work in the conditions of uncertainty. Usually we learn just enough to move on. Sometimes we need to stop, backtrack and rework some ideas. That’s part of the process. There is a lot more we can talk about here, but I better wrap up…

I hope you enjoyed this article. And I really hope that you will benefit from The Elements as much as I did. The Elements of User Experience is truly a brilliant model. If  you keep it in mind as you design you will be very intentional with every design decision you make. You will have more confidence in your design and you will be able to articulate your decisions better.

Please leave any questions or comments you might have about The Elements or anything UX. Please also share this article with others. It will greatly help me! Thank you!