7 unbreakable laws of user interface design

facebooktwittergoogle_plusredditpinterestlinkedinmail

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.

01-law-of-clarity

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.

02-law-of-preffered-action

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.

03-law-of-context

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.

04-law-of-guided-action

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.

05-law-of-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.

06-law-of-easing

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.

What are your biggest questions on user interface design?

facebooktwittergoogle_plusredditpinterestlinkedinmail

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. http://99designs.com/people/pvukovich

  • http://mrsunmilk.wordpress.com/ Hieu Bui

    Hi, I’m so interested in your post. It’s a greate UI design experiences. Can I translate your post into my language for my classmates ?

    • http://iconosquare.com/tedjerome tedjerome

      Hmmm. Perhaps he’s broken his own Rule 6 by not giving you feedback?

    • 99designs

      Hi Hieu,

      Sorry we missed this comment and we’re glad you like this post!

      You’re more than welcome to translate and post this for your classmates. Just be sure to cite us as the source and link to the original article.

      Thanks!

  • hypergenesb

    Nice piece Peter. In #7, you say “Both have similar number of fields” but what’s shown on the left has 5x the number of fields than that which is shown on the right. The law holds true for me, but the example seems off.

    • Mark Butler

      I think he’s referring to the other tabs (eg. we can see “contact details”), so the total number of fields is roughly similar.

  • http://nbsdigital.com.au Paul Brick

    Hi,

    Nice article. However I disagree with your assumption about what a new Twitter user would want to do in #2.

    “Do you think new users understand what they’re supposed to do? Obviously, they should start tweeting.”

    I would argue that a new user on Twitter would have the following priorities:
    1) find and follow other users,
    2) read what other people are Tweeting.
    3) Once they understand how it all works (and have maybe attracted a few followers of their own) they might start Tweeting.

    The current Twitter interface reflects the above in a right to left order – Who to follow, Tweet stream, Your profile/compose a tweet.

    No one joins Twitter and has an immediate following, so why would you want to tweet straight away if you just signed up and have no followers? Who would see your Tweet? A nice little reminder of this would be the zero (0) followers counter placed convieniently above the “Compose new Tweet…” field.

    I don’t think your example fits this law.

  • root

    Hi! This is really good information!

    I am making some book. If I can I want to quotation this

    May I do that? :D?

    • 99designs

      Of course! Just be sure to cite us as the original source :-)