Don’t Make Me Think Notes – Part 3 – Designing for Scanning

Chapter 3 – Billboard Design 101

In chapter 2, we learned people scan rather than read. So, we need to be designing for scanning instead of reading. If they’re going to act like you’re designing billboards, then design great billboards.

Here’s what you can do:

Take advantage of conventions
Make it obvious what’s clickable
Create Visual Hierarchies
Eliminate distractions
Break Pages up into clearly defined areas
Format content to support scanning

A lot of these are more specific to web/mobile dev, so I’ve ordered the below in the order that is most relevant for game developers. Still, all are important. Think about menus and other places where you can use these concepts in a game.

Conventions

Stop signs – they are very similar around the world
Car Controls – Pedal positions

In websites and apps the way things look, behave, and are placed are stuck in people’s minds. Follow conventions as much as possible to make all the learning people already have under their belt work for you.

It’s okay to be creative as long as it’s usable. If you’re not going to use an existing convention, replace it with something that is either:

So clear and self-explanatory that there is no learning curve
Or adds so much value that it’s worth a learning curve

Clarity trumps consistency – If you can make something clear by making it slightly inconsistent, choose in favor of clarity.

Make it obvious what’s clickable

Use one color for links and nothing else.

While the web/mobile example is obvious, to me this section has a cool extension to game design. We constantly parse our environment for anything usable. He recommends reading The Design of Everyday Things, which looks useful for game designers/artists, too. He says, “Read it. You’ll never look at doors the same way again.” I’m convinced.

Visual hierarchies

The more important something is, the more prominent it is
Things related logically are related visually
Things are “nested” visually to show what’s part of what

A good hierarchy saves us work by preprocessing the page for us, prioritizing its contents in a way we can grasp almost instantly.

Keep the noise down to a dull roar!

Shouting is overwhelming! Bright colors and bold! Lots of invitations to buy! Lots of exclamation points! Everything can’t be the most important. Make the tough decisions about what really is most important. Avoid clutter and disorganization, as well.

Break up pages into clearly defined areas

Users decide very quickly in initial glances which parts of the page are likely to have useful information and which they can safely ignore. For example, banner blindness is the ability of users to ignore areas they think will contain ads.

Format text to support scanning