Transcript Document

Merging HCI and e-Learning Domain
Oriented Design Principles for Developing
User Interfaces for Mobile Devices
Robertas Damaševičius1, Lina Tankelevičienė2
1Software
Engineering Department, Kaunas University of
Technology, Lithuania, email: [email protected]
2Department of Informatics, Šiauliai University, Lithuania,
email: [email protected]
Context of Research

Human-Computer Interaction (HCI)



E-learning & M-Learning




Design of interactive computer systems for human use
Understanding, tools & techniques, interaction with a user,
technological solutions & constraints
New technologies & learning styles
Advantages & problems
Migration to m-Learning
User Interfaces (UI)


Purpose
Usability
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
2
Swarm of Rules & Guidelines









5 usability attributes (Nielsen, 1993)
8 golden rules of interface design
(Schneiderman, 1998)
9 rules of interface design (Raymond, 1994)
10 components of technical usability
(Nokelainen, 1994)
Design and Implementation Guidelines for
Web Clients (Microsoft)
Web Content Accessibility Guidelines (2007)
IMS Guidelines for Developing Accessible
Learning Applications (2002)
iPhone Human Interface Guidelines for Web
Applications (Apple, 2008)
... and many others
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
3
Problems & Aims

Problems:




Development of usable user interfaces for e-Learning/mLearning
A great variety of guides and recommendations for User
Interface design
No common agreement on design principles
Aims:


Identify a set of user Interface design principles for HCI and
e-Learning domains
Apply the set as a model for developing a Learning Object
for a mobile device
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
4
What are Design Principles?

Design principles:



Properties:




Reflect the highest level of requirements
Based on the cognitive science achievements
very abstract,
independent upon implementation platform,
can be reused
Principles are not guidelines or recommendations

guidelines and recommendations dictate specific
conceptual design decisions that are very narrow, platformdependent and not reusable
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
5
Principles for User Interface Design
Principle
Description
Accessibility
The degree to which a system can be used comfortably by people.
Affordance
Connection between interface and its functional and physical properties.
Consistency
A harmonious uniformity or agreement among parts of a system.
Error tolerance/
reliability
The ability of a system or component to continue normal operation
despite the presence of erroneous inputs
Feedback
The return of information about the result of a process or activity.
Flexibility
The ease with which a system can be modified for use in applications or
environments other than those for which it was specifically designed.
Learnability/
memorability
The ability of the user to learn how to use a system and to remember its
operational principles.
Satisfaction
The comfort of a system to its users.
Simplicity
The degree to which a system or component has a design and
implementation that is straightforward and easy to understand.
Standardization
Adherence to standards/recommendations/guidelines.
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
6
Example: Simplicity


T (Technology) + S (Simplicity)
= $ (Satisfaction/Money)
Google vs. Yahoo and MSN
Ref: L. Tischler, The Beauty of Simplicity
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
7
Migration to m-Learning
Technological restrictions of
mobile devices
Design alternatives:




model refinement
cross-platform adaptation
Transformation techniques of
learning content


Direct migration, modification,
suppression
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
8
Technological Restrictions of Mobiles
Technological restrictions







Limited input facilities
Small screen size, low resolution
and number of colors
Slow CPU, smaller memory
Lack of persistent storage
Battery life
Data connectivity
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
9
Adaptation of UI Design Principles to
Mobile Device Domain: Main Problems
Principles
Accessibility
Affordance
Consistency
Error
tolerance
Feedback/
Interaction
Flexibility
Learnability
Limitations/ constraints of the mobile device
Input facilities
Screen size, resolution,
CPU and memory
colours
Decreases
Decreases
No effect
No effect
Decreases: a mobile
No effect
device may not support
an interface model
Decreases: more Often decreases due to
No effect
difficult input
redesign
Decreases: more Decreases: display
No effect
difficult input
limitations
No effect
Decreases, because
Decreases: slower
responsiveness of mobile display response time
device is limited
No effect
Decreases, so UI must be Decreases: high-quality
redesigned for smaller
content must be
fonts, scrolling and
replaced with poorer
multiple windows
quality content
Decreases: more Decreases: limited visual Decreases: slower work
difficult input
capabilities
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
10
Design of a Learning Object (LO) for
Teaching Array Sorting Algorithms


