mobile design for instructional designers

App / [xkcd] / CC BY-NC 2.5

Brandon & MichelleIntroduction

Brandon Carson, Entirenet

@brandonwcarson

LinkedIn: brandoncarson

bcarson@entirenet.net

Michelle Lentz, Oracle

@michellelentz

LinkedIn: michelleslentz

michelle.lentz@oracle.com

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

bcarson@entirenet.net

Michelle Lentz, Oracle

@michellelentz

LinkedIn: michelleslentz

michelle.lentz@oracle.com

goodbye