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.
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.
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:
Warning: It’s not advisable to yell at a colleague that you sank their battleship when minimizing or removing one of their preferred elements.