Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
App / [xkcd] / CC BY-NC 2.5
Introduction Brandon & MichelleBrandon Carson, Entirenet  @brandonwcarson  LinkedIn: brandoncarson  bcarson@entirenet.netM...
Today’s SessionDownload at:http://www.entirenet.net/files/SessionDeck_510_Master.pptx
mobile mindsets   3 case studiespractical ID for mobile
Attribution: Apple Newton 2100 / [visual media] / CC BY-NC-ND 2.0
Mobile users engage in short ‘activity bursts’      with the expectation to continue their experience across multiple devi...
65% of mobile consumers agree that their mobile device    quickly provides the answer to questions when          they need...
The deeply personal connection that people have with their connected devices means that we must keep in      mind their co...
From Yahoo, September 2011
From Yahoo, September 2011
From Yahoo, September 2011
mobile is the way we compute           ubiquitous
your designs need to adapt to your            ambiguity          user’s context
they pogostickImage from Life Magazine, 1955. Photographer George Skadding.
native, web or hybrid?differences between apps
discover > install > click icon > run
native appsmust be installed on the device written specifically for the OS
web apps    reside on a servercoded once for multiple OS’s
“In general, if a Web site is a configurable tool   that a user employs frequently, it should           probably be a nati...
Characteristic                    Native   WebDownloaded to the device                                XCoded in a language...
hybrid apps written in native languages downloaded to the device       can access APIscontent comes from the web
case studies
Articulate iPad AppFlash > Mobile conversion projectArticulate Storyline Desktop
Conversion from Articulate PresenterPurpose      Extend delivery option of existing Flash-based desktop course to tablets....
Conversion from Articulate Presenter• Bottom Line:   • Storyline easily converts existing Presenter files   • Watch those ...
Mobile App for New Hires                           Need to                           get FULL                           sc...
Mobile App for New Hires: Mobile OnlyGame
Mobile App for New HiresPurpose      Give new hires access to most requested information without the complication of a fir...
Mobile App New Hires• Bottom Line:   • We’re still in beta / testing. But our output is now successfully parsing to both  ...
Mobile App for Performance Support
Mobile App for Performance SupportPurpose      Provide a support aid to reinforce critical information about a specific to...
Mobile App for Performance Support• Bottom Line:   • Muse is a WYSIWYG editor for creating web apps   • Comes loaded with ...
Case Study Debrief• Focus on goals• Launch and Iterate• Take small steps
Mobile IDpitfalls & best practices
pitfalls
audio and other bugs/issues
creating interactions from scratch
cost
maintenance
conversion
course length
legacy technology,   interactions    and Flash
best practices for mobile design
Why do you want the course to be available on               mobile devices?   How are you choosing the specific device to ...
know mobile constraints        small screens     unreliable networkspeople in all kinds of situations
Typical desktop                  iPhone 5                             iPhone 4
one step at a time
chunkify
what’s your orientation?
task or content?
how clean are you? one action per screenonly necessary elements   adequate spacing
cleanliness
text, tilt and go
how are you performing?
#j*di
some resources:http://www.html5rocks.comhttp://www.w3.org/Mobile/ http://www.caniuse.com
Contact Brandon & MichelleBrandon Carson, Entirenet  @brandonwcarson  LinkedIn: brandoncarson  bcarson@entirenet.netMichel...
goodbye
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Mobile Design for Instructional Designers
Upcoming SlideShare
Loading in …5
×

Mobile Design for Instructional Designers

2,098 views

Published on

Presentation given at Training 2013 on effective instructional design for mobile users.

  • Be the first to comment

