UX Vs. UI: The Difference
CMS, SMO, SERP, OMG! Boy does the tech industry love its acronyms. But for designers and people handling their own digital design, UX and UI seem to be the most confusing because they’re not only one letter apart but also related concepts. When looking at UX vs. UI, it’s crucial to know which is which because, despite the overlapping concerns, each has its own specific issues—and fixing one won’t solve the problems of the other.
In this guide, we take a look at UX vs. UI to clear up the confusion and explain who’s who, so you can optimize both for your website or app. It’s important to understand the difference between UX and UI because, for the best results, you don’t just need to master one or the other, you need to know both.
What Is UI Design?
What does UI stand for? UI means user interface and refers to the controls, buttons, or anything used for interactivity (such as a microphone or gesture controls) for websites, apps and video games. UI design, then, is how you design your controls, such as putting the heart “like” button at the bottom of a picture or having the users hover over a dropdown tab to open it
UI design is fundamental to any interactive digital product. You want to design an interface that is self-explanatory, so even new users can figure out how to use it. At the same time, you want to make the interface unobtrusive so that the controls don’t get in the way of actual content (think of smartphone keyboards that only pop up when you need to type something).
To help users understand the controls right away, most UI designs rely on what’s called “patterns,” which are simply standards and commonalities between sites, apps, etc. One of the most popular UI patterns is the use of the magnifying glass icon for search bars—as soon as you see that icon anywhere, you know what it means.
UI patterns can also relate to functions. Have you noticed that most websites put their logo in the upper left-hand corner and that if you click it you return to the home page? This UI pattern ensures that, even if it’s your first time on a site, you can still find the home page if you get lost. UI patterns simply copy conventional control choices so the user can recognize them instantly.
There’s also a lot to be said about the look of the interface, which also fits into UI design. Designers can create controls that fit the mood of the site or app, such as using branded colors or using the brand’s characteristic typography if necessary.
However, what about design choices that affect how people use the site, such as buttons using flashy colors or animations to get noticed? This is where UI starts to enter the territory of UX, and when the differences start to get muddy…
What Is UX Design?
What does UX stand for? UX means user experience and relates to how people feel while using a site or app. Really, UX can apply to anything, even non-digital products, but for this article, we’ll stick to just sites and apps.
UX design is a little harder to understand because it’s more abstract. While UI design deals with more concrete and absolute aspects, UX deals with the emotional side of things. Is using this site or app easy and intuitive? Does the user feel frustrated when they can’t find what they’re looking for?
One of the most important parts of UX design is anticipating what the user will do and designing the entire site/app around that. For example, social media sites like Instagram revolve around the users interacting with other people’s content, so more screen space is dedicated to viewing the images.
It’s so common to see large images and small controls on social media that we forget that this is an intentional design decision.
At the same time, very little screen space is dedicated to less popular actions, such as changing the user preferences, which you can only do by going through your profile. One of the core UX design principles is to make common actions easy, with one or two clicks, by sacrificing less common actions, which you can hide behind other menus to conserve space.
To put it another way, a UX design can influence what the user does by highlighting certain actions and diminishing others. Most commercial websites use flashy visuals for their call-to-action buttons (like “sign up here”) to attract attention and elicit more clicks; simultaneously, legal and copyright information is often exiled to the bottom of the page and written in small, unassuming text so it doesn’t distract the user.
Of course, manipulating the design of the controls to facilitate certain actions encompasses both UI and UX, so you can start to see where the confusion arises.
The Difference Between UX and UI.
Disregarding the overlapping areas, UX and UI are each a distinct field. Even when they deal with the same issues, such as the placement of controls, UX and UI each take different approaches with different priorities.
UI design is the more technical of the two. It deals with the look and placement of the controls, although the user’s preferences (which fall under UX) should still influence these aspects. Still, UI design is more concerned with the quantitative elements, such as how many pixels the width of a button should be, or what precise color code to use for the button.
Likewise, UX design deals with the emotional side of things, the qualitative elements. UX design focuses on streamlining the usage in accordance with what the user needs (or what the site/app managers want to highlight). UX is more involved with the abstract, such as how to make interactions as painless as possible.
The methods of design also vary. UI design is more straightforward; designers create samples of the icons and controls, noting special functions like animations or tucking them away. UX design, on the other hand, is more roundabout; designers have to plan for multiple scenarios and task flows, which makes UX sketching a popular practice.
Even when UI and UX deal with the same area, they each have different concerns. Take designing a button, for example. If UI design is choosing the pixel width of a button, UX design covers whether the button is too small for the user to see, or too big that it obstructs higher-priority content.
Now, in order to know the perfect pixel size for a button (UI design), you’d need to understand the preferences of the user (UX design). And in order to satisfy the needs of the user (UX design), you’d have to carefully and proactively build the interface (UI design). That’s why, as you can see, UX and UI design work together, not against each other.
How UX And UI Work Together.
For all the talk about the UX vs. UI feud, more often than not they work as partners. The fruits of UX design, such as knowing what the user likes, dictate the choices made in UI design. Knowing the perfect placement and look of controls, not to mention knowing which controls to hide or deprioritize, involves understanding both UI and UX design.
Where UX and UI overlap most is in making the interface as convenient as possible—you don’t want your users to think too hard or have to move around too much. The most-used controls should be easily accessible and unobtrusive, satisfying the goals of both UX and UI. The most recent UX design trends point in that direction.
When designing controls, you should consider the goals of both UI and UX. For example, on phone apps and mobile versions of websites, buttons and controls are often placed on the bottom. The reason is because that area is closest to the thumbs when holding a phone, which makes the buttons easier to push, which benefits the UX. The buttons also have to be designed to fit that area, such as making them small enough to not get in the way, or tucking them into a hidden menu that can be extracted when necessary—which is a UI design decision.
Using patterns, mentioned above, often works for both fields. For UX, the user doesn’t have to learn any new controls or worry about how to do certain functions. For UI, the basics of how the controls should look and function are already laid out, but with enough flexibility that allows the designer to make them unique.
To satisfy both UI and UX, try to understand your end user. As always, this is more effective with actual user testing, rather than using guesswork. Split testing can determine which layouts or visuals work better with your particular type of user, while observing participants use a prototype can offer insight into how your users think or where there’s room for improvement.
UX Vs. UI Recap
For quick reference, here’s a recap of UX vs. UI
- UI stands for user interface. UI design handles the technical design of the buttons, controls, and anything else for interactivity.
- UX stands for user experience. UX design handles what the user feels when interacting, such as their preferences and what they notice.
- The physical design of the interface falls under UI design but should be influenced by UX, like how the user thinks or feels about the interface’s design.
- Anticipating the user’s actions and facilitating them falls under UX design, but is intrinsically influenced by the UI, such as the look and placement of the interface.
- The best way to satisfy both UX and UI designs is by understanding the target user group: their preferences, behavior, habits and way of thinking. This is most effectively accomplished with user testing.