Skip to content
Get in touch

UX and UI: what they are and how they differ

| Article: 9 min read | Usability, Catalog UX

UX (user experience) covers all aspects of a person's interaction with a company, its services and its products. UI (user interface) is the part a person directly interacts with on the screen: buttons, menus, forms, fonts, colors, the placement of elements. UI is an important but narrower part of UX.

In plain words

Imagine an online shoe store.

  • UI is how the product page looks and behaves: the photo, the "Buy" button, the size selector, the price block.
  • UX is the whole journey: how the person found the store, whether they worked out which size fits, how much Nova Poshta delivery costs, whether the parcel arrived on time, how the return went, what support replied on Viber.

You can have flawless UI and poor UX. Don Norman and Jakob Nielsen give an example: a movie review site can have a perfect search, but if the database holds only films from big studios and the person is looking for independent cinema, the experience is a failure (NN/g). The store equivalent is a convenient catalog that doesn't have the right size, or a beautiful checkout after which the order takes a week to arrive.

What UX is: the Norman and Nielsen definition

The term "user experience" was coined by Don Norman (IxDF). In a Nielsen Norman Group article, Norman and Nielsen describe UX as everything about the end user's interaction with the company, its services and its products. Their requirements for good UX (NN/g):

  1. Meet the exact needs of the customer, without fuss or bother.
  2. Simplicity and elegance that make owning and using the product a joy.
  3. More than giving people what they say they want, or ticking off a list of features.
  4. Seamless work of several disciplines: engineering, marketing, graphic and industrial design, interface design.

The ISO 9241-210 standard defines UX as a person's perceptions and responses resulting from the use and/or anticipated use of a product, system or service (quoted via IxDF).

What UI is

The Interaction Design Foundation defines UI design as work on the visual style and layout of the interfaces of programs or devices, so that people find them easy and pleasant to use (IxDF, UI Design). Interfaces can be:

  • graphical (GUI): screens of sites and apps;
  • voice (VUI): Siri, Alexa;
  • gesture-based: for example in VR.

For an online store, UI is almost always a graphical interface: the catalog grid, filters, product page, cart, checkout form.

The difference between UX and UI


UX

UI

What it covers

The whole experience of interacting with the company and product

What the person sees and touches on the screen

Main question

Does the product solve the person's problem, and is the whole journey pleasant?

Is a specific screen clear, convenient and attractive?

Example in a store

Will the person find their size, understand the delivery and return terms

How the size selector, the "Buy" button and the address form look

Output of the work

Research, scenarios, journey maps, prototypes

Mockups, UI kit, design system, element states

IxDF compares UX to a car and UI to its control panel (IxDF). There is also usability in between: NN/g describes it as a quality attribute of an interface, whether it is easy to learn to use, efficient and pleasant (NN/g).

How different sources see it

  • NN/g (Norman and Nielsen) understand UX as broadly as possible: it is not just the site but the whole interaction with the company, service, delivery, support. UI and usability are parts of UX.
  • ISO 9241-210 focuses on the person's perception, including anticipated use: the experience begins before the first click, with expectations.
  • IxDF treats UX design as the process of creating products with a meaningful experience, and views UX and UI as separate overlapping disciplines. Usability and UI design are subsets of UX (IxDF).

On the job market, "UX/UI designer" often means one person who does both research and mockups. That is a question of how roles are split in a team, not of definitions: the disciplines themselves differ.

Who is a UX designer and a UI designer

A UX designer, per IxDF (source): - conducts user research and creates personas; - makes wireframes and interactive prototypes; - tests solutions with users; - advocates for the user in front of the business and development.

A UI designer, per IxDF (source): - designs the layout, visuals and interactive elements of sites and apps; - makes the interface intuitive, clear and attractive; - creates wireframes, mockups, prototypes; - usually doesn't have to code, but knowing HTML/CSS/JavaScript helps in talking to developers.

A UX/UI designer is a person who combines both roles. In small teams this is most common: IxDF notes that in small teams a UX designer may also do the visual elements, while in large companies the roles are split into researchers, interface designers and UX writers.

The UX/UI design process

There is no single standard process, but most teams follow a variant of five-step design thinking (IxDF):

  1. Empathize: user research, interviews, observation, analytics.
  2. Define: analyze the data, state the problem. A customer journey map is often built here.
  3. Ideate: brainstorm solutions.
  4. Prototype: from paper sketches to clickable prototypes; UI joins in at this stage.
  5. Test: with real users (usability tests) and heuristic evaluation.

