Web Design Illustrations - Best Uses
If you carefully study any selection of website designs on a particular topic, one trend will be obvious to you - illustrations are now in fashion. They are so widespread…

Continue reading →

The best interfaces of mobile applications (selection of source sites)
Now the direction of mobile design is experiencing a real boom: traffic from various devices is growing rapidly, and new applications appear like mushrooms after rain. Therefore, it is not…

Continue reading →

The best interfaces of mobile applications (selection of source sites)
Now the direction of mobile design is experiencing a real boom: traffic from various devices is growing rapidly, and new applications appear like mushrooms after rain. Therefore, it is not…

Continue reading →

The 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 Icons8 service as an example. The author is a usability specialist Andrei Burmistrov, the text is published in the first person.

I know what you think: well, another attempt to impose your opinion on the controversial and always discussed topic “What is the difference between UX and UI?”

Yes, you understood correctly.

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 each episode of Doctor House.

For clarity of this thought, I will use one of the functions of the Icons8 website – “Collections”, which allows you to create icon sets.

I created a new collection and started dragging the icons I needed there.

Icons8 Icon Collections
Collection User Interface:

Icon8 Collection Interface
So what is a 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 components: category UI, collection UI, search UI, etc.

User interface

And then what is UX?

“UX covers all aspects of end-user interaction with the company, its services and products.”

– Don Norman

In other words, “Collections” is a tiny part of the general UX on our website, because they are a tiny part of our product and related services.

Consider a real example:

John is an experienced user of Icons8. His current experience with collections greatly depends on how he previously interacted with our site and any other icon sites, and cannot be viewed in isolation.

Before starting to use the collections, John already managed to try other functions, such as repainting. Therefore, when he works with collections, he expects that these functions will be available there too.

First conclusion:

UX cannot be divided into parts, but a user interface (UI) is possible.

I intentionally do not say “UX Collections” because it contradicts the definition given by Don Norman. Collections are a tiny part of the entire UX.

You cannot take and isolate UX collections from common UX because no one uses them in a vacuum. Before starting to work with them, clients probably looked for icons, read our newsletters or visited other icon sites (which are also part of their interaction experience).

The second conclusion:

UI is the same for everyone, but UX is different.

I conducted an interview with three visitors to the site: with John, Alicia and Steve. However, I did not do A / B testing of the user interface, that is, they all saw the collections in exactly the same way. However, the UX was different for everyone.

John received a letter announcing our new feature – collections. Given the fact that he has been subscribed to the newsletter, it is obvious that he has been to our site before. John is an experienced user. Recently launched collections solved his old problem: he could not download several icons at once. As a result – he is happy, he had an excellent experience in interacting with the service.

Alicia found our site through Google, and she is a completely new user. Alicia downloaded only one icon and left, she didn’t even see the “Collections” tab. What was her experience? No. At least her UX was not about collections. Maybe it’s still a neutral UX? Not. She might have the same problem as John (the inability to load several icons at once), but she could not find a solution. This is a bad UX.

Steve uses the collections daily. But after trying to add the 500th icon to his collection, he received the error message “Nothing found.” Steve also said that he was able to create fonts from thousands of icons on another site. Bad UX.

See? UX is different for everyone.

Remember that UX cannot be divided into parts, but the user interface can.

Moreover, UX of different people cannot be isolated from each other.

We have two different user experiences. Should we study them separately? Not.

John had a great experience. Nevertheless, we must be sure that we will not make its UX worse by helping the other two clients – Alicia and Steve. Each of them has its own usability problems and poor interaction experience. And we need to make their overall UX better.

Let’s start with Alicia. She is one of those who simply does not notice the “Collections” tab in the upper right corner (and there are many such people). We tried to raise people’s awareness of the “Collections” by adding this notice:

Collections Notifications
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 was improved, but at the same time it did not make the life of John (the happiest customer) more difficult.

Mobile version of the site and responsive design: all the pros and cons
In the era of the mobile revolution, it is worth considering giving your customers the opportunity to work with the site using smartphones, tablets, etc. It is necessary to give…


Features UI application design in different countries
When you create an interface design for applications / sites operating in different countries, you should take into account the peculiarities of national cultures and traditions of the corresponding target…


6 main stages of website development
I was recently told in the comments that some posts do not correspond to the format of the blog, which is positioned as a useful resource specifically for web designers.…


Web 2.0 style design: simplicity as art
Perfection is achieved not when there is already nothing to add, but when nothing can be taken away (Antoine de Saint-Exupery. "Planet of people", 1939) Far in the fall of…