
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?"
|