Billboard Design

November 24, 2003 | View Comments (3) | Category: Design

Summary: Making your site like a billboard.

Many designers like to overlook the fact that users come to their site and the first thing they do is scan the page. However, when your page is not scannable the user is unable to get a clear idea of what you are offering. Short content, headers, and bulleted lists are just some of the ways you can make your site more scan friendly.

Headers can play a large role in how you find information. Headers should follow a hierarchy that does not throw off your users. h1 headers should always precede h2 and below type headers. It might now make much sense on a corporate site or ecommerce site to have the main heading a h3 while everything else is a h2. This causes confusion to the users because they lack an understanding of what is important on your site.

Yahoo: Unscannable

Their page is more for exploring. Every time I try to scan the page myself my eyes are drawn to the huge logo. This was good for them a couple of years ago when they needed to establish a brand, but that brand has long been established so maybe a smaller logo might assist the users.

Section headers like Shop and Fun are the same size as the links that follow them. Even though the headers are bold and the links are blue there could be a better distinction between the sections if the headers were just two font sizes larger.

37Signals

They implement a method that probably is the best method for scanability on the web. In college many of us highlighted our textbooks so that we may later go back and find the important points more readily. 37Signals employs the same method on their own site and it helps make the important points stand out on their own.

Other ways to improve scanning

Please let me know of other ways that we can improve pages for scanning.

Improving the scanability of your site smean that you should decide what the most important elements are on the page and help guide your users to find them. For this site the content is what is important to me and therefore the entry titles standout compared to the rest of the text. This helps users find the content. The headings that separate the entries help to define the different sections of the entries. Of course the design of this blog is not complicated, but that makes scanning it even more easier. For larger sites creating pages for scanning can be more difficult, but we all like challenges, right?

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/60

Comments

#1

Deloitte Consulting's BullFighter is a good tool for keeping things easy to read:

http://www.dc.com/insights/bullfighter/index.asp
http://www.wired.com/news/business/0,1367,59280,00.html

(from an email to one of my coworkers)
I ran the copy of our corporate homepage through the bullfighter.

It's bull-free in that it doesn't contain any consultantese... but it scored a 5 on the Flesch readability scale. here's the "diagnosis"
Diagnosis: You overwhelmingly embrace obfuscation and don't want the reader to understand anything you have to say. Your writing lavishes a preponderance of dependent clauses and compound negatives upon the reader, whose cognitive load not infrequently exceeds the purported benefit of the substance of the article. Syntax incorporates numerous collections of items juxtaposed or in series that demand persistence and not a little unqualified expertise on the part of all intended recipients of the author's communications. In fact, such machinations inevitably prove detrimental to comprehension and sabotage the imparting of any and all knowledge. Your condition is irreversible.

For contrast:
http://sportsillustrated.cnn.com/inside_game/rick_reilly/news/2003/06/17/reilly0623/
scored 78.
Diagnosis: Clear. You get to the point. Short sentences describe key thoughts concisely. Readers of all levels can focus on the message rather than finding their way through difficult text. The good Dr. Flesch would be proud of you.

JFK's inaugural address scored a 77
Diagnosis: Clear. You get to the point. Short sentences describe key thoughts concisely. Readers of all levels can focus on the message rather than finding their way through difficult text. The good Dr. Flesch would be proud of you.

Dubya's was a 62
Diagnosis: Mostly clear, with some unnecessarily long words and sentences. You get to the point, although with an occasional detour. Most educated readers will navigate the text with no difficulty. Longer words and sentences appear occasionally.

But on the other hand, "We big bank. Have much cash. Bank with us. We want your dough." scored a 99.

So, ya know, you have to find some balance somewhere.

(I should note that one of the reasons our corporate homepage scored so poorly is it contained multiple place names, which are often long and containing many syllables. It scored a good bit higher when I replaced each of these location names with 'bob')

JC (http://www.thelionsweb.com/weblog)

#2

JC: maybe you should run your comments through that thing ;) It is a good thing though that on this site it is acceptable to get a little carried away with my wording. I try to keep things down to a minimum, but due to time constraints I can not always fine tune what I publish.

Many company sites suffer from overwhelming customers with useless jargon. So much could be cutout, yet some people feel that if you don't get every word on the screen then the audience is missing out on something.

Scrivs (http://www.9rules.com/whitespace/)

#3

heh. I was thinking the same thing.

To be more accurate, many company sites suffer from the mistaken belief that the customers really care about the excessive information they provide. They look at the website user as a briefly captive audience who should be funneled past ads for products before reaching his ultimate goal. And get rather... annoyed when you suggest a change of strategy.

JC (http://www.thelionsweb.com/weblog)

Keep track of comments to all entries with the Comments Feed