Layers of UX Design
Episode #6 of the course User experience design for non-designers by Lyndon Cerejo
Welcome to Day 6 of our course on design and user experience!
Yesterday, we dissected user experience into a dozen underlying building blocks to identify different aspects that contribute to a good or bad user experience.
With that foundation, today, we will look at the three layers of UX Design. After understanding user needs through User Research, we create or improve the experience through UX Design.
UX Design can be likened to building a house. Let’s take a closer look.
Layer 1: Foundation
When building a home, the builder has to know what they have to build before they can begin any work, and that’s where blueprints play a role. They are detailed specifications of what needs to be built, how rooms are arranged, and where all the electrical and plumbing goes. For UX Design, the specifications are functional and content requirements that have to be identified before we can start designing anything.
Functional requirements define what features and functionality users will need to fulfill their goals. Content requirements define what information users need, in what form, and how it gets created and updated.
Let’s take a common example you see on almost every site or application: search. The functional requirements will detail out how a user needs a way to enter a search term, possibly refine or narrow the search, and then view an organized list of results matching the search term. The content requirements will address the results displayed and any instructional or help text that may be needed for the user.
Layer 2: Framing
Armed with blueprints, the builder can lay the foundation and start giving the house shape and support by building its frame. The two-dimensional blueprint becomes a see-through, three-dimensional structure resembling the outline of a house.
The equivalent stage in UX Design is organizing and presenting the functionality and content to users through an interface. Information Architecture (IA) organizes content based on how users think about the subject and supports them as they navigate through the content. IA is made visible through navigation menus, links, and labels.
Interaction Design (ID) lays out the actions the user can take with the features and how those features respond to the user. This is visible through the interface, where the user is guided through the content and given an intuitive way to interact with the functionality.
Back to our search example, IA will be responsible for some of the underlying metadata, as well as which portion of the content is searched. ID will take care of the layout of the results, as well as the options the user will have as they start the search, including advanced search, filtering, refining, and paginating through the search results.
Layer 3: Finishing
The builder moves onto the final stage of putting the interior fixtures and exterior walls in place and painting it inside and out. In UX Design, the corresponding stage is visual design, the most visible part of UX Design and what is often referred to as the “look and feel.” Color, typography, and layout all come together to create the visceral part of the user interface that people refer to as “cool” or “sexy.” Remember that good visual design is design that serves user needs, not design that is trendy or artsy without any consideration for the user.
Back to our search example, visual design specifies the font, size, color, and visual layout of the search results.
There are many layers that went into presenting that single search box on Google, as well as the results you get, including the Gooooooogle pagination that expands as you get more results!
UX Design is brought to life during design through prototyping, which allows us to validate that our design meets the needs of end users, and is the topic of our email tomorrow.
Here’s to building the muscles of your design eye!
Lyndon
Recommended book
Share with friends