July 27th, 2010 / Ross Johnson / 55 Comments

Ten Laws to Design By

As designers we have to be aware of the function of our work and design as much as we care about the aesthetics and visuals. There are a lot of terms for the design of how the site functions and works, from “usability design” to “user experience,” what remains constant is that if we want to become better designers we have to pair these two concepts together.

Using clear and effective design laws as guides we can use proven formulas for better design. These laws both assist in the usability / experience of our design as well as the aesthetic values. Furthermore being able to refer and cite these laws when presenting or discussing design you can further establish yourself as a expert with justified reasons for your design choices.

1. Hick’s Law

Hick’s law states that with every additional choice the time it will take for one to make a selection increases. This means that the more options a user has when using your website or web application the more difficult it will be to use. This law really speaks the importance of simplicity.

The classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers opted not to purchase jam at all rather than pick from such a large selection.

What this means for us designers is that we should minimize the amount of choices a user has to select from. Removing any unnecessary pages, links, buttons or selections will make your designs much more effective.

Read more about Hick’s Law.

2. The Pareto Principal, or the 80 / 20 Rule

The pareto principal stipulates that a high percentage of users will perform a low percentage of actions. Meaning that most of your users are going to go to a small percentage of pages. Or in terms of web applications that most of your users will perform a small percentage of tasks.

Using this principal we can identify what that small percentage of actions that most of the users are performing (using analytics, research, interviews, etc…) We can then put higher emphasis on those tasks and actions to make the site easier to use. Sometimes this can lead to the inclusion of a new navigation, or altering the homepage to make finding and accomplishing those tasks easier.

This can also lead to the pair down and removal of content and features from a website. If the users are not accessing or using the information, then you can improve the site by removing it. This ties into Hick’s Law and Occam’s Razor.

Read more about the Pareto Principal

3. The Rule of Thirds

The rule of thirds is a method of composing elements to be visually pleasing in addition to identifying ways that users eyes will scan across  the page. Photographers have been using this principal for years to create more visually interesting compositions.

The rule of thirds is used by breaking up a design into thirds both vertically and horizontally. This builds a grid of intersecting lines. The rule states that a viewer is more likely to be drawn to the intersection of those lines. Additionally it is a good rule of thumb to place elements along the lines and intersections as well as avoid placing anything in the dead center of the composition or have a horizon diving the composition in half.

Placing elements so that they take up 1/3rd or 2/rds of the space will be more visually pleasing to most viewers.

Read more about the Rule of Thirds.

4. Proximity

The law of proximity is often neglected, even by experienced designers. This law states that elements that are near each other will appear related. This sounds like a very simple and obvious law but it is so often overlooked.

What this means is that you must be very aware of how much space you are placing between elements with in your design. If you have a series of elements that are too close together, users will assume that this was done so on purpose and that those elements are related. This is often an issue with web applications, where buttons or controls are grouped together yet have unrelated functionality. The result is that users get confused when trying to use and understand the application.

For example a search button that is too close to a save and cancel will likely get the assumption that the search is related to saving or canceling. Some users may think that the search is for searching previous versions of your work or that it is specific search for help, etc…

Proximity should be used carefully as it is extremely powerful. One simple example of good proximity use would be placing headlines closer to the paragraphs they are related to them than the paragraphs previous. You can look at the headlines in this blog as an example.

5. Feedback

Feedback is a concept that industrial designers have mastered for decades. Feedback is giving a user clear indication that something has happened, is happening or could happen. This communication is essential in the design of many products, consider a coffee maker that didn’t have a light indicating it was on. You would probably be burning coffee constantly!

Since users interact with our sites and applications we need to be aware of providing adequate feedback. This means providing loading bars, hover states on all links, using the visited link property,  :focus states on form elements and :active states on links.

Sometimes designers will neglect to have hover states on links out of laziness. However it really does improve the usability and quality of your design.

6. Fitts’ Law

fittslawFitts’ Law can be described as “The time required to move to a target is a function of the target size and distance to the target.” We can apply this to web design by looking at the hit area of our objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on. Remember that while as web designers we may be extremely proficient at using the mouse and the web, there are a lot of users who still have trouble with these basic functions.

A common misuse of Fitts’ law is when a design is coded so that the text of a menu bar is clickable but the tabs themselves are not. Rather than just making the text clickable it would be a great idea to add padding to that link element to increase the clickable area. Sometimes this means turning the anchor into a block level element and wrapping details inside.

This can work in the opposite way as well, meaning items we want to be difficult to be clicked on (such as cancel buttons / links) should have a smaller clickable area. This is why you often see forms or actions that have large “save” buttons but text based “delete” or “cancel” links. WordPress uses this law extremely well.

Read more about Fitts’ Law.

7. The Golden Ratio

The golden ratio is often confused with the rule of thirds, but make no mistake they are different. The golden ratio looks at what proportions are naturally most visually appealing. This ratio has been used in design, architecture and engineering for hundreds of years. It even has been tied to what features we find most attractive in people (both facial features and body types).

