UX — A quick glance at 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.
This is a long series of tutorials. We are going cover:
When you experience a website, maybe to buy something, or do anything, you make some decisions while surfing this website. So, If we study the elements of that experience (considering all actions users 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).
1. 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 reviewing the competing products or companies.
2. 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 are what users need to reach the objectives.
Content Requirements It’s the information we need in order to provide value. Information like text, images, audio, videos, …etc. Without defining the content, we have no idea about the size or the 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
Defines how the user interacts with the product, how the system behaves when the user interacts, 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 users 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 users can do).
- informs users about state changes (the file has been saved, or any feedback), while they interact.
- prevents user error or mistakes, like the system asks the 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 the 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 make us interact with the functionality of the system that exists 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 are 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 is 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 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
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 with the visual appearance of content, controls, which gives a clue of what users 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.
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 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 building something that nobody wants. If you are in Surface, and you need to enhance functionality, you can go back to Structure, and make it better.
To summarize how those 5 elements work together, we start with the Strategy, which is the foundation of any successful UX. Strategy becomes Scope when user & business needs are 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 the 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.
Thank you for reading!
Would love to connect on LinkedIn. Please feel free to say, Hi!
