Elements of User Experience, Jesse James Garrett – | Blog

This diagram was created by Jesse James Garrett and tries to explain the different elements of the user experience or UX.

It is a fundamental structure that dissects the essential and necessary elements to build and generate a complete and correct user experience.

Elements and planes of the User Experience

The order of structure that brings together each and every one of the planes or elements must be visualized as an Iceberg is visualized. In other words, the highest part or tip would be the visual part of the system or product with which we are used to interacting as users.

Apart from the 5 elements, it is important to note that there are 2 planes:

The product as functionality: It is what the product does, that is, its functions. It consists of the reaction of the product when users interact with the content. For example: Everything that happens when you click the contact button after filling out a contact form.
The product as information: It is what the product says, that is, all the information that the product needs to present to users to formalize an understandable context for them when they want to execute a specific task. For example: The text of the button of the contact form, each of the labels of the fields that compose it, etc.

The 5 elements or levels of evolution of the User Experience or UX

The 5 elements of UX evolution are the following: Strategy, Scope, Structure, Skeleton and Surface.

1. The strategy

Strategy is one of the most important elements. It is the first element and in which the objectives of all those involved in the development of the digital product are defined.

It is essential to have all the stakeholders who participate in the development of the product, needs and objectives well identified.

To detect these needs, requirements and objectives of each of the Skateholders, it is advisable to use .

Once the information has been collected and the needs of the users and the objectives of the digital product can be defined. It will be at this point where we can use the technique to be clear for whom we are developing the product.

Fundamentally, it consists of defining what the user of the product we are designing wants to achieve and what the company or organization wants to achieve with the creation of the product.

2. The scope

In this second element, it is essential to have good communication with each party involved in the product. It consists of considering what you want to do to define the scope and if it will satisfy the objectives of the users and the company.

The way to identify the functional specifications of the product must be positive, specific and objective.

The content requirements are also defined at this point, to take them into account when designing and defining the information architecture.

Fundamentally, it consists of knowing what requirements need to be delivered to the user to facilitate the task of fulfilling their objectives.

3. The structure

This element is where the flow of interaction, behavior and reactions of the components is defined. It is the point where the AI or is defined.

Interaction design comprises the identification of the options involved in fulfilling certain tasks and objectives. The AI or Information Architecture, comprise the identification and organization of options involved in providing correct information to the users of the product.

Basically, it consists of defining how functions and information will be organized in the digital product.

4. The skeleton

This fourth element is where the graphical navigation interface is designed and how the components will be placed (buttons, tabs, texts, links, forms, etc.).

It is about generating a simple design of the interface, which is easy to understand and understand, but free of components that are not necessary to carry out.

Fundamentally, it consists of how the information will be displayed and in what position each component that gives access to the functionality will be placed.

5. surface

It is the fifth and last element. It is the point or phase in which, once the flow of interaction and the distribution of the components within the interface have been verified and approved, each section is carried out in a deeper and more visual way on each screen of the digital product.

It is about generating the design and interaction of the interface making.

Visual styles are defined, the brand is created, design and brand language are aligned along with the style guide.

Fundamentally, it is about how the user experience or UX will ultimately look and feel.

Ways to discover the elements

There are two ways to discover the elements: the discovery that is cyclical and the time that is linear.

Time: From the conception of the strategy until the product is developed and launched into production.
The discovery: The elements are worked sequentially but integrating each other.