Communication Design for the Mobile Experience


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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The flourishing market for smart phones and tablets offers new challenges and opportunities to writers, graphic designers, photographers, website and software producers, and user interface designers. But how do we design great experiences? Can we use what we already know to help inform our design decision for these new devices, or do we have to  start from scratch? Is it possible to adapt content and navigation to work with smart phones, tablets, and other mobile devices, or do we have to author all new content? How do user attitudes and expectations affect our approach to designing for new technology? We'll explore what's changed, what's stayed the same, and what's going to work on computing devices that have now moved from the desktop to your palm.
  • The term “Mobile Web” (although often criticized ) is commonly used to describe accessing the internet using a mobile device. This definition is broad enough to cover everything from using a browser on a feature phone, to using highly customized apps on smartphones or tablets. “There’s an app for that” has made device-specific applications the rage of the day, with some companies starting off backwards with “we need an iPhone app” instead of first understanding what their users actually need when they are mobile, the devices that they use, and then deciding the best approach for going mobile, which may not be an app, but could be a mobile website instead. Mobile websites are universally accessible, less expensive to develop and maintain, and can be searched and accessed by most mobile phones.
  • This is what a UCD Practitioner asks Who are the users of the document/application? What are their tasks and goals? What’s their level of experience? What functions do they need from the document/application? What information might they need, and in what form do they need it? How do they think the document/application should work?
  • Make sure lists are not too long, are large and easy enough to view when scrolling down, and don’t take too many swipes to view the entire list.Long, vertical lists take too long to decipher, especially when they are not finger friendly.  Consider filters to help make it shorter.Consider an index (alpha or structural) to help jump to a spot on the listIf you absolutely have to have long pages, make sure list pages load quickly by using something like lazy loading: load only when you need it, such as when you scroll down, or at the bottom, with a ‘more’ button.
  • 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, </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
    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]