Designing a Virtual Campus for the UserUOC’s Usability Program

Usable and Accessible Made-to-Measure Learning Materials

Magí Almirall · Muriel Garreta

Learning TechnologiesUniversitat Oberta de Catalunya

EDUCAUSE Mid-Atlantic Regional Conference 2006

Harborside Ballroom D, January 11, 11.45

Designing a Virtual Campus for the UserUOC’s Usability Program

The Open University of Catalonia (www.uoc.edu)

was created in 1995

is a completely virtual campus

offers 19 official degrees, several graduate programs and post-graduate

studies, and a doctoral degree,

has more than 35000 students and more than 1500 people including

instructional designers, teachers, tutors, academic and technical staff

the Virtual Campus has up to 3.000 simultaneous logins

Designing a Virtual Campus for the UserUOC’s Usability Program

Agenda

Introduction to the project Problem Solution Process

Defining students’needs Designing usable user interfaces Making accessible output formats Developing the automatic transformation engine Results

Results regarding students’ satisfaction Resulting output formats Current and near future work

Q&A

Designing a Virtual Campus for the UserUOC’s Usability Program

Introduction > The problem

UOC owns more than 1000 different learning materials

All materials were written specifically for e-learning purposes

Key inconvenience: modifying their interface in order to increase

accessibility and usability was extremely costly and by no means automatic.

Develop a solution to easily publish learning contents in the formats that best fulfill students’ needs at each specific moment of their learning process.

Designing a Virtual Campus for the UserUOC’s Usability Program

Introduction > The solution

The separation of the contents’ creation from their final format allows for an agile and cost-effective generation of several output formats to meet students’ needs.

The basis is an XML standard file from which different format outputs are generated automatically.

The output interface is designed using human-computer interaction (HCI) methodologies and following e-learning and accessibility standards.

Designing a Virtual Campus for the UserUOC’s Usability Program

Introduction > The process

Steps taken to develop the solution

Define students’ needs

Design usable user interfaces for each format

Make output formats acessible

Develop the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Agenda

Introduction to the project Problem Solution Process

Defining students’ needs Designing usable user interfaces Making output formats accessible Developing the automatic transformation engine Results

Results regarding students’ satisfaction Resulting output formats Current and near future work

Q&A

Designing a Virtual Campus for the UserUOC’s Usability Program

Defining students’ needs

Analyze existing UOC information to build personas

Persona: A fictional individual created to describe the typical user based on the user profile

Run a survey, focus groups and personal interviews to find out uses of learning materials

Define output formats

Designing a Virtual Campus for the UserUOC’s Usability Program

The “Functional” The “Visionary” The “Insatiable”

Some characteristics:- young- practical - educated- curious- etc.

Some frustrations: gets sick when studying

during the commute tired at night from work and

family, gets sleepy reading course materials

hard to find quick answers or information to end homework

Some characteristics:- older - needs social approval- patient- curious and reflexive- etc.

Some frustrations: difficult to stay up to date

with the current tools there’s too much information

generated hard to locate information to

share with colleague

Some characteristics:- ever curious- introvert- collaborative- d- etc.

Some frustrations: course materials are too

big and heavy to carry with them

hard to identify and relate all content

printing information results in a waste of time and paper

Defining students’ needs

Designing a Virtual Campus for the UserUOC’s Usability Program

Defining students’ needs

Results of the survey, focus groups and personal interviews

All students behave in similar ways towards the learning materials

All students use all output formats

The choice of the format is task and context-sensitive

Designing a Virtual Campus for the UserUOC’s Usability Program

Agenda

Introduction to the project Problem Solution Process

Defining students’needs Designing usable user interfaces Making output formats accessible Developing the automatic transformation engine Results

Results regarding students’ satisfaction Resulting output formats Current and near future work

Q&A

Designing a Virtual Campus for the UserUOC’s Usability Program

Designing usable user interfaces

Iterative design through user testing 10 users per iteration and format Task-oriented test and short questionnaire

Designing a Virtual Campus for the UserUOC’s Usability Program

Designing usable user interfaces

HTML format: Evaluation of the framework

Old format New format

Designing a Virtual Campus for the UserUOC’s Usability Program

Designing usable user interfaces

HTML format: Evaluaton of the information layout

Designing a Virtual Campus for the UserUOC’s Usability Program

Agenda

Introduction to the project Problem Solution Process

Defining students’needs Designing usable user interfaces Making output formats accessible Developing the automatic transformation engine Results

