User Interface Design

Users don't want to go deep into a website to find an answer or product they are looking for. This is why you should keep your website interface dead simple.

For instance, don't add filler content on the mistaken assumption it makes your site more interesting. Visitors are at your site for one reason - to find what they came for. Anything that interferes with that is a problem.

Efficiency Is Key

Aim to keep your main navigation menus to 4-5 items at most. This breaks down major topics into manageable sections that let a user find the proper information without too much clicking. This also keeps them from making the ultimate click to get off the site.

In a word, we’re talking about efficiency. Forms should be short and to the point, skipping all the wordy extra information that you don’t really need to collect. Allow shoppers to use Apple pay or Google wallet instead of having to enter all of their information each time.

Here’s a big one. Make the checkout process as simple as humanly possible. This is the spot where any sort of confusion leads to lost sale more times than not. There are too many other choices online. People won’t waste time trying to figure a website out. They’ll just leave.

Did you know that you only have about 15 seconds to get your website to load up, capture the attention of your visitor, and get them to engage? And if your website takes a long time to load, expect the engagement rate WILL be low (maybe even nonexistent).

In truth, a website should be able to load in less than five seconds, though most actually take eight or more seconds. What is your site speed? If you don’t know, go to GTmetrix.com and discover the reality.

There are a lot of factors that determine how fast a website loads and some are easy to fix. Here are a few of the most common.

A word about the latest bells and whistles: While a super high-quality header image, endless products sliding past and other snazzy features are tempting, there is a price to be paid. These choices slow a website down because of file size. The more elements you include, the longer it takes for the site to appear to visitors.

Instead of being impressed with this kind of glitz, take a look at the websites of eCommerce titans like Amazon and eBay. In both cases, there are small logos, a site search bar front and centre, and very little real estate given to any sort of header.

Simplicity Rules the Day 🪶

The designers aren’t trying to impress anyone with the latest fad feature. The goal here is to help visitors quickly find what they came for.

Amazon is the most popular online retail destination, with eBay not far behind. Lesson learned.

Avoiding Plugin “Bloat”: Content Management Systems (CMS) sites like WordPress offer a special brand of evil that can kill your site speed. We’re talking about plugins, which are handy little programs you can add to your main theme to integrate particular features or functions.

This one-size-fits-all solution is inelegant in the sense that it requires extra code to make a plugin play well with a variety of themes and the core WordPress software. This is code bloat and the main reason you should choose plugins sparingly and uninstall any you aren’t using.

Outside Help ℹ️

One way to combat the sluggish nature of plugins is to choose a service provider specifically optimized for hosting WordPress sites, thus offering a handful of performance benefits exclusive to this particular CMS. Combine plugins with a below-average host and you’re asking for a V-E-R-Y slow site.

This applies even if you don’t use WordPress, as we’ll discuss in the next section.

How many plugins are too many? It’s hard to be specific. A small site might use one or two while a large site needs 20. The key is to not install more than are essential to the proper functioning of your website. Any that you’re not using, deactivate and uninstall them.

Before you install a plugin, screen it for quality with the following process:

• ✅ Make sure it has been recently updated.
• ✅ Look for at least 100,000 downloads and a four-star rating.
• ✅ Check to make sure the support link takes you to an active page or forum.

The bottom line, if a plugin fails any of these tests, strongly consider not installing it. There are around 50,000 plugins to choose from. There is another option in almost all cases.

Host Performance 📊

As mentioned above, the choice of web host has a MAJOR impact on site load speed.

The problem is that many of the “discount” or free plans are offered at the expense of too many clients crowded onto a server until its resources (bandwidth, storage, processors) are overwhelmed and all it can do is deliver slow performance or crash completely.

This is not to say that you have to sign up with an expensive host, but make sure you understand, and this is especially prevalent in shared hosting, how much in the way of resources you’ll get.

You can do everything right on your side of the equation to speed up your site, but if your host can’t handle the traffic flow, file requests, or bandwidth, you’re wasting your time.

Would you put out the closed sign at your brick and mortar store in the middle of a weekday? Of course not. Neither should you accept hosting that can’t keep you online over 99.9% of the time.

Be smart and choose the best web hosting provider for your small business, i.e. one which prioritizes uptime and customer service (not always the cheapest option).

Your interface should be consistent in tone, design and branding. If the user notes that your home button or search bar is in the same spot on every page, it creates a sense of familiarity. They feel comfortable that they can return to the beginning or launch a search for something in particular at any moment.

Steady and Reliable UI Design 🎭

