PMI Forum: Designing Mobile Apps for Learning on 10-04-13

Nick FloroNick@sealworks.comTwitter.com/NickFloro

Mobile AppsPutting Learning in the Palm of your Hand

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 1 of 117

Mobile devices everywhere

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 2 of 117

138.5million smartphones in US

58% of phone market

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 3 of 117

4.5 billionsmartphones by 2018

60% on LTE

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 4 of 117

70 billion apps in 2013

Smartphones 58 billion and 14 billion to tablets

estimated

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 5 of 117

How do you define mobile?

a. smartphoneb. tabletc. laptopd.all of the above

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 6 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 7 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 8 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 9 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 10 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 11 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 12 of 117

Understanding the Technology

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 13 of 117

A great pocket computer.PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 14 of 117

Content consumption.

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 15 of 117

Create & organize.

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 16 of 117

Games, games, games.

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 17 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 18 of 117

desktop

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 19 of 117

desktop

phone

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 20 of 117

desktop

tabletphone

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 21 of 117

desktop

tablet

phone

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 22 of 117

desktoptabletphone

Think Mobile First

Progressive Enhancement

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 23 of 117

7 Questions to Define a Project

What is the goal?What are the learning objectives?

Who is the audience and how will they use it?

What is the timetable?

Current technology or solution in place?

What is the budget?

Does the content exist?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 24 of 117

• network latency• input mechanism• memory

• form factor

• computational power

• context• battery

Mobile Factors

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 25 of 117

App or Web Delivery

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 26 of 117

Web AppServer

Game / SimulationTool

Hybrid

InfoTool

Resources

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 27 of 117

Web App Native App

• Use web standards

• Easy to deploy & update

• Support all devices

• Faster development cycle

• Works everywhere

• Requires web connection

• Faster performance

• Unique platform features

• Requires programming

• Deploy via Store models

• iOS / Android / Amazon

• Increase Costs per OS

Which is right for your project?

Enterprise Deployment

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 28 of 117

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 29 of 117

Responsive DesignPMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 30 of 117

Create a Road Map

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 31 of 117

Does everything need to be mobile?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 32 of 117

AmazonA Quick Look

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 33 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 34 of 117

Amazon AppHybrid App

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 35 of 117

The mobile environmentsingle early failure = non-returning user

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 36 of 117

The mobile environmentcrucial first 30-60 seconds usage

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 37 of 117

The mobile environmentFewer options

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 38 of 117

Graphics Location Storage Speed

Solving Developer Challenges

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 39 of 117

Examples

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 40 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 41 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 42 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 43 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 44 of 117

Develop once, deliver everywhere.

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 45 of 117

What do I really need to know?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 46 of 117

Focus on the

Audience

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 47 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 48 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 49 of 117

Content is Key

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 50 of 117

simplify.

write it down

cut in halfcut it again

breakcut it by half

wrap

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 51 of 117

Designing Apps

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 52 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 53 of 117

Android Xoom1280 x 720

HTC Incredible800 x 480

Selecting a SizePixels & Aspect Ratio

iPad1024 x 768

iPhone 4960 x 640

iPhone480 x 320

Galaxy1280 x 720

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 54 of 117

Do I need to know ALL of this?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 55 of 117

Flat Pages

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 56 of 117

Apple Weather

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 57 of 117

Yahoo Weather

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 58 of 117

Yahoo Weather

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 59 of 117

Tab Bar

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 60 of 117

Apple Clock

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 61 of 117

Tree Structure

One

Two

Three

Four

Five

Six

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 62 of 117

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 63 of 117

First Aid

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 64 of 117

First Aid

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 65 of 117

First Aid

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 66 of 117

Innovation

>

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 67 of 117

evernote

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 68 of 117

evernote

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 69 of 117

Pulse

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 70 of 117

Pulse

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 71 of 117

Zite

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 72 of 117

Zite

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 73 of 117

