Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Communication Design for the Mobile Experience

1,226 views

Published on

Presented to the Vancouver Chapter of the Society for Technical Communication at their May 2011 meeting. This is a discussion of issues, and strategies for creating usable, navigable, relevant content for mobile computing devices like smartphones. Included many examples and a case study.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Communication Design for the Mobile Experience

  1. 3. Communication Design for the Mobile Experience <ul><li>by David Drucker </li></ul><ul><li>Society for Technical Communication </li></ul><ul><li>Tuesday, May 17, 2011 </li></ul>
  2. 4. <ul><li>The State of the Market </li></ul><ul><li>What Do I Know Already? </li></ul><ul><li>Tips, Directions </li></ul><ul><li>Case Study </li></ul>
  3. 5. The State of the Mobile Phone Market <ul><li>The Global mobile phone market grew by just under 20% compared to Q1 of last year </li></ul>*Source : IDC, April 28, 2011 Worldwide Mobile Phone Tracker <ul><ul><li>2010: 310 million shipped </li></ul></ul><ul><ul><li>2011: 372 million shipped </li></ul></ul>2010 2011 2010 2011 2010 2011 2010 2011 2010 2011 2010 2011
  4. 6. But, Smartphone shipments Grew at 4 times that rate <ul><li>Smartphone shipments up 79.7% </li></ul><ul><li>Nokia maintained leadership position in the phone market, shipping 24.2 million units, with a 24.3% market share. Most of their sales are in the non-smartphone segment. </li></ul>Source: IDC WorldWide Quarterly Mobile Phone Tracker
  5. 7. In Q1 of this year, phone shipments were actually a bit off <ul><li>Except for Smartphone Manufacturers Apple & RIM </li></ul>Unit Shipments in Millions Nokia Apple RIM
  6. 8. Also, Tablets, particularly the iPad, have taken off
  7. 9. Smartphones & Tablets May Become the Main Computer for Some
  8. 10. Characteristics of this New Computer Specification <ul><li>Small (and smaller) Screens </li></ul><ul><li>No Mouse </li></ul><ul><li>Touch screens operated by fingers (not styli) </li></ul><ul><li>Connected to networks wirelessly (either 802.11/Wi Fi or 3G/GSM) </li></ul><ul><li>In some cases, no physical keyboard (or optional keyboard) </li></ul><ul><li>Flat Screen </li></ul><ul><li>Camera(s), Speakers (and headphone jacks) and Microphones </li></ul>
  9. 11. Screen Dimensions Device Portrait Landscape iPhone 320 x 480 pixels 480 x 320 pixels iPad 768 x 1024 1024 x 768 RIM Playbook & Samsung Galaxy Tab 600 x 1024 1024 x 600
  10. 12. Also be aware <ul><li>Limited Memory (RAM) (a short term situation) </li></ul><ul><li>People see One Screen at a Time (on Phones) </li></ul><ul><li>People Interact with One Application at a Time </li></ul><ul><li>Not a great deal of On-screen Help </li></ul><ul><li>No Hover </li></ul>
  11. 13. There is no Mobile Web. There is no Desktop Web. It’s just The Web in different situations.
  12. 14. The same goes for The Brain. New Situation.
  13. 15. Is What We Already Know Still Valid? Is there Desktop Design and Mobile Design?
  14. 16. User-Centered Design <ul><li>Who are the users? </li></ul><ul><li>What are their tasks and goals? </li></ul><ul><li>What’s their level of experience? </li></ul><ul><li>What functions do they need? </li></ul><ul><li>What information might they need? </li></ul><ul><li>How do they think the thing should work? </li></ul>
  15. 17. The User Model <ul><li>Posture </li></ul><ul><ul><li>Are they standing? Sitting? Lounging? </li></ul></ul><ul><ul><li>Attention </li></ul></ul><ul><ul><ul><li>Do you have full or partial attention of the user? Are they standing? Walking? Driving? </li></ul></ul></ul><ul><li>State of Mind/Attitude </li></ul><ul><ul><li>Are they needing help? Panicking? Expecting difficulty or expecting a task to be simple? </li></ul></ul>The totality of the environment of a typical user Photo by Calotype46 on Flickr
  16. 18. The User Model <ul><li>Input constraints </li></ul><ul><ul><ul><li>Can they use both hands, only one hand or just their thumb? Can they talk or is it a noisy environment? </li></ul></ul></ul><ul><ul><li>Lighting </li></ul></ul><ul><ul><ul><li>Is it bright or dim in the room? Do they need large text or will smaller text do? </li></ul></ul></ul><ul><ul><li>Time constraints </li></ul></ul><ul><ul><ul><li>Do they have hours or seconds to perform a task? </li></ul></ul></ul>The totality of the environment of a typical user Photo by Calotype46 on Flickr
  17. 19. Standards and Rules of Thumb <ul><li>Apple iOS and iPhone Human Interface Guidelines (HIG) </li></ul><ul><li>Android, RIM and Nokia UI Guidelines (not great, unfortunately) </li></ul><ul><li>Smashing Magazine “A User-Centered Approach To Web Design For Mobile Devices” by Lyndon Cerejo </li></ul><ul><li>The Mobify Blog: Top Ten Tips for Designing for Mobile E-Commerce (Parts 1 and 2) by ‘Nico’ </li></ul>
  18. 20. Something to think about: Three Application Patterns <ul><li>Productivity App </li></ul><ul><li>Utility App </li></ul><ul><li>Immersive App </li></ul>
  19. 21. Productivity App <ul><li>Organizing the list </li></ul><ul><li>Adding to and subtracting from the list </li></ul><ul><li>Drilling down through successive levels of detail until the desired level is reached, then performing tasks with the information on that level </li></ul>
  20. 22. Utility App <ul><li>Tend to present data in a flattened list </li></ul><ul><li>Users make Adjustments in a Settings section (in ‘back’) </li></ul>
  21. 23. Immersive App <ul><li>Offers a full-screen, visually rich environment that’s focused on the content </li></ul><ul><li>Also includes games </li></ul><ul><li>Tends to hide much of the device’s user interface, replacing it with a custom user interface that strengthens the user’s sense of entering the world of the application </li></ul>
  22. 24. But about the Web... <ul><li>Universally accessible </li></ul><ul><li>Less expensive to develop and maintain </li></ul><ul><li>Can be searched and accessed by all smartphones. </li></ul>
  23. 25. Most UI Principals Still Apply <ul><li>Metaphors </li></ul><ul><li>Direct Manipulation </li></ul><ul><ul><li>Objects on the screen remain visible while the user performs actions on them </li></ul></ul><ul><ul><li>The result of the user’s action is immediately apparent </li></ul></ul><ul><li>Feedback </li></ul><ul><li>( Some of this is built into the browser) </li></ul>
  24. 26. Web Mobile Patterns are a bit different <ul><li>The mobile homepage should be a roadmap for the rest of the site </li></ul><ul><li>Don’t put too much on the homepage </li></ul><ul><li>Set different text sizes for portrait and landscape </li></ul><ul><li>Make Search work for you </li></ul><ul><li>For users of Google Site Search, a mobile version is also available. </li></ul><ul><li>Make sure scan-ability is high </li></ul>
  25. 27. Making Lists more Scannable <ul><li>Make sure lists are not too long </li></ul><ul><li>Consider filters to help make it shorter </li></ul><ul><li>Consider an index </li></ul><ul><li>If you absolutely have to have long pages, user something like lazy loading: load only when you need it, such as when you scroll down, or at the bottom, with a ‘more’ button. </li></ul>
  26. 28. Remember the Number 44 <ul><li>44 Pixels is the minimum height that we can usually handle on most phones today without needing to file down our fingertips </li></ul>44 OK!
  27. 29. Flatten Navigation, where Possible <ul><li>Consider Accordion views of information, like the one Wikipedia uses on their Mobile site </li></ul>Each of these Sections Expands to show the content and the button name changes to ‘Hide’
  28. 30. Make it work for Mobile Users <ul><li>Prioritize what your Web Site should offer to Mobile Users </li></ul><ul><li>Support some of the typical use cases (and states of mind) peculiar to Mobile Users: </li></ul><ul><ul><ul><li>Microtasking: Using the phone for short bursts of activity. </li></ul></ul></ul><ul><ul><ul><li>Local : Finding out what’s around the user. </li></ul></ul></ul><ul><ul><ul><li>Bored : Using the phone for distraction/entertainment* </li></ul></ul></ul>*From Tapworthy – Designing Great iPhone Apps by Josh Clark
  29. 31. About those Smartphone users...
  30. 32. How to Make this happen? <ul><li>You must Separate Content from Presentation </li></ul><ul><ul><li>Even a simple web site has to separate the content (text and graphics) from the page layout and navigation. </li></ul></ul><ul><li>Ways to do this: </li></ul><ul><ul><ul><ul><ul><li>Custom CSS for a Mobile Browser </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>A Content Management System </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>It doesn’t have to be much. Even Wordpress will do. </li></ul></ul></ul></ul></ul>
  31. 33. My Website on the desktop and iPhone
  32. 34. The WPTouch Plugin <ul><li>Local developers, BraveNewCode.com </li></ul><ul><li>Automatically reformats a web site/blog for Mobile-based browsers </li></ul><ul><li>For more flexibility (and non-Wordpress Sites), products like Mobify can also do this (and more). </li></ul>
  33. 35. Case Study
  34. 36. The Problem CURRENT DESIGN CURRENT NEEDS DESIGN MEETS NEEDS
  35. 37. The Problem XKCD
  36. 38. Same Problem, Different Area THE OATMEAL
  37. 39. Taking on the Problem:
  38. 40. Thanks David Drucker [email_address]

×