• Text Resize A A A
  • Print Print
  • Share Share Share Share

View all available chapters

11:6 Use Attention-Attracting Features when Appropriate

Relative Importance:

Relative Importance rating of 3 out of 5

Strength of Evidence:

Strength of Evidence rating of 5 out of 5

Document Type: Guideline


Topic:

Text and Styles


Guideline:

Use attention-attracting features with caution and only when they are highly relevant.


Comments:

Draw attention to specific parts of a Web page with the appropriate (but limited) use of moving or animated objects, size differential between items, images, brightly-colored items, and varying font characteristics.
 

Not all features of a Web site will attract a user’s attention equally. The following features are presented in order of the impact they have on users:

• Movement (e.g., animation or ’reveals’) is the most effective attention-getting item. Research suggests that people cannot stop themselves from initially looking at moving items on a page. However, if the movement is not relevant or useful, it may annoy the user. If movement continues after attracting attention, it may distract from the information on the Web site.

• Larger objects, particularly images, will draw users’ attention before smaller ones. Users fixate on larger items first, and for longer periods of time. However, users will tend to skip certain kinds of images that they believe to be ads or decoration.

• Users look at images for one or two seconds, and then look at the associated text caption. In many situations, reading a text caption to understand the meaning of an image is a last resort. Parts of images or text that have brighter colors seem to gain focus first.


Having some text and graphic items in brighter colors, and others in darker colors, helps users determine the relative importance of elements. Important attention-attracting font characteristics can include all uppercase, bolding, italics, underlining, and increased font size.


Sources:

  • Campbell, C.S. & Maglio, P.P. (1999). Facilitating navigation in information spaces: Road signs on the World Wide Web. International Journal of Human-Computer Studies, 50, 309-327.
  • Evans, M. (1998). Web Design: An Empiricist’s Guide. Unpublished master’s thesis. Seattle: University of Washington. Retrieved May 2003, from http://response.restoration.noaa.gov/webmastr/webdesgn.pdf.
  • Faraday, P. & Sutcliffe, A. (1997). Designing effective multimedia presentations. Proceedings of CHI’97, 272-278.
  • Faraday, P. (2000). Visually critiquing web pages. Proceedings of the 6th Conference on Human Factors and the Web. Retrieved November 2005, from http://www.tri.sbc.com/hfweb/faraday/FARADAY.HTM.
  • Faraday, P. (2001). Attending to web pages. Proceedings of CHI 2001, 159-160.
  • Galitz, W.O. (2002). The Essential Guide to User Interface Design. New York: John Wiley & Sons.
  • Hillstrom, A.P. & Yantis, S. (1994). Visual motion and attentional capture. Perception and Psychophysics, 55(4), 399-411.
  • Lewis, C. & Walker, P. (1989). Typographic influences on reading. Journal of Psychology, 80, 241-257.
  • McConkie, G. & Zola, D. (1982). Visual attention during eye fixations while reading. In M. Colheart (Ed.), Attention and Performance XII. London: Lawrence Erlbaum Associates.
  • Nygren, E. & Allard, A. (1996). Between the clicks: Skilled users scanning of pages. Proceedings of the 2nd Conference on Human Factors and the Web. Retrieved November 2005, from http://www.microsoft.com/usability/webconf/nygren.rtf.
  • Treisman, A. (1988). Features and objects. Quarterly Journal of Experimental Psychology, 40(2), 201-237.
  • Williams, T.R. (2000). Guidelines for designing and evaluating the display of information on the Web. Technical Communication, 47(3), 383-396.

Good Example:

The following example displays a picture that serves as an attention getting feature to the accompanying story.11_06_good_example


Related Usability Guidelines: