Distraction free

People want to get something done when they use our designs, for the most part. They want to read an article, or register for a new doctor now that they've moved house. They want to send a quick message to their partner with only one hand because they're got a baby in the other arm. If something about the design distracts them from their task, that thing should not be there.

If things are designed simply, it means that they do not contain anything that might distract the user, unless that distraction is necessary (A warning, for example). Outside of those rare exceptions, the goal is to leave the user alone, as Kate Moran tells us.

When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don't support the primary goals of the interface or its users.

If you avoid distraction in your design you create a calmer experience for the user, and you encourage them to keep using your design, as Mandy Brown says. This benefits everyone.

The design of the page should respect these three distinct phases: first, by inviting the reader in; second, by leaving her alone; and third, by providing avenues for her to continue to pursue her interests.

Unfortunately, people cannot handle as many distractions as modern designers often throw at them. We've got natural limits, as Xtian Miller explains. Once we reach those limits, we have trouble taking in anything more. Showing less on the screen leads to a better experience in some cases.

Our ability to handle large amounts of information is limited by our brain's processing power. Our performance suffers if it takes longer to understand information. We can get overwhelmed and miss important details. When we have larger body text in our compositions, it dominates more of the screen. This will require us to design a layout that allows the copy more room to breathe. It also could mean less copy is observable at any one time than before. In short, it could minimize clutter, reduce extraneous cognitive load, and result in improved usability.

It's easy to find reasons to distract your user. The hopefully-short-lived growth hacking industry is built on them. If you put a newsletter sign-up modal in front of your user as soon as they arrive at your website, there's a higher chance they'll sign up for your newsletter - obviously. What damage does your brand or reputation suffer in the meantime? Short term growth is more valuable than long-term respect, the industry tries to prove.

Adrian Zumbrunnen makes the case that there's a moral benefit if we create a web that distracts our users less. A reason to focus on the long term rather than the short.

At the end of the day, it all comes down to moments of truth, these rare moments by which other people judge our abilities, our performance and even our personality ... When a user fires up a project we've designed, full of expectations ... do we want to ... add noise to the web and impede people to get their messages across, or do we want to be the ones who push the web forward and help to make it a better place for reading and discovering information?

Moral arguments aside, even the most down-to-Earth designers believe that you need to avoid distractions. GOV.UK is the single website for all of the UK Government. The design is created and controlled tightly by GDS, and they've been incredibly successful with their principles and style guides. If the goal is for the user to get something done, GDS' approach is best-in-class. They're also an oasis of simple design in an internet of complexity. Here's what their style guide says about images:

Avoid unnecessary decoration. Only use images if there's a real user need.

Images seem to be one of the worst culprits for distraction on the internet, and they're definitely one of the biggest reasons that design isn't as simple as it could be. When I first compared GOV.UK with the website of the United States government, years ago, the stand-out difference was that the United States' website used many more images. Most of them seemed unnecessary.

When I look at the United States government's website now, I see far fewer images. Perhaps the United States government has realised that those images were a bad idea. Unfortunately much of the rest of the internet is yet to follow, as Gerry McGovern explains:

The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page, forcing more useful content out of sight.

Images aren't the only culprit, of course. They're particularly bad because they take up space and bandwidth, and distract your users. As far as distractions go, though, they're easy to diagnose and just as easy to remove.

A more subtle problem is overuse of colour. Some designers seem to believe that colour palettes need to be rich and varied. Once they have the colour palette, of course they want to use it. Suddenly every colourless area is an opportunity to use that glorious purple.

Anand Satyan urges us to design in black and white first, and only use colour where necessary. When you approach it in this additive way, colour is like a scream in a quiet room: extremely powerful.

It is best to use three or lesser colors in your design. Having too many colors in your designs may confuse the user or bring the attention of the user to less important areas. When you have a single brand color and use it selectively on a design that's complete in black and white, the eyes of the user naturally get dragged into these “color” areas.

When I asked Jonas Downey about the limited use of colour at Basecamp, he echoed this of being careful with colour, especially when you display user content which you have no control over the presentation of.

[Colour is important for] contrast and readability. If you make a tool that's heavily text-based, and you have to support a wide variety of differently-styled content that customers are largely providing, it all needs to be clear and readable with enough contrast, and without clashing with the app's overall design.

Productive → ← Clear Back to the table of contents