pragmatic principles for mobile design

���1

“We are so overwhelmed with things these days that our lives are all, more or less, cluttered. Everyone is hurrying and usually just a little late. Notice the faces of the people who rush past on the streets. They nearly all have a strained, harassed look, and anyone you meet will tell you there is no time for anything anymore.” Written in 1924 by Laura Ingalls Wilder—while living on a farm in rural Missouri.

���2

Pragmatic Principles of Mobile Design Download at: http://slidesha.re/PPMID

Brandon Carson Twitter: @brandonwcarson LinkedIn: brandoncarson E-mail: bcarson@entirenet.net !

!!

Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: michelle.lentz@oracle.com

���3

mobile behaviors and mindsets mobile design

mobile case studies

���5

���6

There is no such thing as “mobile learning” anymore.

���7

Your workforce is already mobile.

���8

You need to think mobile first.

���9

How does my design change when dealing with different screen sizes and resolutions?

���10

How do I take advantage of mobile device capabilities?

���11

How will I support and maintain content development for multiple devices?

���12

Prepared to look closely at your content development workflow, your process, and even your organizational structure?

���13

Willing to look at different internal tools, different ways to communicate?

���14

© Flickr : hammershaug

Willing to look at your staff capabilities, roles and job descriptions? … because …

Designing and delivering mobile-optimized learning experiencesmeans you may need to change

how you do what you do, and who you have doing it.

���16

mobile behaviors and mindsets mobile design

mobile case studies

Mobile is ubiquitous. Everyone is mobile, all the time.

People do read on a smartphone.

Knowing the type of device the user is holding doesn’t tell us anything about their intent.

���21

The device we choose to use at a particular time is driven by our context

���22

The four key context drivers are: • Time • Goal • Location • Attitude

���23

Smartphones are the backbone of our daily media use. They are the devices used most throughout the day and serve as the

most common starting point for activities across multiple screens.

���24

“I consider my phone to be my personal device, my go-to device. It’s always close to me if I need quick, precise feedback.”

���25

“When I want more in-depth information, I use my tablet. I’m less distracted because I can’t get a phone call, and I can ignore email on it.”

���26

“My laptop is purely for business. That’s work, where I feel like I need to be doing something productive.”

���27

Ethnography – go out there and understand how people behave with mobile devices in the real world and what they actually need.

From Yahoo, September 2011

From Yahoo, September 2011

People “pogo-stick” !

Context drives device choice. The four context drivers are: Time Goal Location Attitude !

Smartphones are the backbone of our daily device interactions.

Image from Life Magazine, 1955. Photographer George Skadding.

mobile behaviors and mindsets mobile design

mobile case studies

app types: what are the differences?

discover > install > tap > run

native apps !

must be installed on the device written specifically for the OS

web apps !

reside on a server coded once for multiple OS’s

Characteristic Native Web

Downloaded to the device

Coded in a language specific to the device OS (Objective C, Java)

Runs in a browser

Coded in HTML, JavaScript, and CSS

Distributed via an app store

Full use of device hardware and APIs

Limited access to device hardware and data, as well as user data

XX

XX

XX

X

hybrid apps !

written in native languages downloaded to the device

can access APIs content comes from the web

always ask why

Why do you want the content to be available on mobile devices?

!

Is there a business need to support deployment on mobile devices?

!

How are you choosing the specificdevice(s) to support?

!

Should there be a different experience on a phone vs. a tablet?

know mobile constraints

small screensunreliable networks

people in all kinds of situations

Don’t build or convert 150 courses all at once. Conduct a pilot. Start with one course and create

it for every device you intend to support. !

Take into account any problems during development, as well as deployment.

!

Learn from your testers and apply those lessons to the other courses before you start developing.

one step at a time

chunkify

Because They Pogo-Stick

what’s your orientation?

If your app requires substantial interaction, consider a native app over a web app. Complex tasks can be difficult on a mobile browser. !

Consider "tap symmetry" -- give your users enough space to touch the correct area. !

Re-think radio buttons because they are often too close together, and it's easy to touch the wrong one. !

Consider having a back button. It reduces navigation error. !

Make sure your touchable areas LOOK touchable.

Re-consider text input interactions. Users don't like to type on the touchscreen more than they have to. !

People share tablets -- they don't share smartphones.

how clean are you? !

one action per screen only necessary elements

adequate spacing

text, tilt and go

design face-off

A B

A B

A B

A B

mobile behaviors and mindsets mobile design

mobile case studies

Articulate Storyline Desktop

Articulate iPad App

Flash > Mobile conversion project

Conversion from Articulate Presenter

Purpose Extend delivery option of existing Flash-based desktop course to tablets

Output Web and native app to support Android, Windows and iOS devices

Tools Used Articulate Presenter and StorylineKey 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

• 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. • Too many cooks in the kitchen. • Lessons learned on an internal wiki. • IT/Security concerns

Mobile App for New Hires

Mobile App for Performance Support

Mobile App for Performance Support

Purpose Provide a support aid to reinforce 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 and 1 ID

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

some resources: http://www.html5rocks.com http://www.w3.org/Mobile/

http://www.caniuse.com http://www.worklearnmobile.org/

some research for thispresentation came from:

!

Yahoo! Mobile Mindsets: http://www.ipsos-mori.com/Assets/Docs/Publications/IpsosMediaCT_Yahoo_Mobile_Modes_Sept2011.pdf

!

Google: The New Multi-Screen World Study http://www.google.com/think/research-studies/the-new-multi-screen-

world-study.html

!

Brandon Carson Twitter: @brandonwcarson LinkedIn: brandoncarson E-mail: bcarson@entirenet.net !

!!

Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: michelle.lentz@oracle.com

���77