pragmatic principles of mobile design
DESCRIPTION
For ASTD TechKnowledge 2014. Michelle Lentz and Brandon Carson.TRANSCRIPT
���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: [email protected] !
!!
Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: [email protected]
���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: [email protected] !
!!
Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: [email protected]
���77