PMI Forum: Designing Mobile Apps for Learning on 10-04-13

1,388 views

Published on

Learn how to design and architect mobile apps for learning. Whether you are looking to develop a web based app, course or tool or if you want to deliver a native app. Resources included for best practices, sketching, wireframing, prototyping and design.

Published in: Education, Technology

PMI Forum: Designing Mobile Apps for Learning on 10-04-13

  1. 1. Nick Floro Nick@sealworks.com Twitter.com/NickFloro Mobile Apps Putting Learning in the Palm of your Hand PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 1 of 117
  2. 2. Mobile devices everywhere PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 2 of 117
  3. 3. 138.5million smartphones in US 58% of phone market PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 3 of 117
  4. 4. 4.5 billion smartphones by 2018 60% on LTE PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 4 of 117
  5. 5. 70billion apps in 2013 Smartphones 58 billion and 14 billion to tablets estimated PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 5 of 117
  6. 6. How do you define mobile? a.smartphone b.tablet c. laptop d.all of the above PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 6 of 117
  7. 7. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 7 of 117
  8. 8. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 8 of 117
  9. 9. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 9 of 117
  10. 10. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 10 of 117
  11. 11. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 11 of 117
  12. 12. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 12 of 117
  13. 13. Understanding the Technology PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 13 of 117
  14. 14. A great pocket computer. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 14 of 117
  15. 15. Content consumption. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 15 of 117
  16. 16. Create & organize. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 16 of 117
  17. 17. Games, games, games. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 17 of 117
  18. 18. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 18 of 117
  19. 19. desktop PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 19 of 117
  20. 20. desktop phone PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 20 of 117
  21. 21. desktop tabletphone PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 21 of 117
  22. 22. desktop tablet phone PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 22 of 117
  23. 23. desktoptabletphone Think Mobile First Progressive Enhancement PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 23 of 117
  24. 24. 7 Questions to Define a Project What is the goal? What are the learning objectives? Who is the audience and how will they use it? What is the timetable? Current technology or solution in place? What is the budget? Does the content exist? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 24 of 117
  25. 25. • network latency • input mechanism • memory • form factor • computational power • context • battery Mobile Factors PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 25 of 117
  26. 26. App or Web Delivery PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 26 of 117
  27. 27. Web AppServer Game / Simulation Tool Hybrid Info Tool Resources PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 27 of 117
  28. 28. 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 / Amazon • Increase Costs per OS Which is right for your project? Enterprise Deployment PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 28 of 117
  29. 29. DEVICE ACCESS PERFORMANCE & INTEGRATION MULTIMEDIA OFFLINE & STORAGECONNECTIVITY SEMANTICS CSS3 3D, GRAPHICS & EFFECTS PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 29 of 117
  30. 30. Responsive Design PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 30 of 117
  31. 31. Create a Road Map PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 31 of 117
  32. 32. Does everything need to be mobile? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 32 of 117
  33. 33. Amazon A Quick Look PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 33 of 117
  34. 34. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 34 of 117
  35. 35. Amazon App Hybrid App PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 35 of 117
  36. 36. The mobile environment single early failure = non-returning user PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 36 of 117
  37. 37. The mobile environment crucial first 30-60 seconds usage PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 37 of 117
  38. 38. The mobile environment Fewer options PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 38 of 117
  39. 39. Graphics Location Storage Speed Solving Developer Challenges PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 39 of 117
  40. 40. Examples PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 40 of 117
  41. 41. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 41 of 117
  42. 42. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 42 of 117
  43. 43. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 43 of 117
  44. 44. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 44 of 117
  45. 45. Develop once, deliver everywhere. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 45 of 117
  46. 46. What do I really need to know? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 46 of 117
  47. 47. Focus on the Audience PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 47 of 117
  48. 48. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 48 of 117
  49. 49. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 49 of 117
  50. 50. Content is Key PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 50 of 117
  51. 51. simplify. write it down cut in half cut it again break cut it by half wrap PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 51 of 117
  52. 52. Designing Apps PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 52 of 117
  53. 53. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 53 of 117
  54. 54. Android Xoom 1280 x 720 HTC Incredible 800 x 480 Selecting a Size Pixels & Aspect Ratio iPad 1024 x 768 iPhone 4 960 x 640 iPhone 480 x 320 Galaxy 1280 x 720 PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 54 of 117
  55. 55. Do I need to know ALL of this? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 55 of 117
  56. 56. Flat Pages PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 56 of 117
  57. 57. Apple Weather PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 57 of 117
  58. 58. Yahoo Weather PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 58 of 117
  59. 59. Yahoo Weather PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 59 of 117
  60. 60. Tab Bar PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 60 of 117
  61. 61. Apple Clock PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 61 of 117
  62. 62. Tree Structure One Two Three Four Five Six PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 62 of 117
  63. 63. Tree Structure < Back Screen One > Screen Two > Screen Three > Screen Four > Screen Five > Screen Six > PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 63 of 117
  64. 64. First Aid PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 64 of 117
  65. 65. First Aid PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 65 of 117
  66. 66. First Aid PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 66 of 117
  67. 67. Innovation > PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 67 of 117
  68. 68. evernote PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 68 of 117
  69. 69. evernote PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 69 of 117
  70. 70. Pulse PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 70 of 117
  71. 71. Pulse PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 71 of 117
  72. 72. Zite PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 72 of 117
  73. 73. Zite PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 73 of 117
  74. 74. Sketching where ideas begin PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 74 of 117
  75. 75. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 75 of 117
  76. 76. keynotekungfu.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 76 of 117
  77. 77. Sketchy & iMockUps PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 77 of 117
  78. 78. Prototyping test driving your idea PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 78 of 117
  79. 79. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 79 of 117
  80. 80. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 80 of 117
  81. 81. Adobe Acrobat PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 81 of 117
  82. 82. POP - Prototyping on Paper PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 82 of 117
  83. 83. POP - Prototyping on Paper PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 83 of 117
  84. 84. POP - Prototyping on Paper PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 84 of 117
  85. 85. POP - Prototyping on Paper PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 85 of 117
  86. 86. POP - Prototyping on Paper PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 86 of 117
  87. 87. Is prototyping really necessary? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 87 of 117
  88. 88. Design for Flexibility PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 88 of 117
  89. 89. Testing PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 89 of 117
  90. 90. Test on Mobile − iOS 6.x - 7.x − Android 2.x - 4.x − Windows 8 − Tablet vs Phone − Portrait vs Landscape Test on Windows 8, 7, Vista, XP - Internet Explorer 6, 7, 8, 9, 10 - Firefox 19 + - Chrome 20 + Test on OS X − Safari 4, 5+ − Firefox 19 + − Chrome 20 + Testing Code PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 90 of 117
  91. 91. Test for Usability • Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals • Survey PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 91 of 117
  92. 92. Capture & Analyze PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 92 of 117
  93. 93. Using CoverFlow view and Preview of Graphics PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 93 of 117
  94. 94. My project is different, is this all relevant to me? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 94 of 117
  95. 95. What ideas will you apply from today? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 95 of 117
  96. 96. ResourcesTo help you grow. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 96 of 117
  97. 97. Encourage your team to be creative. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 97 of 117
  98. 98. Development  &  Content  Tools  HTML5  /  CSS  /  JavaScript  Dreamweaver  Adobe  Crea5ve  Cloud  Jquery.com  Sencha  Touch  Edge  Code,  Inspect  Adobe  Crea5ve  Cloud  Graphics    Fireworks  Photoshop  HTML  Canvas  Anima8on  Edge  –  Adobe  Crea5ve  Cloud  Sencha  Animator  Hype  (mac  only)  Video  (H264  for  mobile  /  html5)  Camtasia  Video  Editor  (Vegas,  Premiere)  Adobe  Media  Encoder  QuickTime  Telestream  Cleaner  Adobe  ASer  Effects  Audio  Audacity  (open  source  –  free)  Adobe  Audi5on  (crea5ve  cloud)  CMS  WordPress  (BuddyPress),  Joomla,  Drupal  Blogs/Wikis  Rapid  (mul8media)  Content  Tools  Adobe  Cap5vate  Ar5culate  StoryLine  Lectora  RapidIntake    Adobe  Acrobat  Social  Tools    Facebook,  YouTube,  TwiZer,  Google  Plus,   Yammer,  MicrosoS  Sharepoint  Wireframing  /  Sketching  Keynote  /  PowerPoint  Balsamiq  Briefs  (mac  only)  Notebook  and  Crayons Mobile Development with Nick Floro PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 98 of 117
  99. 99. PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 99 of 117
  100. 100. kuler.adobe.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 100 of 117
  101. 101. Adobe Kuler kuler.adobe.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 101 of 117
  102. 102. abookapart.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 102 of 117
  103. 103. www.smashingmagazine.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 103 of 117
  104. 104. Nancy Durate Garr Reynolds PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 104 of 117
  105. 105. evernote.com/skitch/ PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 105 of 117
  106. 106. html5rocks.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 106 of 117
  107. 107. www.uxmag.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 107 of 117
  108. 108. www.twitter.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 108 of 117
  109. 109. www.lrnchat.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 109 of 117
  110. 110. reflectorapp.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 110 of 117
  111. 111. Don’t Settle PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 111 of 117
  112. 112. How it works. www.apple.com/designed-by-apple/ PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 112 of 117
  113. 113. Download the Presentation at: http://www.slideshare.net/nickfloro PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 113 of 117
  114. 114. what’s next... PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 114 of 117
  115. 115. Are you ready? PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 115 of 117
  116. 116. LaunchCycle.com PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 116 of 117
  117. 117. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro PMI Networks Forum 10/3/13 Understanding Mobile Apps for Learning 10/04/13 117 of 117

×