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 thePrinciple 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:

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:

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:

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:

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