Results regarding students’ satisfaction Resulting output formats Current and near future work

Q&A

Designing a Virtual Campus for the UserUOC’s Usability Program

Content format for people with visual disabilities: Digital Talking Book

DAISY FORMAT ( www.daisy.org)

XML + MP3

Making output formats accessible

Designing a Virtual Campus for the UserUOC’s Usability Program

Guides in Web format

Guides:

Section 508 ( www.section508.gov)

WAI AA ( www.w3c.org/WAI)

Automatic accessibility test:

Bobby (www.cast.org)

Making output formats accessible

Designing a Virtual Campus for the UserUOC’s Usability Program

Agenda

Introduction to the project Problem Solution Process

Defining students’needs Designing usable user interfaces Making output formats accessible Developing the automatic transformation engine Results

Results regarding students’ satisfaction Resulting output formats Current and near future work

Q&A

Designing a Virtual Campus for the UserUOC’s Usability Program

WRITING XML

XML BASE

Developing the automatic transformation engine

Engine

HTML PDF DAISY DVD

EngineEngine Engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Write XML

The author writes on a Word document

Editor rewrites in XML manually

Next year, automatic filters based in Word styles

Write in XML is similar than write in HTML

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Base XML

Extended Markup Language

Logical, no physical language

“XML Schema” define the possibilities

Developing the automatic transformation engine

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE modul SYSTEM "assignatura.dtd">

<modul>

<title>Motivación y satisfacción</title> <code>90_862a</code> <autor type="m"> <name>Manuel Jordi López Mercadé</name> </autor>

<introduccio> <title>Introducción</title>

<p>Determinadas aportaciones de las personas, quizás las más importantes, no se compran con dinero. Sin duda, en la empresa y en sus equipos de trabajo la sola retribución económica no explica determinados logros y resultados.</p>

Designing a Virtual Campus for the UserUOC’s Usability Program

Generate web version: Transform with Extensible Style sheet Language (XSL)

Step 1: XML to SCORMCreate manifest SCORMCreate html content

Step 2: SCORM client and interface Create menuCreate packageNew line to write SCORM marks automatically

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Automatic transformation : Web version

Manifest + htmlXML XSL 2XSL 1

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

PDF version

Transform with FO (Formatting Objects) (http://xmlgraphics.apache.org/fop/)

Step 1: XML to FOSpecial filter for your presentation

Step 2: FO to PDF Standard and freeware software

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Automatic transformation : PDF version

Formatting Objects

XML

FO Processor

XSL 1

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Transform to standard DAISY (http://www.daisy.org)

Step 1: XML to reading XML

XML parts to read no logical information

Step 2: Reading XML to MP3

Use external program ( www.loquendo.com)

Step 3: Create DAISY standard files

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Digital Talking Book

XML Loquendo

xml,xml,xml ... DAISYMP3xml,xml,xml ...

Developing the automatic transformation engine

Designing a Virtual Campus for the UserUOC’s Usability Program

Agenda

Introduction to the project Problem Solution Process

Defining students’needs Designing usable user interfaces Making output formats accessible Developing the automatic transformation engine Results

Results regarding students’ satisfaction Resulting output formats Current and near future work

Q&A

Designing a Virtual Campus for the UserUOC’s Usability Program

The materials in the PDF and Web formats were used by more than 25000 students from September 2004 to July 2005.

This experience was done with a 1000 learning materials from the Universitat Oberta de Catalunya (UOC).

This adaptation of the output format to meet students’ needs resulted in an increase of their satisfaction.

Results > Students’ satisfaction

General satisfaction of web materials? UP 11 points (63 to 74)

Web materials helps you to understand the skills? UP 5 points (69 to 75)

Designing a Virtual Campus for the UserUOC’s Usability Program

Results > Resulting output formats

Web version in HTML

PDF A4

MP3, DAISY

DVD

Pocket size, “Vull saber”

Designing a Virtual Campus for the UserUOC’s Usability Program

User studies are a good way to prioritize developments

Usability testing is the guide to design the UI

XML allows for the creation of quality edited books

The flexibility of XML and the accessibility orientation opened the door to

unexpected formats

We can apply this development process and perspective to other projects > Open Source LMS

Results > Lessons Learned

Designing a Virtual Campus for the UserUOC’s Usability Program

Thank you!

Questions and Answers

Magí Almirall malmirall@uoc.eduMuriel Garreta murielgd@uoc.edu