Learning Interactions On Mobile

8/24/2011

1

LEARNING INTERACTIONS ON MOBILE

WHAT WORKS? AND WHEN?

Janhavi PadtureHarbinger Knowledge [email protected]

Mobile Learning Interactions

“I would like to SHARE MY OPINIONS”

“I want it to be SHORT, BUT MEMORABLE”

“I want HIGH END, FUN STUFF in mLearning”

“I want it to work on DESKTOP AND MOBILE”

“I need it to work ACROSS VARIOUS DEVICES

“I want INTERACTION, NOT JUST BUTTON CLICKS”

Demands on mobile Learning

8/24/2011

2


� Enhances understanding

�Improves retention

�Creates engagement/hold learner’s attention – greater challenge in mLearning

�Reduces boredom and tune-out

Interactivity will remain a constant and crucial component for effective learning!

Tell me and I will forget,

Show me and I may remember,

Involve me and I will understand.”

Why Interactivity in mLearning?


Speaking of mLearning interactions… YawnBuster Connect link: http://bit.ly/jgm4mz

Session ID: B419-9EB3

8/24/2011

3


� Used to augment learning on mobile devices

�Engaging way to present, interact and assess

�Ability to track progress

�Examples: interactive diagrams, exercises, games, simulations, videos etc.

What are mobile interactions?

Interactive

exercises

Games

SimulationsVideos


Like it or not, mLearning interactivity is here

http://www.youtube.com/v/TRBGnCzp5NY

http://www.youtube.com/v/v5GKnfuKFZ4

8/24/2011

4


External Challenges:• Devices• Screen sizes• Operating Systems (OS)• Browsers• Technologies - Objective C, HTML, Flash,

Java• Connectivity/bandwidth• Media formats supported

Challenges facing mobile interaction development


What does this all mean?

8/24/2011

5


Feature Apple iPad

2.0

Motorola

Xoom

HP

TouchPad

Blacberry

Playbook

Dell Streak

7

Samsung

Galaxy Tab

HP Slate

500

Screen 9.7" 10.1 9.7" 7" 7" 7 - 10.1" 8.9"

Processor 1 Ghz 1 GHz 1.2 GHz 1 GHz 1GHz 1GHz 1.86 GHz

Storage Upto 64 GB 32 GB Upto 64 GB Upto 64 GB Up to 32GB Up to 32

GB

64 GB

Battery Life 10 hours 10 hours 8+ hours 7 hours 4 hours 10 hours 5+ hours

Build-in

Hardware

Keyboard

Multitasking Yes Yes Yes

Adobe Flash No Yes Yes Yes 10.1 Yes 10.1 Yes 10.1 Yes

Built-in Camera Yes 720p Yes 5 MP Yes 1.3 MP Yes 5 MP Yes 5MP Yes 3 MP Yes 3MP

OS iOS4 Android 3.0 HP WebOS Blackberry

Tablet OS

Android 2.2

(Froyo)

Android 3.1 Win Phone

7

Resolution 1024x768 1280x800 1024x768 1024x600 800x480 1280x800 1024X600

Browsers Safari Webkit

based

HP

Touchpad

browser

Webkit

based

Webkit

based

Webkit

based

Internet

Explorer

based

Tablet Device Differences


SmartPhone Device DifferencesSamsung

Galaxy S Pro iPhone4 Droid X

Motorola

Droid Nexus One Nokia N900

Blackberry

Bold 9700

Blackberry

Storm 2 9550

Processor 1GHz 1 GHz 1GHz 600MHz 1 GHz 600MHz 624 MHz 528 MHz

Memory 512MB 512MB 512MB 256 MB 512MB 256 MB 256 MB 256 MB

Storage Upto 32GB Upto 32GB

Upto

32GB Upto 32GB Upto 32GB Upto 32GB Upto 32GB Upto 32GB

Screen Size 4" 3.5" 4.3" 3.7" 3.7" 3.5" 2.44" 3.25"

Resolution 800x480 960x640 854X480 854X480 800x480 800x480 480x360 480x360

Camera 5 MP 5 MP 8 MP 5 MP 5 MP 5 MP 3.2 MP 3.2 MP

OS Android 2.3 iOS

Android

2.2 Android 2.2 Android 2.1 Maemo 5 Blackberry Blackberry

