merging hci and e-learning domain oriented design principles for developing user interfaces for...

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]

Future-Learning 2008, March 27-29, 2008, Istanbul, Turkey 2

Context of Research

Human-Computer Interaction (HCI) Design of interactive computer systems for human use Understanding, tools & techniques, interaction with a user,

technological solutions & constraints E-learning & M-Learning

New technologies & learning styles Advantages & problems Migration to m-Learning

User Interfaces (UI) Purpose Usability

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



Problems & Aims

Problems: Development of usable user interfaces for e-Learning/m-

Learning 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


What are Design Principles?

Design principles: Reflect the highest level of requirements Based on the cognitive science achievements

Properties: 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, platform-dependent and not reusable


Principles for User Interface DesignPrinciple 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.


Example: Simplicity T (Technology) + S (Simplicity)

= $ (Satisfaction/Money) Google vs. Yahoo and MSN

Ref: L. Tischler, The Beauty of Simplicity


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


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


Adaptation of UI Design Principles to Mobile Device Domain: Main ProblemsPrinciples Limitations/ constraints of the mobile device

Input facilities Screen size, resolution, colours

CPU and memory

Accessibility Decreases Decreases No effectAffordance No effect Decreases: a mobile

device may not support an interface model

No effect

Consistency Decreases: more difficult input

Often decreases due to redesign

No effect

Error tolerance

Decreases: more difficult input

Decreases: display limitations

No effect

Feedback/ Interaction

No effect Decreases, because responsiveness of mobile device is limited

Decreases: slower display response time

Flexibility No effect Decreases, so UI must be redesigned for smaller fonts, scrolling and multiple windows

Decreases: high-quality content must be replaced with poorer quality content

Learnability Decreases: more difficult input

Decreases: limited visual capabilities

Decreases: slower work


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.


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 algorithmDesktop PC view


Redesign of Web-based Learning ObjectChange MotivationContent separated into chunks

To support simplicity, clarity, to provide better organization, to increase modularity

Vizualization added

To support mental model building, to invoke attention, and to support staying active learner

CSS file added

To support consistency, easier modification (content and its presentation are separated), additional possibilities for formatting

Page design modified

To show better structural parts of information presented (parts show learning objectives)

Page heading added

To show where we are in the space of information

Font size adapted

To support accessibility functions of web browsers

Desktop PC view


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


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]


Questions?


E-learning domain requirements related to the UI designRequirement Description

Multimodality Modality is the communication path (verbal, visual, aural, tactile-kinestetic) 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


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


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


T (Technology) + S (Simplicity) = $ (Satisfaction/Money)

Lotus Learning Space vs. MOODLE

Example: Simplicity

merging hci and e-learning domain oriented design principles for developing user interfaces for...

Documents

learning object

elearning domainsapply

mobile devicefuturelearning

design principlesaims

implementation guidelines

ims guidelines

web applications apple

implementation platform