The Benefits of a Simple User Interface

Published: April 18 2012, by John

I sent a Tweet a few weeks ago after using Barclays new online banking UI.

For a while afterwards I was thinking about expanding on this into a blog post, but I couldn't think of a good way to properly demonstrate what I wanted to say. Then I found this TED talk by book cover designer Chip Kidd.

The talk itself isn't really relevant to this post - but his story about one of the first things he remembers being taught as a graphic design student, summarises what I wanted to say very nicely.

If you want to portray an apple to your reader, you can do two things. One: show them a picture of an apple. Or show them the word: 'apple'. But never both - this is patronising to your audience, you should credit them with some intelligence.

I would actually go a step further and say it's not just patronising, but actually confusing. If we see a picture of an apple, we get it. It's an apple. If we see the word 'apple', we get it. It means apple. It's not even a conscious process. The brain figures it out without much conscious thought and we move on.

If we see a picture of an apple, we make the unconscious connection to a real apple. But if the word 'apple' is written out below it, we do a double take. We see an apple. We read 'apple'. Either on their own would be no cause for using brain power, but the word apple used as a label beside a picture of an apple forces us to consciously process the message.

What we're seeing is so obvious, it feels confusing to be given an explanation. Our brain thinks - is that definitely an apple, not a banana? Process, process ... yeah it's an apple, lets move on.

OK. So I've laboured the apple point enough. Now I want to show how the same applies to designing web interfaces.

There's the widely touted rule that we should assume our users have very low intelligence levels. We have to keep sentences short, paragraphs short, the number of fields to complete as few as possible and the reading level to elementary.

But it's not so much about a lack of intelligence as a lack of inclination to bother reading much of what we've got written on the site.

Users want to see an apple, click on the apple and buy the apple.

They don't want to read ... "Our fruit is categorised into simple groups for your convenience. If you want to buy apples, look for the apple icon and click on it. Alternatively, select 'apple' from the drop down list next to the fruit section".

You might think the above instructions are an enhancement. Users who know they just have to click on the apple will do that. But anyone who isn't sure can read the instructions. There's no negative to having the instructions.

Actually there is. Users don't read instructions. Or rather they don't read them in detail. Or at the very least, they're aware there are some instructions - but feel they don't need to read them.

Your typical user (one who is at least intelligent enough to be earning enough money to buy some apples from you) should be able to come to the website and click the apple icon with absolute certainty that this is the way to buy apples.

Whether they read them or not - the very presence of the instructions is disconcerting. It leaves a nagging doubt in the users mind ... is this apple buying process more complex than I think it is?

Adding instructions to your form should not be a solution to a complex UI. Or let me rephrase that: adding instructions to your form IS NOT a solution to a complex UI.

There are forms where it is necessary to ask questions that might need some additional explanation. Firstly - ask yourself (or your client) if that question is really necessary. Businesses have all sorts of hoops they like customers to jump through to get their data. All too often, these complicated forms can be improved by businesses being more customer friendly and adapting their own processes to best suit the habits of their online users.

If it really is necessary - does it really have to be answered in a single field? 3 simple questions & answers is preferable to the 'don't make me think' user mentality than one complex field.

If it is necessary to have it as a single complex question - don't overly summarise the help text. Not all users will get stuck on the same questions - assuming you have a few fields in your form that need some instructions, don't add confusion to the form by having them all, always, visible. This is going to hinder as many users as it helps. Use CSS or Javascript to hide the instructions and make them available on request as tooltips.

The real inspiration for me to write this was logging in to my bank account. I've been using their online interface for years, and while it's never been a particularly inspiring experience, it's been fairly functional. Not the most user friendly, but not unacceptable considering the complexity and inherent difficulty of an online bank.

And there's some built in complexity to the login process. It's a pain, but for the security I'm fairly happy to go along with it.

1. I enter my surname and a 10 digit membership number.
2. This gets me to the second login screen where I enter the last 4 digits of my card.
3. Put my card into my personal security pad, enter my pin number
4. Then enter the 8 digit number the keypad returns into a field on the website.

Finally I'm into my account.

That in itself is a complicated process. Barclays obviously know this and when they updated their UI tried to address the issue by making it more user friendly.

Now I can enter my 10 digit membership number, or ... don't remember it? Enter your sort-code into this field ... or how about your account number in this field instead ... we're further helped to pick between these options by helpful instruction text.

It's a mess and adds confusion to the form. I ignore all the help text that I don't think I need to read every time I log in, but I'm never 100% confident I've not missed something that has been recently introduced or changed.

The first form fields should be: Surname / Member ID. If you're doing online banking you will have been issued a member id - so lets assume most users have them. We don't need to offer the other options yet.

Nice and discreet (like a forgotten password link) below the Member ID field they should offer a 'forgotten your id' link. The few users who have forgotten their id can then select this and have the option to login with other bits of account information.

Making something user friendly doesn't necessarily mean giving more options, or providing lots of 'helpful' instructions, or reducing a natural 6 step process into 3 because shorter is better.

You shouldn't build a form and then think how do I guide a user through this by bolting on instructions and adding either/or fields to cover the occasional odd exception.

You should build the form using every using every technical and visual trick you know to guide the user through in a way they can naturally focus their brain power on the questions that matter, without distractions or uncertainty.

It's all about flooooowwwww. You don't think twice about placing the address fields and the credit card detail fields together. Because once one piece of that data set is in the users mind, the rest of it flows in - making the sequence of form fields very intuitive and quick to complete.

That natural flow need to also follow visually. For all sorts of reasons, sometimes, a particular form field can get overlooked. Often when it is a different fieldtype to the ones above and below it. When you're designing the form it's easy to see the field. But in real world use, sometimes the layout of the form just tricks the eye into skipping over a field.

This example of a fairly short form from A Devon Life has some straightforward text inputs. But the final fieldset requires a short text introduction (there's an exception to very rule) and 2 file upload fields.

We spent an incredible amount of time getting the layout of this right. We really felt it did need to use the full page width, and it did need the containing box to visually group this set - but the full width horizontal line was inconsistent the previous design of the form and it stopped the eye dead. The flow if the form was suddenly lost and abandoning the form, or submitting without attaching the files was a lot more likely.

The arrows are appropriate to the tone of the site we're building here. The first one is for fun as much as anything - but the second serves a specific purpose of bringing the eye from the description area into this file upload section. It breaks the horizontal line and pulls the eye straight through to the short description.

Ultimately, the key is to look at each field in a web form and check that it is simple and easy to understand by your users. But then to look at the form as a whole and ensure each of your well crafted fields are presented in such a way that the user in naturally guided from one field to the next in a comfortable flow of vertical and horizontal rhythm.