3G Yes Yes Yes

Flash Yes No Yes Yes Yes Yes

Browser

Android

Webkit Safari

Android

Webkit

Android

Webkit Webkit Webkit

8/24/2011

6


• Mobile OS space is fragmented

• Internet Connection speed dependent on location and Carrier’s network . (Only Sprint and Verizon have 4G networks with 4G coverage in limited areas)

• Technology Debate• Native vs. Web apps• Flash vs. HTML5

37

27

22

9

3 2

Android Apple RIM Blackberry Windows Palm Symbian

Market Share of Mobile OS

Market Share (%) fromFeb - Apr 2011

Evolving market place


What is the Business Case?

• Do you want cross platform delivery?

• Do you need to create once, deploy anywhere?

• Will you know the mobile devices your learners carry?

• Is Bandwidth/connectivity predictable?

• Is there lot of media to be delivered?

• Will it be resource intensive?

• Do you need sophisticated visual effects?

• Is it important to create content without relying on proprietary software or native apps?

8/24/2011

7


Native Web

Development environment Platform dependent. Platform independent

Internet Connectivity Not required Required

Deployment has to be installed/ downloaded

n/a (updates propogate immediately)

Speed Fast Slower

Rich media compatibility Fewer issues Limited by Audio/video support inconsistencies within browsers

Content searchable on web No Yes

Animation development More sophisticated, by accessing core animation framework using native code

Good, but less flexibility

Cross platform compatibility Must be developed for each platform separately

can be achieved relatively easily using

Native vs. Web Apps


Native or Web App?

Native

vs.

Web

Cross platform compatibility?

Web

Performance & speed is critical?

Native

Internet Connectivity predictable?

Web

Resource intensive/high

bandwidth utilization?

Native

8/24/2011

8


HOT TOPIC: Flash vs. HTML5

OR


Why the hype?

iPads/iPhones of course!

But… besides that:• Fairly easy – just an extension of HTML & JS• No special software or plug-ins needed• Better interactivity and layout control than HTML• Could give Flash the run for the money

8/24/2011

9


Flash may not be going anywhere anytime soon…

But before dismissing Flash here are some statistics:

– 1.2 billion mobile phones are Flash capable

– Android sales surpassed iOS for first time in 2011

– 20+ tablets coming in 2011, many support Flash

– 98% percent of Internet-enabled desktops use it

– 85% of top 100 websites use Flash


HTML5 or Flash

Flash

vs.

HTML5

Faster/ Better Performance?

HTML5 or Flash

(Results vary)

Cheaper?HTML5

(Its Free!)

Better visual effects?

Flash

(as of today)

Compatibility?

Compatibility on iPad/iPhone?

HTML5

Compatible with old browsers?

Flash

8/24/2011

10


Custom Development 3rd Party Rapid

Development Tools

Web Apps Flash, HTML, HTML5 Raptivity

Hot Lava

mLearning Studio

Articulate Storyline

Lectora X4

(Sencha Touch - framework)

Native Java, Objective C (PhoneGap - framework)

Technologies


Ideal characteristics:

� Modular

� Interactive

� Non-linear

� Selectively render content

� Balance of text & media

� SCORM trackable

� SWF or HTML5!

Characteristics of mLearning interactions

8/24/2011

11


Few Tips for creating mLearning interactions

• Keep them short - Edumercials

• Separate Content from Presentation

• Videos & Animation are effective mLearninginteractions

• Use caching and local storage for SCORM

• Viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

• Use rapid development tools like Raptivity for quick turnaround

• Use tools like PhoneGap to convert to app

• Test…Test…Test!!!


A leading insurance

company uses the

concept of

commercial

Advertisements to

train sales staff

- Short duration

- Lively

- Entertaining

- Non-linear

Edumercial

8/24/2011

12


Video interactivity

Short customer

service training

modules delivered

successfully via

cross platform

video to franchise

employees


Raptivity: Flash/HTML5 Interactivity side-by-side

Flash interactivity samples:

http://www.raptivity.com/elearning-product

HTML5 interactivity samples:

http://www.raptivity.com/touch-raptivity.html

8/24/2011

13


Thank You!

Contact information:

Janhavi [email protected]

510-378-8409

For more information about our products: Raptivity: www.raptivity.com

YawnBuster: www.yawnbuster.com