Graphic Design for e-Learning
Interfaces that Support
Learning
Adrian Taylor, Enspire Learning
June 15-16, 2006
Interfaces that Support Learning
About
What we do
•Enspire develops custom learning courseware, simulations, and blended learning programs for a broad range of clients
•Since our founding in 2001 we have successfully delivered over 200 projects
Our team
•50 professionals including instructional designers, script writers, multimedia designers, technologists, and audio and video professionals
About me
•Developed a wide range of multimedia such as websites, CD-ROMs, e-learning applications, and kiosks for start-ups, software developers, publishers, advertisers, and media groups
3
In this session
Discuss the importance of good interface
design
Review the key principles of good interface
design
Outline our process and techniques for
designing user-centric interfaces
Review some demos
Why is good interface design so
important?
The user interface is the gateway through
which all content is accessed
5
Successful interface design
Is intuitive, making it easy to learn the system
and use it
Makes it easy for users to perform tasks:
•Accurately
•Completely
Puts the user at ease
Respects the user’s time by making tasks
efficient
Unsuccessful interface design
Frustrates users and creates
unwarranted anxiety
Reduces learner motivation,
sometimes to the point of exiting the program
Obscures paths to task
completion
7
Cognitive load theory and interface design
Three types of memory
•Sensory - is used to perceive information (visible/audible)
•Working - performs the intellectual activities associated with thinking and processing information
•Long-term - stores knowledge and skills
Knowledge and skills can be transferred to long-term memory only after they have been processed by working memory
Working memory has a limited capacity, so additional processing required by an interface can reduce knowledge transfer and retention
Dr. Graham Cooper - December 1998
What is a User Interface?
A User Interface (UI) consists of the hardware and
software elements that allow a user give input or receive feedback
Input:
•Touch = Mouse, keyboard, capacitive/reactive touch screen, tablet, joystick, trackball, etc.
•Speak = Microphone
Output
•See = Screen •Hear = Speakers
9
What is a Graphical User Interface?
A Graphical User Interface (GUI) is an on-screen
visualization of controls and data that allows the user to give input and receive feedback
Operating System (OS)
Software •Word processor •Calculator •Tetris •Web browser •Online application
Questions?
11
Top 10 Principles of Good Interface
Design
The following are not:
•All encompassing
•Hard-and-fast rules
They are:
•Guides
•Considerations
•General best practices
1) Consistency
Consistency is of paramount concern when it comes to usability
Create a set of rules and stick to them
•Explain the rules
•If your system requires adjustment, make the change consistently
•Both visible elements and invisible mapping
Create trust
•Once users learn the interface they will begin to establish expectations, meet them consistently, and feel at ease •Avoid surprises
Don’t force it; if things function differently, don’t try to cram them into the same mold
13
2) Simplicity is a virtue
Only include controls, visualized information, and
features that will truly support your learner
More choices often result in more confusion
•But don’t set arbitrary limits!
3) Visibility
Keep interface elements visually present
whenever possible, especially those related
to navigation
Don’t ask users to create or remember a
mental map
Make sure that both information and controls
related to a certain task are made available
concurrently
15
4) Location, location, location
Prioritize
•Not all elements have equal importance to the user •Make sure that prime real estate and scale are reserved
for the right elements
Group related elements; separate unrelated ones •Find items faster
•Reduce mouse movement
Keep the learner’s focus on the content
5) Understandability
Information and controls should be obvious
to the user
Reference the user’s knowledge base to
impart understanding
•Real-world representations
17
6) Create efficiency
Identify areas of repetition (frequent
tasks) and work to minimize the effort required to perform those tasks
Consider what is optimal for the user, not
the interface
Use simple language and common user
terminology
Take off the training wheels
Avoid downtime
7) Feedback
Give users confirmation of every
interaction they have with the
interface
Keep user informed about all
relevant state-changes
If there is a delay caused by loading
or processing, make sure the user is
made aware
19
8) Safety
Protect users from taking potentially damaging
action
•If an action has a large impact, ask the user for confirmation
Complex features may require roll-over explanations
Reduce user frustration by:
•Providing up-front and/or on-demand training and help options
•Providing information within the interface that may answer common questions, reducing the need for help
Don’t trap users; always provide a way out
9) Flexibility
Create systems that allow for different:
•User types
•Learner types
Let users control their experience
•Pacing, volume, order, etc.
•Bookmaking / resume
21
10) Aesthetics
Approachability and the law of the aesthetic
interface
Be intentional
•Things that are misaligned or look like
mistakes confuse and distract users
•Look and feel will set expectations about
function
•Color, shape, and size have meaning
23
Process & Technique
Walk through the process we use at Enspire
Follow some tangents on technique and best
practices
Begin with the end-user
Good user interface design is
about users
One size does not fit all
At the start of all projects, the team
must make themselves
knowledgeable about the end-user,
the learner
Interview actual end-users
whenever possible
25
Know thy user
Who is the user?
•Demographics, job duties, employer’s
corporate culture
What are their goals?
•Accelerate at their job, stop having to ask
their kid how to use the computer
What are their needs?
•Large text for poor eyesight, additional help
explanation, resume functionality for frequent
interruptions
Create Personas
Based on your research, develop 2 or 3 mock users (can be more dependent on segmentation in the user-group, project size, etc.)
Personas give the end-user a seat at the table
Help to answer questions during development when:
•Your team has limited access to the end-users •Your development timeline is too rapid to
practically get user input
•Decisions are limited in scope and it is not prudent to seek input
27
Technical profile
How will the course be delivered (CD-ROM, online,
mobile device)?
What are the target browsers and operating
systems?
Is there any other information known about the
machines on which the user will be accessing the course (newer/older, work, home, LCD, CRT)?
What are the bandwidth constraints?
Will the course be fixed size or scalable?
From what environment will the user access the
course (intranet, company web-site, LMS)?
Content & Course Structure
Entire team should become familiar with content
Instructional designers should work closely with information and interface designers to develop the course structure
Architect your entire training application
•Course structure, reference materials, help, links, tools, etc.
Interface design does not start by drawing pictures
Course structure should always inform interface design
•The UI grows from the application’s schema
•Reduce the user’s mental load by developing a logical structure and clearly articulating it
29
Sitemaps & Flowcharts
Flow charts visualize the progression of a course
•Commonly used to architect branching or non-linear e-learning content
Site-maps are diagrams that illustrate how all parts (sections, pages, areas) of an application are connected
•Commonly used to order content by grouping it into logical sections, as well as to explore how users will navigate
Check your proposed structure:
•Do you have the right amount of order?
•Is the structure overly robust •Does the structure lack division
•Will the structure support your user’s goals and needs?
•Use cases (one-time use vs. repeat or reference use) •How is the information ordered (is the user used to seeing
31
Wire-frames
Simple gray-scale layouts (boxes and circles)
•Devoid of look and feel
Rapidly inventory elements on a screen-by-screen
basis
Understand when users will need what information
and which controls
Consistently translate application structure to
interface layout
Reduce risk of UI overhauls late in the development
33
Appling the principles
The power of placement
•Prioritization •Ordering •Focus area Grouping Consistency •Common controls
•Way-finding and landmarks
•Progress
Keep in mind limiting factors
•Tech profile •User profile
35
Questions?
Mock-ups
Gather references
•Do a little visual research
•Web, periodicals, internal corporate materials, television, etc.
•Corporate branding and style guides •Context
•In what environment will the user access this application (email link, LMS, training center, kiosk)
Avoid ego and channel the user
Iterate
•Work macro to micro (don’t get caught up in the details or get too attached too early)
37
Metaphor
Visual metaphors can help the user understand complex applications by referencing a real-world system they already have familiarity with
Choose carefully:
•Avoid metaphors that are too loosely related
•Aim for rich metaphors which can be used throughout the application
•Use caution when applying multiple metaphors
Use visual representation, audio, and animation cues to reinforce metaphor
Keep your audience in mind
•Is this a system they would be familiar with? •Metaphors don’t always cross borders
Visual language
Every time we develop an
interface, we invent a visual
language
Make rules and apply them
consistently
•Interactive elements
•Passive elements
39
Development
Keep communication channels open
between designers and developers
Be flexible and responsive during
development and testing
•Build modularly
•Monitor how changes affect the interface as a
whole
Pair the interface with content early and
often
41
Reusability
Keep things modular
•Autonomy for all elements
•Keep labels, sizes, even colors dynamic and easily updatable
Allow for extra everything
•Titles, quantity of navigable sections, number of pages or media elements, character limits in text fields
If the structure and interface are developed
collaboratively between the instructional designer and interface designer, then a content template can be generated for future courses
Accessibility & Usability
When using color to convey information, make sure
to use a secondary indicator as well
Make sure you have enough contrast
•Foreground/background •Text on plane
Use text that is appropriately sized for your target
audience
Construct a logical tab order that supports refresh
and common tasks
43
User testing
Go straight to the source:
•When possible, get feedback directly from end-users •Make sure your review group represents the different
segments of your target audience
•Try to keep the same reviewers throughout
development but supplement them with fresh eyes for the last major release
Test early
Avoid testing between functional releases
When access to actual end-users is not possible, try
to get personnel that have worked with, managed, or trained the target audience
Demos
Virtual Team Management
•SAP University
Electronic Communications: Using Invision
•Texas Health Resources
Ito University Foundations
•United Technologies
TrueComp Enterprise – Analytics
•Callidus Software
Mission: Train and Sustain
45
Thank you for your time.
Feel free to contact me with additional
questions or comments.
Adrian Taylor
