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

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

Take The Quiz!

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.

(Back to top.)

What is UX Design?

 

Slices of pizza in a box disappearing slice by sliceWho’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.

(Back to top.)

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

Take The Quiz!

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.

🍕Think of it this way: If the crust is the bare bones of a website, the cheese, sauce, Canadian bacon, and pineapple are the contents that make the pizza (website) interesting. However, before you can top the crust with delicious goodies (content), you must determine how big and sturdy the pizza (website) must be to hold the toppings. Not many people like floppy, soggy pizza!

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.

🍕Think of it this way: In our Pizza Dilemma, Clarice navigated from the home landing page to the About Us page, despite her goal to order the pizza. The interaction design was not optimized for her user needs!

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).

🍕Important note: UI design is not synonymous with visual design. The goal of UI design is for the user to complete tasks as easily as possible, not woo them with graphics, typography, and color schemes. In our Pizza Dilemma, the goal of UI design is to remove barriers that prevent customers from buying a pizza, not amazing the reader with abstract pizza art.

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.

(Back to top.)

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.

(Back to top.)

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! 😊

(Back to top.)

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

Take The Quiz!

Author Image

Desiree Cunningham

Desiree Cunningham is an impassioned writer and editor and Senior Content Marketing Manager at Skillcrush. She has a BA in Journalism and Mass Communications and a MA in English, both from Arizona State University. When she's not working with words, you can find her caring for her house plants, reading, or practicing Pilates.