Mobile Design for Instructional Designers

  1. 1. App / [xkcd] / CC BY-NC 2.5
  2. 2. Introduction Brandon & MichelleBrandon Carson, Entirenet @brandonwcarson LinkedIn: brandoncarson bcarson@entirenet.netMichelle Lentz, Oracle @michellelentz LinkedIn: michelleslentz michelle.lentz@oracle.com
  3. 3. Today’s SessionDownload at:http://www.entirenet.net/files/SessionDeck_510_Master.pptx
  4. 4. mobile mindsets 3 case studiespractical ID for mobile
  5. 5. Attribution: Apple Newton 2100 / [visual media] / CC BY-NC-ND 2.0
  6. 6. Mobile users engage in short ‘activity bursts’ with the expectation to continue their experience across multiple devices
  7. 7. 65% of mobile consumers agree that their mobile device quickly provides the answer to questions when they need an immediate response Source: Yahoo! Insights 2011
  8. 8. The deeply personal connection that people have with their connected devices means that we must keep in mind their consumption habits, activities and accompanying mindsets
  9. 9. From Yahoo, September 2011
  10. 10. From Yahoo, September 2011
  11. 11. From Yahoo, September 2011
  12. 12. mobile is the way we compute ubiquitous
  13. 13. your designs need to adapt to your ambiguity user’s context
  14. 14. they pogostickImage from Life Magazine, 1955. Photographer George Skadding.
  15. 15. native, web or hybrid?differences between apps
  16. 16. discover > install > click icon > run
  17. 17. native appsmust be installed on the device written specifically for the OS
  18. 18. web apps reside on a servercoded once for multiple OS’s
  19. 19. “In general, if a Web site is a configurable tool that a user employs frequently, it should probably be a native app.But if a Web site is an information portal whose focus is on content, it should probably be a mobile-optimized Web site.” --Jordan Julien
  20. 20. Characteristic Native WebDownloaded to the device XCoded in a language specific to the device OSObjective C, Java) XRuns in a browser XCoded in HTML, JavaScript, and CSS XDistributed via an app store XFull use of device hardware and APIs XLimited access to device hardware and data, as wellas user data X
  21. 21. hybrid apps written in native languages downloaded to the device can access APIscontent comes from the web
  22. 22. case studies
  23. 23. Articulate iPad AppFlash > Mobile conversion projectArticulate Storyline Desktop
  24. 24. Conversion from Articulate PresenterPurpose Extend delivery option of existing Flash-based desktop course to tablets.Output Web-based and native app to support Android, Windows and iOS devices.Tools Used Articulate Presenter and StorylineKey Team Me.MembersTimeline 2 weeks to convert 7 modules (2 hrs. of seat time) from Articulate Presenter to Storyline and output to both web and native versions.
  25. 25. Conversion from Articulate Presenter• Bottom Line: • Storyline easily converts existing Presenter files • Watch those Engage interactions • If you have substantial interaction, consider the iPad app over a web app (native). Complex tasks can be difficult using a tablet browser • Make sure your touchable areas look touchable • Know that when a user can’t activate navigation, they consider the app to be broken
  26. 26. Mobile App for New Hires Need to get FULL screenshot of app s Web Page using SnagIt?
  27. 27. Mobile App for New Hires: Mobile OnlyGame
  28. 28. Mobile App for New HiresPurpose Give new hires access to most requested information without the complication of a firewall and from whatever device they choose to use. App includes Oracle news, welcome videos from executives, a To Do list, the History of Oracle, and a game.Output Web-based mobile app that also works on a PC. By thinking mobile first, we were able to create a responsive web app that supports both mobile and desktop.Tools Used App was created in Dreamweaver with extensive use of CSS to create the responsive design.Key Team Web designer/programmer, graphic designer, instructional designers. HR SMEMembersTimeline Ongoing. While move new hire information to mobile is important, we have an iterative process with exhaustive reviews. We’re constantly refining and learning. Our goal is to get this one right and then apply our lessons learned to future apps.
  29. 29. Mobile App New Hires• Bottom Line: • We’re still in beta / testing. But our output is now successfully parsing to both mobile and web. Iterating constantly. • Our biggest issues have been too many cooks in the kitchen (so to speak) and disagreement over the forced landscape mode of the game. • We have learned a lot and as we continue to iterate, we are keeping a list of lessons learned on an internal wiki so that we can apply them to our future mobile apps.
  30. 30. Mobile App for Performance Support
  31. 31. Mobile App for Performance SupportPurpose Provide a support aid to reinforce critical information about a specific topic.Output Web-based mobile app optimized for iPhone.Tools Used App was created in Adobe Muse using existing templates provided by Muse.Key Team I developerMembersTimeline 3 dayshttp://tincanapi.businesscatalyst.com/overview-of-tin-can.html
  32. 32. Mobile App for Performance Support• Bottom Line: • Muse is a WYSIWYG editor for creating web apps • Comes loaded with templates and widgets • Real easy to build rapid prototypes: you can import PSD and Fireworks files
  33. 33. Case Study Debrief• Focus on goals• Launch and Iterate• Take small steps
  34. 34. Mobile IDpitfalls & best practices
  35. 35. pitfalls
  36. 36. audio and other bugs/issues
  37. 37. creating interactions from scratch
  38. 38. cost
  39. 39. maintenance
  40. 40. conversion
  41. 41. course length
  42. 42. legacy technology, interactions and Flash
  43. 43. best practices for mobile design
  44. 44. Why do you want the course to be available on mobile devices? How are you choosing the specific device to support? always ask whyShould the course provide a different experience on a phone vs. a tablet?Is there a business need to support deployment on mobile devices?
  45. 45. know mobile constraints small screens unreliable networkspeople in all kinds of situations
  46. 46. Typical desktop iPhone 5 iPhone 4
  47. 47. one step at a time
  48. 48. chunkify
  49. 49. what’s your orientation?
  50. 50. task or content?
  51. 51. how clean are you? one action per screenonly necessary elements adequate spacing
  52. 52. cleanliness
  53. 53. text, tilt and go
  54. 54. how are you performing?
  55. 55. #j*di
  56. 56. some resources:http://www.html5rocks.comhttp://www.w3.org/Mobile/ http://www.caniuse.com
  57. 57. Contact Brandon & MichelleBrandon Carson, Entirenet @brandonwcarson LinkedIn: brandoncarson bcarson@entirenet.netMichelle Lentz, Oracle @michellelentz LinkedIn: michelleslentz michelle.lentz@oracle.com
  58. 58. goodbye

×