Visual Characteristics and Learning Styles: Visual Hierarchy

Visual Path + Learning: A framework of visual characteristics which targets a variety of learning styles.

The processing of visual characteristics has a hierarchy. To better understand what variables influence this visual hierarchy, an eye tracking study was conducted (Faraday, 2000). The main factors were found to be size, scanning, images, text style, and position.

This evidence of how a person processes information on a Web page demonstrates the importance that visual characteristics have in the accurate delivery and understanding of information.

Visual Hierarchy findings: (Faraday, 2000)

Size
• Larger text dominates over smaller; and act as successful entry points.
• Images must be much larger than text to act as an entry point. Don¬ít rely on users looking at images first.

Scanning
• Left-right, top-bottom reading order was found for text & bullets, but not between images, titles or links.
• Discontiguous areas of common background color did not cause sequencing eg subjects did not shift between the left & bottom regions, even if they share a
background color. Use a contiguous, same colored region if content is to be related.

Images
• If text and images are of similar size then text is more likely to be an entry point. One caveat here is image content : logos may not work well. However, also found titles preferred as entry points over images.

Text style
• Text style is secondary to size : normal sized text rarely acted as entry point, even if bold or a hyperlink. Use a larger font for important details.
• Bold and Hyperlink text were looked at for longer than normal text. Use text style to draw out content

Position
• The middle / top of the page seems to be dominant ; the left hand column and bottom are secondary.
• Beware that text at bottom of the screen is rarely seen. Place important content at the top of the page.

Visual Hierarchy example: Adobe in Education

Size
• The page title, "Adobe in Education," is set larger than body text. White space around title also sets it apart.
• The large animated image draws attention first. It also acts as a page title that provides additional information. This information sets the ground for what can be found on the page.

Scanning
• Grey background color is used to contain related information. In this case, the grey contains frequently updated information. The occasional animated image under "Product News" draws further attention to this area.

Images
• The large animated image becomes the page entry point. As well as catching the eye, this animation provides important information about the page's contents. The smaller images help draw the eye through the page.

Text Style
• Equal amounts of white space around paragraphs helps the eye scan for specific information.
• Through underlining only hypertext, the visual qualities of the underline are reserved for a functional purpose, not decorative.
• By making the hyperlinks red, the eye can quickly scan for these areas that lead to additional information.

Position
• The Adobe site reserves the top portion of the page to provide links (navigation) to the content on the current page and links to their main site. (The placement of Adobe's navigation is consistent throughout their site.)