The 80/20 Rule Applied to Web Design

Having recently started reading a little more on design principles, I came across an interesting principle called the 80/20 Rule, also referred to as the Pareto Principle, Juran’s Principle, the Vital Few and Trivial Many Rule, and the Principle of Factor Sparsity.

This principle, which I’ll refer to in this piece simply as the 80/20 rule, when considered in the context of website and web app design can have a profound effect on the user experience, and ultimately on the effectiveness of the content or functionality of your website or web app.

In this post, I’ll first provide a basic definition, then I’ll consider some specific examples of how the 80/20 rule proves beneficial, and then I’ll summarize some lessons that can be gleaned from having knowledge of this rule.

 

What is the Rule?

The 80/20 rule was originally observed by Italian economist Vilfredo Pareto, and the actual principle was named the Pareto Principle by Joseph M. Juran.

Below are definitions from two different sources. First from the book Universal Principles of Design:

The 80/20 rule asserts that approximately 80 percent of the effects generated by any large system are caused by 20 percent of the variables in that system.


And next, from Wikipedia:

The Pareto principle… states that, for many events, roughly 80% of the effects come from 20% of the causes


So immediately you’ll notice that this is not always a principle that we as designers have direct control over, but rather it’s a principle that we observe as occurring almost naturally.

With knowledge of the existence of this principle, or pattern of occurrence, we are then equipped with valuable information to make decisions that will help improve the usability and effectiveness of our designs.

 

Never Mind the Hypothetical Nature of the Rule…

Yes, there are critics and those who feel the 80/20 rule is nothing more than a hypothesis or overly-general theory that doesn’t always apply.

But putting that aside, the concept itself is certainly of benefit to those working on user interfaces and functionality that requires examination and optimization — even if the rule is more like 70/30 or 90/10.

 

How Can We Apply it to the User Experience?

In any website, web app, or software environment, the 80/20 rule tells us that 20% of the functionality and features in any one environment will be responsible for 80% of the results, or actions taken within that environment.

In some cases, figuring out what constitutes the 20% that has such a large impact is easy. Web analytics stats, form submissions, and session cookies, can all be used to track user behavior. Analysis of those items will help us determine which areas of the UI are interacted with most.

On the other hand, smaller tasks that are not tracked using those methods may be harder to analyze. In this case, usability studies can be conducted where users are observed as they interact with your website’s UI.

 

Some Examples That Recognize the 80/20 Rule

Whether it’s intentional or not, there is plenty of evidence that UI and UX designers are considering the value of this principle.

Take for example a simple UI element like a drop-down list of countries presented in a registration form. Most site developers or content creators recognize that 80% of the time, certain countries will be selected.

So although it would seemingly be bad practice for such a long list to break the alphabetizing of the list, the 80/20 rule allows that convention to be broken by putting the most selected countries at the top, as shown in the screen-grab below from Fenn Wright Manson’s checkout page:

Fenn Wright Manson's most likely country options


In other cases, as when adding a new address to your address book on Amazon.com, the default choice is the most selected country — in this case, the United States:

Amazon's default country option


Here’s another example, this time from a U.K. based business called North Rock Gallery, which has the U.K. option selected by default:

Norht Rock Gallery's default country option

These simple examples above show the importance of optimizing for the functions and options that are used or selected most often.

 

Where Do User’s Look?

The F-Pattern reading and scanning habits of web users have become pretty established by now. Of course, the F-Pattern is not always an indicator in every market, but it is a pretty good starting point for considering where your users will look when they interact with your designs.

Take a look at the heatmaps shown below from the well-known Alertbox article linked above:

Heatmaps Showing the F-Pattern

Assuming this is a good indicator of where a user’s eye is focused, this supports the concept of the 80/20 rule. The most intense areas on the map could represent the 20% of the page that the user’s eyes interact with 80% of the time.

From that knowledge, as designers, we can make decisions that will help enhance and optimize the areas that the user is going to be habitually drawn to.

Of course, the design will often be the determining factor of where the user looks, so this suggestion should just be a basic guide and not necessarily a dogmatic way of deciding what falls under the 20%.

 

