Download - Mobile Design for Instructional Designers
![Page 1: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/1.jpg)
App / [xkcd] / CC BY-NC 2.5
![Page 2: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/2.jpg)
Brandon & MichelleIntroduction
Brandon Carson, Entirenet
@brandonwcarson
LinkedIn: brandoncarson
Michelle Lentz, Oracle
@michellelentz
LinkedIn: michelleslentz
![Page 3: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/3.jpg)
Today’s Session
Download at: http://www.entirenet.net/files/SessionDeck_510_Master.pptx
![Page 4: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/4.jpg)
![Page 5: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/5.jpg)
mobile mindsets3 case studies
practical ID for mobile
![Page 6: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/6.jpg)
Attribution: Apple Newton 2100 / [visual media] / CC BY-NC-ND 2.0
![Page 7: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/7.jpg)
Mobile users engage in short ‘activity bursts’with the expectation to continue
their experience across multiple devices
![Page 8: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/8.jpg)
65% of mobile consumers agree that their mobile device quickly provides the answer to questions
whenthey need an immediate response
Source: Yahoo! Insights 2011
![Page 9: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/9.jpg)
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
![Page 10: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/10.jpg)
From Yahoo, September 2011
![Page 11: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/11.jpg)
From Yahoo, September 2011
![Page 12: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/12.jpg)
From Yahoo, September 2011
![Page 13: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/13.jpg)
mobile is the way we computeubiquitous
![Page 14: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/14.jpg)
your designs need to adapt to your user’s context
ambiguity
![Page 15: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/15.jpg)
![Page 16: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/16.jpg)
Image from Life Magazine, 1955. Photographer George Skadding.
they pogostick
![Page 17: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/17.jpg)
![Page 18: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/18.jpg)
differences between appsnative, web or hybrid?
![Page 19: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/19.jpg)
discover > install > click icon > run
![Page 20: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/20.jpg)
native apps
must be installed on the devicewritten specifically for the OS
![Page 21: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/21.jpg)
web apps
reside on a servercoded once for multiple OS’s
![Page 22: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/22.jpg)
“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
![Page 23: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/23.jpg)
Characteristic Native Web
Downloaded to the device XCoded in a language specific to the device OS Objective C, Java) X
Runs in a browser X
Coded in HTML, JavaScript, and CSS X
Distributed via an app store X
Full use of device hardware and APIs XLimited access to device hardware and data, as well as user data X
![Page 24: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/24.jpg)
hybrid apps
written in native languagesdownloaded to the device
can access APIscontent comes from the web
![Page 25: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/25.jpg)
![Page 26: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/26.jpg)
case studies
![Page 27: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/27.jpg)
Flash > Mobile conversion project
Articulate Storyline Desktop
Articulate iPad App
![Page 28: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/28.jpg)
Conversion from Articulate Presenter
Purpose 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 Storyline
Key Team Members
Me.
Timeline 2 weeks to convert 7 modules (2 hrs. of seat time) from Articulate Presenter to Storyline and output to both web and native versions.
![Page 29: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/29.jpg)
• 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
Conversion from Articulate Presenter
![Page 30: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/30.jpg)
Need to get FULL screenshot of app s Web Page using SnagIt?
Mobile App for New Hires
![Page 31: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/31.jpg)
Mobile App for New Hires: Mobile Only Game
![Page 32: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/32.jpg)
Mobile App for New Hires
Purpose 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 Members
Web designer/programmer, graphic designer, instructional designers. HR SME
Timeline 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.
![Page 33: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/33.jpg)
• 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.
Mobile App New Hires
![Page 34: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/34.jpg)
Mobile App for Performance Support
![Page 35: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/35.jpg)
Mobile App for Performance Support
Purpose 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 Members
I developer
Timeline 3 days
http://tincanapi.businesscatalyst.com/overview-of-tin-can.html
![Page 36: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/36.jpg)
• 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
Mobile App for Performance Support
![Page 37: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/37.jpg)
• Focus on goals• Launch and Iterate• Take small steps
Case Study Debrief
![Page 38: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/38.jpg)
![Page 39: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/39.jpg)
Mobile IDpitfalls & best practices
![Page 40: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/40.jpg)
pitfalls
![Page 41: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/41.jpg)
audio and other bugs/issues
![Page 42: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/42.jpg)
creating interactions from scratch
![Page 43: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/43.jpg)
cost
![Page 44: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/44.jpg)
maintenance
![Page 45: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/45.jpg)
conversion
![Page 46: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/46.jpg)
course length
![Page 47: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/47.jpg)
legacy technology, interactionsand Flash
![Page 48: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/48.jpg)
![Page 49: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/49.jpg)
best practices for mobile design
![Page 50: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/50.jpg)
Why do you want the course to be available on mobile devices?
How are you choosing the specific device to support?
Should the course provide a different experience on a phone vs. a tablet?
Is there a business need to support deployment on mobile devices?
always ask why
![Page 51: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/51.jpg)
know mobile constraints
small screensunreliable networks
people in all kinds of situations
![Page 52: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/52.jpg)
iPhone 4
iPhone 5Typical desktop
![Page 53: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/53.jpg)
one step at a time
![Page 54: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/54.jpg)
chunkify
![Page 55: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/55.jpg)
what’s your orientation?
![Page 56: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/56.jpg)
![Page 57: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/57.jpg)
task or content?
![Page 58: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/58.jpg)
how clean are you?
one action per screenonly necessary elements
adequate spacing
![Page 59: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/59.jpg)
cleanliness
![Page 60: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/60.jpg)
text, tilt and go
![Page 61: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/61.jpg)
how are you performing?
![Page 62: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/62.jpg)
#j*di
![Page 63: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/63.jpg)
some resources:http://www.html5rocks.comhttp://www.w3.org/Mobile/http://www.caniuse.com
![Page 64: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/64.jpg)
Brandon & MichelleContact
Brandon Carson, Entirenet
@brandonwcarson
LinkedIn: brandoncarson
Michelle Lentz, Oracle
@michellelentz
LinkedIn: michelleslentz
![Page 65: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/65.jpg)
![Page 66: Mobile Design for Instructional Designers](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c80ede4a7959015e8b4595/html5/thumbnails/66.jpg)
goodbye