Another way to keep the interface consistent is to use universal or predictable buttons. For instance, "follow us on social media" buttons should be the logo for that social media, so a visitor can make a quick decision on which platform they want to use.

Sounds simple, right? Too many designers manage to complicate things and end up with all sorts of stylistic clashes. For an awesome example of consistent and good user interface design, take a look at any of the best website builders like Wix.

These sites are so consistent it’s almost boring… yet they are beautiful in their simplicity.

The less a user has to type or navigate, the happier they will be. You might consider implementing cookies on your site.

These are tiny text files that store information either temporarily or permanently about a visitor so that you can remember their preferences, passwords, and even ordering history if you sell products.

Cookies also can be annoying and bring with them an inherent security risk.

This excellent article is a great example of everything related to cookies. After reading it, you will be in a better position to decide if it’s something you want to implement on your site.

Using cookies also allows for faster page loading times, which is important for customer retention.

As mentioned earlier, cart abandonment is a huge deal when it comes to online shopping. A full 28% of US shoppers leave the checkout process before completing it due to frustration with the process. Not many operations can afford to write off such a large chunk of potential revenue.

Determine the Cause 💡

If visitors leave without following through with a purchase or completing the call-to-action (CTA), you need to identify the source of the problem. Is it a logic breakdown in your presentation or sales process?

It’s obvious there is a disconnect between what you expect them to do and what they are doing and illogic is easy to introduce inadvertently.

Use beta testers (a significant other or friendly neighbour works fine) during and after website creation to ensure the interface is intuitive and instinctive.

The goal is to keep visitors moving ever forward towards the CTA and conversion. If your beta testers stop at any point and don’t finish the checkout process, any data gleaned from the tests is incomplete, and thereful not very useful.

It is important that the interface be designed in a way that appeals to the user. This can be accomplished through font choices, text content, and especially colours used for branding. If the layout and design of a website is engaging, expect a customer to return.

Relatability Can Be Achieved With Cookies 🍪

The other aspect of an interesting interface is the fact that can be personalized to the visitor. This goes back to the idea of using cookies to collect information on a visitor.

It sounds a bit invasive, and in the current climate of GDPR and privacy, maybe it is, but cookies can add to the sense of engagement a visitor feels when returning and is immediately offered a page of choices based on expressed prior interests or purchases.

Remember, the best ads are the ones that don’t feel like ads. Don’t underestimate the power of familiarity.

This one is often overlooked. Put your search bar where it is commonly found: the upper-right corner. Today, most professional logos are designed to fit alongside the top menu bar, accounting for dropdowns, social icons, and search functionality.

Take a look at Amazon to see this idea in action. All the header stuff is packaged neat and nice and occupies a minor amount of real estate.

Make sure your search bar is large enough to allow for mobile device users to type without trouble (this can be accomplished by having the search bar expand when it is clicked on. If you have both products and text content, consider having specific search bars for each page.

If your website design is responsive, the search bar should enlarge when touched on a mobile device. A responsive site is one that looks good and displays all content no matter what size of the screen it is viewed on. The code determines the device and adjusts the view accordingly.

How To Implement Features for Your Search Bar 🔍

Another feature to implement is to turn on the auto-filler for the search bar. Mobile users, especially, will be grateful at having to type less.

The coding required to accomplish this is - which can be found in this guide on w3 Schools - is straightforward, but not for beginners.

Don’t be afraid to call in a coder for the project! When I built my first site, I wasted hours trying to do everything myself. Search freelancer marketplaces like Fiverr and Upwork to find a freelancer at a reasonable price.

Search for “web programming” and you’ll find plenty of talented devs who can set up the search bar and other UI/UX features. Also note, nearly all popular WordPress themes and top website builders like Wix and Squarespace have these features by default, so don’t stress about the setup.

Consider using a search bar that suggests the most common or frequently searched terms on your site, which will lead to easier navigation. A search bar is very helpful for visitors, but don’t let it take the place of creating sensible navigation menus.

In a perfect world, the content could be easily located through navigation alone and the search bar would only be necessary for unusual cases.

Maybe we shouldn’t judge a book by its cover but almost everyone does. There is a portion of your website that is considered your cover because it’s “above the fold” to use a newspaper term. This area is the area on a web page users can see without having to scroll.

This above the fold area should be your focus to capture attention fast and hold onto it tightly. Take a look at the Jeff Bullas example, especially the “Double Your Traffic!” bit. That’s powerful stuff. Hit them with something equally convincing - a hook (content, an image, or even video), that keeps them on your website.

Remember that 15 seconds statistic? Don’t bury your best content below the fold. There’s a good chance a visitor will be long gone before they ever get to it.