Difference Between UI and UX: A Practical Example
Today there will be a guest post on the topic of UX and UI interfaces using the example of working with the Icons8 service. Author – usability specialist Andrey Burmistrov, the text is published in the first person.
I know what you are thinking: well, here s another attempt to impose your opinion on the controversial and always discussed topic “What is the difference between UX and UI?”
Yes, you got it right.
The only difference between my article and other similar ones is that I will explain the differences between these two concepts using practical examples from my personal experience (as a usability specialist, I tested several projects on real people). However, my opinion is subjective, so you may be even more skeptical than Hugh Laurie in the first 10 minutes of every episode of House.
UI can be broken, but UX cannot
To illustrate this point, I will use one of the functions of the Icons8 site – “Collections”, which allows you to create sets of icons.
I created a new collection and started dragging and dropping the icons that I needed there.
Collection UI:
So what is UI? Everything you see above.
The user interface can be easily divided into parts. Next, you can see the Icons8 interface as a whole, but it can be disassembled into its components: UI categories, UI collection, UI search, etc.
What then is UX?
“UX covers all aspects of the end user interaction with the company, its services and products.”
– Don Norman
In other words, Collections are a tiny part of the overall UX on our site, because they are a tiny part of our product and related services.
Let s consider a real example:
John is an experienced Icons8 user. His current experience with collections is highly dependent on how he previously interacted with our site and any other icon sites, and cannot be viewed in isolation.
Before using the collections, John had already tried other features such as recoloring. Therefore, when he works with collections, he expects these functions to be available there as well.
First conclusion:
UX cannot be divided into parts, but user interface (UI) can.
I am deliberately not saying “UX of Collections” because it contradicts Don Norman s definition. Collections are a tiny part of the whole UX.
You cannot take and isolate the UX of collections from the general UX, because no one uses them in a vacuum. Before using them, customers have likely searched for icons, read our newsletters, or visited other icon sites (which are also part of their experience).
Second conclusion:
The UI is the same for everyone, but the UX is different.
I interviewed three site visitors: John, Alicia, and Steve. That being said, I did not do A / B testing of the user interface, that is, they all saw the collections exactly the same. However, the UX was different for everyone.
John received an email announcing our new feature – collections. Given the fact that he is subscribed to the newsletter, it is obvious that he has been to our site before. John is a power user. The recently launched collections solved his old problem: he couldn t download multiple icons at once. As a result, he is happy, he had an excellent experience of interacting with the service.
Alicia found our site on Google and she is a brand new user. Alicia only downloaded one icon and left, she didn t even see the “Collections” tab. What kind of experience did she have? No. At least her UX wasn t about collections. Is this still UX neutral? No. She could have had the same problem as John (not being able to download multiple icons at once), but she couldn t find a solution. This is bad UX.
Steve uses collections daily. But after trying to add the 500th icon to his collection, he received the error “Nothing found”. Steve also revealed that he was able to create fonts from thousands of icons on another site. Bad UX.
See? The UX is different for everyone.
Remember that UX cannot be divided into parts, but user interface can.
Moreover, the UX of different people cannot be isolated from each other.
We have two different user experiences. Should we study them separately? No.
John had a great experience. However, we need to make sure that we don t make his UX worse by helping the other two clients, Alicia and Steve. They each have their own usability issues and poor user experience. And we need to improve their overall UX.
Let s start with Alicia. She is one of those people who simply does not notice the “Collections” tab in the upper right corner (and there are many such people). We tried to raise awareness about Collections by adding this notice:
Now, when people download any icons, we automatically create a collection for them called “Downloaded”, and this red notification indicates the number of new icons added to the collection. Alicia s UX has been improved, but at the same time it hasn t made the life of John (the happiest customer) any more difficult. And Steve … Let s just say that Steve has more problems to think about.
The problem that Steve faces is much more complex. The reason we limited the maximum number of icons in collections to 500 is because only 0.001% of customers need large collections. Expanding this limit would dramatically increase server load and further increase response times for all users. Such a decision would worsen the UX for other clients like John and Alicia.
Simply put, we cannot improve the UX for Steve without spoiling it for John and Alicia. However, we can soften the situation a little. Remember the message Steve got when he added the 500th badge? The error message is “Nothing found” and it is misleading. We redid it a bit:
“Our collections don t support more than 500 icons. Please create another collection or contact our support team. “
In this way, we were able to improve Steve s UX without hurting anyone.
I want to emphasize again: The UX of different people cannot be viewed in isolation.
As you can see, the user experience of different people is connected. You should never work with the UX of some clients without thinking about other clients. Yes, you solve each problem differently, but you should always think about how a change will affect the UX of others.
Another example of the differences between UI and UX
Once I was assigned to conduct a usability test of search on our website. It turned out to be a cool, almost detective story that I wrote about, so this time I ll be brief.
My goal was to test 3 different search modes:
What is UI in this story? These are two buttons to switch between search modes and search results (icons).
Thus, all I could investigate with the testers was whether the buttons were visible and whether users could find them. It only took 2 minutes to check it out.
What is UX?
It was because of this question that my testing suddenly went from a two minute interview to a 30 minute full blown interview.
The more I asked the participants about their experience of switching between icon search modes, the more it became apparent that:
- UX is different for everyone
- UX cannot be divided into different parts
Again, UX is different for everyone (just remember this sentence I wrote 100 times).
No matter how diligently I followed the interview script, all 5 participants had completely different problems and different ways of working with the interface.
For example, the designer found the icon-only mode without text to be the most convenient, while the manager stated that the text labels allow her to adjust search parameters and find what she wants faster.
UX cannot be isolated.
I asked people to search for icons in different modes, and the result was highly dependent on which search mode was shown first.
For example, I asked people to find the “List” icon.
And then they had to name the irrelevant icons in the results. As a result, the number of inappropriate icons was significantly higher if participants first used the “Icons and text labels” mode. When it comes to UX, everything is interconnected.
Afterword
The internet is flooded with articles that talk about the differences between UI and UX. I didn t mean to spam you with another one. Instead of using terms and my own definitions, I tried to show some practical examples that can help you get a feel for what UI is and what UX is, and how similar and different these concepts are at the same time.
Author: Andrey Burmistrov