UI and UX: what is the difference, and why do both matter?

Understand the difference through a simple example: someone trying to request a quote.

UI & UX design
3 min read
By BuoWeb
Person typing on a laptop computer

UI means user interface: the visible controls and presentation of a website. UX means user experience: the broader experience of trying to accomplish something with it. They overlap, but they answer different questions. Thinking about both helps you give more useful design feedback.

Follow one real task

Imagine someone visiting a building company’s website to request a renovation quote. They need to understand the work offered, see whether their project fits, find the enquiry form, and know what information to send. That whole route is part of the experience.

The interface includes the navigation labels, type, colours, form fields, buttons, and feedback messages along that route. A well-presented form can still create a poor experience if it asks for information the visitor cannot reasonably know yet.

Judge the interface by what it helps people do

Good interface feedback is specific. Instead of “make the button pop,” ask whether the main action is distinguishable from secondary links. Instead of “the text feels small,” identify which text is difficult to read and on which screen.

Consistent controls help people predict what will happen. A link should behave like a link. A button that opens a panel should make the result understandable. Visual consistency earns its place when it reduces the amount a visitor has to learn.

Judge the experience across the whole journey

Look for missing information and unnecessary work. Can the visitor find the services without opening several menus? Does the form explain which fields are optional? If a submission fails, does the message help them correct it?

A smooth route does not mean removing every detail. Someone choosing a complex service may need substantial information before making contact. The aim is to provide the right information at the right point, rather than making the page as short as possible.

Use both perspectives in a review

Review a design first as a sequence of tasks, then as a collection of screens. Ask a person unfamiliar with the business to attempt a realistic task while explaining what they expect. Observe where they hesitate before suggesting a visual fix.

Write feedback as an observation, its effect, and a proposed improvement. For example: “The two quote links have different labels, so I was unsure whether they opened different forms. Can we use the same label for the same action?”

UI and UX review checklist

  • Pick a real visitor task
  • Review the complete route, not one screenshot
  • Use consistent names for the same action
  • Watch unfamiliar users attempt the task
  • Describe the problem before prescribing a visual fix

Apply both perspectives to your own pages with our mobile website design checklist. For help improving the complete visitor journey, review our website redesign service.

Keep exploring.

More ideas for planning, designing, and caring for your website.