There is often confusion and merging between the design terms user experience (UX) and user interface (UI). In this article we hope to clear up any confusion between these terms by using simple definitions and some real-world examples.
Before we get started, it is important to understand that UI and UX are NOT separate concepts. This is why this article is not titled "User Experience VERSUS User Interface". UI and UX are directly related and interconnected, which we further explain below.
Before reading this article, we recommend reading our 7 Steps of App Development to make sure you are up to speed the general process of app development.
As defined by ISO 9241-210, user experience refers to a user's perceptions or responses related to using a product, system or service. This generally includes how users perceive aspects of the product, system or service, such as how easy it is to use and how efficient it is.
This definition is highly technical and not directly related to digital technologies or mobile app design. A good way to think about UX in terms of mobile app design, is as HOW the user completes a particular task via the mobile application - the steps a user must take to get what they need done.
A UX designer generally is responsible for designing the various user flows for the app and creating mockups. The UX designer will usually take the defined feature set of the app and create a skeleton of the app.
User interface refers to the interface that the user interacts with to affect the product, system or service. UI is the aesthetics of the UX. A UI designer will take wireframes and mockups from the UX designer and add elements such as color, visual hierarchies, and emphasis, to enhance the user experience.
Thinking of UX as how the user completes a particular task in the app, UI then becomes the details of these steps.
A particular example of what a UI designer might do, is emphasizing a specific element in a mobile application to make the user's experience more fluid. Highlighting the most likely next step in the user's flow or what the user might be most interested in.
It is clear, therefore, to see how UX and UI are directly connected. The UX provides the outline for the user flow and the UI provides the details. The user interface can improve or degrade the user experience and vice versa. If the flow of a particular feature in an app, say changing a setting, is simple but the colors or visual groupings of icons make it harder, the user interface is degrading the user experience.
This is a question that often pops up online: what is more important, UI or UX? In other words, is a product that looks great but is hard to use BETTER than a product that looks bad but is easy to use? This question is impossible to answer since there are many examples of successful products of both scenarios. One conclusion that can be made, however, is that if a product has a strong UX AND a strong UI, it is going to be a stronger product than a direct competitor with either a weak UX or UI.
UX - User experience; the steps a user takes to gets what they need done in the app.
UI - User interface; the visual details of these steps.
The International Organization for Standardization