Implementing an mLearningPrototype StrategyMobile Design Strategies StagemLearnCon 2012
Scott McCormickscottm@floatlearning.comcell: 309.838.2168      twitter: scottfloat                            Free!
Before You Start•   Get “mobile smart”•   Business case•   Process•   Metrics of success•   Bonus: a champion
What is a prototype?•   Targeted and limited tool•   Simulates user experience•   Not fully functioning•   Developed for a...
Why Prototype?•   Full app dev can get pricey•   Full app dev can take time and can get    bogged down•   Prototyping help...
What’s in a Prototype?•   Content resonates with    the target audience•   “Low hanging fruit”•   Not proprietary•   Good ...
Considerations
The Basics•   Building Prototypes should be EASY•   Prototypes do not need to be pixel perfect•   Prototype goals need to ...
Fidelity vs. Functionality•   Functional Fidelity and Visual Fidelity•   You need to envision the goals for the    prototy...
Fidelity vs. Effort
Prototyping Options
Daniel Pfeifferdpfeiffer@floatlearning.com      @mediabounds
Paper Prototype
Paper PrototypePros •     Inexpensive •     EasyCons •     Doesnt really emulate the UX •     Time-consuming to pull off a...
uistencils.comPaper Prototype
Powerpoint/Keynote
Powerpoint/KeynotePros  •    Most people have access to at least one of these  •    Many people are very familiar with the...
OmniGraffle
OmnigrafflePros  •    Great toolset – highly extensible, large community  •    Produces fantastic diagrams and high qualit...
FieldTest
FieldTest (fieldtestapp.com)Pros  •    Easily add interactivity and animation to mockups  •    Easy to distribute to devic...
HTML/CSS
HTML/CSSPros  •    Inexpensive  •    Easy  •    Using Webkit-based browsers,       you can emulate mobile devices pretty w...
iOS Storyboard
iOS StoryboardPros  •    Quickly build an interactive, working (static)       application writing little to no code  •    ...
Why Prototype?•   Prototyping is fast•   Prototyping is easy•   Prototyping gets stakeholders involved sooner•   Prototypi...
Finishing Up •   Q&A •   Discussion
Upcoming SlideShare
Loading in...5
×

Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012

978

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
978
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
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 Pfeifferdpfeiffer@floatlearning.com @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 keynotekungfu.com or keynotopia.com)
  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 (fieldtestapp.com)Pros • 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×