Attention Map

18 August

Attention Map

I recently read an article that introduced a new concept called attention maps. An attention map is basically a list of goals for a page that basically assigns a point value of importance to sections of a website then distributes those areas onto a page. The most important areas are larger and also fill up more dominant sections while less important areas get pushed down and/or to the right.

From a designers perspective, this is something that is often done without the use of a map. Generally, you put the navigation up top then bring in a fantastic photo and put a catchy slogan in there followed by a link to convert the viewer into a buyer. Pretty simple formula that has proven to be effective.

However, what if you client has multiple areas of expertise and they are struggling internally to decide which areas carry more importance than others? Maybe the board of directors needs a tool or diagram that demonstrates how a reorganization of priorities may look? This is where an attention map comes into play.

First establish a point value for all goals.

Example point distribution:
-20 points allocated among four goals

Example result:
* product photo and description : 10 points
* features : 6 points
* Other products: 2 points
* News: 2 points

Translated into design this is what would happen. the 10 point item is obviously front and center taking up the majority of the page. The features could fall to the right of this product section since it holds a value of 6. The other items: Other Products and News would fit in below. This is an effective distribution of space that should translate into a good webpage.

In another scenario, the client puts a value of 4 on his main product but then spreads the rest of the 16 points evenly across 8 items. This breakdown divides his page into small parcels which will translate into a boxey and innefective design.

In a nutshell the Attention Map can be a useful way to map out the screen real estate. Additionally, its a great way to show your client that there is logic involved. To create an effective website it takes more than just good design. An effective website is a combination of great design and logic.

TAGS: Web Design