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 ...

Get Designing Web Navigation now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.