A presentation to help you understand the value of creating prototypes for your mLearning projects.

1. Prototyping
Create your first mLearning prototype using
web-based tools.

2. • Got the files?
• If not... Here is the link:
Pregame...
http://bit.ly/11CTdxy

3. 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.

4. Mobile Learning Certificate Program
Mobile Learning Essentials Series
Where you can find more...
Learning Everywhere – Published June 2012

6. • 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?

7. Considerations

8. • 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

9. • 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

10. Fidelity vs. Effort

11. A few prototyping
options.

12. Ahh... Paper

13. 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

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

15. 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

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

17. 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

18. Keynote Examples
http://keynotekungfu.com

19. 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

20. Graffle!

21. 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

22. DPS

23. Lots more examples in
App Savvy

24. New! Rapid
prototyping tools.

25. Protosketch

26. Invisionapp.com

27. 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

28. Wrap it up, already.

29. • Prototyping is fast
• Prototyping is easy
• Prototyping gets stakeholders involved sooner
• Prototyping saves money
Why prototype?

30. • Activity
• Got the files?
• If not... Here is the link:
Finishing up
http://bit.ly/11CTdxy