The process is iterative: test results send the team back to earlier steps.

Examples from an online store

UX problem: the person is afraid of choosing the wrong size. The UX solution is a size chart on the product page, "runs small / runs large" reviews, clear exchange terms. The UI solution is where and how to show the chart (a modal, a tab) and how the hint next to the size selector looks.

UX problem: shoppers abandon the cart because of unexpected costs. According to Baymard (update of 22 September 2025), 40% of shoppers who abandoned checkout left because of extra costs that were too high (shipping, taxes, fees), and another 12% because they couldn't see the total cost up front (Baymard). There is no Ukrainian data on the reasons for abandoned checkout. The UX solution is to show the Nova Poshta delivery cost or the free shipping threshold already on the product page. The UI solution is exactly how to present that line so it is noticed and not confused with the price.

UX problem: a long checkout form. According to Baymard's 2024 analysis, a checkout has on average 11.3 fields (11.8 in 2021, 12.7 in 2019), although most sites need only 8 (Baymard, June 2024). There is no newer measurement. UX decides which fields to remove (for example, not requiring registration, merging first and last name). UI decides how the fields look, how errors are highlighted, and which keyboard opens on a smartphone for the phone field.

What changed in 2026

  • Interfaces are no longer read only by people. In April 2026 NN/g writes that AI agents already make purchases on a user's behalf: they navigate sites, fill in forms, compare options and place orders, though "crudely, often unreliably". Hence the advice: label buttons with text, not just an icon, build markup by meaning (where the price is, where the options are), and keep the cart and checkout predictable. This coincides with accessibility for people using screen readers (NN/g, 2026).
  • A beautiful screen no longer sets you apart. According to NN/g (January 2026), visual interface work is getting cheaper through standardization, so the advantage comes from depth: how the whole system works, the content and functions, not only the screen (NN/g, State of UX 2026).

Common mistakes

  • Treating UX as "pretty pictures". A beautiful screen without research often solves the wrong problem.
  • Starting with UI. If it isn't clear what the shopper needs, the mockups will have to be redone.
  • Limiting UX to the site. Delivery, a manager's call, an SMS about shipment are part of the experience too.
  • Not testing with people. The opinion of the team and the owner is no substitute for watching shoppers.
  • Ignoring the audience's habits. Shoppers are used to the patterns of big marketplaces like Rozetka and Prom; unexpected solutions in basic things (cart, filters) increase the load on the user.

FAQ

What is UX/UI in plain words? UX is a person's whole experience with your product and company. UI is the interface through which the person interacts with the product: screens, buttons, forms.

UI and UX: what is the difference? UX answers "does the product solve the problem and is the whole journey pleasant", UI answers "is a specific screen clear and convenient". UI is part of UX.

What does a UX/UI designer do? Researches users, designs scenarios and prototypes (UX), draws mockups and interface elements (UI) and checks solutions with people.

Which UX/UI basics should a store owner know? The NN/g definition of UX, the principles of usability, Nielsen's 10 heuristics and Baymard's basic research on the cart and checkout.

Sources

Want to check this on your store?

UX/UI design

Convenient, recognizable interfaces that increase customer satisfaction and sales.

About the service →

Share

Related

  • Usability

    | Article: 9 min read

    Usability is how easy and convenient it is for people to use a site, an app or any interface to reach their goal. The ISO 9241-11 standard defines usability as the extent to which a product can be used by specified users to achieve specified goals with…

  • What is a website usability audit and why an online store needs one

    | Article: 5 min read

    A complete guide to usability audits for online stores: how it differs from UX, the methods, what gets checked from search to checkout, how it works and how to start on your own.

  • Heuristic evaluation (expert review)

    | Article: 3 min read

    Heuristic evaluation is a method of finding problems in an interface, where several experts independently assess a site or app against a set of principles (heuristics), most often the 10 Nielsen heuristics. It is also called an expert usability review.

  • 10 Usability Heuristics of Jacob Nielsen for E-commerce: How to Increase Conversion

    | Article: 6 min read

    Jakob Nielsen’s Heuristics are 10 usability principles that help create user-friendly, intuitive, and effective interfaces