The golden ratio can be described as a ratio with in the elements of a form, such as height to width, approximating 0.618.

When applied to rectangles you can continue to create smaller disections of the shape using the .618 ratio, which creates a natural spiral pattern. This can be seen in nature by examining sea shells.

This ratio has been used through out history, in everything from the craftsmanship of violins to the design of the Parthenon and Stonehendge.

It is unlikely that some of these items were created with the golden ratio in mind, rather the creators likely preferred the visual appeal of the design when using these ratios.

Ultimately the golden ratio is more likely to produce visually pleasing compositions.

Read more about the Golden Ratio

8. Occam’s Razor

Occam’s Razor put simply, states that “the simplest solution is almost always the best.” With the flexibility and power of the web and our design tools, it is easy to get carried away. The result is a very complicated site or design that may have a lot of functionality and information, but is difficult to use, build and maintain. Despite the fact that one might think the site can do more, it actually accomplishes less.

This is commonly an issue where companies feel the need to put everything they possibly could up on the website in the rare case that someone wants the information. What gets ignored is that the overwhelming majority of the users will access about 20% of the content on the site (see the 80/20 rule earlier).

Being ruthless about the value that a page or piece of content provides and removing anything that is unnecessary will make significantly stronger and more effective designs.

Additionally this rule speaks to the age old saying that “A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.” Design simplicity is elegant, sophisticated and much more effective than the complex decorative style that is so prevalent on the web these days.

Read more about Occams Razor.

9. Fibonacci Sequence

The Fibonacci Sequence is a series of numbers in which each number is the sum of the preceding two. For example if you started with 1 it would go like this:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc…

This is significant as it has been found in many classical creative works, is found commonly in nature and is often used in addition to the golden ratio. Patterns based on the sequence are intrinsically aesthetic and therefor should be used in the composition of our designs.

This sequence can be used to create visual patterns, create shapes, organic figures, build grids or dictate sizing and ratios. The Fibonacci sequence is considered to be one of the most influential patterns in both mathematics as well as design.

Read more about the Fibonacci Sequence

10. Mental Models

The Mental Model law states that it is significantly easier for users to understand and learn something new if they can model it off of something they already understand. This is why the concept of tabs works so well and why operating systems are modeled off of real world office situations (folders, files, desktop, etc…)

We can use this concept in making our designs easier to use as well as more effective visually. There are times where it would be effective to model our designs off of real world situations or objects. Consider designs that mimic desktops, papers or offices. Users can learn, understand and draw meaning from these types of designs because they can relate it to their understanding of the objects in real life.

Use the Laws, Design Better

Are there any laws or design principals that you use when crafting your designs? I would love to hear about them.

