chunking in design article banner

Chunking Psychology: Breaking Down Information to make Clearer Content

This article will focus on the term chunking also known as Miller’s Law.

What is Chunking?

Chunking is a technique that helps the user process and understands large information by breaking it into smaller chunks.

We do not try to provide every information available at once to the user. Rather we break information into clean chunks that help users remember and recall it. We call this chunking memory.

In psychology, we tend to break down a piece of complex information into recognizable chunks so that they are easy to remember, reference and understand.

Take the example of a phone number. While something like 2061111111 can be hard to remember we can chunk as (206)-111-1111. Chunking into 3 bits makes it easier to remember.

chunking in phone numbers

Not only does it make it easy to remember but it also adds meaningful categorization. Looking at the phone number example, the first 3 numbers signify area code and the next 3 numbers signify prefix. The last four numbers are unique line numbers that direct to a specific phone line.

The present-day estimate calculates the number of chunks that can be efficiently processed by our short-term memory to be 4 plus or minus 1.

Examples of Chunking

Before we move on to UX implementation examples, let’s explore more on the phone number naming convention example.

Say we want to make an international call. We could now simply add a country code in the existing phone number.

addition of country code in phone number

In the above image, +1 signifies the country code for the USA. This also makes it easier to identify the caller.

chunking example: russian country code phone number

Similarly, +7 in the front represents country code for Russia. In the image below for the Russian phone number format, we can also notice how different places can have a different form of chunking.

Now, we can try implementing this in our UIs. For this, let’s take an example of a dialer interface. This was a design I created a while ago, while I was doing my daily UI challenges. The goal is to make something self-explanatory to the users.

chunking in phone number example for UI
Original image: Dialpad Dark UI by sshikhrakar. Auto chunking for phone numbers when a user dials in.

As soon as the user starts typing a number, the app will auto-detect the chunks such as country code, area code, and auto display it in an appropriate format without users having to do any manual input. You can also notice that the phone number suggestions are also chunked so that users can get clear information.

date format conventions

Another common implementation of chunking can be seen on date formats. As shown in the image above, we can have different formats with date, months and year placement interchangeable. This also differs from country-specific conventions and other factors.

Similarly, while creating input forms for DOB or other date related fields, we can create a single input field that auto separates the date, month and year in a given format when a user enters the date.

In the UI below, we can see how card numbers and expiry date is chunked automatically according to the proper format.

chunking example in UI: credit card number
Original image: Credit Card Info Form Dark UI by sshikhrakar. Chunking convention for credit card numbers in a UI.

Chunking in Naming conventions

We can see chunking in major hardware devices naming conventions and also in software versions. We can see this on how Intel names their CPU product lines.

chunbking in naming convention: intel processors

Taking a look at the image above, it’s pretty straight forward. It starts with a brand name, followed by processor type, SKU number digits, and product suffix line.

Say I was in a market for a new processor for my desktop and I wanted to buy something powerful enough for editing. It is easy enough for me to figure out that i7 is pretty high in their lineup followed by i5 and i3 processors. Even though I may not know much about processors, this makes it easy for anyone to follow through.

The product suffix line also signifies the performance of the processor. On the image above, “H” means high performance with a higher power draw. This signifies that it is specifically designed for high-performance desktop and workstations.

If we were to look at the same processor types for the laptop market, we can see that the product line suffix is mostly “U”. “U” stands for ultra-low power consumption processors for laptops and tablets. In the image below, we have a laptop i5 processor with ultra-low power draw.

how intel names their processor to make information easy to understand

Chunking in Writing

Take my article on Principles of design and art as an example.

This topic is huge and people need to recall its contents. So I have chunked down the whole topic into many pieces.

First, I have created an easy navigation system so users can effectively find what they are looking for. I separated the whole article into topics for ease.

table of contents in a blog article

I have then used lists to relay important info to users for them to scan through it. Using images and white spaces help us grab attention. It also helps the user focus on the topic.

Finally, I used bold and colored text for users to grab important notes. This is a very effective way to help users scan through the article.

Here is a small snippet of the article structure:

chunking article into bit size pieces so information is easier to scan

Things to keep in mind when applying Chunking UX in our designs

  • Chunk information to 9 words, preferably ~5.
    We need to use the present-day estimate when applying Miller’s Law. When chunking information, keep the chunks to 9 words. People can retain chunked information in their memory longer.
  • Make the design easily scannable.
    We need to make sure it’s easier to scan through our product. Users usually scan through the content. This helps people find what they were looking for easier. Use titles, bold or colored texts for important notes. We can grab the user’s attention and also help them scan through the product.
  • Chunk information into a single page.
    It’s faster for people to scroll than clicking next to go to another page.
  • Use space efficiently.
    We can fit multiple chunks of data by utilizing the space around our product. Layouts in online shopping sites or apps are great examples. They organize items utilizing the spaces around the product. It also keeps the design clean and simple.

Wrapping Up

Chunking is necessary to capture the interest of our audience. We need to make sure that people who use our product find what they were looking for. So don’t complicate your design by clumping every bit of resources at a place.

Don’t force people to put in more effort than what is required. Use the principles of chunking and utilize it properly to make your product easier to use.

Further Reading