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

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.

What are your biggest questions on user interface design?

The author

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. You can view his 99designs profile here.

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!

liam

Jan 15 2014

no

hypergenesb

Jan 15 2014

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.

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

gear2consulting

Jan 15 2014

Agreed, Mark. It’s so much easier to get someone to fill out a 5 page form with 10 fields on each page then a 50 field form any day. And you will notice that in the example, the colors being used are more soothing to the potential pain from all this work. There is clear delineation between the areas of the form, providing much more clarity and subsequently, confidence on the part of the user.

Even though things like required government forms and such could benefit from a more comfortable look – most of them are as austere as the offices they’ve been conceived in – they are not obligated to adopt a friendlier face, because you are obligated to complete them anyway. But the commercial world should take heed of all the principles shared in this article.

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.

Ok you make an interesting point about Peter’s assumption that a new tweeter would automatically need to begin by tweeting -to whom and what would be the point– instead they should see what Twitter has to offer: tweets from multiple sources. Thus, the feed is perfectly placed. I think Twitter wants you to begin by seeing what is on Twitter.

Maybe a better way to look at this would be to place half of a LinkedIn endorsement-style banner with the things I can do on twitter, immediately above the headline Tweets, containing something like buttons for Search, Follow, Tweet, Message, Media or something.

I have just reached to this article and i have been doing research in UI design and usability testing. This is a one very useful -short- piece that I really like. I am not sure if my question came late to you, but i have been arguing with a colleague about the idea of providing feedback to the users on every click a user clicks. For example, some actions are pretty clear to the users like lets say: “Apply” button to a “Coupon” text box. Like how we see when we shop online, at check out page, there is sometimes a coupon you can apply/use for a discount.

If the user clicks on “Apply” button without entering a coupon code, what do you expect the system to do? should it ask the user to enter a coupon code (warning message or so) or it should just do nothing as the user is not supposed to be confused why the “Apply” button is not responding, because he/she simply did not enter a code.

Great Article! But I disagree on the example of the law of context. In the case of Facebook ,does not make sense to put an action to change the name on facebook so easily , as it will be rare that an action to change the name on facebook and facebook even wants to encourage this.

A major one I think you missed: Minimize scrolls and clicks. I have seen two many sites which require unnecessary actions to complete tasks, such as forcing the user to scroll back through forty years of calendars to pick their birth date rather than allowing them to enter it in text format, or confirmation buttons for non-critical and easily correctable actions.

One of my criticisms (and I have many) of UIs is what I call rude UI – user interfaces that rip the focus away from what the user is doing owing to some system event and drop that user in a different context leaving it up to them to navigate back to the interrupted operation and finish what they were doing.

It should be up to the user when they are finished with a post or some other data input operation or other activity. More attention needs to be paid to ownership of the focus. The user should not be typing and suddenly find that the place they were entering data has disappeared or lost focus without the user having directly caused that to happen. EVER!

An example of this that drives me nuts is in Facebook, when you come across a post that deserves to be reported for hate speech or some other serious transgression. When you choose to “report” the post, the end result is that you land on a completely different FB webpage devoted to security functions, and there is NO WAY BACK to your place in the blog queue!

Mike Bradley

Jan 15 2014

No Way Back is the motto of Comcast’s designers, especially in the On Demand pages. I think it must be etched into their contact lenses.

ETERNAL GOD

Jan 15 2014

very informative article i was doing research on a school issignment then came upon this , i couldnt stop reading.
I’ve never been this eager to learn in a long time
keep up the good work

Most of it is good advice but I don’t agree with ‘Law of easing’ -The most aggravating thing on the Web is ‘wizarded’ forms which ask questions in a sequence where you can never know what the complete set of questions is.

Typically you get to the last-but-one question and find you can’t answer it without doing research. So, all that you’ve done to that point is wasted. After doing your research you go through the whole damn process again from question one.. only to find you can’t answer the last question without research. At this point you smash your keyboard.

My schoolteacher said, “Always *R_E_A_D* the examination paper in its entirely before starting to answer questions.” A piece of wisdom which Web form coders ought to take note of, before they create interfaces which make that impossible.

Grdeat article! If I may add: A better interface design also requires an unbiased feedback process on the design. We use two different services for getting feedback on UI DESIGN we create. One is notableapp which is great for collaboration and gathering feedback from different team members, another one is FeedbackGuru.com, which provides feedback on actual UI DESIGN. We have been using these two for long and they both are highly recommended.

Whatever you create, must be verified by a someone not directly involved in the design process. Keep designing, keep verifying your design (especially in the early stages of the design)- it helps!

Great article! If I may add: A better interface design also requires an unbiased feedback process on the design. We use two different services for getting feedback on UI DESIGN we create. One is notableapp which is great for collaboration and gathering feedback from different team members, another one is FeedbackGuru, which provides feedback on actual UI DESIGN. We have been using these two for long and they both are highly recommended.

Whatever you create, must be verified by a someone not directly involved in the design process. Keep designing, keep verifying your design (especially in the early stages of the design)- it helps!

Great laws are defined in article. Loved the example of Nokia is time smart phones it refreshed the memory of my old phone and imagining its user interface. Actually i was comparing the user interface between two phones. How it changed user experience within few years.

I fully agree on what you have said in this article especially the number 1st law the law of Clarity it is true “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” one must be aware of this especially to the newbies.. thanks!

I think your first law strikes an important nerve. People want to do what is appropriate for their goals (be it job or fun). Put things that are important on top where they are easily seen.
An example: a program (public: small enterprises, personal businesses) to create invoices starts with the menu options customer, products, VAT codes… and somewhere in the middle you find ‘invoices’. People don’t want to make customers, products… they want to make invoices. The latter is what matters. The viewpoint of the database is irrelvant, there are many ways to accomplish what’s needed there.

Good work! It clarifies me a lot of the process.
As a Graphic Designer, sometimes working to UX and UI is a difficult process, since we are used to think about our final product as a non-interactive entity and we tend to think about the interaction in our own particular terms (“how will I interact with this?” is not the same for all other users…)