ux and ui: applications for instructional design · ux and ui: applications for instructional...

19
UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | [email protected] | 401-440-6165

Upload: others

Post on 03-Oct-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN

Jean Marrapodi, PhD, CPLP | [email protected] | 401-440-6165

Page 2: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Our courses must meet the demands of many factions

eLearning course

Business Owner

Sponsor

Content

Project Manager

Instructional Designer

Graphic Designer

IT

LMS

Page 3: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

We wrangle with competing priorities, schedules and politics.

Page 4: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Who is looking out for the user?

Page 5: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

This is where we can learn from

User Experience Designers.

Page 6: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

UX (User Experience) vs. UI (User Interface)

Which bottle provides the better user experience?

Page 7: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Process from

UNDERSTANDTHE USER

CONSIDERTHE USER

DEFINETHE USER’S PROBLEM

ASKTHE USER

Page 8: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Process from

UNDERSTANDTHE USER

CONSIDERTHE USER

DEFINETHE USER’S PROBLEM

ASKTHE USER

Page 9: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

We must go beyond

Audience Analysis.

Which like evaluation, often is omitted. <sigh>

Page 10: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Use focus groups and

interviews to identify patterns

Build Personas

Page 11: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Create User Personas

https://xtensio.com/user-persona/Free creation software

From LinkedIn Media Group

From Single Grain

Page 12: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

MakesBreakfast

Drivesto

Work

Checks emails,spreadsheets

Workout Meetings Drives Home Prepares &eats Dinner

Helps Kidswith

Homework

ReadsBedtime

Story

Checks email,texts family Watches TV

J K K J K K L K J K K

Notes workout onapp

Smartphone tocheck traffic on

GPS

Computer to AccessEmail, Spreadsheets

Checks messagesbetween meetings

Checks traffic onGPS

Uses phone astimer

Uses phone tocheck email & text

Leverages Googlefor research

Brent’s Day

Pain Points: Commute traffic in AM & PM, meal prep, desire to relax after work but need to prepare meals, healthy meals take more time to createOpportunity: Fathers need a way to simplify and shorten meal preparation because they would rather spend time with their kids than cooking

CREATE A JOURNEY MAP

Page 13: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Create a Prototype

Use PowerPoint

Page 14: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Wireframe Prototype

Page 15: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Hand Drawn Prototype

http://www.uxforthemasses.com/

Page 16: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Sketched Mockups/Index Cards

Page 17: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

User Testing

Must be actual users

• Use Think-alouds• Watch movements

• Eyes• Mouse

• Look for confusion

Paid testing service: usertesting.com

Page 18: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

What can we learn from UX?

• Leverage Personas• Create Journey Maps• Prototype simply• Involve users in testing

Remember the user!

Page 19: UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN · UX AND UI: APPLICATIONS FOR INSTRUCTIONAL DESIGN Jean Marrapodi, PhD, CPLP | jmarrapodi@illumina-interactive.com | 401-440-6165

Thanks for coming.

Jean Marrapodi, PhD, CPLP | [email protected] | 401-440-6165