Wireframing for Everyone

The advantage of using vertical navigation as supporting navigation is that it’s familiar and flexible. It’s also compact and can remain visible, unlike a hover menu, so that users can easily see where they are at a glance. When using secondary vertical navigation, make sure that it appears below the primary horizontal navigation. Otherwise, users could mistake it for primary navigation.

One column is better than two. Again, it may seem like a waste of space to not spread form fields across two columns when you have room, but human eyes are used to scanning horizontally before moving downward, so disrupting that process can be disorienting and confusing.

We suggest wireframing your page templates last because they’re the most time-consuming to create and working on them from scratch can be overwhelming. It’s better to let your templates emerge from the process of mixing and matching the patterns you’ve created. Once you’ve wireframed a number of ideas for entire pages, you may see some similarities between them. This is a sign that you can consolidate them into a single template.

Elements of hierarchy There are four design elements that can be used to manipulate visual hierarchy:

			Size. The largest elements on a screen have the most prominence, thus holding the highest position in the hierarchy. Large text or imagery are usually noticed first when positioned in the forefront.

Color. Color affects hierarchy mainly by its presence, or lack thereof. Highly saturated and opaque colors represent primary importance; muted and low-opacity colors represent lower priority in a hierarchy

White space. Elements with more empty or negative space around them are higher in the hierarchy; elements crowded near each other compete for attention

A lack of visual hierarchy interrupts the brain’s ability to scan and home in on areas of interest. But clear visual hierarchy can reduce cognitive load and help users to process information more quickly and effectively

Testing your hierarchy What does the visual hierarchy in your wireframe say? Here are two quick and easy methods for testing the effectiveness of your hierarchy:

			The five-second test. This is an informal usability test, used to determine which elements stand out the most before a person has time to thoroughly analyze the design. Have someone look at the design for five seconds (you can time it!), then ask them what elements they remember from the page. Were they the most important ones? If not, you might want to change something in your visual hierarchy. Think of it as a memory test for interface design.
			The blur test. This test is conducted by intentionally blurring out the design’s content so much that only vague shapes and colors are visible (Fig 4.9). Have someone look at a blurred image of the design and ask them to identify the most important areas on the page. (You can also do this yourself without any preparation—just take a step back from the image and blur your vision by squinting. This version is aptly called a squint test.) If the easiest parts to see aren’t also the most important, change something in your visual hierarchy.