Mobile Design for Instructional Designers


Published on

Session 510 from Training 2013, Feb 2013

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • MichelleHere’s a simple table that can help you determine what type of app you should build.
  • MichelleGoal: To provide new hires with instant information to pertinent tasks and questions without requiring access to the VPN.Format: We were discussing redesigning our New Hire portal on our intranet and in the process, added the mobile app for increased access. We started over, designing for mobile first and using responsive web design (specifically CSS within Dreamweaver) to parse the same, and at times different, content depending on the device used. Visibility: The project has high visibility. We keep iterating, until we really feel we have it right. Once we get it down, we’ll use this model to move most of Global HR portal to mobile first design.
  • MichelleOne of the biggest sticking points I’ve had is this game, and it’s a source of disagreement on our team. Several people like it, as it’s a game (acquired from the eLearning Brothers and GUI modified). The game itself is a fun exercise, and requires you to earn points by answering Oracle trivia (learned in the app) and using those points to shoot baskets. My issue with the game is that it forces you into landscape mode. What are your thoughts on forcing an orientation change on the user? Good, bad, neutral?
  • MichelleIt’s a high visibility project, so we have too many people chiming in. Initially, we had 2 IDs for user experience, a graphic designer, and a web developer. We started the mobile app on paper in September and by December, we had our current working prototype. However, this is still a work in progress and we’ll continue to iterate until we’re completely happy.
  • BrandonWe created a simple web-app optimized for iPhone as a prototype. We used Adobe’s Muse software, which is available via their Creative Cloud software subscription service. With Muse, you can leverage built-in templates and widgets to quickly build prototypes and even full apps.With Creative Cloud you can pay a small monthly fee and get access to many of Adobe’s software to help you build apps.This app uses conventional navigation elements for mobile apps, including large areas for touch.
  • BrandonThe idea behind this app is to provide a support aid to reinforce critical information about a specific topicIt’s a web-based app optimized for iPhoneApp was created in Adobe Muse using existing templates provided by Muse. Simple interface elements are all drawn in Muse so that scaling will produce the best results.This was done by a developer on our team in 3 days
  • MichelleNow based on some of our experiences, we’d like to discuss some pitfalls to watch out for, and some best practices we’ve learned.
  • MichelleA lot of legacy content and courses you have may be built in technologies not supported on mobile devices you will be targeting.That means you may have to rebuild. You may even have simple interactions built that rely on conventions that aren’t mobile-friendly like mouse hovers.You have to compensate for the amount of re-work necessary if you want to support mobile devices with legacy content.
  • MichelleMake touchable elements look touchable
  • MichelleWhen considering graphics determine what your learner should be focused on: task or content.Notice that the ToDo List app has no original content. The focus is squarely on completing a task and, thus, the graphics are all user interface elements.The fitness app focuses purely on the content and even hides the status bar at the top in order to keep the user engaged in the content – without status updates as distractions.
  • MichelleTry to keep one action per screen.Only have the necessary elements on screen to fulfil the action and provide navigation choicesBe sure to adequately space the elements
  • MichelleWhich is the cleaner UI? Why?
  • 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
    3. 3. Today’s SessionDownload at:
    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. they pogostickImage from Life Magazine, 1955. Photographer George Skadding.
    12. 12. From Yahoo, September 2011
    13. 13. mobile is the way we compute ubiquitous
    14. 14. your designs need to adapt to your ambiguity user’s context
    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 days
    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• Iterate a lot• Launch and Iterate• Build adaptable systems that don’t force users down a single path
    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.com
    57. 57. Contact Brandon & MichelleBrandon Carson, Entirenet @brandonwcarson LinkedIn: brandoncarson bcarson@entirenet.netMichelle Lentz, Oracle @michellelentz LinkedIn: michelleslentz
    58. 58. goodbye