Designing for Distraction: Engagement

Designing for Engagement
Today, I present the second part of a two-part article on Designing for Distraction (click for slides).

Yesterday, we looked at who the distracted are, what distracts them, and how to design for them. Today we’ll talk about Designing for Engagement (or Readers-First Design).

For Engagement

When we design to eliminate distractions, we design for engagement. The aspects we need to consider are readers, layout, elements, ads, and images.  Adrian Zumbrunnen has a great article on the topic, where I got most of the ideas below.

For engagement, we’ll talk about a readers-first perspective because most websites are written-content-centric. And the goal for most websites will be to engage readers.  To have a readers-first design perspective, we need to bring clarity to sites, get rid of on-screen distractions and just let people read. Layout wise, there is no longer the need for the WWW to emulate telephone or paper paradigms, the WWW is its own thing with its own design language. And people are comfortable with that language. Users often prefer the native web language of things like scrolling, over the imported analogies of flipping pages (,

As Zumbrunnen said, “People don’t go to a website to click buttons, they want to find information.” In other words, don’t give them hoops to jump through or bells and whistles that get in the way of reading.

Design elements

As for design elements, since reading is often the primary goal of a given user, good typography is critical. So spend some time getting the type right. Additionally we should strive for minimal design distractions or things that take space away from the content. So no sidebars, no fixed/sticky menus, and limiting animations. As Oliver Reichenstein noted: “The only side column you look at is your own side column.” Though I don’t think you should always eliminate your side column, the default should be no side column. And when you add side columns for specific use cases, have a good reason.

Advertising is often a two edge sword, necessary to keep the site running, but it can cheapen the design of the site as well.  So when implementing advertising think about how it can integrate into the overall design. This way it’s not an eyesore but a part of the design.

Likewise, you should consider how you use images on your site as well. Since they strongly influence the perception of your site, and captions are read 300xs more than body copy!  So consider the quality of your images (no stock imagery) and the reasons for using them, don’t let them become distractions but enhancements to the site and user experience. In addition to quality, it is important to consider placement. Kissmetrics suggests placing header images before text and body images to float right, as these don’t interfere with reading flow. If you put a heading before an image or a body image floating left, you interrupt the natural flow of the text causing the visitor to think where the next line flow
And that distraction can cost you engagement.


If you want your app or site to handle easily while in distracting situations, we think mobile first. But to engage your visitors regardless of situation, add in reader first. Thinking mobile and reader first as your design premises will provide for maximizing user experience and engagement with your site.


One response to “Designing for Distraction: Engagement”

  1. […] One of the key changes we’ve had since the advent of the internet is the increasing emphasis on design. And digital design is evolving more and more into a focused and engagement centered practice.  Designing for distraction, both distracting environments and limiting on screen distractions, is an important focus for website and application design. Today we’ll look at who the distracted are, what distracts them, and how to design for them. Tomorrow, we’ll look at engagement […]

Leave a Reply

Your email address will not be published.