Your SlideShare is downloading. ×
  • Like
Pragmatic Principles of Mobile Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Pragmatic Principles of Mobile Design


For ASTD TechKnowledge 2014. …

For ASTD TechKnowledge 2014.
Michelle Lentz and Brandon Carson.

Published in Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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. 1
  • 2. Pragmatic Principles of Mobile Design Download at: 2
  • 3. Brandon Carson Twitter: @brandonwcarson LinkedIn: brandoncarson E-mail: ! ! ! Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: 3
  • 4. mobile behaviors and mindsets mobile design mobile case studies
  • 5. 5
  • 6. There is no such thing as “mobile learning” anymore. 6
  • 7. Your workforce is already mobile. 7
  • 8. You need to think mobile first. 8
  • 9. How does my design change when dealing with different screen sizes and resolutions? 9
  • 10. How do I take advantage of mobile device capabilities? 10
  • 11. How will I support and maintain content
 development for multiple devices? 11
  • 12. Prepared to look closely at your content development workflow, your process, and even your organizational structure? 12
  • 13. Willing to look at different internal tools, different ways to communicate? 13
  • 14. Willing to look at your staff capabilities, roles and job descriptions? … because … 
 © Flickr : hammershaug
  • 15. Designing and delivering mobile-optimized learning experiences
 means you may need to change
 how you do what you do, and who you have doing it.
  • 16. 16
  • 17. mobile behaviors and mindsets mobile design mobile case studies
  • 18. Mobile is ubiquitous. Everyone is mobile, all the time.
  • 19. People do read on a smartphone.
  • 20. 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 21
  • 22. The four key context drivers are: • Time • Goal • Location • Attitude 22
  • 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. 23
  • 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.” 24
  • 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.” 25
  • 26. “My laptop is purely for business. That’s work, where I feel like I need to be doing something productive.” 26
  • 27. Ethnography – go out there and understand how people behave with mobile devices in the real world and what they actually need. 27
  • 28. From Yahoo, September 2011
  • 29. From Yahoo, September 2011
  • 30. 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.
  • 31. mobile behaviors and mindsets mobile design mobile case studies
  • 32. app types: what are the differences?
  • 33. discover > install > tap > run
  • 34. native apps ! must be installed on the device written specifically for the OS
  • 35. web apps ! reside on a server coded once for multiple OS’s
  • 36. Characteristic Native Downloaded to the device X Coded in a language specific to the device OS (Objective C, Java) Web 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 X Limited access to device hardware and data, as well as user data X
  • 37. hybrid apps ! written in native languages downloaded to the device can access APIs content comes from the web
  • 38. Why do you want the content to be available on mobile devices? ! Is there a business need to support deployment on mobile devices? always ask why ! How are you choosing the specific
 device(s) to support? ! Should there be a different experience on a phone vs. a tablet?
  • 39. know mobile constraints small screens unreliable networks people in all kinds of situations
  • 40. 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 one step at a time development, as well as deployment. ! Learn from your testers and apply those lessons to the other courses before you start developing.
  • 41. chunkify
  • 42. Because They Pogo-Stick
  • 43. what’s your orientation?
  • 44. 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.
  • 45. 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.
  • 46. how clean are you? ! one action per screen only necessary elements adequate spacing
  • 47. text, tilt and go
  • 48. design face-off
  • 49. A B
  • 50. A B
  • 51. A B
  • 52. A B
  • 53. mobile behaviors and mindsets mobile design mobile case studies
  • 54. Articulate iPad App Flash > Mobile conversion project Articulate Storyline Desktop
  • 55. 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 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
  • 56. Conversion from Articulate Presenter 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
  • 57. Mobile App for New Hires Need to get FULL screenshot of app s Web Page using SnagIt?
  • 58. Mobile App for New Hires: Mobile Only Game
  • 59. 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.
  • 60. Mobile App for New Hires Bottom Line: • We’re still in beta. • Too many cooks in the kitchen. • Lessons learned on an internal wiki. • IT/Security concerns
  • 61. Mobile App for Performance Support
  • 62. 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
  • 63. Mobile App for Performance Support 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
  • 64. Focus on goals ! Launch and Iterate ! Take small steps
  • 65. some resources:
  • 66. some research for this
 presentation came from: ! Yahoo! Mobile Mindsets: IpsosMediaCT_Yahoo_Mobile_Modes_Sept2011.pdf ! Google:The New Multi-Screen World Study !
  • 67. Brandon Carson Twitter: @brandonwcarson LinkedIn: brandoncarson E-mail: ! ! ! Michelle Lentz Twitter: @michellelentz LinkedIn: michelleslentz E-mail: 77