5 UI fundamentals we sometimes forget

Happy with your site’s conversion rates?

Would you be interested in squeezing a few more sales, sign-ups or article shares with not a great deal of work?

You probably would – and, the great news is, it’s likely you can do it with a couple of User Interface (UI) tweaks.

If you make people think about what they’re supposed to do to make your site work for them, they’re less likely to do it. It’s important to realise that this thinking could very well be subconscious level stuff – i.e. the site doesn’t look like they expect it to – so they abandon ship and look somewhere else, often with no discernible reason as to why.

Just like the fundamentals of driving a car or riding a bike are the same – the fundamentals of your website should be at least close to what people experience elsewhere. These 5 points provided to us by Think Zap are some of the essential UI architecture you should have in place…

Search box

You can probably skip over this point if you’ve got a one-page site – but for anyone with info or product heavy sites, a search box is an absolute must.

What’s more, it needs to be visible and sitting where it’s expected.

Without an obviously placed search box, your visitors will assume they can’t search – and often hightail it to a site that’s more obviously easier to use. If they persevere without a search, then you can expect them to become frustrated with the need to navigate between menu options when other sites offer more speedy solutions.

It’s also important that your search box is very obviously a search box as well. As we’ve previously mentioned, a lot of the interaction we do with websites in done subconsciously – so if a person is used to scanning the page for a white or light grey box that indicates a search can be carried out – their scan might not see your dark blue box with white text.

A search box that’s somewhere near the top of the page can also act like net for people who are about to leave the site too. If you’re about to navigate away using the search/address bar in your browser, a white search box is often worth one last shot. Obviously, you’re not going to keep everyone – but you might as well maximise your chance of drawing a person back in.

Obvious expandable content

Clean layouts are a big hit with mobile users – and since the majority of us now access the net from our mobile device, it’s worth understanding what people like to interact with.

Collapsing panels and menus offer a lot to a site that’s aiming for an uncluttered look – but they can massively detract from the overall usability of the site if they’re not clearly indicated.

Predictability when you’re using a site is very important. Although it’s not conscious, your customers are asking themselves “is this site working the way I expect it to?” all the time – and the more instances that question is answered with ‘no’ – the greater chance they have of looking elsewhere.

So, if you’re planning on neatening things up with some collapsible menus – make sure it’s abundantly clear that’s the action the user will experience. A triangle/arrow shape at the end of the menu selection is enough to indicate that a menu will drop or expand – and the arrow should be reversed to indicate that the content can be hidden again should the customer wish.

You may very well be nodding along with this tip as you read – but we can assure you, there are designers and companies out there that miss this more frequently than you’d expect…

An indication that your site is working

How often do you come across a site that gives no indication that the command you’ve just requested is taking place?

Here’s an example:

You’ve moving all your photos from one file in your cloud drive to another.

You drag them, drop them and… well, nothing. Are they moving or aren’t they? With no indication that the site is responding to your request you’re in the dark. Should you perform the function again? Or will that copy the pictures twice? Will you know that the function is taking place second time around?

When sites do get it right, a loading graphic will be used – so, a spinning circle, a rotating hourglass – and other such recognisable indicators. If you offer no indication on your site, you can expect extremely frustrated users repeatedly jabbing buttons… and in the long term opting for a different service.

Ecommerce where you expect it

There are few greater indications that a customer can buy something on your site than a basket icon with a number and total next to it appearing in the top right of your site.

Have you ever seen an ecommerce site without it?

Well, you probably have, but you probably weren’t aware that it was an ecommerce site – and if you were, it’s highly likely you didn’t buy anything.

Now sure, you could put it somewhere else – but the top right of your site is generally reserved for log-ins, registration and checking-out. Move these things to other areas and you stand a chance of disrupting the site user’s experience – risky, and likely to trigger the ‘I’m not sure what’s going on with this site’ response in the brain…

A familiar card details form

While we’re on the subject of ecommerce, you need to understand what an absolutely life and death task entering your card details into a site is perceived as. You do not want your customers getting errors thrown at them while they’re fastidiously punching those card details into your site.

If they do see errors, things get panicky.

Has this site taken my money? Will it take it twice? How will in contact them to find out?

Don’t run the risk of upsetting your customers and compromising trust when they’re about to count money into your hand. Use a form format that’s recognisable and virtually guaranteed to be error free – no ambiguity around date formats, spaces or addresses – just let people focus on giving you their money…

Leave a Reply

Your email address will not be published. Required fields are marked *