7 unbreakable laws of user interface design

Are you a web designer? If yes, then you are also a user interface designer, and in the near future, this role will become even more important for you.

While web pages today have simple user interfaces with no more than navigation and contact forms, the rise of new technologies and standards will create a demand for more dynamic and customized experiences.

This, inevitably, means more user interface work. So let’s see what you need to remember.

1. Law of clarity

The user will avoid interface elements without a clear meaning.

Are you using Gmail? I am. Before the latest update, Gmail had a very clear text navigation on top of the page — Calendar, Drive, Sheets and other Google services were readily available at the click of a button.

Then Google decided to “simplify” and move everything behind an abstract icon. The result? Most people never noticed the icon and Gmail started to receive a flurry of support requests.

People avoid and often ignore things they cannot understand — that’s basic human nature. Avoid designing interface elements that make people wonder what they do, because no one will bother finding out.

2. Law of preferred action

The user will feel more comfortable when they understand what the preferred action is.

Look at the Twitter screen above. Do you think new users understand what they’re supposed to do?

Obviously, they should start tweeting. However, the “Compose new tweet” button in the top right corner isn’t very clear (see law of clarity) and the input box in the left sidebar pretty much blends with the environment. From a design standpoint, it seems like Twitter wants users to either search for something or use one of the options from the left hand navigation menu, as those interface elements are most prominent.

Users should never wonder what to do next — the preferred action should be obvious.

3. Law of context

The user expects to see interface controls close to the object he wants to control.

How do you edit your name on Facebook? You go to Settings in the top right corner, click Account settings, find Name, and click Edit. How do you do the same thing on LinkedIn? You click the pencil next to your name.

Users will always expect to see interface elements in the context of object they want to control. This corresponds with real-life: when you want to pop some corn, you go to microwave and flip the switch on the device.

It wouldn’t be very practical if your microwave instructed you to go down the stairs, open the basement, find the electricity box and pull the switch G-35 to start the popcorn program (which is similar to the Facebook’s name-change example).

Keep things handy for users — if something can be edited, changed or otherwise controlled, place those controls right next to it.

4. Law of defaults

The user will rarely change default settings.

Video: danielgill6 (via YouTube)

Are you familiar with the ringtone above? Of course you are — it was once the most popular ringtone on the planet. Why? It was the default ringtone and most people never changed it.

Defaults are powerful:

• Most people have a default background and ringtone on their phones.
• Most people (including you) never change factory settings on their TV sets.
• Most people will never change the default fridge temperature.

We don’t notice defaults, but they rule our world. So make sure all default values are as useful and practical as possible — it’s safe to assume some people will never change them.

5. Law of guided action

The user will probably do something if he is asked to do it.

There is a big difference between expecting users to do something on their own, and asking them specifically to do it.

For example, when LinkedIn introduced Endorsements feature, it did not expect users to figure out how to use it. Instead, they created highly visible call-to-action banners which appeared right above profile pages. This, combined with the fact that people like giving endorsements, made this feature a huge success.

The lesson: if you want users do to something, ask them without hesitation.

6. Law of feedback

The user will feel more confident if you provide clear and constant feedback.

This is simple logic — the more users feel your interface is communicating an action, the more confident they will feel.

Gmail is a great example of good feedback. You will get a clear notification for every action you take, including Learn more and Undo links. This makes people feel in control and makes them confident to use the product again.

7. Law of easing

The user will be more inclined to perform a complex action if it’s broken down into smaller steps.

Compare the form on the left to the one on the right. Both have similar number of fields, but the right is much easier to manage.

We all hate filling out long, complicated forms because they seem boring, overwhelming and hard to double-check. But if you split the form into several steps and show a progress bar, things become pretty manageable.

This is the law of easing — people will rather complete 10 small tasks than one giant task. Small tasks are not intimidating and give us a sense of accomplishment once we complete them.

Laws or guidelines?

There’s a reason I decided to use the word “law” in this article: I have never seen a case where breaking this law produced a more favorable result.

There is a punishment for breaking these laws, and it comes in the form of grumpy users who rant about your bad user interface.

Joking aside, user interface design is a sensitive and very responsible task. The laws above will help you do it better, and if you do decide to break them make sure you have a very good reason.