Design for Usability

Noise Impairs Usability Images This section deals with two graphics usability issues: image maps and animated GIFs. It is true that a well-chosen picture can be worth a thousand words; however, ambiguous icons and dancing artwork do little to further the communications effort. Moreover, Feedback - sending back to the user information about what action has actually been done, what result has been accomplished - is a well-known concept in the science of control and information theory. Donald A. Norman, The Design of Everyday Things It is exactly this communications concept (user feedback) which is missing when a web site uses imagemap navigation to the exclusion of all else. In addition, graphical image maps are often obscure, resulting in trial-and- error, hit-or-miss navigation. This is in part because users have become accustomed to text navigation and the fact that "visited" links are a different color from "not-visited" links. Anecdote: Working late in a headquarters building of a Fortune 500 company in February, I encountered an off-site employee using an empty workstation. I asked about his familiarity with the internal project I was working on, and he began cruising the company intranet. This was a fairly sophisticated computer user; however, he clicked on an image map to move forward into the intranet site and returned to the start page with the map. He then turned to me and said, "Why didn't it (the image map) change color?" The other issue surrounding image usability is the plethora of animated GIFs sprouting on web sites like bunny rabbits. Like its cousin, the blink, animated GIFs are annoying and often operate counter to the assumed goal of "attention-getting." In general, animations draw the user's eye away from the text, headlines and other material designed to communicate a message. And anything that increases eye movement ­ including too many graphics, random placement of text and graphics or overly long lines of text ­ leads to decreased communication. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text! - Jakob Neilsen, Sun Animations also tie up bandwidth and can affect browser usability by blocking the information about link URLs which show in the browser's footer. However, used judiciously and with forethought, animations can be stimulating and contribute to a web site's mood. For example, the home page of the Ray Charles web site features animation that sets the tone for the remainder of the site. Recommendation: to insure maximum site usability, include text-style navigation as a complement to any imagemap based navigation and avoid gratuitious animations. Web site examples: Retail Alphabet Game For those who need convincing about the power of graphics and association, pay this site a visit. It is a clever use of graphic design ­ the alphabet has been created using one letter each from 26 retail logos. Union Camp The lawyers won in this communications battle; check out the disclaimer at the foot of the home page. Here the images are very large and do very little to contribute to visitor information ­ there is a 75K image map on home page and an 118K header on the paper section. Agriculture and Life Sciences Research Information This is a basic design; however, the home page has an animated lines and very large photos that need captions. Inside the site, the designer has underlined some titles. Some of the background colors are neon green, making the information hard to read. Kinko's Competing animations: where should the eye (or mouse) land? Ray Charles Online It is graphics heavy , but it's an excellent example of a site that knows its audience and says, ok, we can't reach everyone with our message. Excellent use of animated GIFs on the opening (splash) page. This is a site as visual and auditory entertainment. Previous Section, Backgrounds Next Section, Frames This paper is part of the Tips & Tools portion of the dotParagon web site. dotParagon Home ||| Tips & Tools Index