What are the Five Elements of User Experience?

What are the Five Elements of User Experience? ​

Five Elements of User Experience Design | Brave Achievers

There are different activities involved in designing a product that will give a good user experience. The user experience design process of such a product starts with user research to know user needs, drawing wireframes, creating prototypes, and organizing the information architecture.  ​

It also involves conducting usability testing, designing the user interface, and meeting with stakeholders before the product finally gets to the user.  

These processes are standard UX design methodologies, and they are built on the key elements o​f the user experience of the website or product. 

So, a user's interaction with a product is based on the elements of user experience. The user's interaction will also determine his decisions and perceptions. 

Thus, we can understand user behavior in decision-making by studying the elements of user experience on the website. It is safe to say that the elements of the user experience of a product determine the user behavior and, ultimately, the user satisfaction. 
​
There are five key elements of the user experience design process. Understanding these elements will also improve a designer's approach to creating products. 

An Introduction to the Five Elements of UX Design ​

5 Elements of UX Design | Brave Achievers

There are five dependent layers of process that make up the elements of user experience design. Each layer builds on the previous one. So, the requirements in a layer have to be complete before moving on to the next.  

These layers are also called the five planes of user experience design. 
The five planes are: 

1. The Strategy Plane. 
2. The Scope Plane. 
3. The Structure Plane. 
4. The Skeleton Plane. 
5. The Surface Plane 

These elements, otherwise called planes, function interdependently with one another. Your decisions on one of these elements in your design will affect the next element. Thus, it is wise to base the next element's definition on the previous element's outcome.
 
It is important to go through the five elements if you want to design a product with an excellent visual design and seamless user experience. These elements help you stay conscious of the user throughout your design process.  

The strategy plane builds on abstract ideas about the product. You confirm the user needs from user research and define the product's business objectives. This leads to the scope. The scoping plane is to translate the user needs and business objectives to functional and content requirements.  

Furthermore, the structure defines interaction design and information architecture. Then, we have the skeleton where you determine the visual form.  
The skeleton is divided into the interface design, the navigation design, and the information design.
​  
The last plane, the surface plane, deals with the visual appearance of content on the screen and how users can interact with the content.  
Now, let's get a detailed explanation of these elements. 
​​

Related: What is user experience design?
​

 1. The Strategy Plane 

The Strategy Plane of UX Design | Brave Achievers

The strategy plane defines the product. Who is our target audience? What is the usefulness of the product? 
​ 
These questions will be answered in this plane through a strategic research process that involves conducting user research to understand user needs, stakeholder interviews, and competitor reviews. ​

Activities in the strategy plane ​

Some of the activities in the strategy plane include: 
​
i. Writing Business objectives 
Business objectives are the main targets of the product set by the organization itself. They are determined by the user's needs.  
They are also a significant influence on the product's design and the best time to launch the product. 

ii. Conducting user research for user needs 
User needs are an essential part of UX design. We will not have UX designers if there are no problems to solve. So, it is crucial to consider the needs of the user in determining the design strategy 
The best way to understand the user's needs is by conducting user research. User research helps you identify the pain points and emotions of the user concerning the proposed product. 

iii. Usability testing 
Usability testing helps you evaluate the reaction of users to the product. During usability testing, you will discover the product's ease of use and how to improve it. It is still part of setting the strategy for the product. 

iv. Creating user personas 
To make strategizing easy, it is important to create user personas. A user persona is a pictorial representation of your user. User personas serve as constant reminders of who you users are throughout the design process. 

 2. The Scope Plane 

The Scope Plane of UX Design | Brave Achievers

The scope plane deals with the functional and content requirements of the design. Strategy is translated to scope when we turn our clearly defined objectives into specific requirements that address the pain points of the target audience.  
​
The functional and content requirements would have to be in sync with the strategic goals. The scope plane is divided into two: 
​
i. Functional specifications 
The functional specifications are concerned with the features, functions, and overall functionality of the product. It also deals with how users can use the features and functions to meet their own objectives. 

ii. Content requirements 
Content is a major part of user experience design. It communicates the essence of the product to the user. The contents of the design are texts, images, or videos. Defining the content early helps you decide the timeframe for the project. 

 3. The Structure Plane 

The Structure Plane of UX Design | Brave Achievers

The structure defines how a user interacts with the product. User interaction is concerned with the process that leads users to a page and how the page reacts when they interact with it.  

This reaction will depend on the organization of the information on the page, and how the page effectively communicates interactivity with the user.  

The structure builds on the functional and content requirements from the scope to create interaction between the design and the user and organization of information across the product for the user. 

The structure plane is divided into two components which are: Interaction design and Information architecture. 

i. Interaction design 
​The interaction design is based on the functional requirements from the scoping plan. It describes different ways you can interact with the product and how the system will react to that interaction.  
The main goal here is that interaction methods have to align with the product's business goals. The methods have to effectively communicate interactivity and functionality.

​ii. Information Architecture 
The information architecture describes how the whole site or product will look. It defines how content should be organized across a site or product. It informs users about the navigation elements and how they connect different pages on the site together. 
​​

Related: Importance of user flow in UX design
​

 4. The Skeleton Plane 

The Skeleton Plane of UX Design | Brave Achievers

The skeleton plane determines the arrangement of interface elements on a page. This happens after you have determined how a user gets to a page and the form of interaction that should be on the page from the structure plane.  

You take it from there to the structure plane where you define the visual form of the product. This is where user interface design becomes a part of the user experience design process.  

The skeleton plane determines how the user will navigate the interface of the information architecture we have created in the structure plane.  

This plane is divided into interface design, navigation design, information design, and wireframes. 

i. Interface design 
The interface design describes the kind of interface elements for each activity on the website and how these elements can be arranged in a way the user can understand. ​

ii. Navigation design 
The navigation design is concerned with how users can browse through different pages of a website. It determines how the navigational elements can keep users connected to a website without losing focus of their original intent.  

iii. Information design 
Information design defines the information that should come first and the best design to communicate the information. 

iv. Wireframes 
​A wireframe is a skeletal structure that describes the visual format of the website or product. It is a page layout for the content, information design, navigation design, and interface design. ​

5.  The Surface Plane 

The Surface Plane of UX Design | Brave Achievers

The surface is the outcome of all the previous elements. The format created in the skeleton phase is turned into a visual design in the surface plane. The Visual design is also called sensory design because it's all about a visual appearance that appeals to the senses. 
​ 
The surface adds visual appeal to the work that has been done behind the scenes. You will see the images, texts, their colors, text formats, and how they all form the product's functionality. ​

Final thoughts ​

UX designers use these UX elements to organize and simplify the design process. The five elements explained in this article provide a conceptual framework that helps designers stay conscious of the user experience in their design.  

The planes are dependent on each other, and the dependency is built on the user experience of the previous layer. The design process starts from abstract ideas about the product and ends in creating a functional product with a good visual design. 
​
You can sign up for the Brave Achievers GoCreate USA Bootcamp training to start learning UX design right away! ​

Recommendations 

How to become an expert in UX design through Design Thinking 
UX design for Beginners 
​James Garret's The Element of User Experience: User-Centered Design for the Web