When I first got into design, I was familiar with the term “UI/UX Design''. My assumption was that it was the term used to refer to people who designed digital products. Was I right? To the layman, probably. However, in the tech world, I was only partially correct. They are used together and interchangeable so often that it is easy to understand why there is a general misconception about those two terms. User Interface (UI) Design and User Experience (UX) Design are crucial parts of designing a product. While they are not opposites, they are neither the same. In simple terms, UX design is the user-centered approach to designing a solution-oriented product, UI design is the user-centered approach to creating the visual properties of a product.
Goal
The goal of this article is to distinguish between User Interface design and User Experience Design. I identified 8 features that clearly define both terms:
- UX - Design Thinking (usually first) / UI - Design Tangibility
- UX - Problem-Solution Oriented / UI - Emotional Connection Oriented
- UX - User Journey / UI - Intuitive Experience
- UX- Overall Usability / UI - Visual Aesthetics
At the end of this article, I want the readers to have a basic understanding of what User Experience Design and User Interface Design are, how they differ, as well as their roles in a design.
Target Audience This article is for newbie designers, people who are thinking about starting a career in UX design, potential UI design or UX design employees or employers, as well as those who are just interested in knowing more about UX design.
Defining UX
Don Norman, a cognitive scientist, takes the credit for coining the term, user experience. According to him, "User experience’ encompasses all aspects of the end-users interaction with the company, its services, and its products."
Defining UI
As User Testing ink) says, "At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements—like buttons and icons—that enable a person to interact with a product or service."
Design Roles that Differentiate User Interface Design and User Experience Design
1. UX - Design Thinking (usually first) / UI - Design Tangibility UX Design is usually the starting point of a product design. At this point, design thinking takes place. Wikipedia says that design thinking refers to the cognitive, strategic, and practical processes by which design concepts are developed. I particularly like this definition by Interactive Design Foundation , which says,
“Design Thinking is an iterative process in which we seek to understand the user, challenge assumptions, and redefine problems in an attempt to identify alternative strategies and solutions that might not be instantly apparent with our initial level of understanding. At the same time, Design Thinking provides a solution-based approach to solving problems.”
What we get from these definitions is that UX Design is what a product is built on. We can say UX design involves the conceptualization and rendering/implementation of a design. The elements of design thinking in UX Design are:
- Problem Framing/Formative Research: Through formal methods like surveys, interviews, focus groups, etc., you can identify target users and their needs, as well as possible solutions that also exist. This would help a great deal not only in zeroing in on a problem but also in creating new approaches to creating a solution. Formal research methods are great because they provide accurate data, facts, and figures. However, they could come at a cost. maps.
- Ideation/Brainstorming: These two involve thinking up solutions to a problem.
- Creating a user-centred picture: With the data retrieved from research, a UX designer can create user persona, sketches, scenarios, storyboards, user journey, userflow, and wireframes.
- Rendering/Implementation: After the UI part of the design is complete, the UX designer, using userflow would do the prototyping. The UI designer can also do this Reporting: usability reporting, split test, analytics reporting
As the tangible part of a design, that is the part that is seen, touched, and interacted with, UI ensures that the visual elements of a design are appropriately used. On the other hand, a UI designer comes in immediately after the wireframes have been mapped out. The UI designer is concerned with the visual part of the digital product created by the UX designer. The colors, typography, interaction, images, etc., are what the UI designer concerns themself with:
- Typography: Good typography fundamentals must be ensured
- Language: Language is important in UI because it used to label
- Colors: Colours are used to incite moods and beautify a design.
- Icons and Illustrations: Icons will help engage users and make an interface look decluttered
- Images: Images will keep users interest and give visual representations for people who might not be willing to read texts
- Interface Accessibility: A UI designer is responsible for making a design accessible on all (or almost all) kinds of screens
As an analogy, it can be said that while a UX designer creates a skeleton, the UI designer adds the body that we can touch and see.
2. UX - Problem-Solution Oriented / UI - Emotional Connection Oriented
Imagine a product created to help people with depression. After user research, the UX designer comes up with a great, well-researched product. A UI Designer understands that the use of mild, comforting colors would be great for that app. S/he would know not to use colors like red because it is not a color associated with calmness and comfort, which the app is supposed to incite. From the conceptualization process of a US design, we see no reason how various elements of research and brainstorming help ensure that a product is providing viable solutions to real problems. A bad UI will always tell on a design because UX design cannot stand on its own.
3. UX: - User Journey / UI - Intuitive Experience
UX Design, otherwise known as user-centered design, takes into cognizance the start to the endpoint of using a product. This is called a user journey. It is the entire process a user goes through to achieve a goal with a product. The visual/psychical contact points a user encounters is the UI. Similar to emotional connection, a UI is usually expected to be intuitive. Users should 'naturally' know what next to do. Their eyes should 'naturally' land on the most important information on a page. The UI designer, through the use of sound UI elements like the ones explained above, is expected to make these connections. A user's natural intuitions are developed through previous interactions with other apps and users’ expectations of similar experiences.
4. UX- Overall Usability / UI - Visual Aesthetics
Another basic difference is the visual aspect of UI design. As I mentioned before, UI is a blend of visual and interaction design. Let's take you back to the example above. Assuming you see an 'app settings' button on that app. It looks really great and beautifies the design. UI’s job has been partially fulfilled. Now, when you try to click that button and it leads you to your profile page instead of the setting page as it says, what would you think/feel as a user? Even though the profile screen will include another link to the actual settings screen, users might feel stressed out by the "long journey". Imagine more of these physically appealing buttons scattered all over the app and don't exactly lead you to the right screens. Though the design might look great, the user experience will most likely be zero.
While UI is generally expected to look good, a UX-centered design should focus more on functionality than visually appealing properties.
To reiterate, see the diagram to get a better understanding of the roles of a UI and UX designer in a product design
How UI and UX Work Together
The reason UI and UX go hand in hand is that digital products are usually tangible; they are seen and touched. UX design overlaps with UI design because digital products are usually created to solve real-life problems. As (user testing quote) suggests, they cannot be exactly compared because they are not in an “either-or'' situation.
I like how Craig Morrison – Head of Product at RecordSetter, Founder of Usability Hour, as cited in User Testing, explains this:
“I hear this question all the time, and I’ve answered it multiple times. Ultimately I’ve come to this conclusion… There is no difference between UX and UI design because they are two things that aren’t comparable to each other. For example, it’s kind of like asking, “What is the difference between red paint and the chemicals the paint is made up of?” There is no difference. Red paint is made up of all sorts of different chemicals that when combined together make red paint. Just as the user experience is made up of a bunch of different components, user interface design being just one of them, that when combined together make up the user experience. Here are a few other questions to illustrate my point: What is the difference between a MacBook and the shape of the keyboard keys? What’s the difference between tea and the type of material the tea bag is made from? What’s the difference between a car and the color it’s painted? If we’re talking about delicious cake (and why wouldn’t we be?), UI is the icing, the plates, the flavor, the utensils, and the presentation. UX is the reason we’re serving cake in the first place, and why people would rather eat it than hamburgers.”
From my understanding of both concepts, this stance makes sense. So, while this article is aimed at distinguishing between User Interface design and User Experience Design, it does not contrast them. I consider UI and UX design as parts of a whole, as they are both crucial in the creation of a digital product.