Effective User Interface Design: The Four Rules
By Kevin Kruse

In last month's column, we looked at the design of user interfaces, which I consider the most neglected topic in the discipline of online learning. We defined the basics of human computer interaction and explored user frustrations that are all too common, unfortunately. This month, we examine four rules that you can apply to new projects to ensure that learners are focused on the content rather than on navigation.

Rule #1: Help them remember.

Chunking information and organizing menu structure
Using what we know about short- and long-term memory, we can apply the following strategies to maximize the effectiveness of a program's menu system.

A menu should ideally have no more than seven items on it. If it does have more than seven, determine whether it can be split logically into a higher-level menu and a submenu. This helps learners remember which menus contain certain items.

The order or placement of menu items should match the structure of the tasks and subtasks. For example, a main menu for a sales training program might list the classic four-step sales call in chronological order:

• Lesson 1: Building Rapport with Customers
• Lesson 2: Presenting Product Information
• Lesson 3: Handling Objections
• Lesson 4: Closing the Deal.

If there is no sequence associated with menu items, place the most commonly used options at the top of the menu and least-used items on the bottom.

Submenus should have titles that reflect the selected option from the previous menu. For example, the submenu described above for "Handling Objections" should maintain those words as the submenu's title. The cleanest way to handle nesting menus is to use expanding menus where the learner never loses sight of the original menu structure.

Using mental models or visual metaphors
A mental model or visual metaphor is the internal picture we create to help us understand how things work. Though we're not conscious of our mental models, they help us to use computers effectively. Designers use visual metaphors to take advantage of what we already know when helping us understand something new.

A good example of a visual metaphor is the directory structure of a computer. While the computer actually stores files and data haphazardly on its hard drive, the visual metaphor presented to the user is that of file folders and a vertical ordering system. This metaphor gives an artificial but clear sense of order to the system. As users we imagine that our documents are being held in these little folders, and that there is some kind of depth to them.

Mental models and metaphors, however, are still subject to short-term memory restrictions. Most users begin to get lost when their model contains more than three layers or paths. Imagine a training program that has a main menu (the first level) from which students gain access to a specific lesson (the second level), and eventually click on a More Information hyperlink, which displays some additional text (the third level). At this point, most users will still have a clear understanding of where they are in the program, and how to retrace their steps, if necessary. But if they are again presented a link for more information, such as a case study from within the More Information section, they will begin to lose track of their location or the relationship of the onscreen content to the overall lesson.

Using multiple access points
A simple way to relieve the burden on users' memory is to provide multiple ways to locate and access the content. Common methods are described below.

• Main menu. The primary access point is always the program's main menu, which should be well organized and descriptive. Rather than using generic names, such as Lesson 1 and Lesson 2, use descriptive headings such as "1: Overview to Customer Service" and "2: Dealing with Difficult Customers."
• Index. An index of key topics or all learning objectives helps users find specific information. A well-indexed system will enhance any training program's subsequent use as a just-in-time support tool.
• Keyword search. The keyword search enables users to type a word and have the program scan the entire text for all occurrences. While a powerful feature, a keyword search only looks at onscreen text and cannot identify information presented as audio narration or in pictures.
• Site map or content map. A visual representation of the order of the topics in the program, or content outline, is called a site map. Typically, it displays the entire menu system graphically, extending down to individual learning objectives.

Rule #2: Put the user in control.

• Loading delays. If a computer is busy for longer than three seconds, the program should display what's called a status message. If the delay is due to bandwidth limitations, there is little you can do to forewarn the user. However, if you're using streaming media or Flash animations, you should anticipate the preloading delay and provide a warning message of some type. This message alleviates users' concerns that the computer may have "frozen." Though the message in itself doesn't provide control to the user, the communication helps them to feel that they're still in control.

• Taking a test. Final exams are often timed and intentionally prevent learners from leaving the test module until they're finished with the test. This kind of program control is designed to keep users from looking for correct answers in the lessons. Before the test is started, a confirmation message should appear that advises the student, "You are about to begin the test. Once you start this test you will have to finish it in one sitting. You will not be able to take the test again. Are you sure you are ready to take this test now?" Action buttons should be clearly labeled Take Test or Return to Main Menu.

• Previous page. Perhaps the most obvious undo feature is the Previous page button or Back button in a linear tutorial. In addition to giving learners the control to move forward in a program, an effective interface also enables them to move back to a previous page.

Rule #3: Use consistent and logical designs.

Clear and logical screen layouts
An intuitive interface begins with the overall layout and design of the screen. Four principles of screen layout include the following:

