User Experience – what’s the difference to User Interface?

Humans and their beloved machines speak different languages (so far). To bridge that communication gap, the User Interface – or UI – acts as the intermediate between the two.

In our previous article, we defined User Experience – or UX – as

the umbrella term used for all the concepts and methods that go about discovering and analyzing a problem, designing solutions for it, and making sure that they live up to a user’s needs and expectations. The goal is to satisfy all aspects intersecting with the user from functionality to usability, and even aesthetics. It’s everything that contributes to the perceived experience that someone goes through with regard to a product.

So in the tech world, this definition sets UX as the catch-all box that encompasses many aspects of product development and design. The User Interface is one of the elements you find inside the User Experience box.

So what exactly is User Interface?

As its name suggests it, UI is the point of contact between a user and digital products or services. That ranges from the touchpad of your laptop to the digital screen you’re reading right now. When we refer to UI Design in websites or apps, we are interested in how the product looks to the user and also how the visual interaction with it feels to the user. So while UX is about the overall experience that a user goes through while interacting with a product from start to finish, UI is focusing on the visual part of that experience.

The overlap between UX and UI is what leads to the confusion between them. It doesn’t help that some agencies use them interchangeably for what seem to be the same job roles. In some cases, the role of UI design can include references to graphic design or even frontend development. That same role might be called UX design by another company. Add to that a few more sub-specialties like Interaction Design, and you’ve got yourself a healthy dose of confusion to work through. So while the same person can fill the UX and UI roles (which is often the case in small companies), it’s important to recognize both the link and the difference between the two.

User Interface constitutes an important part of User Experience. Just like User Experience, the goal of the User Interface is to ensure that the user needs are met while providing the best experience throughout.  User Interface cares for the look and feel of a product, by considering everything that affects the visual experience. Check out this video by NNgroup for a sweet analogy of UX vs UI (spoiler alert: cake cravings may result from watching the video).

Elements of UI design

With that in mind, User Interface consists of:

• Visual design: this one is all about the look and aesthetics. That means colors, typography, spacing, and interface elements like buttons and icons. Consistency is a key principle for visual design
• Interaction design: this is about the communication between the product and the user. How the product behaves to the user’s commands. Things like animation, sound, and other forms of interaction all work towards making the interface experience responsive and pleasant. For example, how does the system react to an incorrect user input? Does it highlight the field? Is it easy for the user to understand the error and adjust the input? How does the system help the user through all this?
• Motion design: motion is what brings life to an otherwise static design. Like everything else in the world of UX, motion has the goal of serving the user by guiding their attention and showing progress. This is done through various forms of animation such as micro animations or page transitions

UX designer vs UI designer

A UX designer is interested in understanding users’ behavior, and coming up with the best functionality as well as ways to facilitate the use of a product meant to meet users’ needs. So they start at the beginning of a project with research and conception to define the goals and requirements. They think about different solutions and ideas to solve the given problems while providing the best overall experience for the user. The UI designer builds on top of the UX designer’s findings by ensuring that the visual experience is at its best. They set the interface in a way that doesn’t only look good but also feels natural and intuitive to use. They hone down the visual interface by adjusting interactions and motion of every element to reflect the functionality and fit with user expectations (e.g. swipe features for a gallery element).

UX taking over the business world means that it is a topic of conversation joining people from different backgrounds. The UX jargon is now used amongst designers and non-designers alike with words like wireframe, usability, and design thinking appearing at every turn. Sometimes, those concepts are not fully grasped by all interlocutors and this plants little seeds of confusion in their minds. In the case of UI, it is only one part of UX. A very critical part of course, as it is the one so easily judged by potential users and the one interacting with them.