Skip to content

Product design, leadership and the Harness Design series

Post

The elements of user experience

John Morais, .

The term user experience is still spoken constantly in the worlds of technology and commerce, but it is one of those things most people don't understand in depth. In this article I bring Jesse James Garret's view of UX (user experience) from his book The elements of user experience.

For Garret (2003), designing the user experience can seem like an arduous and difficult task. However, by dividing the work from the bottom up, as in constructing a building where the elements are separated from the most abstract, like planning and floor plan, to the most concrete, like construction and finishing, it is possible to understand the task as a whole better. The author also points out that the planes are divided based on analyses of how people behave when they get an experience of use, and what can be interacted with in the system and how. This set of decisions, coming from the interactions, “inform and influence every aspect of the user experience.” (GARRET, 2003). Therefore, by studying these layers of experiences it is possible to begin to understand how decisions are made, and separated.

The elements of user experience

Garret (2003) states that to start a plane above it is not necessary for the previous plane to be fully completed. Constant evaluations must be carried out, because at each level new things can come up about the project, such as what the competition is doing, how the industry is demanding better production practices, what is known about the users, and so on. These decisions can have a cascade effect in both directions. The purpose of this method is to avoid future problems and dangers, so that a stage is not designed without understanding the previous stage and its context. See the full diagram of the elements of user experience.

According to him, each plane depends on the plane below it. Thus, the surface depends on the skeleton, which depends on the structure, which depends on the scope, which depends on the strategy. When the choices made in the lower planes are not aligned with those above and below, projects can go off the rails, causing losses in deadlines and costs, and especially when the development team tries to put together components that don't fit together naturally. And the worst can happen at the project's launch, where users may reject the product.

Strategy

The goal of this stage is to define:

  • Product goals and user needs

  • Strategy

  • Product goals

  • Business goals

  • Brand identity

  • Success metrics

  • User needs

  • Segmentation

  • Research

  • Development rules and processes

In this stage, field research and meetings with stakeholders (decision makers with veto power) will be carried out, in order to generate the project's first requirements.

This is the stage where discovery happens, along with qualitative and quantitative research with users, customers and partners, and analyses of risks, business and so on.

Strategy plane

Scope

The goal of this stage is to define:

  • Scope

  • Functionality

  • Requirements

  • Functional specifications

  • Content requirements

  • Prioritization of requirements

At this point a deeper understanding of the problem and the value proposition has already been reached, so it is necessary to narrow down the ideas and define the constraints on what must be delivered. It is essential to understand the scope in order to know when the task will be finished.

Scope plane

Garret gives two reasons for defining the scope:

1. To know what will be built: although it seems obvious, it is common for teams not to understand the goals of what will be built. When this is well aligned, responsibility is shared among the members.

2. To know what will not be built: many ideas can come up during the construction of the features, but it is important to understand the requirements, what is meant to be solved at that moment, in order to delimit the scope. The product manager can understand what will go into the feature and what will not, so that it can be delivered in the next release. This prevents the amount of things to do from exceeding the delivery capacity within the deadline and the technical capacity. Garret says this can be like a snowball, where each element thought of is connected to other needs that will have to be developed, and the scope finally gets out of control.

Versioning

Structure

The goal of this stage is to define:

  • Interaction design

  • Conceptual models

  • Expected and exception flows

  • Error prevention

  • Information architecture

  • Content structure

  • Language and metadata

With the scope well defined and prioritized, the moment comes to make what will be built a bit more tangible. It is in this stage that the sketches, frames, flows, interaction design and information architecture are drawn, along with the logic and how the system will behave with each interaction of the people.

Structure plane

Interaction design (structure)

Interaction design is responsible for thinking about people's behavior with the system, the technical feasibility with the development team for creating new behaviors, and analyzing how technology can offer better solutions. The interaction designer evaluates the conceptual models (the way people think) in order to design familiar interactions that make the product easier and simpler to use. Error handling is another point that must be worked on in this phase, which means knowing what the system should do when an error occurs, how to prevent errors from happening and how to help people get out of errors.

Information architecture (structure)

According to Garret, information architecture is focused on how people cognitively process information, considering whether the product makes sense to people.

Skeleton

In the skeleton phase the goal is to define how the product will work.

Skeleton plane

At this point the project becomes more concrete and more detailed, and the interface components begin to be developed. The skeleton phase is focused on interface design. Navigation design aims to present the spaces of information. Information design is focused on generating effective communication with users.

Surface

Interface design concentrates on organizing the elements to make the interactions between users and the product viable.

In the surface plane the goal is to develop sensory design or emotional design, and to present the product's skeleton in a logical way.

Surface plane

Sensory design can draw on psychology to generate predetermined sensations or emotions in the people who will use the product. This can be achieved by reaching the 5 senses (sight, touch, hearing, smell and taste). To ensure the product is causing the designed sensations, it is essential to run research and tests and make adjustments until the margin of error in the sensations awakened is acceptable.

There are other important points in this stage of interface design focused on the sense of sight, such as content hierarchy, elements and contrast.

Conclusion

There are many ways to use this methodology, and the author makes clear that applying it is not a matter of time or resources, but of mindset: it is necessary to think holistically and keep the user at the center.

This methodology brings several stages that suggest several roles for the execution, however the author states that it is possible for a single person to take on several roles in building the product, depending on the context.

Roles and people

To learn more about Garret's work, visit Jesse James Garret's site jjg.net.