Questions? (877) 643-7244
FutureNow Article
Monday, Sep. 10, 2007

Revenge of the Pixels: The Battle for Screen Real Estate

By Bryan Eisenberg
September 10th, 2007

Designing web pages is challenging. Unlike almost any other media, a web design’s integrity is compromised by the nature of a fluid medium. In other words, just because you want something to look a certain way doesn’t guarantee it will — differing browsers, resolutions, screen sizes, monitor calibrations and operating systems all distort the experience.

The one good habit I’ve picked up over the years: learn to compromise. Compromise, however, should be done intelligently and accountably.

One of the more contentious issues in web design presents itself when deciding where specific elements should go and how much space they should occupy. This is especially true in cases where politics (read: Who’s the most important person in the room?) rules. In print, such as in catalogs, they often look to cost and revenue per square inch. We’ll do something similar.

Battleship Grid for Dell pageA popular technique we’ve developed over the years for removing politics from these important decisions is the Battleship Grid. The Battleship Grid is where you divide a page into a grid of horizontal and vertical lines of approximately equal size. (I’ll explain why it’s approximate shortly.) The main purpose for using this tool is to spark conversation. Click on the thumbnail image to see an example for a page from Dell.com.

How does the Battleship Grid work?

Let’s say you’re reviewing a page at 1024 x 768 resolution. Using Photoshop or an equivalent graphics program (or have your designer do this for you), work across the page, draw vertical lines up and down the screen. Create 10 rows, labeled “A” to “J”. Then, start drawing horizontal lines across the page. The first horizontal line is right underneath the top navigation. (Do this because your visitors are already subconsciously focusing on the center area, or “active window”. This is why I said “approximately equal size” above). After creating this line, add lines every 10 pixels, labeling them “1″ to “8″.

In Photoshop, add a layer where you can overlay the grid with different colors at 30% opacity (just enough so that they are visible and you can see the elements behind them on the page). Next, begin to assign values to the different areas of the grid. The values assigned to each of the shaded regions aren’t absolute; they’re relative values, and should be considered rough guidelines. You can follow what I set out in my example. I came up with these values, for the sake of simplicity, based on certain eyetracking, design composition, and vision physiology guidelines.

battleship grid active windowThe area I assign the highest “value” to is the “active window” (see thumbnail). As Jakob Nielsen pointed out as early as January of 2000, “For almost seven years, my studies have shown the same user behavior: users look straight at the content and ignore the navigation areas when they scan a new page.”

Every eyetracking study in which I’ve participated has shown the exact same visitor behavior. It’s also important to understand human physiology and how the eyes view a page. Any artist who’s studied composition knows the “Rule of Thirds“. It’s a good guideline for understanding how people’s eyes naturally take in what they see, so you know where to place things yow wish to draw attention to naturally.

This, by the way, is why it’s so important to test your headlines; it’s usually the one thing virtually everyone sees on your page. Make it count.

How do you use the Battleship Grid?

Take a screenshot of the page in question at a 1024 x 768 resolution. Overlay this grid on top of it. Then, work with your team to agree to the values assigned to differing zones. Review elements in the high-value real estate zones. This is all about deconstructing size, design, and placement of elements for maximum impact.

For each design element, ask yourself:

Now, take another look at the Dell.com Battleship Grid. What are your observations of the design? Are they under-utilizing any areas?

Limitations: Please be careful with this tool. It’s not meant to be scientific. It’s much better than the absence of not designing with any accountability. Depending on your design, you can skew how visitors engage with the site by using:

  • strong, contrasting colors — You may have a form you want filled out in the right-hand column with, say, a monochromatic design, or one with minimal color compared to the rest of the design. If so, try placing a color-shaded background behind the form to make it stand out.
  • a powerful image or by image placement — Most eyetracking heatmaps show that visitors spend virtually no time looking at loosely framed “lifestyle” images (e.g., a picture of executives shaking hands over a conference table). On the other hand, having a single closeup image of someone’s face can draw a lot of attention — especially when it’s above the fold. Keep in mind, if you use this technique, the person in the image should have their eyes facing the action — or content — you want them to focus on. Never have the subject looking straight at the visitor. It will distract them.
  • different column widths — The active window for people who read left-to-right begins just beyond where the left-hand column ends. If there is no left-hand navigation, make sure to have enough empty “buffer” space from the browser for visitors’ eyes to settle.
  • bigger text for headlines and larger-sized versions for key visual elements — Make sure the copy is formatted for people to scan and skim. Have headlines and sub-headers that stand out next to the body text.