Mobile Design Trends and the 80/20 Rule

Recently with the explosion of mobile devices worldwide, some designers and developers, most notably Luke Wroblewski, have been encouraging mobile-first web design. That is, when designing and developing a website, the mobile version should be done first, instead of the other way around, to attain certain benefits.

In a traditional website or web app, certain areas of your site will naturally fall under the 20% that are most often used and interacted with. When a mobile site is designed, focus is placed on that 20% (or thereabouts).

So while the mobile version of a website might have its own 20% most-used options, in relation to the full content available on a traditional website, the mobile version will normally have only the most important functions.

Here’s a simple example below using the PETCO.com website:

Petco full website

Shown above is the full version of the site, in all its cluttered glory. While there are some call-to-action areas, and it’s certainly not the worst design in the world, overall it’s not very focused and there are too many options.

Compare that to the mobile version, below:

Petco mobile

By contrast, the mobile interface shown above is simple and helps the user get to the most important areas first, without overwhelming them. Whatever options and content areas are most used in the full version are the only options available in the mobile version.

Thus good focused mobile web apps are great examples of designers channeling their energies on the most important aspects of their projects, staying focused on the functionality and content (the 20%) that’s used most of the time (the 80%).

 

Lessons Summarized

Having understanding of how the 80/20 rule works, designers are equipped to take action in a number of ways, summarized below:

  • Where possible, analyze analytics and usability data carefully to determine your website’s 20% most-used functions
  • Prioritize; that is, focus on the most important aspects of your website or web app, and enhance those
  • Don’t spend too much time optimizing stuff that falls in the 80% that’s not often used
  • Simplify your designs and layouts based on data that determines what falls under the 20% most-used functions
  • Remove noncritical functionality or content that’s not used often
  • Don’t invest too much time and money optimizing lesser-used functionality since the return on your investment will likely be poor
  • Find ways to improve the functionality and design of lesser-used more critical elements that could have a larger impact on conversions if those elements of the design were used more often


While the 80/20 rule is a debatable principle with some inherent flaws, it’s not without value. So consider this rule during the process of your redesigns, realigns, or even for new projects.

This should help your users stay focused on the most important functionality and content, and will ultimately help improve conversion rates.


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Have you considered the 80/20 rule in your design decisions? What effect has it had on the success of your website or web app? Share your comments below.

