An easy guide to the difference between UX and UI
All around the design world, we often read the terms UX and UI close together — and the same way they coexist and complement each other, they also exist separately. Don’t worry, the line can be fuzzy, and the confusion is normal! But we’re here to help you get the full picture like a pro. By the end of this article, you’ll master the similarities, the differences, and how they work together.
Let’s start now, shall we?
User Experience (UX)
The name itself has the most important word: the user, who is in the centre of the entire process, and to whom the navigation should be easy to understand, to use and whose purpose is to be simple and intuitive.
In its core, and being a broad field, it’s simply the study of the effect that design has in facilitating the use of a certain product or service. The interactive Experience starts when a user gets in contact with such a product or service, and it refers to all of the paths from beginning to end of its use.
It’s the process by which designers create products that give the users meaningful and relevant experiences, worrying about all of the steps that are part of human-service Interaction — empathy, usability, technology, and, of course, the human factor throughout its development. It’s both content architecture and the mapping of a website, operative system, app, or mobile device.
Good UX Design focuses on the interactive side of a product — the way it behaves, and in which way will it give its users a pleasant experience. It’s the personal and human side of technology, and it will be looking for the perfect harmony between the way it’s supposed to be navigated and the ease of the users’ pains and needs.
Its primary concern is guaranteeing the users an enjoyable and smooth experience, being through usability testing, intuitive interactions, productivity, or by triggering pleasurable emotions, as well as foreseeing the amount of value that the users will get out of the product/service.
On the other hand, when UX Design is not taken into consideration, we often get to situations that are, at the very least, super awkward: overly complicated websites, not being able to finalize payment checkouts, crazy forms that keep on crashing and deleting everything you type, that product that you don’t quite get how to use… you name it!
So, and to get you guys the big picture, we’re showing you an amazing project that will help you understand the concept of bad UX: “The Uncomfortable,” by architect Katerina Kamprani, is made of purposely uncomfortable and deliberately inconvenient everyday objects.
Super weird, right? Yep, that’s the point.
This is what happens when user experience is not taken into account, and by now, you can get the importance that UX represents — not only in the digital but in the real world as well. And this type of inconvenience and bad usability is precisely what User-Centered Design, the epicentre of UX, works to prevent.
Amongst the many advantages that this service brings to you, we highlight:
Better client experience;
Client loyalty;
Effectiveness on producing services and products;
Profit and a better business image
User Interface (UI)
As the name suggests, it’s all about the interface: the style, looks, and all the visual aspects on a site, app, etc. UI Designers want their projects to be easy to use but, and most importantly, they want them to be pleasant to the users.
Usually, this term refers to the graphic part of a project, but it can also include, for example, voice responding command systems such as Alexa or Siri. UI is, essentially, everything that the users see on their screen, all of the visual elements and its graphical components — such as buttons, menus, text, images, sliders, etc. To put it simply, it’s based on all of the micro-interactions between human and machine interfaces.
UI Designers focus on the look and feel, the style, and overall appearance of a system. Usually, they are also called Product Designers, as they worry about the aesthetics of a product and how they can cause a visual impact on the users.
So, every time we bump into style guides, fonts, iconography, visual hierarchy, button colours and type, animations, and the behaviour of each Interaction, the invisible UI Designer’s strings are attached behind all of those components. They are the ones who work on how a product will impact the traction that we feel about a product.
Louder to the people in the back: UX IS NOT UI!
Now that we’ve gone (quite thoroughly!) through all of the concepts, it’s time to explain the differences between User Experience and User Interaction. Yes, one can say that everything’s UX, and even though UI’s is an essential part of it, they are not the same thing.
When it comes to Experience, the focus is on the interactive side of a product — how it behaves; whilst when it comes to Interaction it’s all about the visual aspect of that same product. Don’t get fooled by the confusion that the names can cause, the difference is quite simple. By now you already know it, right?
Here’s an example:
Imagine that a check-out page on a website (for this argument’s sake, let’s think about your favourite supermarket) needs a new button. The UI Designers will worry about its visual part — how’s it going to look like? What colours should we use? What’s the best type for the button’s text?; while UX Designers will worry about the reason why that button needs to be on that exact spot on the screen, to solve any pains that users can be experiencing on that particular step of the process. These designers need previous research, usability testing, and constant changing of the project along the way so that they can achieve their goal: positively impact their future users.
They are responsible for the true understanding of their users — habits, needs, pain validation, and getting to a final product that attends directly to their needs. This is especially helpful when it comes to realizing what the client values, wants, or needs in the moment of buying/using something.
UI, on the other hand, worries about the development of the interface (may it be visual, or not) of a website, app, or system. It’s everything that needs to be used to better interact with the product, kind of like a “visual intermediary” that needs to be functional and intuitive — yes, the layout of what you see.
While UX designers may be thought of as macro interaction architects — also known as the customer’s journey -, UI designers are the architects of micro-interactions — the real way in which humans and machines interact. The first makes a product useful and helps to perform actions, while the second makes its interface pleasant and helps to establish emotional connections (this is what makes you come back).
Yes, they’re different, but they also walk side-by-side and keep on being updated throughout the process of finishing the project.
OK, so how do they work together?
Easy breezy: the UX designer determines how the interface works, and the UI designer determines its look (we know that we keep on saying this, but it’s ACTUALLY this easy!).
It’s an ever-evolving collaborative process, by which both teams work on proximity — UX teams focus on the flow of a service/product, on the way by which the buttons that they create will help the navigation between tasks easier, and how the interface will serve the user’s needs; the UI teams work on how those elements will look on the screen.
If, and for example, amidst project teams decide that certain elements must go — or that new ones must be created -, this is the type of change that requires a whole new spatial organization on the screen, so shapes and sizes must be rethought and rearranged. UX teams will take charge of the best way of doing so, while UI teams will adopt a new design so that everything fits together perfectly.
This collaboration between both teams is what helps to make sure that the final user interface is on its best behaviour, by being simultaneously good looking, effective, and intuitive to use. Even though they need different skill sets, they are crucial to each other’s success. When all of the stars align, the final result is the best!
Thank you so much for getting to the end of this article!
We hope that the concepts are now fresh in your head and that you can successfully differentiate them. If you have any questions, we’re here to help!
We really do want to hear from you! Get in touch
Monday is a Business Design Consultancy based in sunny Lisbon. We co-create with ambitious leaders to build better businesses. We use strategy & design to transform businesses from within.
This core philosophy stands at the centre of everything we create. Clients include Mercedes, EDP, Red Bull, Banco de Portugal, Imprensa Nacional Casa da Moeda, Philips, Jogos Santa Casa, Guloso…
Originally posted by Jesse Viana, UX Copywriter at Monday, on Medium on June 30, 2020. Portuguese version here.