Prototyping

PrototypingCreate your first mLearning prototype using web-based tools.

• Got the files?

• If not... Here is the link:

Pregame...

http://bit.ly/11CTdxy

Float guides industry-leading companies to understand and leverage the power of mobile learning. We help companies meet their business strategies by making useful information accessible, 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 get bogged down

• Prototyping helps manage cost and risk

• Prototyping helps get buy-in and user acceptance/usability out of the way earlier

Why prototype?

Considerations

• Building Prototypes should be EASY

• Prototypes should not need to be pixel perfect

• Prototypes goals need to be clearly spelled out prior to creation

• Build Prototypes that have an output that everyone can see

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

The Basics

• Functional Fidelity and Visual Fidelity

• You need to envision the goals for the prototype

• Choose method and graphic sophistication based on the goals.

• More “Production Ready” = more time

• More graphically rich = more time

• More revisions at this point are less expensive than later

Fidelity vs. Functionality

Fidelity vs. Effort

A few prototyping options.

Ahh... Paper

Pros

• Inexpensive

• Easy

Cons

• Doesn't really emulate the UX

• Hard to pull off a complicated design or one with a lot of screens/data

• None of the design elements/deliverables really will live on

• Tough to justify with so many good tools these days.

Paper prototype

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

Pros

• Inexpensive

• Easy-ish

• Using Webkit based browsers, you can emulate mobile devices pretty well

• There are tools popping up now that ease this considerably

Cons

• More tech knowledge might be required than simple paper prototypes

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

HTML/CSS

Tools that aren't really for prototyping, but still work pretty well.

Pros

• Most everyone has one of these

• Reasonably easy to use for any one familiar with desktop publishing tools

• Produces interactivity and animation

Cons

• 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/Keynote

Keynote Exampleshttp://keynotekungfu.com

Pros

• great toolset – highly extensible, large community

• Produces fantastic diagrams and high quality output

• Reasonably easy to use for any one familiar with desktop publishing tools

• produces interactivity

• move from wireframe to prototype easily

Cons

• It's a tad expensive

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

• None of the design elements/deliverables really will live on

Omnigraffle

Graffle!

Pros

• Uses InDesign

• Produces rich interactivity

• Allows for media

Cons

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

• Does require InDesign, which some of you may not have

• Output is iPad only

Digital Publishing Suite

DPS

Lots more examples in App Savvy

New! Rapid prototyping tools.

Protosketch

Invisionapp.com

Pros

• Inexpensive

• Super-easy!

• Web/Cloud based (so it's collaborative)

• Results are pretty stellar

Cons

• 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

InvisionApp

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