Warning: It’s not advisable to yell at a colleague that you sank their battleship when minimizing or removing one of their preferred elements. ;)

Add Your Comments

Comments (22)

  1. [...] Dans un même ordre d’idée, le site GrokDotCom nous propose un autre article très intéressant : Revenge of the Pixels: The Battle for Screen Real Estate. [...]

  2. Revenge of the Pixels: The Battle for Screen Real Estate…

    Designing web pages is challenging. Unlike almost any other media, a web design’s integrity is compromised by the nature of a fluid medium. In other words, just because you want something to look a certain way doesn’t guarantee it will — differing b…

  3. Great concept– the “Battleship Grid.” We all kind of do it subconsciously anyway, but this forces us to articulate WHY and HOW we prioritize the various “pet projects” everybody and his or her brother wants to shoehorn onto the home (or other) page.

    I especially like the acknowledgment that these decisions are often made based on political criteria. As you said, far too often it’s about “who’s the most important person in the room,” and more importantly– what’s his or her favorite color?

  4. [...] Give them enough space, and combine relevance with scent to lead them in the right direction. (Use the battleship grid to protect the Early Bird from winding up in irrelevant worm [...]

  5. I’ve seen this concept over and over again. Just like certain colors are “stop” or “go” colors, we all tend to behave in certain ways.

  6. [...] "Revenge of the Pixels: The Battle for Screen Real Estate" — [...]

  7. [...] The reality is, every pixel is important. One of the best ways to make every pixel count in your web design is to use the battleship grid described by Robert Gorell at Future Now: Revenge of the Pixels: The Battle for Screen Real Estate [...]

  8. [...] Revenge of the Pixels: The Battle for Screen Real Estate [...]

  9. [...] You can read the rest of the “Revenge of the Pixels: The Battle of Screen Real Estate” [...]

  10. [...] requires users to log in if they're to see it. Also, the used book marketplace gets much more screen real estate. They're also heavily promoting the A9 Search [...]

  11. Oh… I don’t know about this “Battleship Grid”. Thank you for this new experience to understand much more about webdesign and business ;)

    Ralph

  12. Battleship Grid…very impressive, you guys really break it down. I’m in the middle of creating a new real estate site and I’m going to print this blog post out to help guide me through.

  13. [...] peripheral information.  So keep your important information, calls-to-action, and controls in the center window, otherwise, visitors may not see them in their “fast-forward” movement through your [...]

  14. I never knew that people designed like this – this a cool concept and I think I’m going to have to Google into finding out more about this “eye tracking”

  15. The major factor of design is the use of contrasting colors, text size- appropriate to the Image size. Among the design concept I never go through Background color so prefer it to be white. But yes about Width of different column, and column lines in bold form is preferred in designing.

  16. [...] requires users to log in if they’re to see it. Also, the used book marketplace gets much more screen real estate. They’re also heavily promoting the A9 Search [...]

  17. [...] elements. Ensure each is visually “available” to the visitor. You may want to use the battleship grid layout concept I’ve shared in the [...]

  18. [...] Bryan Eisenberg’s post on Revenge of the Pixels: The Battle for Screen Real Estate [...]

  19. Nice information about Battleship Grid. It’s now clear in my mind i check it in google for further information. thanking you.

  20. Web designing is really a hard task to do. There are really lot of thing you’ll need to consider when designing. It is also good that you test your site on different type of computer and browsers. So that you’ll know if there are problems will exist.

    Your article is really amazing.

  21. [...] [...]

  22. [...] [...]

Add Your Comments

 

Print this Article
Share

Bryan Eisenberg, founder of FutureNow, is a professional marketing speaker and the co-author of New York Times and Wall Street Journal bestselling books Call to Action and Waiting For Your Cat to Bark and Always Be Testing. You can friend him on Facebook or Twitter.

More articles from Bryan Eisenberg

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: