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.
- 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.
- 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
- Use plenty of well-written headings with visual distinction between each level
- Keep paragraphs short
- Use bulleted lists
- Highlight key terms (judiciously)
For more information on how to design for scanning, he suggests reading Letting Go of the Words.
If you loved reading this post, I highly recommend buying the book to get more detailed information. It’s less than $30 on Kindle! You may also want to check out my other book recommendations.