Design Theory: Human-Computer Interface Design Site Design Page Design MultiMedia Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

What do these things have in common? A Computer Mouse A Touch Screen A program on your Mac or Windows machine that includes a trashcan, icons of disk drives, and folders Pull-down menus Give up? These are all examples of advances in human-computer interface design which were designed to make it easier to accomplish things with a computer. Do you remember the first days of desktop computers? I do. I remember when I had to remember long strings of commands in order to do the simplest things like copy or format a disk or move to a new directory. I don't miss those days! Thank you, human-computer interface designers. (If you want to read about some of the pioneers of human-computer interface design, check out information about Douglas Englebart and Alan Kay.) Human-Computer Interface Design seeks to discover the most efficient way to design understandable electronic messages [1, 2]. Research in this area is voluminous; a complete branch of computer science is devoted to this topic, with recommendations for the proper design of menus, icons, forms, as well as data display and entry screens. This browser you are using now is a result of interface design - the buttons and menus have been designed to make it easy for you to access the web. Some recommendations from this research are discussed below. Note: Many of these recommendations concern the design of computer interfaces like Windows or the Mac Finder or how to make programs easier to use. Some of these recommendations are not so relevant to web design. Still, it is an important area of research, and some of the recommendations relate to any kind of communication between user and computer. Wherever possible, I have included examples more directly related to web design. Shneiderman's Principles of Human-Computer Interface Design: Recognize Diversity - In order to recognize diversity, you, the designer, must take into account the type of user frequenting your system, ranging from novice user, knowledgeable but intermittent user and expert frequent user. Each type of user expects the screen layout to accommodate their desires, novices needing extensive help, experts wanting to get where they want to go as quickly as possible. Accommodating both styles on the same page can be quite challenging. You can address the differences in users by including both menu or icon choices as well as commands (ie. Command or Control P for Print as well as an icon or menu entry), or providing an option for both full descriptive menus and single letter commands. You Should Use the Eight Golden Rules of Interface Design: Strive for consistency consistent sequences of actions should be required in similar situations identical terminology should be used in prompts, menus, and help screens consistent color, layout, capitalization, fonts, and so on should be employed throughout. Enable frequent users to use shortcuts to increase the pace of interaction use abbreviations, special keys, hidden commands, and macros Offer informative feedback for every user action, the system should respond in some way (in web design, this can be accomplished by DHTML - for example, a button will make a clicking sound or change color when clicked to show the user something has happened) Design dialogs to yield closure Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions shows the user their activity has completed successfully Offer error prevention and simple error handling design the form so that users cannot make a serious error; for example, prefer menu selection to form fill-in and do not allow alphabetic characters in numeric entry fields if users make an error, instructions should be written to detect the error and offer simple, constructive, and specific instructions for recovery segment long forms and send sections separately so that the user is not penalized by having to fill the form in again - but make sure you inform the user that multiple sections are coming up Permit easy reversal of actions Support internal locus of control Experienced users want to be in charge. Surprising system actions, tedious sequences of data entries, inability or difficulty in obtaining necessary information, and inability to produce the action desired all build anxiety and dissatisfaction Reduce short-term memory load A famous study suggests that humans can store only 7 (plus or minus 2) pieces of information in their short term memory. You can reduce short term memory load by designing screens where options are clearly visible, or using pull-down menus and icons Prevent Errors - The third principle is to prevent errors whenever possible. Steps can be taken to design so that errors are less likely to occur, using methods such as organizing screens and menus functionally, designing screens to be distinctive and making it difficult for users to commit irreversible actions. Expect users to make errors, try to anticipate where they will go wrong and design with those actions in mind. Norman's Research One researcher who has contributed extensively to the field of human-computer interface design is Donald Norman. This psychologist has taken insights from the field of industrial product design and applied them to the design of user interfaces. According to Norman, design should: use both knowledge in the world and knowledge in the head. Knowledge in the world is overt - we don't have to overload our short term memory by having to remember too many things (icons, buttons and menus provide us with knowledge in the world - we don't have to remember the command for printing, it's there in front of us). On the other hand, while knowledge in the head may be harder to retrieve and involves learning, it is more efficient for tasks which are used over and over again (providing a command key sequence like Control P for Print is an example of this). "make it easy to determine what actions are possible at any moment (make use of constraints)" ([1] p. 188). For example: well-designed things can only be put together certain ways (the trapezoidal SCSI cable is an example of good design - I can only plug it in one way) menus only display the actions which can be carried out at that time (other options are dimmed). "Make things visible, including the conceptual model of the system, the alternative actions and the results of actions" ([1] p. 188). You can provide an overview map of your site so that your user can design their own mental map of how things work. "Make it easy to evaluate the current state of the system" ([1] p. 188). You can do that by providing feedback in the form of messages or flashing buttons. "Follow natural mappings between intentions and the required actions, between actions and the resulting effect; and between the information that is visible and the interpretation of the system state" ([1] p. 188). For example: It should be obvious what the function of a button or menu is - use conventions already established for the web, don't try to design something which changes what people are familiar with. The underlined phrase on a web page is a well-known clue that a link is present. From past experience, users understand that clicking on an underlined phrase should take them somewhere else. "In other words, make sure that (1) the user can figure out what to do, and (2) the user can tell what is going on." ([1] p. 188) Norman's information comes from a book called "The Design of Everyday Things." There is a particularly interesting section on designing telephones which is almost hilarious. He has written a new book called "The Invisible Computer". If you want to read excerpts from this new book, go to: http://www.jnd.org/cv.html#Invisible_Computer Summary How can we relate the recommendations from human-computer interface design research directly to web design? Recognize Diversity make your main navigation area fast loading for repeat users provide a detailed explanation of your topics, symbols, and navigation options for new users provide a text index for quick access to all pages of the site ensure your pages are readable in many formats, to accommodate users who are blind or deaf, users with old versions of browsers, lynx users, users on slow modems or those with graphics turned off Strive for consistency in: menus help screens color layout capitalization fonts sequences of actions Offer informative feedback - rollover buttons, sounds when clicked Build in error prevention in online forms Give users control as much as possible Reduce short term memory load by providing menus, buttons or icons. If you use icons, make sure you have a section which explains what they mean. Make things obvious by using constraints - grayed out items in menus for options not available in that page Make use of web conventions such as underlined links, color change in links for visited pages, common terminology Provide a conceptual model of your site using a site map or an index [1] Norman, D. (1988) The design of everyday things. New York, NY: Doubleday. [2] Shneiderman, B. (1998). Designing the user interface: Strategies for effective human-computer interaction (3rd ed.) . Reading, MA: Addison-Wesley Publishing.   Theory:[Classic Graphic Design Theory] [Gestalt Theory of Perception] [Human Computer Interface Design] Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]