Usability applied to e-learning

Usability applied to e-learning
By Elias Valenzuela
evalenzu@gmail.com

The purpose of
this
presentation, is
to help you
understand the
importance of
applying
usability
principles at
the course
design level
when creating
e-learning, to
avoid usability
problems that
could affect the
learner’s
experience.

Human-computer
interaction is the default
mode of interaction in
e-learning, so we can
assume that when
evaluating usability of
e-learning courseware
we can apply identical
procedures that apply
when evaluating web
pages or computer
applications.
In our specific case,
what makes e-learning
different is its purpose,
that is to teach, to show
information that is
meant to allow
somebody to learn
something.
Software
Web e-learning
e-commerce
Human-computer
interaction

Content
development
Subject
matter
expert
Courseware
engineering
Graphic
design
Instructional
design
This is an attempt to
focus the
development of
educational materials
towards the user
experience.
Instructional
designers do not need
to be usability
experts, but having a
basic knowledge is a
plus to ensure that
usability guidelines
will be observed
throughout the design
process.

Learner
mental
processing
capacity
Cognitive
connections
Functional
connections
Using an e-learning
program means
making cognitive
connections
Doing this cognitive work
of learning, requires
mental energy on the
learner.
The thinking effort should
be directed to the content
better than to decode
information that is
presented in a way not
easy to understand or to
deal with the navigation.
If making functional
connections can be
cognitively effortless,
those cognitive resources
are made available for
the real work that is
learning.

