Do you think designing your website is a business investment?
Do you believe that investment should have a long-term positive impact? Do you think it should help you to attract new leads, improve customer relationships, and increase your conversion rates?
We do.
In the midst of the Internet’s mobile revolution, there is a lot of talk about responsive web design. Advocates for mobile-friendly sites are now as common as two-year-olds who love chocolate. However, with all the talk of smartphone-friendly layouts, few folks are addressing one of the biggest issues – information density.
Creating a great responsive site is about more than just scaling the size of images and text. It’s about creating an exceptional user experience.
Take responsive design to the next level with the appropriate balance of information density.Click to Tweet
What is information density?
As the name would suggest, information density is the amount of information presented to a user. The more information a user is given at one time, the denser the site.
This information can come in multiple forms, including:
- Images
- Controls (navigation menus and forms)
- Text
- Color
- Texture
For example, consider the two screenshots below.
Both of these mobile sites showcase a really good use of information density. However, one is clearly denser than the other. Google presents one control – a search bar. Conversely, Alaska offers more than five controls.
Why is information density important?
The average brain can only process 3 – 5 items at one time. For example, remember this number: 6721879.
Especially in today’s tech driven world, the storage capacity of our brains seems to have slipped. When calling the pizza joint is just a Siri command away, who needs to memorize its digits?
What was the number we asked you to remember? Hard. Isn’t it?
What if instead, we’d presented it to you like this: 672.1879.
The chances of you remembering would have increased greatly. When it comes to information density and web design, it’s essential to resist the urge to pack it in.
If you fill a page up with everything, everything becomes less valuable.Click to Tweet
How can you control information density?
Designing a site with a great information density balance begins by answering these questions:
- What is the intent of the site (or landing page)?
- What task does the user need to complete?
- What is absolutely necessary for the user to complete this task?
When you look at a site on a smartphone, desktop or large screen, the path you are supposed to take should be clear.
For example, consider Redlands Symphony homepage below.
In both examples, the path you are supposed to take is clear – buy tickets. Defining this path was accomplished by creating a visual hierarchy. Through the use of color, whitespace, and texture, we were able to draw the eye.
However, when comparing the two versions, it’s obvious that at first glance the desktop version presents more information. The scaled-down mobile version doesn’t reduce the amount of information available; it just adjusts where and how it is placed. If you scroll through the mobile site, you’re able to access all the same details.
This is an important distinction. Some options for a mobile-friendly site scale back the amount of information available to the user. In such instances, this means either one of two things:
A. The information was not necessary in the first place and doesn’t need to be on the desktop version.
B. The user’s experience is being diminished because they are on a mobile device.
The goal is to make your user’s experience exceptional no matter how they visit. Crowding their screen with details that don’t matter or not giving them the information they need is a quick way to lose leads and miss out on sales.
One thing to note during the process of mobile-first design, is to not neglect how your overall layout and features functions on an extra large screen. It can be easy to forget in the age of mobile devices that content is also accessed on very large screens.
This why it is important to test your designs in terms of screen size and not simply by device.
Where should you go from here?
The best thing you can do right now is conduct a digital evaluation. You’ll want to work with an experienced firm who also understands the big picture.
Evaluating your own information density is a tough task. Not only do we as humans have a tendency to be biased, chances are good you specialize in something other than design, user experience, and marketing.
By working with a professional, you’ll get a realistic view of where your web presence is currently and clearly defined action steps you can take immediately.
Do you want to get a headstart on evaluating your digital presence? RWL Design looks at over 150 factors across your website, social presence, and current web advertising while making comparisons to your top three competitors.
Let’s chat about how to make your site as effective as possible.
Additional Resources
Responsive Upscaling: 11 Ideas for Large-Screen E-Commerce Design via Baymard Institute
Responsive Upscaling: Large-Screen E-Commerce Design via Smashing Magazine
