Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles
The attention map

Attention mapping is a tool to help you start to plan a visual layout around realistic communication between user and site.

It can also be a helpful analysis tool, helping you work out what's wrong about a layout.

The most important elements on a page are those that help the user (and site) achieve their goals. Those things should be nearest to hand, and in positions where they'll be seen.

Attention maps are great because it is much quicker and easier to sketch out your priorities first on paper than to try to do it as you go in Photoshop etc.

Once you've got your map, you can use it to guide the amount of contrast/noticeability you give to each screen element.

1. Primary importance

What are the most important elements on the page - the ones the user probably needs to use? Is there any? A regular web page will normally have three or less of these elements.

Only applications that use a common interface that features multiple tools should ever have more than three. If you can think of more than three, consider whether they are really all top-priority. Take a piece of paper and draw a placeholder for the top-priority elements, really big and bold, up near the top-left.

2. Secondary importance

Next, consider the things that the user might need to find, but not urgently. Add these to your attention map, half as big and half as bold as any urgent elements. Then, take the minor elements that probably belong on the screen, and add them, smaller and less bold.. and so on.

etc. etc..

A rough example

This is the kind of attention map I might draw for Web design from Scratch.

Sample attention map

The layout of this site is very simple, but there is still a pecking order among its elements.

  1. The page title is the highest-priority item, because it tells you where you are / what's there. It should get the first attention, which is why it's large and very bold on my attention map.
  2. Second in the line for the user's attention is the site logo (site identifier). Obviously, the logo should be clear, because it tells you where you are, and someone could land on any page on this site, following a link or search engine result. I want them to know where they are quickly and easily. But a site's logo surely isn't as important as the page title, or the page contents, because you don't *need* to be reminded what the site is on every page. Although I've got the site id as second-highest priority, I know that it isn't *actually* 2nd priority, because of the way the brain works. If you've browsed several pages on this site, you'll know what the site is already, and you'll automatically ignore the logo (as long as it isn't too in-your-face). This is one reason why the logo should always be in the same place on the page - at the origin!
  3. Same goes for the title bar pictures at #3. Once you've seen a pic, you'll start to ignore it on subsequent pages.
  4. I've got the page summary in next. It is important, because it answers the question "Am I in the right place? Is what I'm looking for here?".
  5. I have the course navigation less noticeable than the site id, page title, title pic, and page summary. I can make a general assumption that someone looking at a page on my site has followed a link for a reason. This is a content site: a destination, not a stepping stone, not an obstacle. Also, I value all pages on the site equally. I don't want the user to buy, subscribe, or click on adverts. That means that giving my user the page content is higher-priority than sending them somewhere else. That's why the site navigation isn't particularly prioritised visually.
  6. Footer navigation is very low priority, and serves more to round off the page than provide useful links.
Top ^ Next topic »
Comments
There is a silly typo in the text part.... ' Attention maps are great because it's loads quicker '. It should be 'it' rather than 'it's'. These type of errors are really unexpected from a site like this,where we people get a clear vision of designing. Isn't it?
Kaustav - 02:06 on 30 Mar 2005
It's quite annoying to find another mistake in your site. Please rectify this as soon as you can...'  What are the most important elements on the page - the ones the user probably needs to use? Are there any?'...It should be 'Is there any?'
I think proper grammatical structure of a sentence is also very important when you are talking so much about usability.
Kaustav - 02:12 on 30 Mar 2005
'Loads' is a British-English colloquial term that means 'a lot'... Attention maps don't load, they're a design tool... Sorry, I've had this comment before. I'll update the text.
Ben Hunt - 02:12 on 30 Mar 2005
Re: 'Is there any..?' You're right, strictly, but that falls into a real-world-language grey area and I'm not going to change it. Thanks for your continued support. Are you a proof-reader by trade, Kaustav?
Ben Hunt - 02:15 on 30 Mar 2005
Yes, I'm a proof reader by profession, but could not understand why you are unwilling to change this simple thing? Do you have any explanations for it? :)
Kaustav - 12:25 on 31 Mar 2005
OK, I've changed it in order to make *you* happy, because you're a special, unique person. Keep 'em coming.
Ben Hunt - 02:29 on 31 Mar 2005
Thanks brother...you are wonderful. I like your site...and that's the only reason why I want this site to be a perfect one. Thanks. :)
Kaustav - 02:11 on 04 Apr 2005
In support of Ben's English:

With regards to 'are there any' versus 'is there any' -  both sound perfectly fine to individuals in the U.S., the U.K., India and all other countries with large numbers of native English speakers.  If you were to consult some grammar book from the 1950's then probably a fuss would have been raised about the 'correct' way to phrase it; but if this mistake is so 'annoying', as Kaustav put it, then s/he must be absolutely incensed that no distinction is made between 'who' and 'whom' on sites all over the Internet.  English is a living language and thus subject to change like all things!

To satisfy all your readers though, Ben, you might have to internationalize your content and take an approach similar to Wikipedia's 'Simple English' so that your inbox does not get flooded by complaints about your poor English from bookish non-native speakers the world over.

Keep up the good work.  Your content is great and your grammar impeccable.
- 02:32 on 07 Apr 2005
I know I'm probably far too late in commenting on this, but I'm annoyed enough to do so anyway. The second correction requested by Kaustav is completely unnecessary - and wrong. 'What are the most important elements on the page - the ones the user probably needs to use? Is there any?' Elements = plural (there ARE more than one element), correctly referred to by 'the oneS' - 'Is there any?' is using the third person singularly, which is wrong. You should change it back to 'Are there any?' because you are referring back to the plural Elements. That's my penny's worth. Feel better now.
Ida Andersen - 04:14 on 29 Jul 2005
Great site, by the way :-)
Ida - 04:15 on 29 Jul 2005
Ida, Kaustav's comment is actually correct. 'Is there any' is gramatically correct, because the 'is' applies to the 'any', not the things themselves. And 'any' is a single thing. However, we're at into the grammar geek zone here :-)

I think that effective communication is more important than correctness. There are a few grammatical rules that, while correct, actually sound more wrong to most people. In those cases, I think we need to accept that the rules of English need to catch up with the real English used round the world today.

(In the same way, I don't see pure semantically-correct HTML that validates to a published grammar to be a pre-requisite for creating an effective web page, although it's certainly nice!)
Ben Hunt - 08:24 on 02 Aug 2005