What’s the difference between UX and UI?

Left Brain, meet Right Brain.

For any experience to truly connect with people, it must engage both halves of their brain. Now, we understand that this mythical separation of domain between the right and left hemispheres of the brain is more rooted in pop culture than science, but it is still an apt framework for this discussion. While some like to say UX and UI are two sides of the same coin, I think it’s more apt to call them two halves of the same brain. The analytical versus the aesthetic. The data versus the qualia. The objective versus the subjective. You get the idea. But what does that mean for how we might understand the individual disciplines themselves?

Analogy time—UX is to architect as UI is to interior designer.

Let’s imagine the UX and UI designers of your digital design project are instead tasked with a bathroom remodel. The room is stripped to the studs. Without getting too graphic, we all understand that any bathroom must provide people with access to a number of critical functions. But the permutations of how the bathroom itself is laid out or how it appears, aesthetically, are virtually infinite. 

The UX designer creates a blueprint.

In doing so, they will address some basic design questions. What goes where? How much space does each activity require? What should be closest to the door? Is there a logical flow from one area to the next? Should everything be visible the moment one arrives, or should some areas be obscured? How do we arrange water supply lines and drains to maximize utility while minimizing construction costs? Where do we need storage and with what do we fill it?

In UX design, the analog to that floor plan would be a wireframe. Wireframes are the blueprint. They document the structural design and how the experience is optimized and arranged to serve a predetermined set of goals or conversions. Wireframes are the graphical representation of the relative importance and hierarchy of elements, how those elements relate, what needs to be stored in those elements and what the logical flow should be between them.

The UI designer does the finish work.

If we’re staying with the bathroom analogy, the UI designer’s decisions dictate mostly how the bathroom feels. Paint colors. Material finishes. Fixtures. Sounds. Scents. At first blush, these seem superficial, but they actually make a substantive difference to how, or if, the experience elicits a proper response. So what does UI mean in our digital design world? 

While the UX designer’s wireframes may provide broad guidelines as to what should appear on a screen and the interaction flow, the UI designer creates the actual screens, layouts, visual patterns and content and style guides that document the required family of UI elements like tone of voice, content length, buttons, icons, scrolls, menu styles, micro-animations, colors, typefaces, etc.

Both work best when considered and developed in tandem.

Of course, every digital property should work well and look and feel beautiful. But the best way to evaluate whether a design is successful is to understand whether or not it is achieving its objective. That objective may be to increase a business KPI (number of form fills, sales leads generated, etc.) or overall engagement levels like time on site, number of articles read, pages visited, etc. To maximize either, or any combination in between, requires a coordinated effort across all disciplines. 

Consumer expectations for the quality of their digital experiences are increasing. Only by understanding and engaging with people logically, intellectually and emotionally will UX and UI professionals create a competitive advantage through design.