How to register a site?
So, you made the first version of your site and even posted it on the Internet, but after a while you will notice that almost no one visits it, except…

Continue reading →

Sliders for the site and factors affecting their usability
On commercial sites, especially when it comes to online stores, today you can often find sliders, or so-called “carousels,” - site design elements in which slides with photos or text…

Continue reading →

How to create a color palette for sites or web interfaces
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…

Continue reading →

The difference between UI and UX

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.

UI can be broken, but UX can not
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.

How to create a color palette for sites or web interfaces
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…

...

Fighters of the invisible front
If you haven’t guessed yet, then I mean META tags. Their role is not noticeable when displaying the page. These are just commands for a web server or browser, but…

...

How to improve the online registration form on the site
On the Internet, the registration procedure is found to us as often as the form of authorization on sites. You have to register to perform: in all kinds of web…

...

10 key trends in logo design 2018
Last year's post on logo logo trends 2017 was well received by readers, so we decided to continue this “tradition” and consider the main trends in logo design 2018. Despite…

...