Design Theory Site Design Page Design Screen Design Research: Icons, Buttons & Menus MultiMedia Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

In both multimedia and web design, great attention is paid to the navigation interface, the means by which users are able to navigate from one location to another. In many treatments, navigation is initiated by using icons, buttons or menus. Rules for Buttons, Boxes and Menus: Buttons, radio buttons, check boxes and menus should look like something you would normally press, click, put x's in, or pull down [3, 4]. HTML includes special routines which draw radio buttons, check boxes and pull down menus for you. The design of buttons is a bit trickier, since you have to draw your own graphic and make it look like a button (bevelled edges give the 3D effect which makes a graphic look like something you would press). Give the user some feedback that execution is occurring after a button is pressed. This was much harder in the past, but with the addition of Javascript to the newer web browsers, icons will flash or change color when pressed, giving the user the sense that something may happen. There are many sources on the web for buttons which are already designed. Here are some suggestions:  Jelane's Web Graphics Andy's Art Attack -Buttons Reallybig.com Netscape's Tool Chest - Buttons Icons Icons can be very useful when designing navigation aids, but they also have their pitfalls. Advantages of icons include: to help users work smarter by improving productivity and reliability (road signs can read at twice the distance and half the time as word signs (Horton, 1994)) to represent visual and spatial concepts such as shape, color, position, angle, size, texture, and pattern to save space in crowded screen displays to speed search (we can recognize icons much more quickly that reading a list of words) for better recall and immediate recognition (Both Braden and Horton cite studies where graphic recall is close to 100% accurate[1, p. 498; 2, p.5); to allow illiterate or semi-literate users to function more easily to increase global access to your web page or multimedia product. On the downside, it is very challenging to design icons - the constraints of a very small space make it difficult to convey a message (especially a concept as opposed to a concrete operation). As Horton states: "Obscure icons make computer screens look like the control panel of an alien spaceship. Gaudy, garish icons make them look like a piece of "refrigerator art." [2, p. 15] Shneiderman includes the following guidelines for the use of icons: represent the object or action in a familiar and recognizable manner limit the number of different icons make the icon stand out from its background consider three dimensional icons; they are eye-catching but also can be distracting ensure that a single selected icon is clearly visible when surrounded by unselected icons make each icon distinctive from every other icon ensure the harmoniousness of each icon as a member of a family of icons. [4, p. 208] Here's a link to some prepared icons: IconBazaar [1] Braden, R. (1996). Visual literacy. In D.H. Jonassen (Ed.), Handbook of Research for Educational Communications and Technology . New York: Simon and Schuster Macmillan. [2] Horton, W. (1994). The icon book: Visual symbols for computer systems and documentation. Toronto, ON: John Wiley & Sons. [3] Norman, D. (1988) The design of everyday things. New York, NY: Doubleday. [4] Shneiderman, B. (1998). Designing the user interface: Strategies for effective human-computer interaction (3rd ed.) . Reading, MA: Addison-Wesley Publishing.   Screen Research: [Screen Grid and Layout [ [Line Length] [Screen Density] [Font Selection & Leading] [Icons, Buttons, & Menus][Color] Page Design:[Multimedia & Web Page Design Principles] [Screen Design Research] [Screen Resolution & Size] [Writing Style] Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]