O'Reilly logo

Designing Web Navigation by James Kalbach

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

VISUAL LOGIC

People make sense of web pages very quickly based on layout, even before they start reading any text. Consider, for instance, the recent practice of providing thumbnail images of home pages in search results, such as with the Alexa search engine (www.alexa.com, Figure 9-3). And technologies such as the Snap preview plug-in for Firefox allow site owners to give a page preview for any external link on a site (www.snap.com, Figure 9-4).

Thumbnail images of web pages in Alexa search results

Figure 9-3. Thumbnail images of web pages in Alexa search results

The Snap preview plug-in for Firefox

Figure 9-4. The Snap preview plug-in for Firefox

Such small images provide little or no textual information themselves. Yet, visitors can identify a great deal about a site just from its basic layout—even in miniature form. People are able to recognize sites they already know immediately. With unknown sites, people may be able to deduce the genre (e.g., this is a news site, that's a blog) from just the thumbnail image. This provides additional cues that help with orientation.

When it comes to navigation, where it's located on the page and how it appears indicates its function. Navigation mechanisms should therefore work together as a logical visual system, along with all of the other page elements. Creating a consistent visual system aids in predictability and eases reorientation ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required