A more personal approach to your UI pays dividends

Rob Chettleburgh
By Rob Chettleburgh
9 Jul 2014

User Interface or UI is a term that originated in the earliest days of computing. It's a very functional, cold and impersonal term. And perhaps it's not that helpful to think of the vital link between your business and potential customers in such a clinical way. It's a bit like calling a sales assistant a customer interface operative.

Users, as we like to call them, are humans.  And we do a much better job of creating websites and eCommerce stores when we keep this at the forefront of our minds. Are we creating sites in the way we are because it's easier from a development point of view? Are we primarily driven by how things look? Or is our interface design driven by making things as easy and pleasurable as possible for our customers?

I'm not going to define what a perfect user interface looks like - I don't think that exists. But here are a few pet hates, some things I like, and a few things you might want to try out for yourself.

People don't like to be confused

Possibly the worst thing you can do when designing a user interface is to pre-empt all the different things that people might want to do on a web page and then try to accommodate them all. This often results in a confusing array of CTAs (Call To Actions) and links for your customers to navigate.

Understand where a visitor has landed on your website; define the marketing or selling function of the page they have landed on; then knowing where to direct them next should be straightforward. For people who choose to follow a different route there is always the main navigation menu.

For eCommerce sites, the most natural example of a flow from page to page would be something like this:

purchase_flow

Look at this example from property agents Portland Brown. The first thing you see when you land on the homepage is a prominent dialogue box so you can go straight to a property search. The overwhelming majority of visitors just want to look for an apartment so why make them hunt around for a search box? portland_screenshot

It's tempting to think that offering more choices equates to better service and a better user experience. Most likely people will just find it confusing as they bounce around between various links without ever really getting to a conclusion. 

A primary CTA is essential. You have to define what you expect your users to do and guide them accordingly. If your page fills more than a single screen then you need to repeat this CTA so that people aren't expected to scroll to find it. A good example of this is on an eCommerce site, you wouldn’t want visitors to be on your product page where they can’t see the price or add to basket options any more as they’ve scrolled too far would you?

Needless to say your CTAs should stand out. This doesn't always mean using garish colours. This example from Tavistock Bathrooms shows how visual contrast - in this case a black button on a white minimalist background with good, clear use of iconography makes for an effective CTA. 

tavistock_screenshot

It's possible to stand out while still looking subtle and classy!

Single column layouts are often the most effective ones for guiding people through a coherent selling or persuasion process.  If you have a sales process that takes people through a number of sequential steps and arguments you really want to keep them within the process and a single train of thought. A single column layout will support this.

Many standard web page templates have sidebars or multi column layouts. What these do is encourage your reader's eye to flit around the screen, which might not be what you want.

If your business is selling services rather than online retailing I would think seriously about using a single column layout to maintain the flow of your customers' journey and lead naturally to your clear call to action.

It's tempting to think that offering more choices equates to better service and a better user experience. Most likely people will just find it confusing as they bounce around between various links without ever really getting to a conclusion.

Also, be careful with big spaces. If the space occurs near a ‘fold' will somebody realise that they haven't got to the bottom of the page? If there's more content to see, people need some clues to know that it's there.

With such a wide range of devices being used to view websites you really have to be careful with this one. Make sure that your stunning design doesn't render into something that's just confusing.

People like consistency

You might have a logic for making some images or design elements clickable and some not.  But will that logic be obvious to a new visitor to your site and you going to be leaving visitors clicking over and over out of frustration where there are no links?

When I click on something on one page and something happens, I expect the same thing when I'm on a different page and click on something that looks similar. If it doesn't happen I might assume that your site or my browser has crashed. I might well get a bit irritated by this type of inconsistency, which is not going to put me in the mood to make a purchase.

You also don't really want people to waste time trying to decide whether or not something displayed on screen might be clickable. Have clear and distinct styles for clickable and non-clickable items so that people aren't distracted by trying out work out the visual clues. Using a distinct colour for clickable items, for example, is a good indicator.

button_styles

Consistency also comes into the visual hierarchy you use for information. You should have clear rules behind main and sub headings and any typographical techniques you use.

You can accentuate important information and influence where somebody's eye stops by varying factors such as font size, colour and indentation. Always aim for as shallow and simple a hierarchy as you can and always be consistent throughout the site.

You don't have to explain these rules to your visitors but they should instinctively know which parts of your content are the most important. When somebody visits your website they are subconsciously trying to resolve everything you present to them. They are trying to work out where they are supposed to be concentrating. The easier you make this for them the better.

A clear hierarchy makes it easy for people to navigate through your content and makes sure they pick up the most important messages. Without a hierarchy you have a dull slab of information that's hard for people to navigate.

Conversely, when you start throwing in an additional visual effect because you think it looks good, always remember that this is one more visual clue that your visitors have to interpret.top_right

Consistency also means using accepted conventions that people have become accustomed to. People expect to see search boxes and links to their shopping cart in the top right hand corner. They also expect to close items by clicking a cross in the top right of the window. Ignore these conventions at your peril - however avant-garde and radical your design.

People like to be helped

If you decide that something on the page needs to be clickable, then presumably it's important. So it makes sense to help people to find them and click on them easily. Large clickable items are more obvious and they prevent your customers from having to play target practice - particularly if they are using a mobile or tablet and have ‘fat fingers'.

This example from Fifty50 Art works well - it would be pretty hard to misinterpret what you're supposed to do here. 

Similarly, drop-down lists are not always the most helpful way of presenting multiple options. Think about simply displaying the options directly on screen. We implemented this for the filtering options on our blog and it works much better than the really long drop down list that we'd have otherwise. And have you seen long drop-down lists on an Android tablet? Often not pretty.

evosite_screenshot

The visual contrast provided by using a white background for the options is all that is needed to highlight the fact that these options were activated by clicking on ‘Filter options.'

People don't like clutter

Borders around various elements displayed on screen can help divide your content into logical sections and tidy up the interface. Sometimes though, they can just get in the way.

Prominent borders around content should only be there for a reason. They interrupt the way your customers' eyes flow over your content. Sometimes this may be what you want but often it won't be.

And you shouldn't assume that putting a border around something will highlight or accentuate it - sometimes it can have the opposite effect. People's attention may well flow around the obstruction. A/B split testing and eye tracking research can be really revealing here.

If you want to sum this up in 3 words I would give you simple, intuitive and consistent. Use these as your guiding principles and users (sorry, people) will be happy to use your site.