UX — A quick glance about The 5 Elements of User Experience (Part 2)

The Five Elements of UX came from “The Elements of User Experience” book written by Jesse James Garrett, one of the founders of Adaptive Path, a user experience consultancy based in San Francisco.

When you experience a website, maybe to buy something, or do anything, you make some decision while surfing this website. So, If we study the elements of that experience(considering all actions user can make), we can begin to understand how those decisions are made. Thus, Enhancing that experience, and satisfying user needs will get people motivated to use & interact with the product.

The Five Elements of UX

There are five dependent layers, each level builds on the level before it, and they start with abstract level towards concrete one(from bottom to top).

The Five Elements of UX

1. Strategy

Strategy

The reason for the product, application or the site, why we create it, who are we doing this for, why people are willing to use it, why they need it. The goal here is to define the user needs and business objectives.

This could be done through Strategic Research Process, where you interview users, and all stakeholders in addition to review the competing products or companies.

2. Scope

Scope

Defines the functional and content requirements. What are the features, and content contained in the application or product. The requirements should fulfill and be aligned with the strategic goals.

Functional Requirements It’s the requirements about the functions, or features in the product, how features work with each other, and how they interrelate with each other. These features is what user need to reach the objectives.

Content Requirements It’s the information we need in order to provide the value. Information like text, images, audio, videos, …etc. Without defining the content, we have no idea about the size or time required to complete the project.

Functional Vs Content requirements

The feature is having a media player for songs, while the content is the audio files for these songs.

3. Structure

Structure

Defines how user interact with the product, how system behave when user interact, how it’s organized, prioritized, and how much of it. Structure is split into two components, Interaction Design & Information Architecture.

Interaction Design Given the functional requirements, It defines how user can interact with the product, and how the system behaves in response to the user interactions.

Information Architecture Given the content requirements, It defines the arrangement of content elements, how they are organized, to facilitate human understanding.

Good Interaction design

  • helps people to accomplish their goals.
  • effectively communicates interactivity and functionality(what user can do).
  • informs user about state changes(file has been saved, or any feedback), while they interact.
  • prevents user error or mistakes, like the system asks user to confirm potentially harmful action(i.e. deletion).

Good Information Architecture

  • organizes, categorizes, and prioritizes the information based on user needs and business objectives.
  • makes it easy to understand and move through information presented.
  • flexible to accommodate growth and adapt to change.
  • appropriate for the audience.

4. Skeleton

Skeleton determines the visual form on the screen, presentation and arrangement of all elements that makes us interact with the functionality of the system that exist on the interface. Also how the user moves through the information, and how information is presented to make it effective, clear, obvious.

Wireframes are widely used to create a visual format, which is a Static diagrams that represent a visual format of the product, including content, navigation and ways for interactions.

Skeleton is split into three components Interface Design, Navigation Design, & Information Design.

Interface Design presenting and arranging interface elements to enable users to interact with the functionality of the system.

Navigation Design how to navigate through the information using the interface.

Information Design defines the presentation of information in a way that facilitates understanding.

So, the Skeleton should answer these questions:

  • What visual form of all things that will be presented on screen
  • How interactions will be presented and arranged
  • How will users move around the site, or application
  • How content will be presented clearly
Skeleton

5. Surface

It’s the sum total of all the work and decisions we have made. It determines how does the product will look like, and choosing the right layout, typography, colors, …etc.

In Surface, we are dealing with _Visual Design(Sensory Design), It’s concerned about the visual appearance of content, controls, which gives a clue of what user can do, and how to interact with them. It should make things easier to understand, increase cognitive ability to absorb what users see on the screen.

Surface

How UX Elements Work Together

Each layer is dependent on the other layers below it. If you screw up in Strategy, you will pay for it during the whole project. When you make a decision or choice in a layer, this decision will affect on your future decisions in the next layers.

Your decisions may change over time, and if you consider decisions to be fixed, you will end up build something that nobody wants. If you are in Surface, and you need to enhance a functionality, you can go back to Structure, and make it better.

To summarize how those 5 elements work together, we start by the Strategy, which is the foundation of any successful UX. Strategy becomes Scope when user & business needs translated to requirements for content & functionality.

Scope is given Structure when we define the ways of interaction with the system functionality, the system response, and how information is organized. Sketching each screen of the system(i.e. using wireframes) to present the areas of interactions and structure defined in Structure, and how information will be presented clearly, is what we do in Skeleton. Finally, In Surface, we take all the work and decisions we have made into the final visual presentation.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.