UX · UI

What exactly is the difference between UX and UI?

UI is about how your website looks, and UX is about how it works for the people using it. Take a booking button: its color, shape and text are UI, while whether it sits where customers look for it is UX.

The two aren't separate jobs. Usually UX comes first, mapping out how customers move through the site and in what order they see each screen, and then UI adds the colors and type on top. Do it the other way around and you easily end up with a website that's pretty but awkward to use.

When you review a design draft, separating the two makes feedback much easier. "I don't like the colors" is a UI comment; "The prices are hard to find" is a UX comment.

UX also covers what happens off the screen. The confirmation text after a booking and how quickly an inquiry gets answered are all part of what customers experience as "doing business with this shop."

How do you judge whether UX is good?

Good UX means customers can finish what they came to do "without having to think." The usability research firm Nielsen Norman Group has summed this up in 10 principles (usability heuristics), and many designers use them like a checklist.

Applied to a small-business website, a few of them matter most, listed below. It's not hard theory; it's almost the same common sense you use when serving customers in your shop.

You don't need to memorize every principle. When you look at a design draft, just keep asking one question: "Would a first-time customer know right away what to do on this screen?" That alone filters out most problems.

• Show people where they are: during a booking, show progress like "Step 1 of 2."
• Use your customers' words: write "Treatments · Prices" rather than "Our Services," using the words customers actually look for.
• Make it easy to undo: someone who taps the wrong date shouldn't have to start over from scratch.
• Keep the same things the same: button shapes and positions shouldn't change from page to page.
• Prevent mistakes up front: for example, make your days off impossible to select at all.
• Show only what's needed: instead of cramming everything onto the first screen, lead with what matters most.

How do I check the UX of my business website?

The surest way is to watch other people actually use it. You don't need any design expertise: follow the steps below and in 30 minutes you'll spot quite a few things to fix.

While testing, it's important not to explain or help. Your customers use your website on their own, with no one beside them to point the way.

You can check with numbers too. In your visitor stats, look at what share of people who reached the booking page actually finished booking, and you can get a sense of the step where customers drop off.

1. 01Pick two or three friends who don't know your business well. Different age groups are even better.
2. 02Hand them a phone and give them one task at a time, like "Book a slot for this Saturday afternoon" or "Find out whether there's parking."
3. 03Watch quietly and note where they hesitate, where they tap the wrong thing and where they hit the back button.
4. 04Afterwards, briefly ask, "What was confusing?"
5. 05If several people got stuck in the same place, fix that first.
6. 06After fixing it, give the same task to someone new to confirm it works.

Does UX need to be different for each type of business?

Yes. The "first thing customers want to do" when they land on your website differs by business type. The core of UX design is letting them get that done by the shortest path.

So even with the same design template, the menu order and the buttons on the first screen should be adjusted to your type of business. Copying a website from a different industry as-is may not fit your customers.

It also varies with your customers within the same industry. If many of your customers are older, larger text and a phone button up front may be right; if most are in their 20s, putting KakaoTalk and Instagram links up front may make more sense.

• Cafe: customers look for location, opening hours and menu photos first. It helps to have the map and a "Directions" button near the top.
• Hair salon: customers compare prices per service and stylists, then book. A flow that goes straight from the price list to booking is key.
• Craft studio: customers check class schedules and open spots, then sign up. The date-picking screen needs to be easy.
• Online store: customers compare products and add them to the cart. Search, categories and checkout should take as few steps as possible.

Does UX affect search visibility too?

Indirectly, yes. Google Search Central says it aims to reward pages that offer a good page experience (fast loading, easy viewing on phones, a secure connection and so on).

That said, Google explains that it will still show the content most relevant to the search first, even if its page experience is a bit lacking. In other words, page experience can make the difference when there are many similarly good pages, so filling your pages with the information customers are looking for comes first.

A more direct effect than search ranking is the number of inquiries and bookings. With the same number of visitors, good UX means more customers end up contacting you.

What are common UX and UI mistakes when working with a web agency?

The most common mistake is jumping straight to the design draft and deciding from that. If you skip the screen skeleton (wireframe), your eye goes to colors and photos, and it's easy to miss important issues like menu order and button placement.

Many people also check drafts only on a computer screen. Most of a shop's customers arrive on their phones, so be sure to open the drafts on a phone too.

It's best to give UI taste feedback with examples. Instead of "make it feel upscale," show a reference site, like "spacious with thin lettering, like this website," and you'll need fewer revisions.

UX keeps getting refined after launch, too. Questions customers often ask by phone are a sign that the information is hard to find on your website, so just move it somewhere more visible.

• Do they show you a screen skeleton (wireframe) before the design draft?
• Do they make a separate draft for phone screens?
• Can they explain how many taps it takes a customer to book or send an inquiry?
• Do they test the site on real phones before launch?
• Is there a way to make fixes based on customer reactions after launch (number of revisions, maintenance)?