Embed Size (px)
DESCRIPTION
Presentation given at Training 2013 on effective instructional design for mobile users.
Citation preview
App / [xkcd] / CC BY-NC 2.5
Brandon & MichelleIntroduction
Brandon Carson, Entirenet
@brandonwcarson
LinkedIn: brandoncarson
Michelle Lentz, Oracle
@michellelentz
LinkedIn: michelleslentz
Today’s Session
Download at: http://www.entirenet.net/files/SessionDeck_510_Master.pptx
mobile mindsets3 case studies
practical 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 devices
65% of mobile consumers agree that their mobile device quickly provides the answer to questions
whenthey need an immediate response
Source: Yahoo! Insights 2011
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
From Yahoo, September 2011
From Yahoo, September 2011
From Yahoo, September 2011
mobile is the way we computeubiquitous
your designs need to adapt to your user’s context
ambiguity
Image from Life Magazine, 1955. Photographer George Skadding.
they pogostick
differences between appsnative, web or hybrid?
discover > install > click icon > run
native apps
must be installed on the devicewritten 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 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
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
hybrid apps
written in native languagesdownloaded to the device
can access APIscontent comes from the web
case studies
Flash > Mobile conversion project
Articulate Storyline Desktop
Articulate iPad App
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.
• 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
Need to get FULL screenshot of app s Web Page using SnagIt?
Mobile App for New Hires
Mobile App for New Hires: Mobile Only Game
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.
• 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
Mobile App for Performance Support
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
• 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
• Focus on goals• Launch and Iterate• Take small steps
Case Study Debrief
Mobile IDpitfalls & best practices
pitfalls
audio and other bugs/issues
creating interactions from scratch
cost
maintenance
conversion
course length
legacy technology, interactionsand 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 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
know mobile constraints
small screensunreliable networks
people in all kinds of situations
iPhone 4
iPhone 5Typical desktop
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
Brandon & MichelleContact
Brandon Carson, Entirenet
@brandonwcarson
LinkedIn: brandoncarson
Michelle Lentz, Oracle
@michellelentz
LinkedIn: michelleslentz
goodbye
