What Is UX Design? 5 Elements of User Experience Explained
This may be cheesy but we’re excited about this article! Learn the elements of UX design.
We can all remember a less-than-satisfactory customer experience. The in-store music was too loud, the coupons didn’t work, the layout of the shop was confusing, the customer service representative couldn’t give a straight answer — these all impact our decision to return to a store.
These non-digital examples also apply to the internet. Slow loading times, poor navigation, hard to read text — yep, these are all reasons for consumers to seek competitors.
Luckily, UX design professionals exist to optimize your online experience and curtail small annoyances, creating user-friendly websites.
Continue reading to learn about user experience, UX design, and the elements of user experience design.
Table of Contents
- What Is User Experience?
- What Is UX Design?
- Elements of User Experience Design
- Designing for the User Experience
- Learn UX Design
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals
What is User Experience?
User experience is a term coined by Don Norman, co-founder and principal of the Nielsen Norman group.
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products,” according to Nielsen Norman group.
Another way to think of user experience is the sum of all interactions a person has. If the sum of all interactions meet or exceed expectations, the user may find their experience satisfactory — and vice versa.
What is UX Design?
Who’s hungry…for knowledge? We have a cheesy example, illustrating the elements of design.
💭 Imagine “The Big Pizza Dilemma”: You land on a webpage to order a pizza. It takes a few minutes, but you find the online order hyperlink hidden on the “About Us” page, noting that it isn’t a button but a blue text link (like this). This is a little frustrating, but a minor inconvenience won’t prevent you from enjoying a hot slice. 🍕
Next, as you build the pizza, you struggle to read the illegible script font. The letters are squished together and you can’t tell the prosciutto from the pepperoni. Even worse, the responsive graphic illustrating your real-time changes takes 26 seconds to refresh. You also have to scroll to the bottom of the webpage to view the grainy image.
Time is ticking and the family is getting hungry. After spending 15 minutes guessing the banana pepper from the bell peppers, you place the order. Thirty minutes later a hot pizza arrives at your door… and the order is wrong. You begrudgingly eat a prosciutto and banana pepper topped pizza while declaring that this will be your last order from the family-owned pizza shop.
What went wrong? The UX design negatively impacted the user’s experience.
UX design is a user-centric approach that design teams take to account for the user’s experience, with the goal of creating accessible and usable applications that do not neglect functionality for design.
UX designers use logic and, most importantly, empathy to foresee and solve users’ pain points.
What makes good UX design? Stay tuned as we break down the elements of user experience design as described by Jesse James Garrett, and explain how and why they work together.
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals
Elements of User Experience Design
The elements, or planes, of good user experience is a concept conceptualized by User Experience Designer Jesse James Garrett. The elements of user experience design guide the UX design process and are the industry standard for human-centered design.
The following elements descend in order of operations, with the final plane (Visual Design) representing the final step in the UX design process.
User Needs and Site Objectives
The first step in the user experience design process is identifying the user needs and site objectives.
UX designers must meet the user’s needs to accomplish a satisfactory (or better!) user experience. This may sound like an easy task but it is quite nuanced.
Designers conduct user research to reduce costs, validate assumptions, and inform the design of web application projects.
After UX research, UX designers write an actionable user needs problem statement that defines the user, the user’s needs, and why those needs are important.
In our 🍕 Pizza Dilemma, the user statement may be:
Self-proclaimed technologically challenged caretaker Clarice, 36, needs an accessible food ordering service because Fridays are pizza party nights and her opportunity to relax at the end of the long week.
In the dilemma user statement example, we learn:
- The user is an adult who’s most likely female in a helping profession.
- The user needs a quick and easy-to-use site that she can use in between her career, child-caring, and home duties.
- UX designers also gain insight into why it’s important to Clarice. At the end of a long week, Clarice needs an easy solution to feed and entertain her family. If our pizza shop can fill this need, they’ll have a repeat customer for years.
The counterpart to user needs is site objectives. Site objectives define the business, the business’s site goals, and other internal considerations. This element is predefined by internal stakeholders, not the responsibility of UX designers. However, it is the UX designer’s responsibility to determine how this element is executed on a site.
Site objectives and user needs lay the foundation for UX design. UX designers risk poor user experience without these elements in their design process.
Functional Specifications and Content Requirements
After defining the problem statement, UX designers must determine the project scope and requirements. Or, in other words, what the website must do to function and meet user needs.
The functional specifications are a roadmap for developers and designers. A functional specification document:
- Clearly defines goals and tasks
- Outlines the final capabilities a web application will have
- Enables a production team to see gaps in usability and functionality
- Mitigates project and company risk
- Improves team communication
- Increases project efficiency
As teams write a functional specification document, they must consider the content requirements.
Content requirements are the “stuff” that populates the site. Stuff connoting text, audio, images, video, calendars, etc.
UX designers are NOT writing website copy at this point in the process. Instead, UX designers determine content requirements to estimate the space and sizing of on-page elements, including pixel dimensions for images and videos and file sizes for downloadable assets. Determining the content requirements informs the scope of the web application.
Interaction Design and Information Architecture
Interaction design refers to designing an application based on how users may or should interact with a site. UX designers may complete this step in the design process or lean on the guidance of interaction designers if available. On the other hand, information architecture is a blueprint, or organization tool, for a website’s data.
This element typically involves the support of an interaction designer or information architect. Nonetheless, a UX designer may be tasked with this step depending on the company and resources.
User Interface Design, Navigation Design, and Information Design
User interface (UI) design is a design discipline of its own. User interface design refers to the process UI designers use to create usable and likable interfaces. Designers use UX research to predetermine user pain points and design for those annoyances (before they negatively impact user experience).
A vital part of UI design is navigation design. Navigation design answers the question: how do users get from point A to point B on a website? If there are only links from point A to F, landing pages are lost on the website — and all that hard work has gone to waste!
Information design is chiefly concerned with the accessibility and usability of information in text and visual components. Information design includes, but is not limited to:
- Clarity of language used
- Clarity of typography and graphic elements
- Adaptation of content for multiple channels
- User research into communication needs and styles
- Graphic, visual or interaction design of deliverables
There are a lot of moving parts in this element; however, they come together in a website wireframe. A low-fidelity wireframe is a basic sketch of a web application. It contains placeholders for on-page elements, including images and lorem ipsum-filled text boxes. A high-fidelity wireframe is a detailed layout of a web application with early-stage images and text.
Visual Design
Last, but certainly not least, is visual design. Visual design is an overarching topic that encompasses several disciplines (graphic design, UI design, etc.); however, for the purposes of this article, we’re discussing the aesthetics, or look and feel, of a website.
Visual, UX, and UI designers work in tandem to create an aesthetically pleasing site experience. Often these visual elements include color scheme and typography and are based upon the company’s brand guidelines.
UX designers may commission the support of graphic designers to design complex visual components like infographics, logos, and icons.
The Bottom Line: Designing for the User Experience
Let’s drop the pizza talk. The bottom line is that web design is a multifaceted field with several complimentary design-related fields, encompassing UX design, UI design, visual design, and more. Web designers are problem solvers that balance the needs of the user and stakeholders to create usable and accessible web applications and they are in demand.
The U.S. Bureau of Labor Statistics projects that the job outlook for web developer and digital designer professions is much faster than the average of all occupations at 23%.
There’s a place in tech for interested individuals. If you are interested in web design, the first step is to learn UX design.
Learn UX Design
Whew! If all this talk of UX design makes you as curious as the pizza talk makes me hungry, you’re probably ready to immerse yourself into the tech world.
You’re in luck! The Skillcrush Break into Tech + Get Hired program design track walks you step-by-step through the UX design process, teaching you everything from user research to website wireframing. You will also gain the appropriate soft skills to confidently enter the tech industry after completing Get Hired, our career coaching program with a job guarantee.
Join the Skillcrush community and start your UX design career! 😊
Is Tech Right For you? Take Our 3-Minute Quiz!
You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals
