Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012


Published on

A presentation called "Implementing an mLearning Prototype Strategy" that was given on the Mobile Design Strategies Stage at mLearnCon 2012. The presentation was given by Scott McCormick and Dan Pfeiffer of Float Mobile Learning on Tuesday, June 19.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012

  1. 1. Implementing an mLearningPrototype StrategyMobile Design Strategies StagemLearnCon 2012
  2. 2. Scott McCormickscottm@floatlearning.comcell: 309.838.2168 twitter: scottfloat Free!
  3. 3. Before You Start• Get “mobile smart”• Business case• Process• Metrics of success• Bonus: a champion
  4. 4. What is a prototype?• Targeted and limited tool• Simulates user experience• Not fully functioning• Developed for a curated experience
  5. 5. Why Prototype?• Full app dev can get pricey• Full app dev can take time and can get bogged down• Prototyping helps manage cost and risk• Prototyping helps get buy-in and user acceptance/usability achieved earlier in the process
  6. 6. What’s in a Prototype?• Content resonates with the target audience• “Low hanging fruit”• Not proprietary• Good place to make mistakes
  7. 7. Considerations
  8. 8. The Basics• Building Prototypes should be EASY• Prototypes do not need to be pixel perfect• Prototype goals need to be clearly spelled out prior to creation• Build Prototypes that have an output that everyone can see• Functions, features in assets that are projected for the build - attempt to build them in the prototype
  9. 9. Fidelity vs. Functionality• 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
  10. 10. Fidelity vs. Effort
  11. 11. Prototyping Options
  12. 12. Daniel @mediabounds
  13. 13. Paper Prototype
  14. 14. Paper PrototypePros • Inexpensive • EasyCons • Doesnt really emulate the UX • Time-consuming to pull off a complicated design or one with a lot of screens/data • The design elements/deliverables won’t live on past the planning stage
  15. 15. uistencils.comPaper Prototype
  16. 16. Powerpoint/Keynote
  17. 17. Powerpoint/KeynotePros • Most people have access to at least one of these • Many people are very familiar with these programs and already know how to create basic layouts • Allows for interactivity and animationCons • The design elements/deliverables won’t live on past the planning stage • Output isn’t really “mobile” • Good UI Stencils are tough to find or need reprep (try or
  18. 18. OmniGraffle
  19. 19. OmnigrafflePros • 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 • Provides an quick prototyping solution by adding interactivity to wireframesCons • Its a tad expensive • Mac only • The design elements/deliverables won’t live on past the planning stage
  20. 20. FieldTest
  21. 21. FieldTest ( • Easily add interactivity and animation to mockups • Easy to distribute to devices • Web/Cloud based (so its collaborative) • Inexpensive (so I’ve been assured)Cons • Its still in private beta • Pricing is as of yet ??? • FieldTest only adds interactivity to existing mockups (or sketches)--you’ll need to use a different tool to create the mockups
  22. 22. HTML/CSS
  23. 23. HTML/CSSPros • Inexpensive • Easy • Using Webkit-based browsers, you can emulate mobile devices pretty well • There are tools popping up now that ease this considerably (jQuery Mobile, Sencha Touch, etc.)Cons • More tech knowledge might be required than simple paper prototypes • Unless you’re ultimately targeting mobile web (or using a framework like PhoneGap), the design/deliverables won’t live past the planning phase.
  24. 24. iOS Storyboard
  25. 25. iOS StoryboardPros • Quickly build an interactive, working (static) application writing little to no code • Storyboard will be used through the whole project-- during the development process, code is added to each view to make it fully functionalCons • iOS 5+ only • Requires a decent understanding of how iOS applications are structured
  26. 26. Why Prototype?• Prototyping is fast• Prototyping is easy• Prototyping gets stakeholders involved sooner• Prototyping saves money• Prototyping gives the audience “look and feel” of mobile learning• Prototyping is a great evangelistic tool
  27. 27. Finishing Up • Q&A • Discussion