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.

What are your biggest questions on user interface design?


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.

  • 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.


    • liam


  • 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.

      • gear2consulting

        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.

        Good work by Peter.

      • http://twitter.com/dland Dave Land

        In a well-thought-through version of #7, later tabs can consist entirely of optional fields that the user can come back and populate later, if they need the features enabled by those fields.

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


    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.

    • gear2consulting

      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.

  • 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 :-)

  • Daniel

    Hi, my name is Daniel and I run the business blog of InfinixSoft.
    I included this article within our new “User Interface Tips & Tricks Roundup 2”. You can read it here:

    Would you like to share it with your followers? Thanks!

  • jordan

    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.

    Which one is better? and how to convince someone with your opinion.

    SORRRY for making it long. would appreciate your opinion on this :)

    • CC

      Hey, sorry I might be late with this, and you probably figured this out, but for the sake of internet persistency, I will add to this.

      How do you know the user hasn’t actually entered something in the field? Stupid question, I know, but maybe he is using a tablet and the browser can’t display your site properly…anything can go wrong.

      Always give feedback to users when they press a button. No matter how trivial it may seem.

  • http://www.gianlucatursi.it M3mento

    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.

  • Tom Miller

    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.

    • Thiago Ghilardi

      I agree. I guess it could be called law of efficiency.

  • Jason Fonceca

    Oh. My. God. This is such a valuable list to share. Thank you for contributing to better experiences for us all :)

    • sdhahdhas

      thats all right

  • Ken

    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!

    • http://iconosquare.com/tedjerome tedjerome

      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

        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.


    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

  • Anteaus

    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.

  • ankur

    Nice list, Sure gonna keep in mind.We too have something to giveaway, we are doing 3 App Screen designs/Landing page for $100 in a turnaround time of 3 days go herehttp://bit.do/contactnow

  • Ahmet Sali

    Great article, good points.