User Interface Design: 10 Principles Learned from Painful Mistakes

Paul Boag

When it comes to user interface design, often the best way to learn is to analyse the mistakes of sites you hate using.

I have a weird hobby; I collect examples of bad user interface design. Sites I go to that annoy the crap out of me. It is an idea I got from Vincent Flanders, whose site “Web Pages That Suck” was an inspiration to me in the early part of my career.

I find that the best way to learn what makes a good user interface design is to look at a bad design and then do the opposite! Maybe, not the most scientific of approaches, but it has worked for me and led me to create the ten principles that underpin my approach to user interface design. Ten principles I want to share with you in this post.

  1. Make it effortless
  2. Don’t make your problems the users issue
  3. Sweat the details
  4. Clarity over cleverness
  5. Be human
  6. Design for somebody, alienate nobody
  7. Respect conventions
  8. Don’t break the web
  9. Fail gracefully
  10. Put the user’s needs first

So, let’s dive in.

1. Make your user interface design effortless

Whether you want to encourage repeat traffic or increase conversion, one of the best things you can do is make the user interface as easy to use as possible. Users will take the path of least resistance, which means if you make the experience simple, they will choose you over the competition every time, even if you cost a little more.

Time and again, I see sites that seem determined to make life more challenging for users rather than easier. Take for example passwords. There is no reason they need to be so painful. Sites that insist of long passwords made up of letters, numbers or symbols, just make life irritating.

There is no need for this. There have long been other options, most notably sending users a verification link to their email address that they simply need to click to login.

Do the hard work to make the experience as effortless as possible for users.

Not that passwords are the only example of us forcing users to put in unnecessary effort. Unsubscribe links in emails are another great example. Unsubscribe should be a single click, yet often users are then required to enter the email address they are unsubscribing. In some cases, sites even require users to log in to unsubscribe, login details users often cannot remember.

2. Don’t make your problems the users issue

The next problem I see regularly are UI designers and web developers creating user interface designs that are more focused on solving their problems than those of the user. In fact, many designers and developers seem quite happy to shift their work onto the shoulders of the user.

For example, take the problem many sites have with brute force attacks and spam. The solution many web developers adopt is to add CAPTCHA to the site. That is a quick and easy fix for them but adds hassle and complexity to the user's experience. Why should a user have to prove they are human?

Formatting is another example of this problem. I come across many sites that require users to format telephone numbers and postcodes in a specific way. That is because reformatting information to put into the database takes time and effort. It is easier to make the user do it.

Asking users to enter data in a particular way may save the web developer time reformating it, but it leads to a bad user interface design.

3. Sweat the details of your user interface design

Part of the problem with user interface design is that it is easy to make something look ‘good enough’. But looking good enough does not equal a great user experience. When it comes to user interface design, the devil is in the detail. It is those little things that can make all of the difference.

Tiny annoyances in a user interface design are nothing by themselves, but they quickly build up to create a more frustrating experience. My old banking app is an excellent example of this. I moved from First Direct to Barclays only because I became fed up dealing with frustrating little elements of the experience that together felt like death by a thousand cuts.

When it comes to user interface design, the devil is in the detail.

4. Clarity over cleverness

One of my bugbears when it comes to user interface design is sites trying to be clever or cute. 404 error pages are the biggest example of this, and it drives me nuts!

Finding that a link you have clicked on isn’t working is a frustrating experience and yet this is the very moment the designer decides to be cute and make some dumb joke, frequently relating to Star Wars (“This is not the page you are looking for”). It’s infuriating. A 404 page should help the user find the content they are after, not make some joke.

Don’t allow your clever design and copy to hamper providing the user with useful information they can act upon.

But error pages are not the only example of this. Marketers like to be clever all of the time. They try and ‘engage’ with users using emotionally charged copy. But in the process of doing so, they often lose clarity. It becomes unclear exactly what it is they are selling!

Don’t misunderstand me. There is a place for engaging copy and design delights. They just need to be used sensitively and not hinder what it is the user wants to do or obscure what they need to know.

5. Be human

A fascinating thing happens when somebody sits to write some web copy or design a user interface; they cease to be human. They start designing things and writing things that no human would ever do in real life.

Take for example this copy I found on a University website:

As well as ensuring students make the most of the potential through their academic studies, the University also provides an environment which caters to all students by offering a range of accommodation, catering facilities, an active students union, sports and the arts.