Actually used in MSc. level “Reuse technologies” course
(KTU) to illustrate the concept of a reusable component
Design stages of a (LO) for a mobile device:
 1) assembly of learning material into a web-based LO,
 2) redesign of the LO with regards to User Interface
Design Principles, and
 3) adaptation of the LO to a mobile device.
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
11
Web-based Learning Object

LO: description, implementation
& demonstration of Bubble Sort


Assembled from the teacher’s
lecture materials
Implemented in HTML &
JavaScript

HTML used for:



natural language description of
a sorting algorithm
presentation of its
implementation in a specific
programming language
JavaScript used for:

demonstration of the principles
of a specific sorting algorithm
Desktop PC view
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
12
Redesign of Web-based Learning Object
Change
Content
separated
into chunks
Motivation
To support simplicity, clarity,
to provide better organization,
to increase modularity
Vizualization To support mental model
added
building, to invoke attention,
and to support staying active
learner
CSS file
To support consistency, easier
added
modification (content and its
presentation are separated),
additional possibilities for
formatting
Page design To show better structural parts
modified
of information presented (parts
show learning objectives)
Page heading To show where we are in the
added
space of information
Font size
To support accessibility
adapted
functions of web browsers
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
Desktop PC view
13
Adaptation of LO to a Mobile Device








Tables eliminated and content
represented in one column
Scrolling eliminated
Direct access realized: each
function is accessed with one click
Amount of material shown on one
page reduced
Font size reduced
Colour scheme modified for better
use in poor visibility environments
Some text labels (titles of pages)
shortened
Key phrases accentuated in bold to
gain better readability
Pocket PC view
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
14
Conclusions & Further Research

User interface design principles for e-Learning
domain can be used:




to ensure their quality and usability of LOs
to guide the development of LOs for mobile devices
a step towards more formal user interface design
methodology
Further research:

LO adaptation for m-Learning and different e-Learning
environments


LO reengineering [paper accepted to ICEIS 2008]
LO refactoring [paper accepted to WEVAeL’2008]
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
15
Questions?
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
16
E-learning domain requirements
related to the UI design
Requirement
Description
Multimodality
Modality is the communication path (verbal, visual, aural, tactilekinestetic) in which we receive information from surrounding
environment.
Minimizing cognitive
load
Cognitive load must be oriented toward learning task. User doesn’t need
to think what to do in the window or page.
Building mental
models
A mental model is a person's internal representation of some area of the
world. The mental model is built or reassembled as an outcome of
learning.
Reflection
Reflecting content structure, task, learning theory, learning model (the
transmission model; the learner centred model; the participative
model), the learner (adaptivity, personalisation)
Supporting attention
and motivation
(Engagement)
Visual engagement. Positive environment. Learner’s desire to pursue a
goal or perform a task
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
17
Common Principles Model










1. Flexibility/Learner-centeredness
2. Feedback/Interaction
3. Affordance
4. Simplicity
5. Consistency/Organization
6. Error tolerance
7. Standardisation
8. Learnability/Memorability
9. Accessibility/Openness
10. Satisfaction/Engagement
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
18
User interface design alternatives
Customization-based



Design a device-specific user interface
Customise for each specific user group
Refinement-based



Design a high-level specification
Refine for each target device and user
group
Adaptation-based



Design only one user interface
Adapt for other devices
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
19
Example: Simplicity


T (Technology) + S (Simplicity)
= $ (Satisfaction/Money)
Lotus Learning Space vs.
MOODLE
Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey
20