Actionable Advice - Chewing Gum Graphic

Content That Reflects the Way We Read

No offense, but most people don’t want to read your content. Try not to take it too personally. In an age with an overwhelming amount of information, your audience is constantly being bombarded with content, so they honestly don’t have time to kick back and slowly digest your content and pour over every single word. Users don’t read anymore, we scan. It just makes more sense. So, if we don’t read anymore, how do we get our content to effectively relay our messages and drive action? To overcome this, we’ll have to get creative scientific. Yes, there is a science behind design. If our users aren’t going to read our content, then we need to structure our content in a design that reflects the way users are going to scan through it.

The F-Pattern

In an eye-tracking study conducted by the Nielsen Norman Group, users were observed while scanning a webpage. What they found isn’t really all that shocking. Users read left to right, and top to bottom. This sounds straightforward, right? Let’s look at a “heatmap” from this study that shows where readers eyes spent the most time.

Eyetracking Study Heatmap

These “heatmaps” highlight reader focal points. Image courtesy of Nielsen Norman Group.

Unless you’re colorblind, it’s pretty easy to see that an “F” shaped pattern emerges (if you are colorblind, I apologize that was kind of insensitive). So, what does this mean for our content, and more importantly, what does it mean for our message? Users aren’t going to get your message, unless it’s clear. If the average user’s session is less than a minute, then our content must be structured in a way that that reflects this type of scanning behavior.

Design for Scanning

To heed my own advice and practice brevity, I’m not going to try not to overwhelm you with anymore text than I have to. When it comes down to it, we need to design our pages so that our most important opportunities for user engagement are at the top of the page. There are some important principles that we practice here at AI every single day to overcome this dilemma.

Use Full-width Designs

Wait, we’re talking about verticality, right? Using a full width design significantly increases the overall visible portion of content above the fold, which provides the maximum opportunity push more of our content above the fold.

Full Width Vs. Fixed Width

Remember, this is just an illustration not a real design.

To learn more about AI, click here.

Static “Sticky” Navigation

Designing navigation that is always visible, even while scrolling, ensures that at any point during their session, the user can access items within it. It’s a great location to place your call to action, social media or share links.

Brief Headers

Brief and clearly defined headers are like life preservers for content below the fold. Looking at the F-Pattern heatmap, you can see that as users scroll through our pages there’s a significant drop-off in attention. A great way to make sure our information receives attention is to clearly segment it. If you’re on the fence about this, scan through the headers of this article. It’s a lot longer than I’d like it to be, so I’ve tried to use succinct headers that tell the whole story… or at least allows for a user to scan for the information that they actually care about. It doesn’t have to be read in its entirety, but I appreciate it if you do.

In Conclusion

We can’t make people read when they don’t want to, but we can structure our designs so that users are more likely to receive our message and in turn, take our desired action. Because that’s what it’s all about in the end… Clicking that button, buying that widget, sharing that page… The best designs are always the most functional ones, so why structure our content in a non-functional way? I don’t know about you, but I sure don’t.