How to Balance Information Density in Web Design

Default avatar.
May 05, 2017
How to Balance Information Density in Web Design.
Information density is the amount of information in the form of content that a site visitor is greeted with as soon as he lands on a website or webpage. The greater the information density, the greater the amount of content a visitor will see on the site or page. Because of this tie-in to content, information density has an immediate impact on a user’s cognitive load, which in turn, has a huge impact on the site’s navigability, usability and user experience. When designing, it’s helpful to think of how much content your user can reasonably handle without being bogged down by it. The more content they encounter, the longer it will take them to complete certain tasks and page goals…since the amount of mental processing power for them to complete tasks and goals drastically rises. While it’s always tempting to load up a site with a lot of content to attract visitors, moderation and minimalism are the key to ensuring perfect user-friendliness.

Analysis paralysis, aka the paradox of choice, aka choice overload

Whatever you want to call it, too much information density will result in analysis paralysis for your users, which is disastrous from a web design standpoint. Good design means your users know what they should do at every point of interaction with your site, so if they’re getting frozen in their actions because too much information is confusing them, you’ve got a problem. Excessive information density leads to too many choices for your users. Consider the following scenario: 1) One product page features an image, a headline, a description, the price, a call to action and some reviews. 2) Another product page features several images, a few videos of the product, a bunch of testimonials, ratings, reviews, celebrity endorsements, excessive copy, a headline, subheadings, various calls to action for everything from an email sign up to an “add to cart” button, recommended products for cross and upsell purposes, etc. Clearly, scenario two is the bad design because it is the epitome of analysis paralysis. Let’s look at a short and simple example of a successful site where information density is kept to a minimum to ensure excellent user flows. 001 On 1-800 Pet Meds’ product page, note how the goal of the page is clearly outlined, as users simply have to pick a flavor, size and quantity before adding to the their cart. Unnecessary clutter is completely removed, so shoppers can make the purchase with little friction. This begs the question: how do you keep the information density to a minimum to ensure great UX?

What to do to keep the information density reasonable

As a designer, you have the ultimate power to make sure your site’s density remains under control. When in doubt, always err on the side of less is more, to ensure your user’s cognitive load doesn’t make it hard or even impossible to successfully perform routine tasks and actions on the site. Start by ensuring each page and the site overall have a grand plan before you begin the design in earnest. This means asking yourself what the goal of the page should be, and what the information architecture should be to accomplish that goal. In other words, put yourself in the user’s shoes. As a designer, it should be 100% clear to you how your user will achieve their page goal, whether you’re looking at the page on mobile, a tablet or on desktop. The user flow should be well-defined, crystal clear, and so simple that even unsophisticated users—i.e. those who don’t use the web all that much—can successfully complete the task. Let’s look at another example of keeping information density under control, so that the messaging is effective and the UX is a pleasure. 002 On Ford’s landing page for garage services for their vehicles, there’s no ambiguity whatsoever about what the goal of the page is and how visitors should accomplish that task. That’s because the page has relatively few elements, so less distraction from the page goal. When these conditions are met, the information density is manageable, making for excellent UX. Here’s what this page does right:
  • Clean design with a lot of white space to focus user attention on page goal and content
  • Big, noticeable and vibrant call to action button
  • Clear call to action button microcopy
  • Persuasive messaging above the call to action button
  • Clear user flow and path to page goal
Thanks to this page’s design, the user looking at the page isn’t going to feel overwhelmed and unable to complete the easy task of making an appointment for garage service. That’s because cognitive load was minimal, as the page used relatively few elements to clearly communicate what had to be done to complete the task.

The other extreme

Extremes are never good, no matter what side of the spectrum the pendulum’s on. Just as you can provide a bad UX for a site with too much density, you can just as much ruin the UX when you have very too little content. As this report on minimalism in web design puts it, when your approach to minimalism is too extreme so that your interfaces feature very low information density, you risk making it very hard for your users to find the stuff that they’re looking for. When this happens, the UX suffers just the same, and designers need to remember to first design for users instead of sticking too closely to any design ideology. In other words, minimalism is always a smart choice in design, but it has to be minimalism in moderation. For a great example of moderate minimalism with information density that’s under control, we look to Weebly’s homepage. 003 Note the huge, attention-grabbing headline, the value proposition, the description, the tagline, and the simple and clear call to action.

Information density is crucial

Information density, or the amount of content that a site shows its visitors, plays a huge role in several factors, including the UX, whether the visitor is able to complete the end goal or not, and, ultimately, page conversions. Designers need to think about how dense the content is that they’re presenting to their users. They need to think about this from the very beginning, even before they put in the first line of code. During the wireframing process, designers need to start considering how the information density on their new site will be handled. In general, designers ought to aim for minimalist information density, so it doesn’t overwhelm visitors. The caveat to this, though, is that it can’t be excessively minimalist, as that will create the same types of UX problems with “findability” and discoverability that too much content also creates. Balance is the key to awesome design.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…