This kind of precept is quite familiar in web projects, specifications, charters and design documents. The ambition behind this 3-clicks rule is to bring the user close to the information he wants to reach. Therefore, information must be accessible in less than 3 clicks.
In other words, the further away the information is, the more the user needs to click or scroll and the more the probability to lose him increases.
The good side of this rule
It provides a metric that can be tested at any time and can be applied by anyone in an immediate way. You can conveniently implement it to evaluate a new functionality or particular use-case.
The limitation of this
It is not enough to judge the quality of navigation of your site. The 3-click rule poses a problem when working on the ergonomics of a site because it imposes a strict limit that is often difficult to respect.
Keeping an eye on the number of clicks should not force your design choices in a way that compromises the ease of navigation on your site: the most important thing is that the user confidently knows where to click and that he doesn’t make a mistake! The key is to understand the positive effect that the 3-click rule seeks to produce on navigation, i.e. to allow the user to easily and quickly reach his goal.
Having that said, let’s compare the navigation experience for a specific purpose in a cognitive walkthrough manner: open a bank account when you are a startup. Let’s see if customers can get information accessible in less than 3 clicks.
The 3-clicks rule in practice
Three French bank websites have been tested : Qonto, BNPP and Banque Postale with a same goal: first steps to open a bank account on-line when you are a start-up.
Different metrics have been computed to evaluate such an experience : the time to reach the goal, the number of visited screens, if the user needed the search bar, the number of clicks, as well as the percentage of scroll action over the user journey.
Results
Qonto | BNP Paribas | Banque Postale | |
| journey time | 0’34” | 1’11” | 3’26” |
| search bar call | no need | no need | necessary |
| 3-clicks rule | 2 | 3 | 8 |
| number of screen viewed | 6 | 8 | 14 |
| scroll percentage | 1% | 4% | 28% |
| goal reached | yes | yes | no |
| Effectiveness | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
Well, the results speak for themselves…
References: Amélie Boucher – Ergonomie Web : Pour des sites web plus efficaces – Paru le 20 octobre 2011 Guide (broché) – Eyrolles