No human being speaks like that, with the possible exception of the serial killer from Silence of the Lambs (“It rubs the lotion on its skin”). That could so easily be made much more friendly:

Student life is about more than just studying. We support you in everything you need: from accommodation and catering to an active students union, excellent sports facilities and an engaging arts programme.

Worst still is that user interface design is becoming increasingly manipulative. It is treating users like cattle to be led to the slaughter, rather than valuable customers who we should be nurturing.

User interface design is becoming increasingly manipulative

6. Design for somebody, alienate nobody

I am amazed at how bland and boring many websites look these days. It seems to me that many organisations look no further than their competition for inspiration. The result is that all the sites in a sector often end up looking the same.

But that isn’t the real issue. The heart of the problem is that organisations are trying to appeal to everybody. They are failing to prioritise their audiences, and so the result is insipid, mediocre design because they fear offending anybody.

Don’t get me wrong; it is important that your design does not alienate anybody. But if you try and appeal to everybody, you end up appealing to nobody. You have to pick an audience and design for them.

No wonder all user interface designs look the same. We are failing to define our audiences and look beyond the competition for inspiration.

7. Respect user interface design conventions

Although it is great that our designs are fresh and original, there is a balance to be struck. That doesn’t mean we should throw out all of the conventions that have emerged online. I often come across a site where the designer has been so desperate to be ‘original’ that the user interface design has turned into an incomprehensible mess that no user could realistically navigate.

To make your site stand out from the crowd it is not necessary to throw out conventions. Navigation doesn’t suddenly need to appear at the bottom of the page, and neither do we need to resurrect mystery meat navigation.

Instead, we should seek to ensure consistency across our sites, but also a sense of familiarity. In most cases, a user interface design should feel predictable.

As experience designers, we should be pushing the boundaries of creativity. But we also need to acknowledge that users have some expectations and we cannot ignore those conventions.

8. Don’t break the web

Every designer must respect the medium in which he or she is working, and user interface design is no exception. Many web designers seem to ignore this fact, creating sites that fight the inherent nature of the browser. I often encounter sites that:

  • Break the back button.
  • Fight the fluid aspect of the web.
  • Break the browser history.
  • Break the website address.
  • Decimate site accessibility.

Modern web apps are the worst culprits of this. Because these apps deliver content via Javascript, the page model breaks. That means that back buttons, browser history and the web address all stop working. It also creates serious accessibility problems.

You could argue this is nothing to do with interaction design, but the browser is part of the user interface, and so we need to consider it. Just because we are building a web app doesn’t mean we can ignore the fact that we are delivering the experience through a browser.

Be careful that in the process of creating a great interface you don’t end up breaking the browser.

9. Fail gracefully

Good user interface design needs to be able to adapt to the unexpected, and that means gracefully failing when things go wrong. Unfortunately, so many sites fail on this front.

Too many sites I encounter throw incomprehensible error messages, blame the user for the problem or fail to say anything at all.

But this is not just a technical or copywriting problem. I see experience designers place error messages in one location when the user’s attention is in another. That leaves the user wondering what has happened because they don’t spot the message telling them there is a problem.

Good user interface design needs to be able to adapt to the unexpected, and that means gracefully failing when things go wrong.

10. Put the user’s needs first

Finally, we come to may be the most important lesson of all that we can learn from bad user interface design, and that is to put the users needs first. Too many organisations are so fixated on their agenda that they fail to consider the user's needs.

Take for example newsletter signup forms. Rarely does a user go to a site wanting to signup to a newsletter. They have another goal in mind. However, often we leap on users as soon as they land on our sites asking them to complete our call to action. We interrupt their task to ask them to complete ours.

That is a mistake, both from the users perspective, but also from a business viewpoint. If we first help a user complete their task, we will find them much more open to going on to complete our call to action.

If we first help a user complete their task, we will find them much more open to going on to complete our call to action.

Tip of the iceberg

This list is very much the tip of the iceberg. Rarely a day goes by where I don’t see some dumb user interface design decision that makes my blood boil. I see so many organisations fixating on personalisation, VR, blockchain or whatever the latest trend is when they don’t even have the basics right yet.

Before we rush to embrace the new and shiny, let's give users the experience they deserve. If you don’t believe me, then take it from British comedian Michael McIntyre.

Get a website review

Boagworks

Boagworld