0 shares
  • http://www.eastdevonit.co.uk Daniel H Pavey

    The 80/20 rule is one of those funny things that sounds like nonsense, but somehow seems to work !!

    It can be applied to all manner of things and situations.

    Unfortunately many people don’t like simplistic rules being applied to their [insert important stuff here]!

    But when it works it works!!!

  • http://www.clickwebdesign.com.au Chris

    Interesting way of thinking about user experience for business websites. The 80/20 rule also applies well to on-site SEO.

  • http://www.webguide4u.com Vivek Parmar

    great article. never knew many of the things about web-design. Learned a lot thanks a lot for sharing

  • http://www.up2speedmedia.com Jay Myers

    Great article! The subjects covered in this article are simple UX techniques that every designer should employ, however even I tend to forget some times. Designing a mobile website first is a pretty new idea to me and i’m not sure that would be effective in most situations. What do people here think?

    • tony jackson

      For nearly everyone I have spoken to its an after thought, but if done first it focuses everyone on getting the core elements of the website functionality nailed down – once done you can add the frilly stuff for the big screens.

  • tony jackson

    Nice article.

    I worked for a multinational helpdesk many years ago, when we reviewed faults by type, we would only look at pareto charts – sure enough every month 80% of tickets where relating to 20% type of tickets – fixing these 20% made 80% of the ticket volume just go away.

    It is a sound principle, but one that is never hard and fast with its numbers.

    On a clients ecommerce website, we surveyed customers over a couple of months on the purchase experience – most commented on the difficulty to search (even though it was working) and the fact that the registration/checkout forms were fiddly – all of the other ‘niggles’ commented on were ignored – fixing the search (realtime dynamic instead of using a form) and the checkout process (single page, registered addr reused for delivery addr) brought a nice boost to conversions :)

  • http://dinnerplanner.net Adam (DinnerPlanner)

    The 80/20 rule has been something I’ve been thinking about lately with my new startup.

    • http://iamautocomplete.com/ Angelee

      I begin to think you’re referring to your to-do list at the moment, pointing out which things need to be done first. That could be to your site or whatever, all the best for it.

      To the author: Nice read. I noticed how useful it is to observe how human nature interacts with the virtual world and the F-pattern is proven right. Thanks for the tip on analyzing ‘20% most-used functions’..

  • http://www.justforthealofit.com/ TheAL

    The select box of countries was likely the best example to clarify this concept. In its own small way it really helped to bring a lot of light to the point being driven home.

  • Doh-a

    Great article.

    But does it mean that I should remove or hide the 80% most useless content, options and links to improve my webdesign ?

    It means a lot if you want to help users, but if I want to help a service ?
    I want it as an important part of my website and users don’t use it. If I remove the link or hide it, it will be worst.

    Should we have to find a middle way ?

    PS : sorry for my bad english, I’m french.

    • http://droope.worpress.com droope

      if you hide 80%, the 20% becomes the 100%

    • http://www.impressivewebs.com Louis

      In some cases, it’s worth removing stuff. In other cases, it just might require that you design those other things more prominently.

      It all depends on what your goals are for your site. If that element doesn’t have any kind of return on the investment you put in, then it might not be worth it.

      This is why content, structure, and hierarchy are so important to consider before a site is ever coded or designed.

  • http://www.michaelgaigg.com/blog/ Michael Gaigg

    I has never been able to understand why not a single country dropdown list includes “Europe” or “European Union”, I mean, aren’t we all European citizens? Why do I have to choose Austria, Spain or Italy? Why can’t I say I’m from Europe? Maybe we are not there yet ;)

    • http://www.impressivewebs.com Louis

      That would be more suitable for a single continent dropdown list. ;)

      Europe is not a country!

  • http://gobugz.com Wesley (Chicago Web Designer)

    The 80/20 rule is something that we really should look at in cutting down on bounce rates. Increasing affiliate incomes, and promoting your over all services. Unfortunately many people don’t understand simplistic rules But when it works it works!!!

    • http://www.activenetwork.com Matt (San Diego Web Designer)

      This is along the same lines of what I was thinking too. It seems like a good tool for increasing conversions.

      Good read.

  • http://www.gurushala.net/feed shashank chinchli

    Application of pareto analysis right over here !
    i had never wondered so :)
    really a great post !

  • http://www.vezign.com cincinnati web design

    Not gonna lie, very nice summery of the 80/20 rule for web design… you should write an 80/20 article on working with clients, I tend to fire a lot my clients after they turn out to suck at paying for websites and blow the scope out of the water lol

  • http://www.sprisemedia.com Lauren @ Sprise Media

    80/20 is no snake oil and should definitely be considered in web design. The trick is identifying – with the client in agreement – what *are* the vital few?

    Because after all, if you are trying to put on the “make my logo/nav/photo/phone number bigger” cream then everything starts to become part of the trivial many.

    • http://www.impressivewebs.com Louis

      That’s the interesting part of the way the 80/20 rule works. You can try to force stuff into the “20” but in the end, the users will decide what truly comprises the 20% that’s most used. So it’s actually an ongoing analysis that never really ends.

  • http://www.pagenelson.co.uk/ Lincoln Solicitor

    I’ve learnt something new here. I also didn’t know about the F-Pattern. Pleased I stumbled across this blog. Thanks.

  • http://www.eatablegraphics.com/ Rahul

    80/20 Rule is true, We all need to understand how it works.

  • http://www.technolabdesign.com Web Dizajn

    Great article.
    Need to study deeply the 80/20 rule.

  • http://www.sonnydesign.com sonnya

    good points to consider in web design specially in the initial phase.

  • http://www.webpixelkonsum.de Ralph

    Great article to understand the online-visit-rules much more better. Thank you a lot.

  • http://www.jokolo.fr jokolo

    hey , thanks for sharing that great article !
    Now let’s work on it..

black friday 2014