UX vs UI: what they mean, how they differ, and how they affect conversions and SEO

UX (user experience) is how a person gets from a need to a result on your website or app: whether they find what they came for, understand it, and finish the task without friction. UI (user interface) is the layer they touch along the way: the buttons, typography, colours, spacing, form fields and states that make each screen usable. UX decides what a page must do and in what order; UI decides how each step looks and responds. A site can have a polished UI and still fail at UX if the journey is wrong, and a well-planned journey can still lose people if the interface is hard to read or slow to react.

What is the difference between UX and UI?

The quickest way to separate the two is to ask what question each one answers. UX answers "can this person complete the task, and how much effort does it take?" UI answers "is each screen clear, consistent and responsive while they do it?" UX is measured in task success, time on task, drop-off points and errors. UI is measured in readability, visual hierarchy, tap-target size, contrast and how the interface responds to input.

An illustrative example: an online shop sells air conditioners. A UX decision is that buyers must pick BTU size before they see price, because room size decides which unit fits. A UI decision is that the BTU selector is a row of large tappable chips with the room size written under each value, instead of a small dropdown. The UX decision fixes the order of the journey. The UI decision makes that step easy to use on a phone.

The two overlap constantly. Microcopy on a button, the wording of an error message and the placement of a delivery-cost note are all both UX and UI. That is why many teams treat "UX/UI" as one discipline in small projects and split it into two roles only when the product gets large.

What do a UX designer and a UI designer actually do?

The UX designer

A UX designer works on structure and behaviour before anything is styled. Typical outputs are:

• User research notes: interviews, support-ticket reviews, search-query analysis and analytics funnels that show where people leave.
• User flows: diagrams of each step from entry page to completed goal, including error paths such as "out of stock" or "payment failed".
• Information architecture: the menu structure, page hierarchy and naming, often tested with card sorting.
• Wireframes: low-fidelity layouts that show what content goes where, without colour or final imagery.
• Usability test plans and findings: which tasks to test, with whom, and what broke.

The UI designer

A UI designer turns wireframes into screens a developer can build. Typical outputs are a design system or style guide (colours, type scale, spacing units, icon set), component designs with every state (default, hover, focus, disabled, loading, error), high-fidelity mockups for mobile and desktop breakpoints, and interaction specs such as how a menu opens or how a form confirms a submission. Tools such as Figma are common for this work because components and their variants live in one shared file that developers can inspect.

On a small website project, one person often does both. What matters is that both sets of questions get answered, not that two job titles exist.

The UX design process: research, wireframe, prototype, usability test

The process is a loop, not a straight line. Each round should be cheaper than the one before because you catch problems while they are still sketches.

1. Research. Define the main tasks the site must support, for example "request a quote", "compare two packages" or "find branch opening hours". Pull the current funnel from analytics, read the site-search log, and read the last few months of customer-service questions. The goal is a short list of real tasks and the points where people currently fail.
2. Information architecture and user flows. Map how each task moves across pages. Decide what goes in the main navigation and what is one click deeper. Every extra step should earn its place.
3. Wireframes. Sketch each key page in greyscale. Decide the order of content blocks: headline, proof, offer, form. Keep it rough so nobody argues about colours yet.
4. Prototype. Link the wireframes or mockups into a clickable prototype so a tester can attempt a task end to end.
5. Usability test. Give five or so representative users a task, watch them without helping, and note where they hesitate, misread or give up. Small rounds with a handful of people surface the most serious problems quickly; repeat the round after fixes rather than running one large test.
6. UI design and build. Apply the design system, build, then check the live page with real devices and real network speeds.
7. Measure and iterate. After launch, compare completion rates and drop-off against the pre-launch baseline, then pick the next problem.

A common mistake is to jump straight to high-fidelity mockups. Stakeholders then review colours and photos, and nobody notices that the quote form sits three screens away from the pricing table.

What makes a good UI?

Good UI is mostly about removing doubt. The elements that do the most work are:

• Visual hierarchy. One primary action per screen, visibly stronger than secondary ones. If "Buy now" and "Add to wishlist" look identical, users pause.
• Readable type. Body text large enough to read on a phone without zooming, with comfortable line height. Thai script has tall vowel and tone marks above and below the line, so it needs more line height than Latin text to avoid marks colliding.
• Contrast. WCAG 2 sets a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text. Light grey text on white fails this more often than designers expect.
• Tap targets. Buttons and links big enough and far enough apart that a thumb hits the right one.
• Consistency. The same component looks and behaves the same everywhere. A design system enforces this.
• Feedback and states. Every action shows a result: a loading indicator, a success message, an inline error that says what to fix.
• Forms. Only ask for what you need, label fields above the input, use the right mobile keyboard for phone numbers and email, and never clear the form when validation fails.

How UX and UI affect conversion and SEO (Core Web Vitals and INP)

The effect on conversion