Sketching where ideas begin

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 74 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 75 of 117

keynotekungfu.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 76 of 117

Sketchy & iMockUps

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 77 of 117

Prototyping test driving your idea

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 78 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 79 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 80 of 117

Adobe Acrobat

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 81 of 117

POP - Prototyping on Paper

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 82 of 117

POP - Prototyping on Paper

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 83 of 117

POP - Prototyping on Paper

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 84 of 117

POP - Prototyping on Paper

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 85 of 117

POP - Prototyping on Paper

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 86 of 117

Is prototyping really necessary?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 87 of 117

Design for Flexibility

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 88 of 117

Testing

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 89 of 117

Test on Mobile− iOS 6.x - 7.x

− Android 2.x - 4.x

− Windows 8

− Tablet vs Phone

− Portrait vs Landscape

Test on Windows 8, 7, Vista, XP

- Internet Explorer 6, 7, 8, 9, 10

- Firefox 19 +

- Chrome 20 +

Test on OS X− Safari 4, 5+

− Firefox 19 +

− Chrome 20 +

Testing Code

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 90 of 117

Test for Usability

• Have someone with fresh

eyes test drive your site to

make sure it accomplishes

both user goals and site

goals

• Survey

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 91 of 117

Capture & Analyze

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 92 of 117

Using CoverFlow view and Preview of Graphics

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 93 of 117

My project is different, is this all relevant to me?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 94 of 117

What ideas will you apply from today?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 95 of 117

ResourcesTo help you grow.

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 96 of 117

Encourage your team to be creative.

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 97 of 117

Development  &  Content  Tools HTML5  /  CSS  /  JavaScript

Dreamweaver  Adobe  Crea5ve  Cloud Jquery.com Sencha  Touch Edge  Code,  Inspect  Adobe  Crea5ve  Cloud

Graphics   Fireworks Photoshop

HTML  Canvas  Anima8on Edge  –  Adobe  Crea5ve  Cloud Sencha  Animator Hype  (mac  only)

Video  (H264  for  mobile  /  html5) Camtasia Video  Editor  (Vegas,  Premiere) Adobe  Media  Encoder QuickTime Telestream  Cleaner Adobe  ASer  Effects

Audio Audacity  (open  source  –  free) Adobe  Audi5on  (crea5ve  cloud)

CMS WordPress  (BuddyPress),  Joomla,  Drupal Blogs/Wikis

Rapid  (mul8media)  Content  Tools Adobe  Cap5vate Ar5culate  StoryLine Lectora RapidIntake  

Adobe  Acrobat Social  Tools  

Facebook,  YouTube,  TwiZer,  Google  Plus,  Yammer,  MicrosoS  Sharepoint

Wireframing  /  Sketching Keynote  /  PowerPoint Balsamiq Briefs  (mac  only) Notebook  and  Crayons

Mobile Development with Nick Floro

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 98 of 117

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 99 of 117

kuler.adobe.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 100 of 117

Adobe Kuler kuler.adobe.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 101 of 117

abookapart.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 102 of 117

www.smashingmagazine.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 103 of 117

Nancy Durate Garr Reynolds

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 104 of 117

evernote.com/skitch/

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 105 of 117

html5rocks.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 106 of 117

www.uxmag.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 107 of 117

www.twitter.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 108 of 117

www.lrnchat.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 109 of 117

reflectorapp.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 110 of 117

Don’t Settle

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 111 of 117

How it works.

www.apple.com/designed-by-apple/

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 112 of 117

Download the Presentation at:http://www.slideshare.net/nickfloro

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 113 of 117

what’s next...

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 114 of 117

Are you ready?

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 115 of 117

LaunchCycle.com

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 116 of 117

Thank You

Nick Floronick@sealworks.comtwitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro

PMI Networks Forum 10/3/13

Understanding Mobile Apps for Learning 10/04/13 117 of 117