Visualizing Mobile Design for Learning 051413b

1,812 views
1,736 views

Published on

Presented at ASTD PHL Regional Conference on 5/14/13. This presentation provides a introduction to designing for mobile, key factors and what you need to understand to develop a best in class app or web app. Includes several resources.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,812
On SlideShare
0
From Embeds
0
Number of Embeds
684
Actions
Shares
0
Downloads
55
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Visualizing Mobile Design for Learning 051413b

  1. 1. Designing Learning formobile devicesNick FloroNick@sealworks.comTwitter.com/NickFloroLinda Danielslinda.dnls@gmail.comTwitter.com/ldaniels_designDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 1 of 94
  2. 2. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 2 of 94
  3. 3. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 3 of 94
  4. 4. Understanding the TechnologyDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 4 of 94
  5. 5. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 5 of 94
  6. 6. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 6 of 94
  7. 7. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 7 of 94
  8. 8. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 8 of 94
  9. 9. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 9 of 94
  10. 10. desktopDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 10 of 94
  11. 11. desktopphoneDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 11 of 94
  12. 12. desktoptabletphoneDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 12 of 94
  13. 13. desktoptabletphoneDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 13 of 94
  14. 14. desktoptabletphoneThink Mobile FirstDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 14 of 94
  15. 15. 7 Questions to Define a ProjectWhat is the goal?What are the learning objectives?Who is the audience and howwill they use it?What is the timetable?Current technology orsolution in place?What is the budget?Does the content exist?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 15 of 94
  16. 16. App or Web DeliveryDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 16 of 94
  17. 17. Google Chrome 31% YesMozilla Firefox 20% YesInternet Explorer 7-8 11% NoInternet Explorer 9-10 10% YesApple Safari 15% YesiPhone / iPad 4% YesGoogle Android 2% YesOther 4% NoMarket Share HTML5 SupportBrowser Stats 2013Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 17 of 94
  18. 18. Web AppServerGame / SimulationToolHybridInfoToolResourcesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 18 of 94
  19. 19. Web App Native App• Use web standards• Easy to deploy & update• Support all devices• Faster development cycle• Works everywhere• Requires web connection• Faster performance• Unique platform features• Requires programming• Deploy via Store models• iOS / Android / AmazonWhich is right for your project?Enterprise DeploymentDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 19 of 94
  20. 20. DEVICE ACCESSPERFORMANCE &INTEGRATIONMULTIMEDIAOFFLINE & STORAGECONNECTIVITY SEMANTICSCSS33D, GRAPHICS& EFFECTSDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 20 of 94
  21. 21. • form factorMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 21 of 94
  22. 22. • network latency• form factorMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 22 of 94
  23. 23. • network latency• input mechanism• form factorMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 23 of 94
  24. 24. • network latency• input mechanism• memory• form factorMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 24 of 94
  25. 25. • network latency• input mechanism• memory• form factor• computational powerMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 25 of 94
  26. 26. • network latency• input mechanism• memory• form factor• computational power• batteryMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 26 of 94
  27. 27. • network latency• input mechanism• memory• form factor• computational power• context• batteryMobile FactorsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 27 of 94
  28. 28. ?Does everything need to be mobile?Is that the most important thing?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 28 of 94
  29. 29. AmazonA Quick LookDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 29 of 94
  30. 30. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 30 of 94
  31. 31. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 31 of 94
  32. 32. The mobile environmentsingle early failure = non-returning userDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 32 of 94
  33. 33. The mobile environmentcrucial first 30-60 seconds usageDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 33 of 94
  34. 34. The mobile environmentFewer optionsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 34 of 94
  35. 35. Graphics Location Storage SpeedSolving Developer ChallengesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 35 of 94
  36. 36. ?What does this mean to me?Why should I care?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 36 of 94
  37. 37. ExamplesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 37 of 94
  38. 38. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 38 of 94
  39. 39. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 39 of 94
  40. 40. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 40 of 94
  41. 41. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 41 of 94
  42. 42. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 42 of 94
  43. 43. ?What do I really need to know?How do I begin?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 43 of 94
  44. 44. How should weDesign?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 44 of 94
  45. 45. Before You Design Anything• Know your audiencePersonas... really know them• Know what they wantContent... which precedes design• Know what you wantObjective.... friendship, goodwill, cash...to start a revolution?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 45 of 94
  46. 46. Form Follows FunctionThe 3 F’s of Design• FunctionHow it works• FormWhat something looks likeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 46 of 94
  47. 47. Images Trump WordsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 47 of 94
  48. 48. Danger: Electric ShockDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 48 of 94
  49. 49. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 49 of 94
  50. 50. Focus on theAudience1Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 50 of 94
  51. 51. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 51 of 94
  52. 52. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 52 of 94
  53. 53. is the keyContent2Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 53 of 94
  54. 54. TransparentInterface3Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 54 of 94
  55. 55. Designing AppsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 55 of 94
  56. 56. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 56 of 94
  57. 57. Android Xoom1280 x 720HTC Incredible800 x 480Selecting a SizePixels & Aspect RatioiPad1024 x 768iPhone 4960 x 640iPhone480 x 320Galaxy1280 x 720Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 57 of 94
  58. 58. ?Do I need to know ALL of this?Who can I work with?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 58 of 94
  59. 59. Prototypingtest driving your ideaDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 59 of 94
  60. 60. Flat PagesDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 60 of 94
  61. 61. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 61 of 94
  62. 62. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 62 of 94
  63. 63. Tab BarDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 63 of 94
  64. 64. Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 64 of 94
  65. 65. Tree StructureOneTwoThreeFourFiveSixDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 65 of 94
  66. 66. Tree Structure< BackScreen One >Screen Two >Screen Three >Screen Four >Screen Five >Screen Six >Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 66 of 94
  67. 67. Innovation>Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 67 of 94
  68. 68. weathercubeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 68 of 94
  69. 69. ?Is prototyping really necessary?Can anyone do it?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 69 of 94
  70. 70. Design for FlexibilityDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 70 of 94
  71. 71. TestingDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 71 of 94
  72. 72. Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9• Firefox 4.0, 10-13 +• Chrome 15 - 19 +Test on OS X− Safari 4, 5+− Firefox 4.0, 10-13 +− Chrome 15 - 19 +Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Windows 8− Tablet vs Phone− Portrait vs LandscapeTesting CodeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 72 of 94
  73. 73. Test forUsability• Have someone with fresheyes test drive your site tomake sure it accomplishesboth user goals and sitegoals• SurveyDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 73 of 94
  74. 74. Capture & AnalyzeDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 74 of 94
  75. 75. Using CoverFlow view and Preview of GraphicsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 75 of 94
  76. 76. ?My project is different, are all thesesteps relevant to me?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 76 of 94
  77. 77. ResourcesTo help you grow.Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 77 of 94
  78. 78. kuler.adobe.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 78 of 94
  79. 79. abookapart.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 79 of 94
  80. 80. www.smashingmagazine.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 80 of 94
  81. 81. Nancy Durate Garr ReynoldsDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 81 of 94
  82. 82. Screencasts 101 Mini-Sessionwww.jingproject.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 82 of 94
  83. 83. html5rocks.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 83 of 94
  84. 84. www.uxmag.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 84 of 94
  85. 85. www.twitter.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 85 of 94
  86. 86. www.lrnchat.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 86 of 94
  87. 87. evernote.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 87 of 94
  88. 88. reflectorapp.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 88 of 94
  89. 89. Expand yourCareerOpportunitiesTake some time to explore these resources tofind out what is new in our creative industryfor 2013. Expand your technical skills in thisever-changing technology landscape to keepyour work and portfolio fresh! The list to theright offers insights and tutorials on varioussegments in our niche industry for print anddigital spaces.Open this interactive PDF in Acrobator Acrobat Reader, click on any resourcelink and enjoy!We’ve got some pretty fun stuff happening all overthe web. Join us on LinkedIn, Twitter and Facebookfor the latest in events, jobs, contests and more!TypographyTypophileFontshopThe Type StudioVeerDafontGraphics/Video/AudioiStockphotoVectorStockShutterstockRevostockStockfuelAdobe CS4 & 5Adobe TVLayers MagazinePhotoshop SupportMashablelynda.comFront-End DevelopmentA List ApartW3schoolsCSS Zen GardenHTML5 Siteslynda.comE-learningArticulateCaptivateLectorae-Learning Guildlynda.comContent ManagementWordPressJoomlaDrupalBlog Tipslynda.comVideoVimeoPCWorldVideoToolboxMashablelynda.comThis work is licensed underhttp://creativecommons.org/licenses/by-nc-nd/3.0/2013 Resources GuideIndustry insight for our creative, design,interactive, development, marketing, writing,and e-learning professionals.Download this 2013 Resource Guide to keep your work on the cutting edge www.thebossgroup.com/Job-Seekers/Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 89 of 94
  90. 90. ?How can any ONE person keep upwith all this information?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 90 of 94
  91. 91. Don’t SettleDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 91 of 94
  92. 92. Download the Presentation at:http://www.slideshare.net/nickfloroDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 92 of 94
  93. 93. www.launchcycle.comDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 93 of 94
  94. 94. Thank YouNick Floronick@sealworks.comtwitter.com/NickFloroDownload the Presentation at:http://www.slideshare.net/nickfloroLinda Danielslinda.dnls@gmail.comTwitter.com/ldaniels_designDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearningnick@sealworks.com | linda.dnls@gmail.com 05/14/13 94 of 94

×