1 / 30

Mobile Learning Prototyping Essentials: Create Your First Prototype

Float guides industry leaders in leveraging mobile learning, making information accessible anytime, anywhere. Learn why prototyping is crucial, considerations, options, and tools like HTML/CSS, Powerpoint, Omnigraffle, and InvisionApp.

hyatt-rice
Download Presentation

Mobile Learning Prototyping Essentials: Create Your First Prototype

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Prototyping CreateyourfirstmLearningprototypeusing web-basedtools.

  2. Pregame... • • Gotthefiles? Ifnot...Hereisthelink: http://bit.ly/11CTdxy • Asampleofwhatwecandowiththis: http://invis.io/GFEHBU9M

  3. Floatguidesindustry-leadingcompaniesto understandandleveragethepowerofmobile learning.Wehelpcompaniesmeettheirbusiness strategiesbymakingusefulinformation accessible,anytime,anywhere.

  4. Whereyoucanfindmore... MobileLearningCertificateProgram MobileLearningEssentialsSeries LearningEverywhere–PublishedJune2012

  5. Whyprototype? • • • • Mobiledevelopmentcangetpricey Mobiledevelopmentcantaketimeandcanget boggeddown Prototypinghelpsmanagecostandrisk Prototypinghelpsgetbuy-inanduser acceptance/usabilityoutofthewayearlier

  6. Considerations

  7. TheBasics • • • • • BuildingPrototypesshouldbeEASY Prototypesshouldnotneedtobepixel perfect Prototypesgoalsneedtobeclearlyspelled outpriortocreation BuildPrototypesthathaveanoutputthat everyonecansee Ifanimations,etc.aregoingtobeusedinthe final,attempttobuildthemintheprototype

  8. Fidelityvs.Functionality • • • • • • FunctionalFidelityandVisualFidelity Youneedtoenvisionthegoalsforthe prototype Choosemethodandgraphicsophistication basedonthegoals. More“ProductionReady”=moretime Moregraphicallyrich=moretime Morerevisionsatthispointarelessexpensive thanlater

  9. Fidelityvs.Effort

  10. Afewprototyping options.

  11. Ahh...Paper

  12. Paperprototype Pros • • Cons • • • • Inexpensive Easy Doesn'treallyemulatetheUX Hardtopulloffacomplicateddesignorone withalotofscreens/data Noneofthedesignelements/deliverables reallywillliveon Toughtojustifywithsomanygoodtools thesedays.

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

  14. HTML/CSS Pros • • • • Cons • • Inexpensive Easy-ish UsingWebkitbasedbrowsers,youcanemulatemobile devicesprettywell Therearetoolspoppingupnowthateasethis considerably Moretechknowledgemightberequiredthansimple paperprototypes Thereisstillverylittlereuseofassetsforthefinalversion, unlessyouaregoingtomobileweb,notapps

  15. Toolsthataren'treally forprototyping,but stillworkprettywell.

  16. Powerpoint/Keynote Pros • • • Cons • • • • Mosteveryonehasoneofthese Reasonablyeasytouseforanyonefamiliarwithdesktop publishingtools Producesinteractivityandanimation It'satadexpensiveifyoudon’townitalready Noneofthedesignelements/deliverablesreallywillliveon GoodUIStencilsaretoughtofindorneedreprep Outputisn’treally“mobile”

  17. KeynoteExamples http://keynotekungfu.com

  18. Omnigraffle Pros • • • • • Cons • • • greattoolset–highlyextensible,largecommunity Producesfantasticdiagramsandhighqualityoutput Reasonablyeasytouseforanyonefamiliarwithdesktop publishingtools producesinteractivity movefromwireframetoprototypeeasily It'satadexpensive Maconly(whichmightalsobeconsidereda'Pro') Noneofthedesignelements/deliverablesreallywillliveon

  19. Graffle!

  20. DigitalPublishingSuite Pros • • • Cons • • • UsesInDesign Producesrichinteractivity Allowsformedia Fairlypriceyifyouwanttotakeitpastaprototypeanduse itforproduction DoesrequireInDesign,whichsomeofyoumaynothave OutputisiPadonly

  21. DPS

  22. Lotsmoreexamplesin AppSavvy

  23. New!Rapid prototypingtools.

  24. Protosketch

  25. Invisionapp.com

  26. InvisionApp Pros • • • • Cons • • • Inexpensive Super-easy! Web/Cloudbased(soit'scollaborative) Resultsareprettystellar It'sstillinbeta-ishstate CloudBased(maybenotpossibleinyourorg) Assetsarenotgoingtobeusedforthefinaldeliverable

  27. Wrapitup,already.

  28. Whyprototype? • • • • Prototypingisfast Prototypingiseasy Prototypinggetsstakeholdersinvolvedsooner Prototypingsavesmoney

  29. Finishingup • • • Activity Gotthefiles? Ifnot...Hereisthelink: http://bit.ly/11CTdxy

More Related