UX, UI, and why confusing them costs you

Open the app you use to send money. Pretend you're about to send ₦500 to someone you've never paid before, and go as far as the last step without confirming. Count the taps. Notice every moment you paused, re-read something, or worried you'd picked the wrong account.

Every one of those moments was designed. Somebody decided what you would see, in what order, and with what words. When it went smoothly, you didn't notice the design at all. When it didn't, you probably blamed yourself.

That is the job you are learning. This lesson untangles the two words the whole field is named after, UX and UI, because people who mix them up spend weeks fixing the wrong thing.

Words in this lesson

UX is bigger than the screen

Nielsen Norman Group, one of the most respected research firms in this field, defines user experience like this:

"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.

And they name the first requirement for a great one: to "meet the exact needs of the customer, without fuss or bother."

Read that again and notice how much of it is not a screen. For a food delivery business, the user experience includes:

• the app, yes
• the SMS that says your order is on the way
• whether the rider calls when he can't find your street
• what happens when the food arrives cold and you ask for a refund

Nielsen Norman Group give an example: a film review website with a perfect interface still gives a poor experience if its database has no independent films. The screens are fine; the person still can't get what they came for.

A Nigerian version: a food app with beautiful screens, where most restaurants show "Closed" at lunchtime. Nothing about the interface is wrong. The experience is.

UI is the part you can see and touch

The UI is the layout, the text, the buttons, the icons, the colours and the spacing. Nielsen Norman Group call it "an extremely important part of the design", but part of it: the total user experience is broader.

Usability sits inside the UI. They describe it as "a quality attribute of the UI": how easy the interface is to learn and use.

A simple way to hold all three in your head:

• UX asks: can people get what they came for?
• UI asks: can they see how, and do they trust it?
• Usability asks: how easy is that interface to use?

They fail in different ways

This table is the most useful thing in the lesson. When something goes wrong, it tells you where to look.

A worked example: fixing the wrong thing

Here is an invented but very typical case.

An online pharmacy in Lagos notices that four in ten customers leave checkout at the delivery address step.

Team A decides the page "looks old". They spend two weeks on a new colour scheme, a new font and rounded buttons. The page looks lovely. Customers still leave at exactly the same step.

Team B asks five real customers to place an order while they watch. Within an hour they see the problem: the form insists on a postcode, and most of those customers had no idea what theirs was. It also has no space for the landmark directions riders actually use: "the yellow gate opposite the mosque".

Team B makes the postcode optional and adds a field called "Directions for the rider". The page looks exactly the same as before. More customers finish.

Team A treated a UX problem as a UI problem. The lesson is simple, and you will use it for the rest of your career:

Before you change how something looks, find out where people stop and why.

You need both

Neither one rescues the other.

• Good UX, poor UI: the steps make sense, but the screens look careless. People hesitate before typing their card details, because nothing about the page says it can be trusted.
• Good UI, poor UX: the screens look premium, but the flow asks for things people don't have. They admire it, and then they leave.

Trust matters especially where money is involved. People have heard of scams, and they read the look of a screen as evidence of whether a business is real. That is a UI job with UX consequences.

What a designer actually produces

A beginner thinks a designer delivers pretty pictures of screens. A working designer hands over much more:

• Research findings: what people need, and where they struggle today
• Flows: the screens in order, including what happens when something goes wrong
• Components: a button defined once and reused, not redrawn forty times
• Specs: sizes, spacing and states a developer can build from without guessing
• Tested prototypes: clickable versions real people have tried

By the end of this course you will have produced every one of those for a real problem, and put it in a portfolio.

How to get the most out of this course

• Do every "Try it yourself". Reading about design teaches you words. Doing it teaches you design.
• Start a design journal today. Make a folder on your phone or laptop called design-journal. Every screenshot and note from these tasks goes in it. You will use them again in your final case study.
• Research comes before Figma. You'll open a design tool in Module 3, not now. Designers who learn the tool first can build anything and can't tell you what to build.

Common mistakes

The short version

• UX is whether people can get what they came for, across everything the business does, not only the screens.
• UI is what they see and touch. Usability is how easy that interface is to use.
• UX problems show up as people not finishing. UI problems show up as hesitation, mistakes and mistrust.
• Before changing how something looks, find out where and why people stop.
• On any screen, the most important action should also be the most visually obvious thing.

Try it yourself

1. Pick three apps or websites you used this week. Choose different kinds, such as a bank, a shopping app and a school or government portal.
2. Screenshot one important screen from each, and save them in your design-journal folder.
3. For each screenshot, write:
   • What is this screen for? One sentence.
   • What is the single most important action on it?
   • Is that action the most visually obvious thing on the screen? If not, what is?
   • One UX problem: something about the steps, or what it asks of you.
   • One UI problem: something about how it looks, reads or feels.
4. For each problem, decide: would changing only the look fix it? Write yes or no, and why.

You'll know you've got it when you can explain, for each problem you found, whether it is about what the product asks people to do or how it shows it to them.