Creating Accessible User Experiences in Waterloo Online Courses

CAUCE 2015

Aldo CaputoPia MarksJennifer Costello

Who we are: University of Waterloo

Applied Health Sciences1

Arts2

Engineering3

Environment4

Mathematics5

Science6

University of Waterloo students

Undergraduate Students

28,423

Graduate Students

4,223

Source: 2014 Performance Indicators, Institutional Analysis and Planning, University of Waterloo

Centre for Extended Learning (CEL)

Offer high quality extended learning opportunities and experiences that are relevant, innovative, and pedagogically sound.

Centrally funded service unit

Support the design, development and

delivery of fully online courses

Credit andPD courses

CEL Staff

Project

Course Author• Subject Expert• Instructor

OLC - 9• Project Manager

• Instructional Design

Developer - 23• Multimedia

• Interface Design

Copyright Specialist - 1• Copyright Consultation

OTC -7• Online Technology Consultants• Tech Support

LMS/QA - 10• Tech/Editorial Quality• LMS Tools

By the numbers

10 20 30 40 500

2007 2013 2015

Full Programs

New Courses

60

What does “accessible” mean to you?

Q

What “accessible” means to us

• Accessible means usable by people and their devices;• Usable means easy to use for all users

Creating Good User Experiences

Focus on user experiences

• User experiences with technology• The goal is that the user experience promotes and

does not detract from learning • User experiences should be pleasant and efficient

Creating access: Start at the instructional design stage

“User experience is instructional design” (Sean Yo, D2L)

UX=ID

We are not our users

Creating access: For whom? On what?

• Who are our learners?• What devices do they use?

How Do We Gather Data?

How we find out about our learners

Planning

Pre-Production Design Development Delivery Post-Production

Monitoring

Closing

Initiating

Executing

User Testing CEL Survey(week 7)

Course Evaluation

(week 12)

Who are our learners? University of Waterloo (2013/2014 school year)

4,223Graduate

Full-time Students

35%International

Students

28,423UndergraduateFull-time Students

13%International Students

2%Cooperative

EducationCooperative

Education

54%

Source: 2014 Performance Indicators, Institutional Analysis and Planning, University of Waterloo

Who are our learners?CEL: An undergraduate snapshot (Fall 2014)

89%Traditional Learners

(under 25 years)

4,412UndergraduateOnline Learners

11%Adult Learners(25+ years)

3%Regular and Online Courses

Online only

8%

Source: 2014 Annual Report, Centre for Extending Learning

14%Online only

75%Regular and Online Courses

Students with disabilities (2013)

17.4%Attention-deficit/hyperactivity disorder

15.6%Chronic medical/systemic

17.2%Learning Disability

30%Psychiatric

14.2%Mobility/Functional

Source: AccessAbility Services, University of Waterloo

<3%Low Vision, Blind

<1%Deaf, Deafened, Hard-of-hearing

<1%Acquired Brain Injury

Why choose online? (2014)

70%Allowed me to

accommodate work, etc.

41%Thought it would

suit my learning style

79%Fits better withcourse schedule

66%Fit in a program requirement in a certain time

50%Allowed me to take course during co-op term I am not an

on-campus student

38%

Source: Winter 2014, Spring 2014, and Fall 2014 CEL Surveys

Online Students

75%of students would enroll in another full time course

Source: Winter 2014, Spring 2014, and Fall 2014 CEL Surveys

Adventures in User Testing

Usability testing: What is it?

Resources to get you started:

© Amazon

Key strategy: Observation

What can we learn from our learners by observing them?

Q

Observing our learners

• Find and fix usability problems

• What was the experience like? It should be perceived as valuable, pleasant and efficient by users

Some usability problems we’ve found and fixed

• 4 of 6 users interpreted video icons as static images

Icon design

Before After

Some usability problems we’ve found and fixed

Before

Some usability problems we’ve found and fixed

After

What (else) can we learn from our learners by observing them?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada fringilla enim, in tincidunt leo. Students don’t read thoroughly online; they scan text, looking for bolded items and hyperlinks. Class apt taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet mollis nisi. Etiam malesuada, mauris auctor cursus congue.

What (else) can we learn from our learners by observing them?

Only watch narrated presentations if 20 mins or under

<=20 mins

What (else) can we learn from our learners by observing them?

Only watch videos if 5 mins or under

<=5 mins

What (else) can we learn from our learners by observing them?

About 1/3 prefer to read transcripts rather than watch multimedia versions

How Are Students Accessing Our Courses?

Creating access: On what?

Laptop/Notebook Desktop

Campus computer Large mobile

Small mobile (smartphone)

Fall 2012

Fall 2013

Fall 2014

93%

94%

94%

21%

24%

20%

12%

10%

9%

14%

15%

18%

23%

28%

Source: Fall 2012, Fall 2013, and Fall 2014 CEL Surveys

12%

Creating access: On what?

“I would like to have better mobile access to course materials and activities.”

