e-Learning Guru Logo

home | site map 
Send us a note 

Dashboard elearning tab Events Calendar


Subscribe FREE to the monthly
e-Learning Guru
newsletter!

Your work e-mail:




Sample Issue #1
Sample Issue #2

I value your privacy. I will never rent or sell your e-mail address. You can always unsubscribe with one-click.

Google Search

WWW
e-LearningGuru


Beginner Basics
Designing e-Learning User Interfaces Part 3: Logical and Consistent Screen Design
     by Kevin Kruse

Users can quickly learn a new visual metaphor or a new mental model, but they also quickly create expectations that the interface they see will be consistent.

Everyday we create expectations in our physical environment. Imagine, for example, that you are walking down a long hallway in a building and you must pass through several doors. When you get to the first door you won't know whether to pull it or push it open, unless it is clearly marked. You grab the handle and pull but the door doesn't budge, so you push and it opens. When you get to the second door you notice that it seems identical to the door you just passed through. Perhaps unconsciously you push the door first this time, and again it opens.

As you approach door after door, your mind creates a model and expectation of how the doors will behave: "Door has same shape, size, color, position, and handle as previous doors. I need to push this door open." A problem occurs, however, if the interface is inconsistent, and conflicts with your expectations. If the tenth consecutive, identical door is a pull door, and you push it but it doesn't open, you will probably feel frustrated and a bit confused. You may wonder quickly, "What's going on? Is this door locked or stuck?"

A program's interface is the door between the student and the instruction. In order to facilitate access and reduce confusion, consistency in interface appearance and behavior are paramount.

Use Clear and Logical Screen Layouts

An intuitive interface begins with the overall layout and design of the screen. Four principles of screen layout are:

  • 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.

It is usually assumed that users in western countries "read" the screen in a "Z" pattern from left to right, and from top to bottom. Given the Z-pattern of reading, the proper layout of information becomes obvious. The top of the screen should include location information, and any critical instructions that can't be missed. This information will immediately fulfill users' need to know where they are and what the screen is about. Instructional material should dominate the middle portion of the screen. A navigation bar should appear on the bottom of the screen.

Web-based training programs often have navigation bars running vertically down the left side of the screen. This is because scrolling text windows are a consistent user interface element on the Internet, making horizontal buttons on the bottom of the screen impractical. In some cases, technical limitations related to the use of frame technology hinder ideal button placement.

Buttons should always be given clear labels, with both text and graphical indicators, if at all 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 at hand.

  • Use "Forward" and "Back" to designate page turning - as in a book. Don't use "Up" or "Down."

  • Use complete screen counters like "1 of 30," not partial counters like "Page 5."

  • If your program runs on MS-Windows computers, refer to the keyboard Enter key as "Enter," not "Return."

Be Consistent 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 navigate with 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 are seeing a new button with new functions. As an extension of this design principle, on-screen graphics that are not intended to be buttons should not have any of the same design characteristics of buttons.

The most obvious way to indicate to a user that an action can be taken is to use a three-dimensional button. But other cues also indicate that an object is clickable, most notably a change in the mouse cursor, or by using a roll-over effect.

By default, the mouse cursor appears as an arrow, but a program can change the arrow into a hand when the mouse is rolled over a clickable object. If this extra guidance is provided, however, it must be done consistently for every clickable object. If the user sees what appears to be a button, but when they roll the mouse cursor over it and the hand doesn't appear, they will be confused.

Similarly, buttons and icons sometimes have a "roll-over effect" in which they glow or brighten as the mouse cursor rolls over them. Again, this is an excellent cue to students that they have located a clickable item, but then all clickable objects should have the same visual effect.

Use Clear Messages and Be Consistent in Media Choices

Consistency and clarity is important for all information presented, whether text, audio, graphics, or video; new information or feedback. Indirect, confusing, or pedantic messages are misleading and should be avoided.

Consider this vague and alarming log-in feedback:

  • Data Error! You used an invalid ID format. Correct format is xxx-xx-xxxx.

Now look at the improved version of the same message below. It uses polite language, avoids computer jargon (e.g., "data") and gives a more clear numeric example:

  • Please re-enter your employee ID number using this format: 123-45-6789.

Although some designers claim that adult learners should never be told they are wrong because they may become discouraged or feel challenged, adult learners appreciate honest and direct feedback.

Consistency in use of media is important as well. If audio narration is the primary learning media in a linear tutorial, it should be used on every screen. If students encounter a text-only screen, they wait for the audio to begin. When they hear nothing, they may assume that there is a glitch in the software, or that they have done something wrong. Similarly, if a video-based coach provides feedback to questions, the feedback should be used consistently or the student may wonder why their coach suddenly left them stranded.

Have Menus 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, the menu action must be consistent throughout the program. When the student clicks on a menu item, similar actions must occur for each item on the menu.

Main Menu items that are clicked can lead to sub-menus 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 sub-menu but clicking "Module 2: The Nervous System" directly launches a 30-screen linear tutorial, students can get confused. They may think "Oops, where is that sub-menu? Did I accidentally click something to launch this tutorial?" or "What's going on? Will I get to the sub-menu after this tutorial?"



© 2002 - 2004, Kevin Kruse