MULTIPLE SCREEN SIZESONE INSTRUCTIONAL DESIGN

Tracy Bissette, Weejee, @tlbissette

6.11.2015

“IN 2006, JUST TWO SCREEN SIZES ACCOUNTED FOR 77% OF ALL WEB USAGE.

TODAY, EIGHT SCREEN SIZES—VARIOUS LAPTOPS, SMARTPHONES, TABLETS, MONITORS, WEB-ENABLED TVS,

AND NETBOOKS—ACCOUNT FOR 77% OF WEB USAGE.

NO ONE SCREEN SIZE HAS MORE THAN 20% OF THE MARKET SHARE.”

http://www.mobify.com/blog/global-screen-size-diversity/

How to plan and design one learning solution that is instructionally optimized for multiple devices and screen sizes.

Considerations for each device type and screen size

How to communicate your ”convertible” design to team members, clients, and SMEs

Rapid prototyping techniques

SESSION DISCUSSIONObjectives

WHAT IS RESPONSIVE DESIGN?

Design will “fluidly change and respond to fit any device.”

WHAT IS RESPONSIVE DESIGN?

Design will “fluidly change and respond to fit any device.”

WHAT IS ADAPTIVE DESIGN?

Design uses a “predesigned set of layout sizes.” “It detects the device and calls up the properly sized layout

to view.”

-Captivate 8 website

http://www.liquidapsive.com/

WHAT IS ADAPTIVE DESIGN?

-Captivate 8 website

WHY DO WE NEED RESPONSIVE E-LEARNING?

› To be learner centric, we want to reach learners wherever they are.

› There is research showing that sitting in a chair reduces concentration and

increases fatigue.

› It’s not cost effective to have different versions for different devices.

› Device sizes change frequently.

› Users expect responsive design because websites are already mobile-

friendly.

› Using responsive design logic, we can provide a single solution for in-depth

course or performance aid, depending on screen size.

How might our approach to ID change for a responsive learning solution?

DESIGNING FOR RESPONSIVE DESIGN E-LEARNING

Think about the learner’s context while using the device.

Leverage the grid concept in responsive design.

Apply responsive web design and mobile-first best practices to

e-learning.

Think about the desired behavior change to determine what

takes priority.

SO, HOW DO WE DESIGN FOR RESPONSIVE OR ADAPTIVE

E-LEARNING?

CONTEXT CONSIDERATIONS FOR DIFFERENT SCREEN SIZES

› On a phone, the user is likely standing or walking, possibly about to perform

the task—

”on-the-go experience”

› On a tablet, the user is likely sitting but may be standing—”lean back

experience”

› On a desktop, the user is likely sitting at a desk

› Consider whether you are using landscape, portrait or both

HOW DOES A FLUID GRID WORK?“ALLOWS LAYOUTS TO ADAPT TO DIFFERENT DEVICES, WITH THEIR MANY VARIED SCREEN SIZES.”

http://www.coffeecup.com/help/articles/grids-for-bullet-proof-responsive-design/

USE THE GRIDwww.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

A

B

C

A

B C

USE THE GRIDwww.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

A

B

C D E

F

A

B

C D E

F

USE THE GRIDwww.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

A

B

D

GF

C

E

A

D

B C

E

F G

LET’S LOOK AT AN EXAMPLE

A

B C D

E

A

BCD

E

LET’S LOOK AT AN EXAMPLE

A

B

F

C D E

A

F

B C

D E

LET’S LOOK AT AN EXAMPLE

A

B C D E

A

B C

D E

LET’S LOOK AT AN EXAMPLE

A

B

F

C D E

G

A

B C

D E

FH H

G

Pop-up overlayTap to reveal

H

RESPONSIVE DESIGN NOMENCLATURE

A

B

C

D…

Menu, Instructions, Key concept

Choices, items to exploreItems may fall out or change

LARGE SCREEN TO PERFORMANCE SUPPORT AID

Immersive simulation Performance support

Inspecting Investigational

Product

Storage area conditionsAuthorized personnel

Last patient, last dose

Last patient, last dose

MORE EXAMPLES

MORE EXAMPLES

MORE EXAMPLES

ANOTHER LAYER--PARALLAX

http://www.nytimes.com/newsgraphics/2014/sochi-olympics/ski-jumping.html

http://nasaprospect.com/

MOVE ELEMENTS ON A PAGE AT DIFFERENT RATES

Great for telling a story.

ANOTHER LAYER--PARALLAX

http://ao.com/life/kitchen/kitchen-tips/wasteless/

HORIZONTAL SCROLLING

THOUGHT PROCESS FOR A RESPONSIVE DESIGN SOLUTION

› Think about the context and performance objectives

› Sort your content into As, Bs, Cs, Ds…

› Establish guidelines for content types in your organization

› Which elements of the grid drop out in smaller screen sizes?

› Which elements of the grid change in smaller screen sizes?

› Wireframe on the grid

ACTIVITY

Design a 1-2 screen module on making the sandwich of your

choice.

› I’ll pass out grid worksheets.

› Identify the key elements in your module.

› Sketch them out on a grid of your choice or create your own

for both larger screen and smaller screen.

› Volunteers to share?

Design a responsive sandwich making module with a partner.

ACTIVITY

Objective: Be able to make a peanut butter and jelly sandwich.

Elements:

› Supplies needed

› Steps

› Visuals or videos of the steps

Nice to haves:

› Nutritional information

› Prep time

Design a responsive sandwich making module.

ONE APPROACH

A--Title

B-Step

Recipe title

Su

pplie

s

Nutritional info (scroll)

Step 1

Step 2

Step 4

Step 5

Step 3

Step 7

Step 8

Step 6

B--SuppliesC-Step

D-Step

E-Step

F-Step

G-Step

H-Step

I-Step

How do we “storyboard” for a responsive learning solution?

COMMUNICATING THE RESPONSIVE ID

HOW DO YOU STORYBOARD NOW?

VISUAL PROTOTYPING

Module Name, Navigation

MEET THE TEAMChristina, David, Anita and Wesley are meeting as a Senior Leadership Team to discuss positioning, new business opportunities and strategic relationship development with businesses. The team has been developing relationships with national and regional companies in the food processing, mobile phone technology and banking industries over the last year.

Christina is a country representative

A

B C D E

F

A

B C

D EF

RAPID PROTOTYPING RESOURCESINTERFACESKETCH.COM

RAPID PROTOTYPING RESOURCESBALSAMIQ

RESPONSIVE DEVELOPMENT TOOLS

gomo Bootstrap

Adapt

Mobile-first design best practices—http://www.uvu.edu/web/training/tips/adaptive.html

Responsive design device sketches—Interfacesketch.com

Grid templates--http://www.printablepaper.net/preview/storyboard-letter-16to9-3x3

If you’re interested in receiving this PPT presentation, please leave your card at the front.

RESOURCES

CONTACT US

TRACY BISSETTE, M. ED.Chief Learning Officer

tracy@weejee.comm 919.768.2512o 844.4.weejee

CHRIS MANAROVP of Sales

chris@weejee.comm 919.741.3249o 844.4.weejee

IAN HUCKABEECEO

ian@weejee.comm 919.619.6119o 844.4.weejee

FOLLOW US

facebook.com/weejeelearning

twitter.com/weejeelearning

linkedin.com/company/weejeelearning