User Experience (UX) and User Interface (UI) often get confused. Both are vital to your digital design. Here’s how to use UX and UI to engage your users.
UX and UI are different digital design concepts that often get mixed up. For your content to thrive, you need both to work hand-in-hand toward one goal: A successful online user journey. This blog post will introduce the ideas of UX and UI, how they’re different, and how to use both together.
User Experience (UX)
According to Figma, UX refers to the user’s overall experience with a product or website. UX is the big-picture conceptual look at the user’s interaction with your content, how it solves their problems, and how it should make them feel. UX designers are most concerned with user needs.
According to Information Architecture for the World Wide Web author Peter Morville, successful UX answers “yes” to the following seven questions regarding your content:
- Is it useful?
- Is it usable?
- Is it desirable?
- Have you made it findable (will a user know where to find what they’re looking for)?
- Is it accessible?
- Is it credible?
- Is it valuable?
User Interface (UI)
According to Figma, UI refers to your content’s specific interactivity, look, and feel—the nuts and bolts of your website or app. When you look at a website and think it has a pleasant or distinct vibe, that’s UI. UI designers are most concerned with the content’s aesthetic.
Examples of UI include:
- Page layout. From your header position to how much white space you incorporate, the organization of a web page or app screen should feel intuitive and natural.
- Color scheme. Do your colors blend well and are consistent with your brand and accessibility standards, or do they clash and give users headaches?
- Font selection. Like colors, consistent and intentional fonts can make or break how a user feels using your page or app.
- Interactive elements. Clickable buttons or drop-down menus should feel intuitive and not clunky or yield unexpected movements or results.
The Difference Between UX and UI
UX is a big concept that covers a lot of subsets of ideas—one of which is UI. An engaging and thoughtful UI can lead to an overall positive UX. The opposite is also true. Bad or lazy UI can make for stressful or underwhelming UX, leading to fewer users wanting to explore your content.
You may see a few job postings that ask for UX/UI designers, and there is indeed some overlap. However, it’s important to distinguish between these two design mindsets. The UX designer cares more about user needs and how all the pages connect, while the UI designer focuses on the content’s look and feel as it stands on its own.
Putting It All Together: How to Design a Thoughtful User Journey
UI is your car, and UX is your engine. You need both to work together to get to your destination. And though UI is a specialized subset of UX, they both share an emphasis on user-centered design and empathy, cross-functional teamwork, and similar design tools. Using both together, you can plan and execute a thoughtful user journey.
Here are the main overall steps involved with UX design that incorporate UI planning:
Consumer and competitor research
You can’t deliver a great user experience if you don’t know who your target user is. UX research is discovering what your target audience likes, their problems and pain points, and their online behaviors while using web pages and phone apps. The ideal result of UX research is a user or marketing persona, which is a detailed description of your target audience.
Information architecture
When you create information architecture (IA), you’re creating a visual blueprint for your content, using your UX research to outline essential navigation and features, content hierarchy, and types of interactions. IA flowcharts are a popular choice to capture how your content is supposed to work for your persona.
Wireframes and prototypes
A wireframe is when you turn your IA into an actual interactive model. This step includes testing your ideas and defining requirements and feature priorities. The wireframing stage is when you start collaborating more in-depth with the rest of your team, especially your designers, developers, and product owners.
Testing and troubleshooting
You could have the perfect wireframe and your content, but it can still reveal new issues and challenges once it’s live. Before you officially launch your content, take the time to make adjustments and refinements, and then test again and again until your team feels ready to publish. Though the lines between UX and UI designers can get blurry, this can be an example of a UX designer working with a UI designer to start turning a wireframe into actual content.
Ongoing updates
Your content entering the real world is a celebration. That doesn’t mean your job is over. Published content means more opportunities for user feedback and data analytics, which will result in future updates and improvements to your design.
Further UX and UI Reading
This blog post builds from foundational research and writings done by Figma, Dribbble, and HubSpot.
Thank you for reading! This blog post is part of a series by Brady Gerber exploring ideas and tools every writer should know. Learn more about Brady on his home page, find his writing and content samples, and subscribe to his newsletter.