• Place screen objects together in a logical order.
• Place buttons where the user's eye can easily find them.
• Give buttons clear symbols or labels.
• Group buttons together based on their function and frequency of use.

Web-based training programs often have navigation bars running vertically down the left side of the screen, or horizontally across the top of the screen. This is because scrolling text windows are a common user interface element on the Internet, making horizontal buttons on the bottom of the screen--which are standard on CD-ROM programs--impractical. Buttons should always be given clear labels, with both text and graphical indicators, if possible. Common button-naming rules include

• Use Menu to label the button that accesses the main menu. Don't use the ambiguous Main.
• Use Help to access navigational guidance. Don't use Hint or Panic.
• Use Exit to end the program. Don't use Quit, End, or Stop, which might refer to quitting the immediate exercise or lesson.
• Use Forward or Next and Back or Previous to designate page turning. Don't use Up or Down.
• Use complete screen counters, such as "1 of 30," not partial counters, such as "Page 5," that don't indicate how much longer the lesson will last.
• If your program runs on Windows, refer to the keyboard Enter key as Enter, not as Return.

Consistency in visual cues
Early seafaring explorers used celestial navigation to make their way across the high seas. Like the North Star, the buttons your students use to navigate should never change in their appearance or location on the screen. Button identification is a fundamental part of a mental model. Changing a button's location or appearance will cause users to think they're seeing a new button with new functions.

Menus that behave predictably
Menus are the key structures for organizing and accessing information and must be planned with great care. In addition to logical sequencing and having no more than three layers of menus (see Organizing Menu Structure above), the menu action must be consistent throughout the program. When a user clicks on a menu item, similar actions must occur for each item on the menu. Main menu items that are clicked can lead to submenus, or the buttons can directly launch a lesson or simulation. But don't mix the two actions on the same menu. For example, if clicking "Module 1: The Cardiovascular System" launches a submenu, but clicking "Module 2: The Nervous System" launches a 30-screen linear tutorial, students can get confused. They may think "Oops, where is that submenu? Did I accidentally click something to launch this tutorial?" or "What's going on? Will I get to the submenu after this tutorial?"

Rule #4: Provide informative guidance and feedback.

Page counters
Every linear tutorial should have an onscreen page counter that tells users which screen or page they're on and how many more are in the lesson. A simple message such as "Screen 5 of 25" clearly describes what's required to finish the lesson in the program and engenders learner confidence. With self-paced programs that can be taken at any time, this type of progress marker helps users answer such questions as, "I have a meeting in 15 minutes--can I finish this lesson or should I quit now?"

Some designers recommend using time estimates rather than page counters. For example, "Lesson 1: Overview (10 to 15 minutes)." However, estimating the time needed for self-paced training is difficult. Be aware that although a range is given, some learners may feel anxiety from the implied time limitation.

GUI evaluation checklist

Do all buttons and icons have a consistent and unique appearance?
Are visual cues, such as mouse cursor changes and rollover highlights, used on all buttons consistently?
Are buttons labeled with text descriptions (or with rollover text)?
Do buttons "gray out" or disappear when they’re inactive?
Do nonbutton graphics have design properties distinct from that of buttons?
Are navigation buttons displayed in exactly the same screen position every time they appear?
Are buttons grouped logically and located where the user is likely to be looking?
Do users have one-click access to help, exit, and the main menu?
Are users returned to where they left off after closing the help window and canceling the exit screen?
Does every menu have a title?
Does every menu screen include an option to return to the previous or main menu?
Are there fewer than three levels of menus?
Do menus have seven or fewer items on them?
Are items on menus descriptive rather than general?
Are menu items listed in a sequential or logical order?
Do menus indicate which items a learner has completed?
Are confirmation messages used in such areas as student registration, exit, and final exams?
Are there clear instructions associated with menus, questions, and other tasks?
Are error messages written in plain language?
Are status messages displayed during delays greater than four seconds?
Are exclamation points and sound effects used sparingly?
Is there a bookmarking feature that enables users to exit and resume later where they left off?
Can users move backward and forward in linear tutorials?
Are page or screen counters used to show progress in linear lessons?
Is the visual metaphor consistent and intuitive in nonlinear simulations?
Are all pop-up windows positioned on the screen so they don’t cover up relevant information?
Does text appear clearly and with normal margins and spacing?
Do information input screens force all capital letters, and is input evaluation case insensitive?
Can users interact with the program from either the keyboard or the mouse?
Are text fonts used consistently?
Are audio volume levels consistent?
Do users have the option to replay video or audio narration?

Published: June 2000