A UX designer concentrates on workflow and interactions, typically working in low-fidelity mediums such as diagrams and wireframes. Conversely, a UI designer specializes in look and feel, focusing on high-fidelity mockups and branding. While UX and UI are entwined from start to finish, the crux of a UX designer’s work occurs in the early stages of the design process while the primary responsibilities of a UI designer occur during the latter stages. Below is a diagram illustrating the typical responsibilities of each role:
A token example of the difference between UX and UI is the Heinz ketchup bottle, specifically the glass bottle (Bottle 1) vs. the upside-down bottle (Bottle 2). While both bottles have the same branding and styling, each bottle has different workflows. In other words, the two bottles have comparable UI, but different UX.
If you have ever used a glass ketchup bottle, you know the frustration when the bottle is close to empty and the ketchup is stuck at the bottom – it is not an enjoyable experience trying to get the ketchup out. In the early 2000s, the product managers at Heinz noticed that consumers were storing their ketchup bottles upside-down to help alleviate the glass bottle’s design flaw. As a result, the upside-down bottle was born. Heinz literally and figuratively flipped the bottle design on its head, creating more control, less mess, and a better user experience. While there was no change in the bottle’s branding, the improved experience earned packaging awards, raving customer reviews, and growing sales since its release in 2002.
In terms of human-computer interaction, revamping the UI of a web or mobile app includes updating branding, colors, layout, styling, and typography. A UI revamp is generally at face-level, sometimes referred to as “putting lipstick on a pig” as it involves minimal rework in how the site functions. In contrast, revamping the UX of a product requires a complete redesign in how the product is used. User experience is generally improved by simplifying the workflow and reducing the number of steps the user must take to complete a given task, much like the Heinz bottle redesign. Information architecture, workflow, and functionality are all up for rework in a UX project, thus a UX redesign typically requires more effort than a purely UI redesign.
UX and UI are both crucial to web accessibility and the overall experience of an application. User experience focuses on accessibility via screen readers or keyboard-only, alerts and error messages, or labeling and tooltips to name a few, whereas the user interface focuses on accessibility via color contrast, text size and readability, page layout and white space, and other similar aspects. Despite the different targets of UX and UI, one cannot exist without the other and both are necessary for creating enjoyable experiences – without a good UX, an application will be difficult to use and cause users’ frustration, discouraging continual use of the site; without a good UI, users may feel the application is outdated and not want to use the product in the first place. A successful application requires successful UX and UI to provide an understandable and pleasant experience, so that users are convinced to initially use an application and encouraged to continue using it.