Pragmatic Principles for Mobile Design
-
date post
18-Oct-2014 -
Category
Technology
-
view
759 -
download
0
description
Transcript of Pragmatic Principles for Mobile Design
![Page 1: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/1.jpg)
���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.
![Page 2: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/2.jpg)
���2
Pragmatic Principles of Mobile Design Download at: http://slidesha.re/PPMID
![Page 3: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/3.jpg)
Brandon Carson Twitter: @brandonwcarson LinkedIn: brandoncarson E-mail: [email protected] !
!!
Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: [email protected]
���3
![Page 4: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/4.jpg)
mobile behaviors and mindsets mobile design
mobile case studies
![Page 5: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/5.jpg)
���5
![Page 6: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/6.jpg)
���6
There is no such thing as “mobile learning” anymore.
![Page 7: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/7.jpg)
���7
Your workforce is already mobile.
![Page 8: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/8.jpg)
���8
You need to think mobile first.
![Page 9: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/9.jpg)
���9
How does my design change when dealing with different screen sizes and resolutions?
![Page 10: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/10.jpg)
���10
How do I take advantage of mobile device capabilities?
![Page 11: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/11.jpg)
���11
How will I support and maintain content development for multiple devices?
![Page 12: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/12.jpg)
���12
Prepared to look closely at your content development workflow, your process, and even your organizational structure?
![Page 13: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/13.jpg)
���13
Willing to look at different internal tools, different ways to communicate?
![Page 14: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/14.jpg)
���14
© Flickr : hammershaug
Willing to look at your staff capabilities, roles and job descriptions? … because …
![Page 15: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/15.jpg)
Designing and delivering mobile-optimized learning experiencesmeans you may need to change
how you do what you do, and who you have doing it.
![Page 16: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/16.jpg)
���16
![Page 17: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/17.jpg)
mobile behaviors and mindsets mobile design
mobile case studies
![Page 18: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/18.jpg)
Mobile is ubiquitous. Everyone is mobile, all the time.
![Page 19: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/19.jpg)
People do read on a smartphone.
![Page 20: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/20.jpg)
Knowing the type of device the user is holding doesn’t tell us anything about their intent.
![Page 21: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/21.jpg)
���21
The device we choose to use at a particular time is driven by our context
![Page 22: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/22.jpg)
���22
The four key context drivers are: • Time • Goal • Location • Attitude
![Page 23: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/23.jpg)
���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.
![Page 24: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/24.jpg)
���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.”
![Page 25: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/25.jpg)
���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.”
![Page 26: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/26.jpg)
���26
“My laptop is purely for business. That’s work, where I feel like I need to be doing something productive.”
![Page 27: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/27.jpg)
���27
Ethnography – go out there and understand how people behave with mobile devices in the real world and what they actually need.
![Page 28: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/28.jpg)
From Yahoo, September 2011
![Page 29: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/29.jpg)
From Yahoo, September 2011
![Page 30: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/30.jpg)
![Page 31: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/31.jpg)
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.
![Page 32: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/32.jpg)
![Page 33: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/33.jpg)
mobile behaviors and mindsets mobile design
mobile case studies
![Page 34: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/34.jpg)
app types: what are the differences?
![Page 35: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/35.jpg)
discover > install > tap > run
![Page 36: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/36.jpg)
native apps !
must be installed on the device written specifically for the OS
![Page 37: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/37.jpg)
web apps !
reside on a server coded once for multiple OS’s
![Page 38: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/38.jpg)
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
![Page 39: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/39.jpg)
hybrid apps !
written in native languages downloaded to the device
can access APIs content comes from the web
![Page 40: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/40.jpg)
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?
![Page 41: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/41.jpg)
know mobile constraints
small screensunreliable networks
people in all kinds of situations
![Page 42: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/42.jpg)
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
![Page 43: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/43.jpg)
chunkify
![Page 44: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/44.jpg)
Because They Pogo-Stick
![Page 45: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/45.jpg)
what’s your orientation?
![Page 46: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/46.jpg)
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.
![Page 47: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/47.jpg)
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.
![Page 48: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/48.jpg)
how clean are you? !
one action per screen only necessary elements
adequate spacing
![Page 49: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/49.jpg)
text, tilt and go
![Page 50: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/50.jpg)
design face-off
![Page 51: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/51.jpg)
A B
![Page 52: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/52.jpg)
A B
![Page 53: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/53.jpg)
A B
![Page 54: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/54.jpg)
A B
![Page 55: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/55.jpg)
![Page 56: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/56.jpg)
![Page 57: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/57.jpg)
![Page 58: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/58.jpg)
![Page 59: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/59.jpg)
![Page 60: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/60.jpg)
mobile behaviors and mindsets mobile design
mobile case studies
![Page 61: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/61.jpg)
Articulate Storyline Desktop
Articulate iPad App
Flash > Mobile conversion project
![Page 62: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/62.jpg)
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
![Page 63: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/63.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
• Know that when a user can’t activate navigation, they consider the app to be broken
Conversion from Articulate Presenter
![Page 64: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/64.jpg)
![Page 65: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/65.jpg)
Need to get FULL screenshot of app s Web Page using SnagIt?
Mobile App for New Hires
![Page 66: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/66.jpg)
Mobile App for New Hires: Mobile Only Game
![Page 67: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/67.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 68: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/68.jpg)
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
![Page 69: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/69.jpg)
![Page 70: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/70.jpg)
Mobile App for Performance Support
![Page 71: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/71.jpg)
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
![Page 72: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/72.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 73: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/73.jpg)
Focus on goals !
Launch and Iterate !
Take small steps
![Page 74: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/74.jpg)
![Page 75: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/75.jpg)
some resources: http://www.html5rocks.com http://www.w3.org/Mobile/
http://www.caniuse.com http://www.worklearnmobile.org/
![Page 76: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/76.jpg)
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
!
![Page 77: Pragmatic Principles for Mobile Design](https://reader031.fdocuments.us/reader031/viewer/2022013100/54426dedb1af9f390a8b4664/html5/thumbnails/77.jpg)
Brandon Carson Twitter: @brandonwcarson LinkedIn: brandoncarson E-mail: [email protected] !
!!
Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: [email protected]
���77