UI Patterns and Techniques

Center Stage

From Microsoft Money
Use when:	The page's primary job is to show coherent information to the user, or enable them to perform certain tasks -- in other words, any information-centered or task-centered interface. Tables and spreadsheets, forms, Web pages containing textual content, and graphical editors all qualify.
Why:	The user's eye should be guided immediately to the start of the most-important information (or task), rather than wandering over the page in confusion. An unambiguous central entity "anchors" their attention. Just as the lead sentence in a news article establishes the subject matter and purpose of the article, so the entity in center stage establishes the purpose of the UI. Once that's done, then 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 this relates to that, etc.
How:	Establish a visual hierarchy with the "center stage" dominating everything else. Consider these factors, though none of them are absolutely required: Size. The center-stage content should be at least twice as wide as whatever's in its side margins, and twice as tall as its top and bottom margins. (The user may change its size in some UIs, but this is how it should be when the user first sees it.) Color. Use a color that contrasts with the stuff 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. In the above example, the eye is drawn to the big text at the top of the page. That happens in print media too, of course. See Titled Sections for more details. Context. What does the user expect to see when they open up the page? A graphic editor? A long text article? A map? A file system tree? Work with their 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 the user by hiding what they're 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 one traditional layout factor was not mentioned: 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. 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. The name of this pattern came from a paper authored by P. R. Warren and M. Viljoen.