Center Stage

Once that's done, the user will assess the stuff in the periphery in terms of how they relate to what's in the center. This is easier for the user than repeatedly scanning the page, trying to figure it out -- what comes first? What's second? How does this relates to that? And so on.

• Size. The Center Stage content should be at least twice as wide as whatever is in its side margins, and twice as tall as its top and bottom margins. (The user may change its size, but this is how it should be when the user first sees it.)

• Color. Use a color that contrasts with the information in the margins. In desktop UIs, white works well against Windows gray, especially for tables and trees. As it happens, white often works in web pages too, since ads and navigation bars usually use other colors as their backgrounds; also, Web users have been trained to look for the plain text on a white background.

• Headlines. Big headlines are focal points, and can draw the user's eye to the top of the Center Stage. That happens in print media too, of course. See Titled Sections for more on headlines and focal points.

• Context. What does the user expect to see when she opens up the page? A graphic editor? A long text article? A map? A filesystem tree? Work with her preconceptions; put that in center stage and make it recognizable. The user will look for it -- this trumps all other rules about visual perception. (But it doesn't mean you can frustrate her by hiding what she's looking for! Some Web sites put their main content so far down the page that it's "below the fold" in short windows, requiring the user to scroll down to find it. That's just sadistic.)

Notice that I did not mention one traditional layout variable: position. It doesn't much matter where you put the center stage -- top, left, right, bottom, center, all of them can be made to work. If it's big enough, it'll end up more or less in the center anyway. Keep in mind that well-established genres have conventions about what goes into which margins -- e.g., toolbars on top of graphic editors, or navigation bars on the left sides of web pages. Be creative, but with your eyes open.

If you're in doubt, take a screenshot of the layout, shrink it down, blur it, and ask someone where on the page they think the main content should start.

(Note: The name of this pattern came from a paper authored by P. R. Warren and M. Viljoen.)

Most blogs tend to have cluttered layouts; it's a rare blog that sets its main content into a strong center stage. Take a look at this screenshot. The ads and other marginal content do attract attention, but the middle column, containing the blog entry, is very wide in comparison. It also starts close to the top of the screen -- the header is blessedly short. The eye is drawn easily to the top article.

To drive home the point, look what happens when the major page sections are abstracted out as plain rectangles. It may not look very wide in the screenshot above, but that center column is over three times as wide as the lefthand column of ads. It needs that much width to compete with the ads' flashy colors and contrast.

Google Maps is a clean, uncluttered interface. The map easily takes Center Stage by using size and color; it occupies most of the window, and it's colorful, in contrast to the white-background tools at the top and right.