The Impact of User Interface Design on a Business Website

Two businesses sell the same thing at the same price. A customer finds both on their phone.

On the first site the phone number is in tiny grey text at the bottom of a long page, and tapping it does nothing because it is just text. On the second, a green Call button sits at the top of the screen and opens the dialler with one tap. The first business never learns it lost a customer. It simply did not get the call.

That is user interface design. Not decoration, not trends: the difference between a visitor who can do what they came to do and one who gives up. This article covers where it costs a business money, the few standards worth knowing, and how to measure it on your own site instead of taking anyone's word for it.

UI and UX, Plainly

Good UX is impossible with a bad interface. You can have the right offer, the right price and the right page, and still lose the customer at a button they could not find.

First Impressions Are Fast

In a 2006 study published in Behaviour and Information Technology, Lindgaard and colleagues showed people web pages for 50 milliseconds. The judgements of visual appeal people formed in that time closely matched the ones they made after looking for longer.

The practical point is not the exact number. It is that visitors decide whether a site looks credible before they have read a word, and that impression colours everything after it. A cluttered, dated or broken-looking interface makes people doubt the business behind it, fairly or not.

Where UI Costs a Business Money

1. The main action is hard to find

Every page should have one obvious next step: call, WhatsApp, get a quote, buy. When a page offers eight equal choices, or hides the important one at the bottom, people take none. On a phone, the main action should be reachable without hunting.

2. Contact details that cannot be tapped

A phone number written as plain text forces the visitor to memorise it and switch apps. A link starting tel: opens the dialler, and a wa.me link opens a WhatsApp chat with your number already filled in. Small detail, large difference.

3. Text people cannot comfortably read

Light grey text on white looks elegant in a design file and disappears on a phone in Nairobi sunshine. The web accessibility standard, WCAG, sets a minimum contrast ratio of 4.5 to 1 for normal text at level AA. Meet it, and keep body text large enough to read without zooming.

4. Buttons too small to tap

WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at level AA, with some exceptions. Treat that as the floor. The buttons that make you money should be comfortably bigger, with space around them, so a thumb hits the right one first time.

5. Forms that fight the visitor

• Ask only for what you need. Every extra field is a reason to stop.
• Keep labels visible above fields, not as grey text inside the box that disappears when typing starts.
• Use the right field type. A phone field marked as type="tel" brings up the number keypad on a phone.
• Explain errors clearly, next to the field that is wrong, without erasing what they already typed.

6. A page that jumps while loading

You go to tap a button, an image or banner loads above it, the page shifts, and you tap something else. Google measures this as Cumulative Layout Shift, and publishes 0.1 or less as good. It is an interface problem as much as a speed one, because it makes people tap the wrong thing.

7. A page that responds slowly to taps

When a menu takes a second to open after a tap, people tap again, and again. Google's Interaction to Next Paint measures this, with 200 milliseconds or less as good. Heavy scripts are the usual cause.

8. Inconsistency

If buttons look different on every page, or the same colour means "buy" on one page and "read more" on another, visitors have to relearn the site as they go. Consistent styles make a site feel reliable, and they are cheaper to build and maintain.

9. Ignoring people who use the site differently

Missing alt text on images, links that only work with a mouse, and no visible focus when navigating by keyboard shut some visitors out entirely. Accessibility is part of the interface, not an extra. Our guide to accessible web design covers it in more depth.

What Changes for a Kenyan Audience

• Design for the phone first. For most Kenyan business websites, the majority of visitors arrive on a phone. Check your own split in Google Analytics, then design for the device most of your visitors actually use.
• WhatsApp is often the real contact button. Many customers would rather send a message than fill in a form or call. Make WhatsApp one tap away on every page. On this site it floats in the corner of every page for exactly that reason.
• Data costs money. Heavy images, autoplay video and large sliders cost visitors on mobile data before they have seen your offer.
• Payment should look familiar. At checkout, show M-Pesa first and tell the customer exactly what happens next: "Check your phone and enter your M-Pesa PIN". Our payment gateway guide covers the rest.

How to Measure the Impact

Generic statistics about interface design rarely match a specific small business. Your own numbers will. Here is a simple way to get them.

One honest caution. A site with a few hundred visitors a month cannot run a reliable A/B test; the numbers are too small for the difference to mean much. At that size, watch recordings, fix the obvious problems, and judge the trend over months rather than weeks.

A 15-Minute UI Check

Open your website on your own phone, on mobile data, and go through this:

1. Within five seconds, is it obvious what the business does?
2. Can you call or WhatsApp in one tap from the first screen?
3. Is there one clear main action on the page?
4. Can you read the text in daylight without zooming?
5. Are the buttons easy to tap without hitting the wrong one?
6. Does the page stay still while it loads?
7. Does the menu open and close promptly?
8. Can you find prices, or at least a clear route to a quote?
9. Can you complete the contact form on the phone without frustration?
10. Does anything look broken, overlapped or cut off?

Then hand your phone to someone who has never seen the site and ask them to find your prices and contact you, without helping. Watch where they hesitate. That is your to-do list.

Fix or Redesign?

Most interface problems can be fixed without starting again: bigger buttons, tappable contact links, a shorter form, better contrast. A redesign makes sense when the problems are structural, the site is built on something hard to change, or it no longer represents the business. Our website redesign checklist helps decide.

If you are building new, every WPfoss site is mobile-first and handed over fully in your name, with no lock-in.

Timelines are working time from sign-off. Details are on the web design page.

Frequently Asked Questions

What is the difference between UI and UX?

User interface (UI) is what visitors see and touch: buttons, menus, forms, text and layout. User experience (UX) is the whole journey, including whether they found what they needed, how long it took and how they felt about it. UI is the surface of UX, and it is where most small business websites lose people.

Does website UI really affect sales?

It affects whether people can do what they came to do. A call button that is hard to find, a form that fails on a phone, or text too faint to read all stop a sale that was otherwise going to happen. The size of the effect varies by business, which is why it is worth measuring on your own site rather than trusting a generic statistic.

How big should buttons be on a mobile website?

WCAG 2.2 at level AA sets a minimum target size of 24 by 24 CSS pixels, with some exceptions. That is a floor, not a goal. The buttons that matter most, like Call, WhatsApp and Buy, should be clearly larger and well spaced from anything else tappable.

What text contrast should a website use?

WCAG sets a minimum contrast ratio of 4.5 to 1 between normal-sized text and its background at level AA. Light grey text on white, a common design choice, often fails it and is hard to read on a phone in daylight.

How do I measure whether a UI change worked?

Decide the action that matters, such as a call, a WhatsApp tap or a form submission, and track it as an event in Google Analytics. Change one thing at a time and compare equal periods. Session recording tools such as Microsoft Clarity show where people hesitate or give up.

How much does a website design cost with WPfoss?

A basic informational site is KES 20,000 to 30,000, a professional business site KES 50,000 to 120,000, and an e-commerce site with M-Pesa KES 50,000 to 200,000. Every build is mobile-first and handed over fully in your own name.