Source: Fall 2012, Fall 2013, and Fall 2014 CEL Surveys

Fall 201345%

Fall 201448%

Fall 201242%

HTML5 and CSS3

• Updated specification to HTML and CSS• HTML4 was published in 1999: much has changed

since then!

Responsive design

• Responds to the needs of the users and their device• Layout changes based on the size and capabilities of the

device

How did we create access?

• We adopted Bootstrap, a web framework that makes responsive design easy • This is used for all web pages, across all of our courses

How did we create access?

Traditionally: presentations, video, and audio were all available in Flash-only media players

How did we create access?

• HTML5 Media Player• If Flash is still required, an alternative is provided

Accessibility and Provincial Legislation: Our Journey

Step 1: Make it official

• Our office had to take accessibility seriously

• 10% of my time

• Mandated Accessibility Standards, not Accessibility Guidelines

What is this accessibility thing all about?

• AODA – Accessibility for Ontarians with Disabilities Act

• Must meet WCAG 2.0 – Web Content Accessibility Guidelines, version 2.0• Level A starting 2014• Level AA (with 2 exceptions) starting 2021

CEL Accessibility Statement

The Centre for Extended Learning strives to meet the needs of all our online learners. Our ongoing efforts to become aligned with the Accessibility for Ontarians with Disabilities Act (AODA) are guided by University of Waterloo AccessAbility Services Policy and the World Wide Web Consortium's (W3C) Web Content Accessibility Guidelines (WCAG) 2.0. The majority of our online courses are currently delivered via the Desire2Learn Learning Environment. Learn more about Desire2Learn’s Accessibility Standards Compliance.

WCAG 2.0

• 4 principles providing a foundation for• 12 guidelines• consisting of 61 success criteria• which have MANY associated

sufficient and advisory techniques

Lots of reading …

LOTS of reading

(Missing Image description)

“Read all the Things” meme

WCAG 2.0 is full of good ideas.

And we already do a lot of the recommended practices (because they are just good ideas).

Accessibility can’t be achieved with just a checklist.

(Definitely not a small one.)

Accessibility must be planned from the beginning: It isn’t something one can just apply as a last step.

Planning

Pre-Production Design Development Delivery Post-Production

Monitoring

Closing

Initiating

Executing

User Testing CEL Survey(week 7)

Course Evaluation

(week 12)

Accessibility

Accessibility

Accessibility

Accessibility

Accessibility

Accessibility at every stage

While accessibility often seems to apply to people with disabilities, it is really for all people with varying levels of abilities.

Creating access: Start at the instructional design stage

Universal Design for Learning (UDL)

Principle l

Provide Multiple Means of Representation

What the instructor does

Principle ll

Provide Multiple Means of Action and Expression

What the student does

Principle lll

Provide Multiple Means of Engagement

The “why” of learning

We are not our users.

(Missing Image description) T-Rex dinosaur trying to seize a small boy. The small boy is in a corner. The dinosaur is

unable to seize the boy since his head is caught on the

walls of the corner and his arms don’t reach far enough.

(Missing Image description) The bad guy, in charge of the

dinosaur, can’t see what is happening. He says to the

dinosaur, “What’s going on? Why aren’t you seizing the

boy?

(Missing Image description) The dinosaur responds to the bad guy, saying “I have a big head … and little arms. I’m just not sure how well this

plan was thought through. ”

(Missing Image description) A T-Rex dinosaur with arm

extenders. The word “Unstoppable” is above the

image.

Moment of brilliance:Accessibility is like recycling!

They both make the world a better place!

Has the biggest impact when everyone participates

and

Everyone benefits from implementation

Missing one detail (or glass bottle) will not end the world or negate your efforts*

*Recently in accessibility: It might get you sued

• Would most people in our office read the entire set of accessibility guidelines (standards)?

(Missing Image description)

“Ain’t nobody got time for that!” meme

Step 2: Create the “rules”

The Challenge:• Take this giant list of good ideas and have others in our

department want to read and digest it

Step 3: Make the rules easily digestible

• Reorganize the success criterion to fit into “Buckets” that match our production standards and general practices

• Pull out most important parts as a summary• Put the details below for further reading and exploration

Coding Colour Images Media Text NavigationLinks Quizzes

Coding “bucket”

Coding

Step 4: Build up best practices and how-tos

People still want a checklist!Visual and coded examples:

Creation of How-To documents

Can you…

• Explain how accessibility fits into UX?• Take steps towards baking UX and accessibility into your

institution’s course production processes?• Design and build learner-friendly courses?• Design and build device-friendly courses?• Engage (fearlessly!) with your provincial accessibility

legislation?

Questions

Creating Accessible User Experiences in Waterloo Online Courses

For a list of resources and references from this presentation, please email Jennifer Costello: jmcostel@uwaterloo.ca

Further Questions?• Aldo Caputo: acaputo@uwaterloo.ca• Pia Marks: mmarks@uwaterloo.ca• Jennifer Costello: jmcostel@uwaterloo.ca