Designing for Distraction: The Distracted

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

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

The Distracted

People are distracted when they engage with websites. An average person looks at their phone 150 times a day, usually for brief moments and with split attention (Luke W Blog). People use their phones while driving, walking, working, and in various social situations (  People even use their mobile devices while at home and on the couch, instead of using the family computer or laptop.  Mobile devices are now common conveniences and their use knows no bounds. So the number of distractions for any given user can be everything from a flushing toilet to a crane at a construction site moving pylons.

John Clark and Google have each come up with a series of behaviour models for mobile device users. John Clark classifies them as Micro-tasking, I’m Local, and I’m Bored. Google views them as repetitive now, urgent now, and bored now (Luke ALA). And the two lists roughly correlate with each other. These behaviours help explain the common mobile interaction types of Look up/find, explore/play, Check in/status, and edit/create. These behaviours and interactions help us to identify what the goal is of a given page. And clarifying that can help us eliminate or account for distractions.

For the distracted

The premises of designing for the distracted are to design for what people want to do and to maintain clarity and focus (Luke ALA). Luke Wroblewski coined the term “one eyeball and one thumb” to describe the attention that users often give to their mobile interactions. MailChimp adds “and arm’s length” to emphasize how obvious the design should be. And when we talk about distraction we want to design mobile-first. That is because “what we need to do to design is to look at the extremes. The middle will take care of itself” (Dan Formosa of Smart Design). And mobile usage provides perhaps the most extreme distractions.

So while designing mobile-first, we need to consider what mobile is uniquely good at, emphasize content over navigation and consider the mobile platform (device and browser) itself. Some of the most obvious strengths of mobile are its versatility, variability, and mobility.

Mobile is versatile, as it can be adapted to many different workflows or situations. It is variable in that there are constantly varying hardware and software combinations often created by the users to make the devices more versatile. And it is mobile by being able to easily be taken from one situation into another.

Users no longer look up internet directories to locate businesses that they’re interested in. And that was a brief and possibly marginal experience that occurred when the WWW was young and search engines were notoriously fallible.  Now the WWW has developed pass the telephone analogy and search engines are incredibly good.  With that change users no longer enter sites on the front page, but instead somewhere in the middle of the site. And users are often content/task focused.

To improve the user experience of our brands and sites, we should present them what they want first, and then provide pivot opportunities like navigation. We also should not duplicate the common functionality of mobile devices and browsers. And should take common browser/device button layouts into consideration.  So if we have a sticky menu, we should keep it at the top since the bottom is often device/browser buttons. This way we don’t have a row of buttons above another row of buttons and the annoying misclicks that would ensue.

MailChimp offers some email for mobile design suggestions to improve engagement with distracted users. First, keep it responsive, using media queries with the tables that email clients require for design.  Also, show and hide elements based upon the platform, screen size, or expected viewing situation. MailChimp also suggests large tap targets of 46×46 (Google is 48×48, Apple is 44×44) and large font sizes of at least 16px (Google is 18-22px, Apple is 17-22px). Mailchimp also suggests considering spacing of elements. Avoid clustering links and make calls to action full width to allow left or right thumbs to easily click them.


When we design today, we no longer design just for the office paradigm. We now design for versatile, variable, and mobile devices. Those devices can be anywhere, from the top of the Leaning Tower of Pisa to the middle of a Rave. Regardless of where our viewers are, they expect an easy experience. So lets keep in mind these suggestions.  Tomorrow we’ll be talking about engaging our visitors.


One response to “Designing for Distraction: The Distracted”

Leave a Reply

Your email address will not be published. Required fields are marked *