Conversion rate is the share of visitors who complete a goal. UX and UI act on it through friction. Every unclear label, extra field, surprise cost or slow response is a point where some visitors stop. Illustrative example: if 1,000 people reach a quote form and 30 submit, the rate is 3%. If a usability test shows that people abandon because the form asks for a company tax ID on step one, moving that field to a later stage is a UX fix that can be measured against the same baseline. The number is only illustrative; your own analytics sets the baseline.

The way to connect design to revenue is to instrument the funnel: track each step as an event, then watch which step loses the most people. That step is where design effort should go first.

The effect on SEO

Google uses page experience signals, including Core Web Vitals, as part of its ranking systems. They do not outrank relevance: a fast page with weak content will not beat a slower page that answers the query much better. But where competing pages are similar, experience can make a difference, and a slow or unstable page also loses visitors who did arrive from search. Core Web Vitals measure three things, assessed at the 75th percentile of real-user page loads:

• LCP (Largest Contentful Paint): how long until the largest visible element, often the hero image or headline, renders. Good is 2.5 seconds or less.
• INP (Interaction to Next Paint): how quickly the page visually responds after a tap, click or key press, measured across the visit. Good is 200 milliseconds or less. INP replaced First Input Delay as a Core Web Vital in March 2024.
• CLS (Cumulative Layout Shift): how much content jumps around while loading. Good is 0.1 or less.

These are UI and front-end decisions as much as server decisions. A huge uncompressed hero image hurts LCP. A carousel script, chat widget and several tracking tags competing for the main thread hurt INP, because the browser cannot respond to a tap while it is busy running JavaScript. Images and ad slots without reserved dimensions push text down and hurt CLS. Designers who know this choose lighter hero treatments, fewer third-party widgets and fixed image ratios from the start.

UX also affects SEO indirectly through structure. Clear information architecture produces logical internal linking and descriptive headings, which help both users and crawlers understand what each page is about.

A UX checklist for Thai websites

Thai users share most usability needs with everyone else, but some details are local and easy to miss:

• Mobile first, for real. Test on mid-range Android phones on a mobile connection, not only on a new laptop on office Wi-Fi.
• Thai typography. Pick a Thai web font that renders tone marks cleanly, give it more line height than English, and check that line breaks do not split words oddly, since Thai has no spaces between words.
• LINE as a contact route. Many Thai buyers prefer to ask a question in LINE before filling a form. A visible "Add LINE" or chat button next to the form is a UX decision, not decoration.
• Local payment and contact formats. Offer the payment options your buyers use, such as PromptPay QR for local transfers, and accept Thai phone numbers without forcing a country code.
• Bilingual switching. The language switch should keep the user on the equivalent page, not dump them on the homepage.
• Dates and prices. Decide whether to show Buddhist-era or Western years and use it consistently, and show prices with or without VAT clearly.
• Trust signals near the action. Company registration details, address and real contact options near the form or checkout reduce hesitation.

Common UX/UI mistakes and what to measure

The mistakes that come up again and again are designing for the desktop screen in the meeting room, adding sliders and animations that hurt INP without helping any task, hiding prices or key details behind a form, writing error messages like "invalid input" without saying what to change, and redesigning everything at once so nobody can tell which change moved the numbers.

What to measure after any UX/UI change: task completion or conversion rate per funnel step, form abandonment by field, rage clicks and dead clicks if your analytics tool records them, the Core Web Vitals report in Google Search Console for real-user field data, and site-search terms that return no results. Change one major thing at a time, or run a controlled test, so the result can be attributed.

The honest limit: good UX/UI cannot fix a product people do not want, a price that is out of market, or traffic that was never a fit. It removes friction for people who already have the intent.

What this means for businesses in Thailand

For most Thai businesses the practical order is: fix the mobile journey for the one or two tasks that make money, get Core Web Vitals into the "good" range on those templates, and only then invest in visual refinement. A redesign brief that starts with "make it look modern" tends to skip the research step; a brief that starts with "quote requests drop at step two on mobile" gives designers something to solve and something to measure.

Frequently asked questions (FAQ)

Is UX or UI more important?

Neither works without the other, but UX comes first in sequence because it decides what the page must do. A beautiful interface on the wrong journey still loses users, and a correct journey with an unreadable interface loses them too.

Does UX design need coding skills?

No, UX design does not require coding, but it helps to understand what is costly to build and how page speed works. UI designers benefit even more from knowing front-end constraints, because their choices directly affect LCP, INP and CLS.

Do Core Web Vitals directly affect Google rankings?

Yes, Core Web Vitals are part of Google's page experience signals used in ranking, but relevance and content quality carry more weight. Treat them as a tie-breaker and as a way to keep the visitors search already sends you.

How many users do I need for a usability test?

A small round of around five representative users usually reveals the most serious problems on a given task. It is better to run several small rounds with fixes in between than one large study at the end.

If your site gets traffic but people drop off before they enquire or buy, the fix usually starts with the journey, not the colours. Relevant Audience plans and builds sites around those journeys through web design and custom website development, designs campaign pages through landing page design, and improves store journeys through e-commerce customer experience optimization.