User experience vs. user interface: can you tell them apart?

User experience (UX) and user interface (UI) design are often confused. Both terms are often used interchangeably, but they refer to quite different roles. So, what is the difference between UX and UI?

Fidel Chaves
7 min read

What is user experience (UX)?

User experience is the process of designing a product or service considering the human on the other side. It is an arduous and complex set of considerations that tries to understand, implement and report the best possible experience for the user. It implies a great deal of research and putting yourself in other people's shoes. So, what are the steps of this process?

Research

Understanding: Identify user requirements by conducting interviews.

 

User personas: The creation of a representative persona to identify goals, frustrations, and implementation issues.

 

Use cases: Consider different personas and their uses of the product or service.

 

Journey maps: A guide to understanding how the user might interact with the experience and trace it from start to finish.

Brainstorming

User Flows: Diagrams that outline the steps a user takes during the experience as they travel from start to finish in the UI.

 

Wireframes: Basic representations of the UI and the various components that make it up. They are the skeleton of a product or service.

Implementation

Prototypes: In the case of building software or a digital experience, here is where UI designers create low or high-fidelity prototypes. They can be interactive already. For non-digital UX designs, this could be the prototype of a store layout, a physical product, and its presentation.

 

Frontend & Backend Development: This is when the programmers develop a working product.

Reporting

Usability testing: You observe real users navigating the product through different means. It could be in-person or with digital tracking.

 

Split Testing: Testing the effectiveness of one design versus another iteration.

 

Analytics reporting: Additional insights such as time spent on pages, bounce rates, and more. Again this is specific to digital products.

 

UX design also implies a competitor analysis. Knowing what they do is essential to provide a fresh and competitive product. You can always learn a lot by checking your competitors' strengths and weaknesses. They are probably looking at you in the same way.

 

Finally, a clear product structure and strategy are required for success. There is no room for casual improvisation on these elaborate projects. UX designers are expected to coordinate with UI designers and the development team, being key players in creating a product or delivering a project.

 

But why is this role often confused with UI designers? What do they do?

What is User Interface (UI)?

User interface design is a solely digital endeavor. It implies knowing the UX design process, carrying out the research, and understanding the customer through an in-depth analysis. Design research is heavy on this role, so till this point, we see a lot of similarities with UX design. Here is where things branch out. As we have seen earlier, UX consists of an overarching process that requires implementation; this is where UI enters the room.

 

UI design entails branding and graphic development, giving your digital product or service a specific feel that translates your company's identity and mission. Using typography, contrast, color, and general use of visual space, they can create a powerful image in a flash. This implies designing the whole product interface, which includes interactive elements such as buttons and responsive design.

 

The goal is to guide the user throughout the interface. That is achieved by leading the user and creating powerful storylines. This part must consider the interactivity and animation of the site or product you are putting forward, and the uses are not always as expected. It implies creating an intuitive and easy to navigate experience that remains consistent, coherent, and aesthetically pleasing.

 

This design stage also requires prototyping and a constant feedback loop with UX designers and eventually implementation with developers. Many challenges come up at this point, such as the design of dark mode, the adaptation to all device screen sizes, and the particular uses of each person.

User experience vs. user interface: the differences

So what is the difference between these two fields? First of all, user experience applies to all the experiences provided by your company: be it customer service, your retail store, the product or service itself, and all around its usage. Those can occur in the physical or digital forms, while the user interface is required only on digital interfaces, even if it is just your microwave display.

 

We have seen how user experience encompasses a broader approach and implies a different level of thinking. This is not saying that it is superior or anything. In a digital product, both are necessary and work together to give the most satisfying experience to your customer. Therefore, we can state that UX design works on the overall feel of the experience, while UI design focuses on interface look and function.

 

The first one considers every step of the journey to solve a problem or get to the desired goal, implying the design every step as straightforward as possible. It requires an extensive understanding of user needs and limitations—they set the basic architecture of the product and guide the user through it, sometimes without even a word.

 

The second one already has the skeleton mapped out and puts flesh into it. UI design implies all the visual aspects of the said journey, including the following: individual screens, touchpoints, scrolling, and swiping. If it is a graphic element, it probably goes through the user interface designer. No detail can escape their eye. They have a lot of responsibility, as questions of accessibility and inclusiveness rely on their design decisions.

 

In this fashion, UX designers identify and solve problems. They usually come first in the development process and set the foundation for the rest of the project. They can work on any experience, be it a product or a service. UI designers work on digital media for an intuitive, interactive interface with aesthetic choices in mind. They follow the UX design process and work with the skeleton presented to them, fill it, and finally bring it to life.

Shared space

While we made a clear distinction between each role, many designers indeed have to fill both of them performing as a one-person band, which usually depends on the company size. If you are working for a small business or are an independent entrepreneur, you might have to hone both abilities and hope for the best.

That does not mean that they don't occasionally overlap. A design thinking mind, awareness of user needs, and attention to detail are fundamental skills that every UX or UI designer should have. In any case, there is one goal that fits both: to create a product that delights users.

Inside UX: What is UX writing?

UX writing can be mistaken with copywriting, but the purposes are different: UX writing intends to guide the user through the interface intuitively. Its goal is to maximize the usability of the product with the user experience plan in mind. Great UX content meets business and consumer goals, and UX writing is part of building towards that goal.

 

Thanks to UX writing, you will be able to tell the difference between good, predictable interactions and a complete mess with intricate wording and inconsistent references. UX writers don’t want to make things more complicated for the user. The higher the barrier of entry, the fewer potential customers you will get. Metrics will hold UX writing accountable. If the text is unclear, error messages are obscure, or how-tos are not explanatory, you will see it reflected in your testing.

 

At Awkbit, we value user experience and user interface design. You can see it for yourself by navigating through our site, testing our landing pages, and filling out forms. This job required a great deal of brainstorming, researching, and careful implementation by our designers. Do you have any comments on your user experience on our site? Do you want to know more about the thinking behind it? Get in touch!

Reach Out!

Sources & further reading

Feel like reading more?

June 3, 2021Fidel Chaves

UX writing, the best for emotional design

UX writing is about the reader and emotional design is the pillar of good UX writing. It’s easy, bad writing slaps you in the face, good writing goes unnoticed.

10 min read
April 28, 2021Fidel Chaves

Dark mode: an essential feature for apps in 2021

As a developer, you might be considering including Dark Mode as a feature. Here I present some things to keep in mind.

4 min read
May 14, 2021Fidel Chaves

The best in UXUI design—What is Figma?

Figma is a cloud-based digital design and prototyping tool for your individual or collaborative projects. It is easy to use, does not require installation, and keeps versions up to date for your whole team.

7 min read
June 3, 2021Fidel Chaves

UX writing, the best for emotional design

UX writing is about the reader and emotional design is the pillar of good UX writing. It’s easy, bad writing slaps you in the face, good writing goes unnoticed.

10 min read
April 28, 2021Fidel Chaves

Dark mode: an essential feature for apps in 2021

As a developer, you might be considering including Dark Mode as a feature. Here I present some things to keep in mind.

4 min read
May 14, 2021Fidel Chaves

The best in UXUI design—What is Figma?

Figma is a cloud-based digital design and prototyping tool for your individual or collaborative projects. It is easy to use, does not require installation, and keeps versions up to date for your whole team.

7 min read