55 thoughts Ten Laws to Design By

  1. Pingback: Tweets that mention Ten Laws to Design By « Web Design Marketing Podcast & Blog -- Topsy.com

  2. Pingback: Design by the law. | webtoolkit4.me

  3. Some great laws that I think most skilled designers know inherently…but have never put to paper or defined. This makes it much easier as a tool to explain concepts to clients.

    I’d also like to add….”And remember, first and foremost…be sure to break all the rules. This is, after all, Design” ^_^

  4. Thanks for this post! I’ve been a big proponent of using the laws of Proximity, the Rule of Thirds, and mental Models but I didn’t even realize that I have some work that I’ve done which falls more along the lines of Fibonacci Sequence and the Golden Ratio without even knowing it.

  5. Thanks for posting this interesting article. The rule of thirds and hicks law are such well established concepts that it’s almost intuitive to follow them whilst creating a design. I had never heard of Occam’s Razor rule, but i definitely agree with it.

  6. All great comments and I agree, a lot of designers use these concepts with out thinking about it. It is important however to be aware of them consciously for at least two reasons… One so you can defend your design decisions, ie: “I removed these elements because Hicks Law states that it will make the interface easier to use.” and you can use them with intent. This might be actively thinking about “How do I group these elements so that they all look related?” or “How can I make the hit area of this link large enough where it is hard to miss.”

    Ross Johnson
  7. Interesting post, thanks.

    Maybe you should merge points 7 and 9 though, since it tends (literally) to be the same thing. 😉

  8. I always have Miller’s Law ni mind when designing, similar to Hick’s Law and he argues that the average human could hold 7±2 objects in working memory, so more than 7 tabs could overwhelm users in making a decision, also not a law but I enjoy using the KISS.

  9. @Danilux – Great point. Miller’s law is an great law to consider and keep in mind. I plan to write a post about it in the near future.

    @Fabien – Actually that is a awful awful misconception. I wrote a post about how they are VERY different, you should check it out!

    Ross Johnson
  10. Thanks for highlighting the most useful rules for design. We, designers, often use them intuitively not even realizing which law exactly it is! This page will definitely stay as my resource 🙂

  11. having read the title of the article I assumed it’d be something about typography, palettes, illustrations, i dunno… Well, it turned out to be much more insightful. Kudos to the author for the great advice.

  12. Oh and your comment form doesn’t have any explicit feedback.

  13. @Writingexpert – Prefer not to rehash the same boring stuff that has been blogged about a thousand times.

    Ross Johnson
  14. Awesome collection. All of these come naturally to me personally except number one: Hick’s Law. Even though I’m known for clean and minimalist designs, it’s hard for me on the larger, informational sites to simplify things when there is just so many topics to include in things like the navigation, side navigations, etc.

    It’s not something I have trouble with – just something I have to continually pay attention to. We’re all a work in progress!

  15. And that is a really important thing to know as well, where you tend to have design weaknesses. That way you can anticipate and be conscious of your tendencies and try and correct them.

    There are no perfect designers so we should all strive to identify them like you have and improve.

    Ross Johnson
  16. Great Article. Not too long. I have been using some rules but had no clue of the other. Mostly there are long articles written about each which makes its boring to read them but this article perfect.

  17. Glad you liked it Harish. Sometimes lengthy posts are more than what is needed, we wanted to introduce people to the idea and let them read more if they wanted too.

    Ross Johnson
  18. great article. I agree I like how its not too long, touches on lots of the great web design rules and a few that I did not know of. thanks again, going to share this.

  19. Great post. I was not aware with these laws before reading this. Thanks for sharing this with us.

  20. Great article, thanks for posting. Not too long, just right and on point! Learned some new stuff.

  21. Pingback: Stoff für das Wochenende #3 | daswebdesignblog.de :: Artikel, Tutorials, Freebies und Interviews

  22. Its very hard to find great articles like these explaining ‘why’ we should do something in the way we do rather that ‘what’, ‘how’ to do. A very nice article!

    Thanks. It helped me a lot.

  23. Very harsh law! Yet so helpful and effective in web designing!

  24. Great and complete article, very nice read, thanks!

  25. Great read… Had read it all before but here its is nicely put together, not that we HAVE to use all the laws all the time, depends on the project we are working on, but it still is a nice guideline though

  26. Golden ratio is really Fibonacci sequence, they should be in the same rule. Golden ratio is Fibonacci sequence convergence at infinity.

    1, 1, 2, 3, 5, 8, 13, 21, 34, 55

    21/34 = 0.61765,
    34/55 = 0.61818

    further you go, closer to Golden ratio you are. In practice is 5/8 (0.625) good enough value for Golden ratio.

  27. really simple explanations, straight to the point yet detailed. Thank you

  28. What a great yet simple collection of rules that will help in web designing. Thanks!

  29. Pingback: Ten Laws to Design By

  30. Very nice blog,
    i use most of the inspire websites
    on my layouts…
    thanks 🙂

  31. Your graphic illustrating the golden ratio actually illustrates the fibonacci sequence.

  32. @Patrick & @Norbert – The Fibonacci sequence can be used to create a series of devisions and ratios that is very close to the Golden Ratio but there is a difference. It also can be used in ways other than just proportions and sizing, which the Goldren Ratio is used almost explicitly for.

    Ross Johnson
  33. A useful and well thought out article. More of the same please!

  34. Pingback: Random Little Tidbits #11 « i heart constance

  35. Pingback: How To Design Using The Fibonacci Sequence « Web Design Marketing Podcast & Blog

  36. Pingback: When A Thousand Words Is Worth A Picture - Smashing Magazine

  37. Pingback: When A Thousand Words Is Worth A Picture | 

  38. Excellent collection of rules applicable in all sorts of design fields.
    fresh in the game as I am, many of them were new to me. Thanks!

  39. Pingback: When A Thousand Words Is Worth A Picture | LionWebMedia.com

  40. Pingback: When A Thousand Words Is Worth A Picture | Internet technology trends

  41. Thanks for sharing these laws.I have never heard of these laws before. The only law i learnt is to keep the site and design user friendly.I never knew these laws ever exist.Thanks for sharing.

  42. This is an excellent article that all designers should read. And if you want the other 115 laws to follow pick up “Universal Principles of Design” on amazon – http://amzn.to/fCcQHx

  43. Pingback: Listed on FAQPAL.com

  44. Hi, ‘blowing the dust a bit to come back and ask where I can find this article you’re mentioning in this comment: http://www.3point7designs.com/blog/2010/07/ten-laws-to-design-by/comment-page-1/#comment-71676

    As far as I know, the golden ratio is based on Fibonacci sequence, one is geometry while the other one is algebra so I don’t quite get what you mean…

    Thanks for your insight or a link. 🙂

  45. I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to design my own blog and would like to find out where u got this from. thank you

  46. Designed it myself 🙂

    Ross Johnson
  47. Communicating your design can be tough, try some design nerd language: http://t.co/6xVFIPlv

  48. The first game-changing resource @mehraban covers is @3pointross’s Design and Strategy blog: http://t.co/rpecnFlQ #LA2M

  49. Link vd Dag – 10 design wetten om je werk te verbeteren (een oudje, maar nog steeds leuk):… http://t.co/MAIKHHtU

  50. Ten Laws to Design By « « Web Design Marketing Podcast & Blog http://t.co/Y4gZgxh3 (via Instapaper)

Comments are closed.