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.

A 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.

The 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:

• How much space does it occupy? Should it take more or less?
• What calls to actions are there? Are they obvious?
• Can it hold its own weight? Should some elements be moved to maximize effectiveness?
• Do the visual elements attract the different personality types?
• (You can also gray out anything customer’s don’t actually care about and ask these questions again.)

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.