When it comes to product design, we often hear the terms “User Experience (UX)” and “User Interface (UI).”  Even though both terms are not new, it’s common for people who use app and web design software to use these terms interchangeably, or sometimes incorrectly. In this article, we will provide the definitions of UX and UI and explore the nuances between them.

What is UI?

A user interface is a place where interactions between humans and machines occur. It allows users to effectively operate a machine to complete a task or achieve a specific goal, like making a purchase or downloading an app. In fact, you are using UI right now to read this article right now.

User interfaces are composed of input hardware (devices that control the machine from the human end like a keyboard, mouse, or joystick) and output hardware (devices that provide information to users like monitors, audio speakers, or printers). Input devices work together with output devices so users can fully control the machine.

There are many different types of user interface. Here are the three most common UIs – command line interface, graphic user interfaces, and voice-enabled user interface.

Command line interface

Back in the 70s, at the dawn of the computer age, people interacted with computers using command line interface. The interactions were linear – the user (‘operator’) typed a command, and the machine responded to the command either using printed output or by displaying a message on the monitor. Because users have to know the machine language to interact with computers, the complexity of such interaction was pretty high.

Command line interface code
Command line interface code

Graphical User Interface

The graphical user interface (GUI) is a form of user interface that allows users to interact with digital products through visual elements. When users interact with GUI, they go through a series of pages or screens. Those pages/screens contain static elements (such as text sections) and active elements (such as buttons and other interactive controls).

The first GUI was developed by Xerox PARC in the 80s, and it was based on the metaphor of the office desk. In 1984 Apple released Macintosh – the first commercially successful home computer with a GUI interface. It was an important step in technology evolution because anyone could use a computer (no special coding required).

Old Apple Macintosh computer
Old Apple Macintosh computer

Today GUI is the most common type of UI for digital products. The popularization of GUI interfaces also created a demand for people who will design products for those interfaces – UI designers. Today, the spectrum of responsibilities for UI designers grown significantly. Mobile devices, VR headsets, and Car HMIs all have GUI interfaces.

Voice-based interfaces

“The Best Interface Is No Interface” is a famous quote from Golden Krishna’s book “The Simple Path to Brilliant Technology”. The learning curve is a huge problem that GUI interfaces. Every time users interact with a new product that has GUI, they need to spend some time learning how to use it. Generally, the more time users spend learning how to use a particular product, the higher the learning curve becomes. For a long time, people in the design industry dreamed of having a zero UI.

The closest we’ve come to zero UI is voice-enabled interfaces, which allow the user’s voice to interact with a system. Recent progress in natural language processing made it possible to design smart AI-powered systems such as Amazon Alexa.

Essential properties of well-designed UI

No matter what UI you design, you should always check that it has the following characteristics:

  • Clarity. All elements of UI such as visual metaphors are crystal clear for users. Users shouldn’t need to decode the meaning of a particular element.
  • Familiarity. Your UI allows users to use their previous experience when they interact with your product.
  • Consistency. Keeping your interface consistent across your product allows users to recognize usage patterns.
  • Forgiveness. Good UI forgives users of their mistakes.
  • Efficiency. Good UI allows users to provide minimal input to achieve the desired output. It also provides shortcuts for experienced users to make interaction for them more productive.

Interface design methods

The primary interface design techniques are prototyping and simulation. UI designers create a prototype based on the requirement they have from ideation sessions and interaction specifications. Simulation is a part of validating design decisions by testing a prototype with people that represent the target audience. It’s an essential part of usability testing sessions. When conducting usability testing, the product team gives test participants a prototype and a predefined set of tasks and see what problems they face during the interaction.

What is User Experience?

Now we’re familiar with the meaning of UI, it’s time to explore UX. User experience is the experience that a person has as they interact with a product. The term was coined by Don Norman back in the 90s when he worked at Apple. Don Norman says that ‘‘User experience’ encompasses all aspects of the end-users interaction with the company, its services, and its products.”

Don Norman discusses what user experience really means. Video credit NNGroup.

Since UX designers focus on crafting products that are easy to use and understand, the concept of user-centered design takes a central stage in UX design process.

User persona

UX design starts with conducting user research. UX designers have to understand their target audience and identifying exactly what they need from the product they’re designing. As UX designers get this understanding, they create user personas. Personas help users see goals, desires, and limitations of target users. These understandings help them to propose design solutions that works the best for their users.

The concept of a user journey

The emotions users have while interacting with a product, whether negative, neutral, or positive have a tremendous impact on how users feel about the product. That’s why the concept of user journey became a cornerstone of user experience design. The user journey, or the path that the user follows when interacting with a product, has a direct impact on user experience. UX is focused on the user’s journey to solve a specific problem. And it’s possible to improve the journey using a magic ingredient – design.

What makes good UX design

To understand what makes a good experience, Aarron Walter, in his book Designing for Emotion, created a visual pyramid of users needs. This pyramid has become a reference for UX professionals on how to think and apply design decisions.

Maslow's hierarchy of needs vs hierarchy of user’s needs Image

How are UI design and UX design related?

The meanings of UX and UI imply that they are related design disciplines, yet they are very different in nature. The UI design is more concerned with the visual properties of design as well as the overall feel it conveys. But without great UX, even the most beautifully designed UI will cause a bad user experience.

The role of UX designer

Recently, many companies realized that good design is a competitive advantage and they are willing to invest significant resources in creating a great user experience. As a result, the role of a UX designer emerged and is in high demand.

In simple terms, UX design is a human-first way of designing products. UX designers are responsible for analyzing the target audience’s needs and ensuring that the company creates products that meet those needs. UX design is a multidisciplinary field where UX designers can be involved in different areas of product development such as product research, ideation, prototyping, testing.

UX designer’s responsibilities usually include:

  • Understanding users. UX design usually starts with extensive research that has a goal to understand the target audience, their wants, and needs. Empathy is a crucial skill for UX designers. It helps UX designers to understand and uncover the latent needs and emotions of the people they are designing for.
  • Creating a design strategy. Design strategy includes understanding the purpose of a product, mapping a logical journey.
  • Analyzing the design of interactions. UX designers analyze how people use products – their interaction habits, personal preferences, and shortcuts they use while interacting with UI. All insights are used in proposing better design solutions. 
  • Creating wireframes and prototypes. UX designers often need to create wireframes or prototypes using UX software to propose their ideas to design team.

UX designers are constantly involved in the execution of a product. They interact with all team members to ensure that product design is moving in the right direction.

The role of UI designer

The role of UI designers is more relevant to the visual representation of information. UI designers should have graphic design, visual design, and branding design skills to create interfaces that have a good look and feel. Usually, UI designers take the user flow and wireframes for individual screens/pages created by UX designers (skeleton of design) and turn it into something aesthetically pleasing (dressing-up the skeleton).

Being a good designer means a few things, such as:

  • Attention to detail. Good designers know that “The devil is in the detail,” and they are continually perfecting even tiny elements of their solutions.
  • Good problem-solving skills. No matter what you do in design, you always solve a specific problem. Designers should be ready to spend enough time finding a proper solution.

But there are a few specific things that are relevant for UI designer:

  • Competitive analysis. Be able to analyze and conduct competitive analysis of products and visual design decisions that they make.
  • Responsive design. Ensure UI design looks great on any screen size and resolution.
  • Communication. Usually, UI designer works closely with UX designers and engineering team. Communication skills required to understand technical feasibility (whether the team can implement the design)

What are the drawbacks with a combined UI/UX role?

The definitions of UX and UI have many things in common, so that many companies advertise UI and UX design as a single role. The job description for such a position usually says that the person will work both on the conceptual part of user interactions and then transfer this knowledge into actual UI design. In reality, this looks more like a single person that wears two hats simultaneously. Every role requires a different set of skills and methods. And even when a single person has all the necessary skills, this mix of disciplines is bad because it makes the design process less focused. When a person constantly switches from the conceptual phase to implementation, she can easily miss an important part of the design.

Conclusion

Hopefully, by now you understand the nuanced differences between UI and UX design. Yes, they go hand-in-hand, but they are very different. UX design is more analytical. It’s rooted in cognitive behavior and human psychology. UI design software is focused more on the visuals—or whether a product is aesthetically pleasing.

It’s important to define the type of design that you find most interesting and focus on honoring the skills to create outstanding design solutions. If you’re new to the field of design, I suggest trying yourself in both areas. Real-world practical experience in both areas not only will help you understand which area is better for you but will also make you a better designer. You can see this in action with these UX design examples.