What is the 7±2 rule that almost all designers use?

Understanding the 7±2 rule and applying it to daily design can accurately convey the main content and make users have a certain impression of it. Below, I will analyze the common application methods of the 7±2 rule in design through examples.

Our brain receives a lot of information every day, and the brain will understand and remember some of the information we see. According to George A. Miller's research, the human brain is best able to remember 5 to 9 pieces of information at a time in a short period of time. If the amount of information exceeds 5 to 9 items, the memory will be wrong, which will inevitably affect the original intention of presenting the main content. This is the magical 7±2 rule.

Understanding the 7±2 rule and applying it to daily design can accurately convey the main content and make users have a certain impression of it.

Below, I will use examples to analyze the common application methods of the 7±2 rule in design.

Digital segmentation design

In design, we often encounter the display of numbers, and we usually divide these numbers according to the rules of their industry. For example, mobile phone numbers are divided in 3-4-4, bank card numbers are divided in every 4 digits, and so on.

Case display:

​​

△ Left (JD.com): When registering, fill in the mobile phone number in 3-4-4 format, with spaces in the middle. Right (Meituan): The merchant page also uses spaces to separate numbers when making phone calls.

By applying the 7±2 rule and using this segmentation method, a good interactive experience can be achieved, which not only improves user operation convenience but also enables users to remember quickly.

Navigation and tab design

When using an app, the menu bar is an area we often use. If you look closely, most app menu bars are designed based on the 7±2 rule. Although some menu bars can display more content by sliding on the X-axis, the number of menus will remain within 5 to 9 in the initial state of the page.

Case Study 1:

​​​​

△ Left picture (Toutiao): In the initial state, the number of valid clicks on the menu bar is 6. Right picture (iQiyi): In the initial state, the number of valid clicks on the menu bar is 6.

In addition, the navigation bar design on the PC side can also follow the 7±2 rule.

Case Study 2:

​​

The pictures from top to bottom are: Microsoft official website, Apple official website, Udesign, ZCOOL, UI China. There are no more than 9 menu bars. The overall design is more simple, allowing users to find what they want more intuitively and clearly.

Whether it is a mobile terminal or a PC terminal, we can optimize the display of the menu bar based on the 28 principle (80% of users only pay attention to 20% of the total content when using the APP) and data analysis. Finally, by applying the 7±2 rule, users can be tightly and effectively locked in.

Content layout design

The 7±2 rule can help us layout the page content.

Through the card-style classification design, the same type of content is grouped into the same card module. Users can first query the card module and then look for specific content. It seems that the interaction path has become longer, but in fact it greatly improves the user's usage efficiency.

Case display:

​​

△ Left (WeChat): Different entrances are combined through card classification, such as financial management and life services. Right (JD Finance): The same type of content is combined into a card module.

The design of the content layout is just like the title and paragraph line breaks when we write an article. It is clear and easy to read.

The above are the common application methods of the 7±2 rule in daily design. At the end of the article, I would like to quote a famous saying: "Unless there is a better choice, follow the standard." I hope it will be inspiring to everyone, and welcome everyone to discuss and exchange ideas.