Difference Between UI & UX. A Practical Example - millercrummon

I know what you are thinking. Just another guy trying to impose his personal opinion happening a controversial, holy war-inducing topic. "UI vs Uxor: What's the difference?"

You got that right.

My only divergence from other articles is that I'll show you practical examples from my personal experience as a useableness specialist. I'm a guy who's tested whatsoever real functional projects on real people. Information technology silence goes without saying, however, that my opinion is subjective, so you are receive to be more of a doubter than Hugh Laurie in the first 10 minutes of every House episode.

You Can Break Down UI, But Not UX

To illustrate this channelize, I'll use a feature from our website – Collections. It lets you create groups of icons.

I created a unprecedented collection and started effortful the icons I wanted there.

This is appeal's UI:

What's UI? Everything you get wind above.

UI can represent easily segmented into parts. Down the stairs you fire see the overall Icons8 UI, but it can exist divided into different subsections like Categories UI, Collection UI, Search UI, etc.

What is UX past?

"User experience" encompasses all aspects of the end-exploiter's fundamental interaction with the company, its services, and its products.
– Don Norman.

In other words, "Collections" are a tiny split of the user's overall experience on our website, because they are a lilliputian part of our cartesian product and the services associated with it.

Let's look at a real life example:

John the Evangelist is an seasoned Icons8 user. His current experience with Collections is highly subject along his previous experience with our website and whatsoever another icons websites, and cannot glucinium well-advised in isolation.

Before using Collections he had used other features, such American Samoa Recoloring. So when it comes to Collections helium expects the same features to be available.

Ok, the early takeaway:

UX cannot be divided into different parts. UI throne constitute divided.

I am purposely NOT saying "Collections UX", because information technology undermines the whole definition precondition by Don Norman. Collections are a tiny part of the overall user experience.

You can't just insulate Collections UX from overall UX because nobody uses these collections in a vacuum-clean. Before they used collections, customers had probably searched for icons, read our newsletters or visited other icon websites (which is also a part of their experience).

Secondment takeaway:

UI is the same for everyone. UX is unlike for everyone.

I interviewed 3 website visitors: John, Alicia and Steve. Thither was nobelium A/B examination of UI, so they all sawing machine Collections UI as. Withal, their overall know (UX) was different.

John got an e-mail promoting our new feature, "Collections". Given the fact that he signed to our mailing inclination, obviously he had been on our website before. He's an versed drug user. Newly released Collections solved his old problem – downloading multiple icons at a clock. He's happy. He had a smashing UX.

Alicia found our internet site through a google search. She's a first time visitant. She downloaded one icon and left. She ne'er even sawing machine the "Collections" tab. What was her live? She had no. At least her experience never touched Collections. Neutral UX? No. She could have had the same problem every bit John (downloading multiple icons like a sho), but never found a solution. That's a pretty UX.

Steve uses Collections on a every day basis. But after difficult to contribute the 500th icon to his solicitation he gets an erroneousness message "Nothing found". Steve also points out that by victimisation some other site he was able to generate fonts from thousand of icons. Bad UX.

Take in? UX is different for everyone.

Commemorate Pine Tree State talking about the fact that….
Uxor cannot equal divided into assorted parts. UI force out be four-pronged.

It goes even encourage.

The UX's of different people cannot be set-apart from one another either.

We have 2 different user experiences here. Should we treat them severally? No.

John had a great experience. However, we have to be trustworthy we won't seduce his UX worsened while serving the other two customers, Alicia and Steve.

Alicia and Steve both represent our customers, each with their own problem and a bad UX. We need to ameliorate their whole UX.

Let's start with Alicia. Alicia represents a nifty number of people who simply don't notice the "Collections" tab in the properly corner. What we tried to do after this was to increment people's consciousness of Collections by adding this notification:

Now when people download any icons we automatically create a Solicitation titled "Downloaded" for them and this red notification indicates the number of fresh icons added to the collection. Alicia's UX was built, yet Information technology didn't not make Bathroom's (the happiest customer) life harder. And Steve…well let's just enjoin Steve has bigger problems to opine about.

The trouble Steve faces is ALIR more technically demanding. The reason wherefore we limited the max number of icons in any given collection to 500 is that only 0,001% of customers need collections that super. Expanding this limit would result in dramatic growth of server burden, which leads to higher reception time for complete users. It English hawthorn worsen overall experience of other customers (such as Can and Alicia).

Put simply, we lavatory't improve Steve's experience without decline in quality it for John and Alicia. However, we can soften things a bit. Retrieve the kind of content Steve got when adding 500th icon? The error message "Nothing institute" was dishonorable. Let's tweak it a bit:

"Our collections do not support more than 500 icons. Delight, make over another aggregation or contact our support"

Easy as that, we managed to increase Steve's Uxor without pain anyone else's.

I want to really malleus this point home base: UX's of different multitude cannot be thought of in isolation.

You see, UX's of different populate are interconnected. You should ne'er treat the know of certain customers without thinking of the otherwise customers. Yes, you treat every problem differently, but you always should cogitate how the solution affects the UX of others.

Another Example of UI/UX Distinction

Once I was tasked with conducting a usability follow of our search. In that location's a pretty awesome detective story I wrote about it, so this time I'll be brief.

My goal was to test 3 diametric search modes:

What's a UI in this story? It's 2 buttons switching between search modes and search results (icons).

So all I could essa with my participants was whether those buttons were clickable and if multitude could find them. Information technology took participants 2 transactions to do all that.

What's UX?

With that exact question, my survey suddenly went from a 2-minute chat to a 30-min loaded-scale interview.

The more I asked about hoi polloi's receive when they switched betwixt seek modes, the to a greater extent IT became apparent that:

UX is different for everyone.
UX cannot equal divided into antithetical parts.

Again, UX is different for anyone (if nothing other, please vindicatory remember this sentence I typewritten 100 times).

No matter how deliberately I followed my interview script, all 5 participants had completely different problems and ways of doing things.

For representative, a designer constitute the "But icons, no more schoolbook labels" mode more convenient, while a director found that schoolbook labels let her correct her own search parameters and find what she wanted more easily.

Uxor cannot represent isolated into incompatible parts.

I was asking people to search icons in different modes, and their experience heavily depended connected what search mode was their first one.

E.g., I asked people to search for a list icon.

And and then I asked them to point out whatsoever irrelevant icons in the results. Well, the number of irrelevant icons was importantly high if they first searched in "Icons & school tex labels" mode. With UX everything is interconnected.

Afterword

The net is overflowing with articles discussing the UI/UX difference. I didn't want to spam you with 1 more. Instead of terms and mortal-conjured definitions, I tried and true to show you a a couple of practical examples, thus that you could condole with yourself what UI is and what UX is and how close down, yet removed, they are in all case.

Well-nig the author:Andrew started at Icons8 as a usability specializer, conducting interviews and usability surveys. He desperately longed-for to share his findings with our professional community and started writing insightful and funny (sometimes some) stories for our blog.

Source: https://blog.icons8.com/articles/difference-between-ui-ux-a-practical-example/

Posted by: millercrummon.blogspot.com