Windows Title Bars

Problem

An application spawns multiple windows in the application, each potentially containing complex content that needs to be organized in a hierarchical manner so the user can understand the flow of the application.

Solution

Organize the content into sections with visually strong title bars - all within a single application window.

HTML code here
	

CSS code here
	

Why

An application that spawns many windows, or panels, creates such pitfalls as duplicate navigation, broken back button functionality, and general confusion. A single window for the application prevents users from getting lost within multiple browser windows. Within that window, the application's information architecture may be clearly defined through panels with title bars.

Well-defined and well-named sections with prominent title bars helps structure the content into easily understandable bits of information which is understandable at a glance. The human visual system looks for larger patterns, intentionally or not. This approach helps guide the user's eye more comfortably along a page.

How

For titles, use typography that stands out from the rest of the content - bolder, larger point size, stronger color, different font family, outdented text, etc. Additional options include increased white space around the title bars or reversing title bar text against a colored background.

Examples