Usability is defined
by 5 quality
components:
Ability for users to save time in their work
once they have learned the systemEfficiency
Users’ overall feelings about the system.
Is it pleasant to use?User satisfaction
Ability for users to learn the system easily
Learnability
Ability for users to come back to the
system and remember how to use it once
they have been away from it for some
time
Memorability
DefinitionUsability components
(Jakob Nielsen's Definition of Usability)
How many errors do users make, how
severe are these errors, and how easily
can they recover from the errors?
Errors
Usability enables
learners to
concentrate on
their tasks, rather
than on the tools
they use to
perform their
tasks.

(Shackle, 1991; Nielsen, 1993; International Organization for Standardization [ISO] 9241-11, 1998; International Organization for Standardization, 1992)
Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attitude & Satisfaction
Attractiveness
Usability Attributes in the E-Learning Context

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The e-learning instructional
system is effective when the
e-learner completely
accomplishes a given task with
accuracy and precision.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The e-learner becomes efficient
in using the e-learning system
after having gained adequate
skills and ability to perform a
given task, which can lead to
improved productivity.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The e-learning system is fully
adaptable to variation and
changes in tasks. The e-
learning system allows the e-
learner to become accustomed
to changes that are given in
various tasks.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The e-learner learns the
system in a short time and can
easily start accomplishing
tasks.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
When returning to the system,
the e-learner remembers how
to use the system without
reiterating the learning cycle.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The e-learner is able to and
has rights to operate and
control the e-learning system
with ease.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The e-learner easily
understands the aptness of
the e-learning system in
accomplishing a given task.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The degree of satisfaction of
the e-learner's approval,
pleasure, happiness,
fulfillment, contentment,
agreement, liking, comfort,
appreciation, and enjoyment of
or with the e-learning system.

Effectiveness
Efficiency
Flexibility
Learnability
Memorability
Operability
Understandability
Attractiveness
The ability of the e-learning
system to attract and draw
the e-learner's attention. It
also addresses the aesthetic
satisfaction that the system
provides to the user.

Heuristic evaluation
A way to find usability problems
…before going to the user.
Heuristics help us focus our
attention on issues that would
affect the behaviour of the user.
Instructional designers can use
these guidelines during the
earliest stages of the design
process.
We are going to review two sets of
heuristic evaluations:
Nielsen’s heuristics
Rolf Molich and Jakob Nielsen developed a set of
heuristics that are probably the most used in the
field of interface design. Nielsen later, after
evaluating several sets of heuristics, came up
with a better set, that is the one presented
here.
Gerhardt-Powals’ cognitive
engineering principles
Gerhardt Powal’s are heuristics specifically
designed to evaluate learning systems and
emphasizes the cognitive demand levels.

Visibility of system
status
1
Match between system
and the real world2
User control and
freedom
3
Consistency and
standards
4
Error prevention
5
Recognition rather
than recall
6
Flexibility and
efficiency of use
7
Aesthetic and
minimalist design
8
Help users recognise,
diagnose, and recover
from errors
9
Help and
documentation
10
Nielsen’s heuristics
Lets see them one by one and have a little description of each. 

The ten heuristics
status1
and the real world2
User control and freedom
3
Consistency and
standards
4
Error prevention
5
Recognition rather than
recall
6
Flexibility and efficiency
of use
7
Aesthetic and minimalist
design
8
from errors
9
Help and documentation10
The system should always keep users informed about
what is going on, through appropriate feedback within a
reasonable time.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
The system should speak the users' language, with
words, phrases, and concepts familiar to the user, rather
than system-oriented terms. Follow real-world
conventions, making information appear in a natural and
logical order.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Users often choose system functions by mistake and will
need a clearly marked "emergency exit" to leave the
unwanted state without having to go through an
extended dialog. Support undo and redo.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Users should not have to wonder whether different
words, situations, or actions mean the same thing. Follow
platform conventions.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Even better than good error messages is a careful design
which prevents a problem from occurring in the first
place. Either eliminate error-prone conditions or check
for them and present users with a confirmation option
before they commit to the action.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Minimize the user's memory load by making objects,
actions, and options visible. The user should not have to
remember information from one part of the dialog to
another. Instructions for use of the system should be
visible or easily retrievable whenever appropriate.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Accelerators -- unseen by the novice user -- may often
speed up the interaction for the expert user such that the
system can cater to both inexperienced and experienced
users. Allow users to tailor frequent actions.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Dialogues should not contain information which is
irrelevant or rarely needed. Every extra unit of
information in a dialog competes with the relevant units
of information and diminishes their relative visibility.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Error messages should be expressed in plain language
(no codes), precisely indicate the problem, and
constructively suggest a solution.

The ten heuristics
status1
and the real world2
3
Consistency and
standards
4
Error prevention
5
recall
6
of use
7
design
8
from errors
9
Even though it is better if the system can be used
without documentation, it may be necessary to provide
help and documentation. Any such information should be
easy to use.

Gerhardt-Powals’ cognitive engineering principles
Fuse data3
Present new information with
meaningful aids to interpretation
4
Automate unwanted workload1
Reduce uncertainty2
Use names that are conceptually
related to function
5
Practice judicious redundancy10
Group data in consistently
meaningful ways to decrease
search time
6
Limit data-driven tasks7
Include in the displays only that
information needed by the user at
a given time
8
Provide multiple coding of data
when appropriate
9
Lets see them one by one and have a little description of each. 

Free cognitive resources for high-level tasks.
Eliminate mental calculations, estimations,
comparisons, and unnecessary thinking.
Fuse data3
4
Reduce uncertainty2
related to function
5
search time
6
a given time
8
when appropriate
9
johngrimwade.com/

Fuse data3
4
Reduce uncertainty2
related to function
5
Display data in a manner that is clear
and obvious.
search time
6
a given time
8
when appropriate
9

Fuse data3
4
Reduce uncertainty2
related to function
5
Reduce cognitive load by bringing together
lower-level data into a higher-level
summation.
search time
6
a given time
8
when appropriate
9

Fuse data3
4
Reduce uncertainty2
related to function
5
Use a familiar framework, making it easier to
absorb.
Use everyday terms, metaphors, etc.
search time
6
a given time
8
when appropriate
9

Fuse data3
4
Reduce uncertainty2
related to function
5
Context-dependent.
Attempt to improve recall and recognition.
search time
6
a given time
8
when appropriate
9

Fuse data3
4
Reduce uncertainty2
related to function
5
search time
6
a given time
8
when appropriate
9
Automate unwanted workload1 The way we arrange the information should be
logical to allow easy searching.

Fuse data3
4
Reduce uncertainty2
related to function
5
search time
6
a given time
8
when appropriate
9
Automate unwanted workload1 Reduce the time spent assimilating raw data.
Make appropriate use of color and graphics.

Fuse data3
4
Reduce uncertainty2
related to function
5
search time
6
a given time
8
when appropriate
9
Automate unwanted workload1 Allow users to remain focused on critical data.
Exclude extraneous information that is not relevant
to current tasks.
aviationbusinessconsultants.com/?p=635

Fuse data3
4
Reduce uncertainty2
related to function
5
search time
6
a given time
8
when appropriate
9
Automate unwanted workload1 Use different styles of graphical
representations depending on the audience or
the subject matter.
http://www.visual-literacy.org/periodic_table/periodic_table.html

Fuse data3
4
Reduce uncertainty2
related to function
5
search time
6
a given time
8
when appropriate
9
Automate unwanted workload1 (To resolve the possible conflict between
heuristics relating to grouping of data and
display only that information needed by the
user at a given time)
Principle 10 was devised by the first two
authors to resolve the possible conflict
between Principles 6 and 8, that is, in order
to be consistent, it is sometimes necessary
to include more information than may be
needed at a given time.

Let’s see some
examples
showing typical
violations of
some of the
heuristics we
have just seen.
Some examples

Example 1
Aesthetic and
minimalist design
Visibility of
system status
Display data in a
manner that is
clear and obvious
• There are several typefaces in
several different colours
• It is difficult to guess what is
the proper title of the screen
• Some texts are placed in a non
legible orientation
• There is no way to know exactly
how long it will take the unit to
complete
• This course is for adults, but
illustrations are more suitable for
children education

Example 2 (1)
Follow real-world
conventions, making
information appear in a
natural and logical order
Display data in a manner that
is clear and obvious

Example 2 (2)
This is a good example of when the
instructional designer advise is crucial
to communicate the right message.
Conventions say that western people
read from left to right.
 As we can see, aside the
differences on style, all of these
ADDIE model representations are
read from left to right or up to down.
All except the one in our example,
that goes backwards and has no
arrows to indicate direction.
We should not underestimate the
importance of conventions. People
are used to things being a certain
way. Breaking these conventions
means to force the student to re-
learn something that was already
learned.

Example 3
This screen belongs to a course on Visual Studio.
As you can see, the Course Introduction screen is being used to show
the goals of the course, which are not presented in the typical, standard
way to present them.
The image at left is too abstract, too big and meaningless. Removing
the image, there would be more free space for the text, so we could get
rid of the scroll bar.
Readability and quality
of writing
Limit the Number of
Words and Sentences
Typographic cues and
structuring
Include in the displays
only that information
needed by the user at a
given time
Consistency and
standards

Example 4 (1)
Consistency and
standards
Limit the Number of
Words and Sentences
Aesthetic and
minimalist design
needed by the user at
a given time
Display data in a
manner that is clear
and obvious

Example 4 (2)
In this course on Diabetes
there are several violations
to usability principles. This
makes the sreen very
confused and a students
may spend some time in
deciding what to do first.
We should avoid scrool bars
but in this case we see two,
one over the other.
There are also two graphic
elements to continue: an
arrow at the top and the
word continue with 3 arrows
below, so we have to spend
time deciding which one to
use.

Example 5 (1)
Display data in a
manner that is clear
and obvious
Include in the
displays only that
information needed
by the user at a
given time
(Source: elearning-training.com )
Aesthetic and
minimalist design
Consistency and
standards

Example 5 (2)
This screen belongs to a
course on Air
Conditioning.
The diagram of the
system is complex in
itself, so adding more
graphic elements, adds
innecessary cognitive
work load to the learner.
Let’s make an exercise
and try to reorganize
the elements on this
screen to make it more
usable.
We are not going to
add anything, but just
modify what it is
already on the
screen. 

Example 5 (3)
Delete all graphics elements
that don’t add any
functionality: shadows,
lines, questionmarks… and
last, move the navigation
bar a little down. Once we
have done all these changes
we will have enough free
space to move the diagram
letting a little white space
around it.
Here we see what are the basic changes to do:
Move the tittle of the screen down,
so it will be below the menu, just
where ‘Operations’ will be.
The home button belongs to the
breadcrumb trail, so let’s move it
and convert to plain text.
Change the position for the
menu. It will look better to the
left and so we free more space
for the diagram.
Change the Confirm button color
so to differentiate it from the
navigation buttons and move it
to the same area as the
dragable boxes, where the
action is taking place.

Example 5 (4)
(Source: elearning-training.com )
Display data in a manner
that is clear and obvious
needed by the user at a
given time
design
Consistency and
standards
Now we have a more
readable, learnable
screen using the same
elements.
In the display there is
only the information
needed by the student.
The design now is closer
o a minimalist look &
feel. And it is more
compliant with standards.
At the end, we have this:

Expanding the Concept of Usability
Alex Koohang University of Wisconsin – Milwaukee, Milwaukee, WI, USA
Assessing the Usability of On-Line Instructional Materials
Brad Mehlenbacher
Don't Make Me Think! A Common Sense Approach to Web Usability
Steve Krug
Designing Usable, Self-Paced e-Learning Courses: A Practical Guide
By Michael Feldstein, SUNY Learning Network, and Lisa Neal
eLearn Magazine. UI Design Newsletter
Pragmatic Evaluation: Lessons from Usability
C. N. Quinn School of Computer Science & Engineering
The University of New South Wales
Personas: Setting the Stage for Building Usable Information Sites
By Alison J. Head
A Project Guide to UX Design:
For user experience designers in the field or in the making
Russ Unger and Carolyn Chandler
New Riders
First Principles of Interaction Design
Bruce Tognazzini
http://www.asktog.com/basics/firstPrinciples.html
Search User Interfaces
Marti Hearst. Cambridge University Press. 2009.
http://searchuserinterfaces.com/book/
Gestalt Your Graphics: Improving Instructional Graphics
By Connie Malamed
References

Usability applied to e-learning

More Related Content

Similar to Usability applied to e-learning (20)

Recently uploaded (20)

Usability applied to e-learning