PrototypingCreate your first mLearning prototype usingweb-based tools.

••

Got the files?

If not... Here is the link:

• A sample of what we can do with this:

Pregame...

http://bit.ly/11CTdxy

http://invis.io/GFEHBU9M

Float guides industry-leading companies tounderstand and leverage the power of mobilelearning. We help companies meet their businessstrategies by making useful informationaccessible, anytime, anywhere.

Mobile Learning Certificate Program

Mobile Learning Essentials Series

Where you can find more...

Learning Everywhere – Published June 2012

••

••

Mobile development can get pricey

Mobile development can take time and can getbogged down

Prototyping helps manage cost and risk

Prototyping helps get buy-in and useracceptance/usability out of the way earlier

Why prototype?

Considerations

••

•

•

•

Building Prototypes should be EASY

Prototypes should not need to be pixelperfect

Prototypes goals need to be clearly spelledout prior to creation

Build Prototypes that have an output thateveryone can see

If animations, etc. are going to be used in thefinal, attempt to build them in the prototype

The Basics

••

•

•••

Functional Fidelity and Visual Fidelity

You need to envision the goals for theprototype

Choose method and graphic sophisticationbased on the goals.

More “Production Ready” = more time

More graphically rich = more time

More revisions at this point are less expensivethan later

Fidelity vs. Functionality

Fidelity vs. Effort

A few prototypingoptions.

Ahh... Paper

••

Cons

••

•

•

Inexpensive

Easy

Doesn't really emulate the UX

Hard to pull off a complicated design or onewith a lot of screens/data

None of the design elements/deliverablesreally will live on

Tough to justify with so many good toolsthese days.

Paper prototypePros

HTML/CSShttp://www.adobe.com/devnet/dreamweaver/articles/getting-started-with-jquery-mobile.html

•••

•

Cons

•

•

Inexpensive

Easy-ish

Using Webkit based browsers, you can emulate mobiledevices pretty well

There are tools popping up now that ease thisconsiderably

More tech knowledge might be required than simplepaper prototypes

There is still very little reuse of assets for the final version,unless you are going to mobile web, not apps

HTML/CSSPros

Tools that aren't reallyfor prototyping, butstill work pretty well.

••

•Cons

••••

Most everyone has one of these

Reasonably easy to use for any one familiar with desktoppublishing tools

Produces interactivity and animation

It's a tad expensive if you don’t own it already

None of the design elements/deliverables really will live on

Good UI Stencils are tough to find or need reprep

Output isn’t really “mobile”

Powerpoint/KeynotePros

Keynote Exampleshttp://keynotekungfu.com

•••

••

Cons

•••

great toolset – highly extensible, large community

Produces fantastic diagrams and high quality output

Reasonably easy to use for any one familiar with desktoppublishing tools

produces interactivity

move from wireframe to prototype easily

It's a tad expensive

Mac only (which might also be considered a 'Pro')

None of the design elements/deliverables really will live on

OmnigrafflePros

Graffle!

•••

Cons

•

••

Uses InDesign

Produces rich interactivity

Allows for media

Fairly pricey if you want to take it past a prototype and useit for production

Does require InDesign, which some of you may not have

Output is iPad only

Digital Publishing SuitePros

DPS

Lots more examples inApp Savvy

New! Rapidprototyping tools.

Protosketch

Invisionapp.com

••••

Cons

•••

Inexpensive

Super-easy!

Web/Cloud based (so it's collaborative)

Results are pretty stellar

It's still in beta-ish state

Cloud Based (maybe not possible in your org)

Assets are not going to be used for the final deliverable

InvisionAppPros

Wrap it up, already.

••••

Prototyping is fast

Prototyping is easy

Prototyping gets stakeholders involved sooner

Prototyping saves money

Why prototype?

•••

Activity

Got the files?

If not... Here is the link:

Finishing up

http://bit.ly/11CTdxy