UI vs UX: what is the difference, shown on a single checkout step

UI and UX are usually said in one breath, yet they describe two different jobs. UI is the surface you see and touch on the screen; UX is everything you go through while trying to get something done with that screen. Knowing the difference helps you understand what you are paying for in a design proposal, and on which side the problem with your own site lies.

What UI covers and what UX covers

UI, the user interface, is the visible layer of the screen. Colours, typefaces, spacing, icons, buttons and form fields belong here. How a button looks in its normal, pressed, disabled and loading states is also a UI decision. Its output is typically a set of Figma screens and a reusable component library.

UX, the user experience, starts before the screen exists. Who comes to the site and to do what, the order in which information is presented, how many steps a task takes, what happens when something goes wrong and what the buttons actually say are all UX decisions. Its outputs are flow diagrams, wireframes, clickable prototypes and findings from user tests.

In a healthy project the UX decisions are made first and the UI is built on top of them. When the order is reversed, you get screens that look good and are hard to use.

The short version: UX asks "can the user finish this task?" UI asks "while finishing it, do they understand what they are looking at and where to press?"

Two different jobs on the same checkout step

Think of the payment screen that follows the basket on a shopping site. This single screen raises two separate lists of questions.

Decisions on the UX side

• Can the customer continue without creating an account?
• How many fields have to be filled in? If the billing address is the same as the delivery address, is it asked for twice?
• Were the shipping fee and the total already visible before this step?
• When a card is declined, is the entered information kept, and is the user told what to do next?
• Are the steps in a sensible order: address first, then shipping, payment last?

Decisions on the UI side

• Is "complete order" the most prominent element on the screen, or does it carry the same weight as the "back to shop" link?
• Does the error message sit directly under the relevant field, explained in words and not by red colour alone?
• Are field names a faint hint that disappears once you start typing, or a label that stays visible?
• On a phone, are the buttons large enough to press comfortably, and is there enough contrast between text and background?

Each side can fail on its own. A carefully styled payment screen that asks for fifteen fields has good UI and weak UX. A screen cut down to three fields whose confirm button sits pale grey at the bottom of the page has good UX and weak UI. For the customer the result is the same: the order is not completed. This is why the two jobs have to run together in web design and e-commerce projects.

UI and UX side by side

Five-minute checks on your own site

Before calling in a specialist, try the short exercises below. Each takes five minutes at most.

1. The five-second test. Show your homepage for five seconds to someone who has never seen it, then close it. Can they say what you offer and what they should do first?
2. The one-handed phone test. Complete your most important task (an order, a quote form or a booking) from start to finish on a phone, with one hand. Every place where you have to zoom is a problem.
3. Make mistakes on purpose. Submit the form empty; type an incomplete email address. Does the message say which field is wrong and why, and does what you entered correctly stay in place?
4. Count the taps. How many taps does it take to get from the homepage to your most popular product, or to your phone number?
5. The empty result. Type a misspelt word into the site search. Does the "no results" page offer a way forward?
6. Consistency. Open three different pages side by side. Is the main button the same colour, the same shape and in a similar position on all of them?

The first five mostly tell you about UX, the last one about UI. One warning: you know your site by heart, so you will miss problems. Ask someone unfamiliar with the site to do the exercises and watch without helping; the places where they hesitate are your most valuable findings.

When a UX analysis is needed

Not every site needs a full analysis. For a brochure site of a few pages, a sound visual refresh is often enough. An analysis makes sense in these situations:

• Visits are there, but orders, form submissions or sign-ups stay low in comparison.
• The advertising budget grows and the results do not grow at the same rate.
• The GA4 funnel report shows a marked drop at one particular step.
• Customers keep asking the same questions: shipping cost, order status, return terms.
• A redesign or a mobile app is on the agenda. Rebuilding without knowing what works can break the part that does.

A UX analysis generally has four parts: a review of existing measurement data, an expert evaluation of the screens against usability principles, task-based tests with a few real users, and a list of findings ranked by impact. For the data to be trustworthy, the measurement setup has to be verified first; we cover that on our GTM integration and measurement page.

Where to start

Run the six checks above this week and write what you see in two columns: things that make the task harder to finish (UX), and problems of appearance and consistency (UI). If the list gathers mostly on the UI side, an interface refresh will do the job. If the UX column is full, the flow has to be fixed first; new colours will not supply a missing step.

Then open the steps of your most important task as a funnel in GA4 and see where the largest loss occurs. Together, these two findings make clear whom to approach and for what. You can look at what our UI/UX design and analysis service covers, and if you would like to go through your list together, reach us via our contact page.