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.

Mobile Deep Dive - 2012 ASAE Annual Meeting


Published on

Published in: Technology, Business

Mobile Deep Dive - 2012 ASAE Annual Meeting

  1. 1. Mobile Matters: !A Deep Dive Reggie Henry, CAE! Chief Information Officer! ASAE
  2. 2. What We’ll CoverBackground Trends
  3. 3. Background
  4. 4. Background: Evolution Evolution of Networks Evolution of (People and ContentTechnological) Evolution of “Personal” Technologies
  5. 5. Evolution of Content Defining Characteristics! ! • Authoritarian! • Top Down! • Static! • One to many Evolution of Content
  6. 6. Evolution of Content Defining Characteristics! ! • Authority and User Generated! • Networked! • Dynamic! • Many to many Evolution of Content
  7. 7. Evolution of Networks - People The world is changing the way it communicates. The world is changing the way content is created, filtered, consumed, shared, rated…… Evolution of Networks (People andTechnological) There is a group of folks, largely (but not entirely) defined by generation, who communicate differently. They have always communicated differently.That’s what this is REALLY all about!
  8. 8. Evolution of Networks - Technology 4G - 2012 Evolution of Networks(People andTechnologic1983 1990 2002
  9. 9. Evolution of Personal Technologies 1973 1996 Evolution of “Personal” Technologies NOW! 2002
  10. 10. Mobile: The fuel for change. Evolution of Networks Evolution of (People and Content Technological) Evolution of “Personal” Technologies
  11. 11. So, what is mobile?
  12. 12. So, what is mobile? Although both smartphones and tablets are considered mobile, increasingly, people use them differently.• Convenience!• Save Time!• Waste Time!• Social! • Broad Content Consumption!• Simple • Desktop-like expectations, with mobile flair! • Social! • Complex
  13. 13. Who is Mobile?
  14. 14. Trends
  15. 15. Prediction…
  16. 16. Prediction… A year early!
  17. 17. Evolution of Mobile Access
  18. 18. Predictions for 2015 • There will be nearly one mobile device per capita by 2015. There will be over 7.1 billion mobile-connected devices— approximately equal to the world’s population in 2015 (7.2 billion)! • Two-thirds of the world’s mobile data traffic will be video by 2015. Mobile video will more than double every year between 2010 and 2015.! • Mobile-connected tablets will generate as much traffic in 2015 as the entire global mobile network in 2010! • There will be 788 million mobile-only Internet users by 2015. The mobile-only Internet population will grow 56-fold from 14 million at the end of 2010 to 788 million by the end of 2015.Cisco Visual Networking Index: Global Mobile Data!Traffic Forecast Update, 2010–2015
  19. 19. …and then there’s this!! This is Different!!!
  20. 20. iPad Adoption is Crazy!!TOP MOBILE INTERNET TRENDS Matt Murphy / Mary Meeker – 2/10/11
  21. 21. So, What? But from a !business perspective ! why should I care?! ! It’s just a media consumption device, right?
  22. 22. My first portable computer - 1986 COMPAQ Portable ll! Price:! $4999! Weight: ! 26 Pounds! CPU:! Intel 286 @ 8 MHz! RAM:! 640k! Storage:! 20Meg hard drive! Display:! 9 Inch monochrome! ! 80 x 25 text! Ports:! 1 parallel, 1 serial, 1 CGA!My present portable computer - 2012 iPAD 2! Price:! $699! Weight: ! 1.35 Pounds! CPU:! 1GHz dual-core ! RAM:! 64GB! Storage:! (in RAM)! Display:! 9.7 Inch! ! 1024x768 resolution! Ports:! 30-pin dock connector!
  23. 23. My first portable computer - 1986 COMPAQ Portable ll! Price:! $4999! Weight: ! 26 Pounds! CPU:! Intel 286 @ 8 MHz! RAM:! 640k! Storage:! 20Meg hard drive! Display:! 9 Inch monochrome! Let’s see…! ! 80 x 25 text! 1024 MHz = 1 Ports:! 1 parallel, 1 serial, 1 CGA! GHz, so….! WOW! computer - 2012My present portable That’s about 125 times iPAD 2! Price:! $699! faster! Weight: ! 1.35 Pounds! CPU:! 1GHz dual-core ! RAM:! 64GB! Storage:! (in RAM)! Display:! 9.7 Inch! ! 1024x768 resolution! Ports:! 30-pin dock connector! OS:! iOS 5
  24. 24. My first portable computer - 1986 COMPAQ Portable ll! Price:! $4999! Weight: ! 26 Pounds! CPU:! Intel 286 @ 8 MHz! RAM:! 640k! Storage:! 20Meg hard drive! …and ! Display:! 9 Inch monochrome! 1024 MB = 1 GB, ! 80 x 25 text! Ports:! 1 parallel, 1 serial, 1 so….! CGA! That’s about 3,200 times moreMy present portable computer - 2012 iPAD 2! workspace and Price:! $699! storage! Weight: ! 1.35 Pounds! CPU:! 1GHz dual-core ! RAM:! 64GB! Storage:! (in RAM)! Display:! 9.7 Inch! ! 1024x768 resolution! Ports:! 30-pin dock connector! OS:! iOS 5
  25. 25. This IS a computer!
  26. 26. How do people feel about their mobile devices?
  27. 27. Quick SurveyWhat mobile devices do you use?
  28. 28. How To Vote via Texting EX AM PL E 22333 22333 1. Standard texting rates only (worst case US $0.20)!TIPS 2. We have no access to your phone number! 3. Capitalization doesn’t matter, but spaces and spelling do
  29. 29. How To Vote via Web EX AM 22333 PL ETIP Capitalization doesn’t matter, but spaces and spelling do
  30. 30. So how do I think about this?
  31. 31. 1024 x 768Now What? 320 x 480
  32. 32. So how do I think about this? Or even worse, now what?
  33. 33. Strategy Considerations The Mobile Mindset
  34. 34. The Mobile Mindset Mobile First = User Needs First!It’s, ultimately, a re-imagining of how our contentfits our users needs. Just think about what MobileFirst really implies. “What tasks make sense tothe user?” “What does the user want?” “Whatis going to be most relatable to the user?” Allof these things are focused on the personalnature of the experience.Jason Grigsby, Vice President, Mobile and Web Strategist!Cloud Four, Inc.
  35. 35. The Mobile Mindset Mobile “user experience” design is, in many ways, an act of curation.When designing for mobile platforms, one has to be much more carefulabout selecting content and interactions for a given screen or app statethan on the web or desktop.!!Global navigation is often limited or absent. Menus, toolbars, and othernavigation elements usually have strict limits on the number of itemsthey can provide. So ensuring that users have access to all the functionsthey need (and none they don’t), and that they can find their way out ofa given app state, is crucial.Thoughts on user experience design byDmitry Nekrasovski
  36. 36. The Mobile Mindset Mobile USAGE is Different! Think !Presence at the Point of Need!
  37. 37. The Mobile Mindset Mobile First = User Needs First!
  38. 38. The Mobile Mindset Mobile First = User Needs First!Extraneous
  39. 39. The Mobile Mindset Mobile First = User Needs First!
  40. 40. Strategy ConsiderationsApps vs. Mobile Web
  41. 41. What’s an App?• Apps are device specific and leverage native features on smartphones/tablets!• Usually look and interact in “cooler” ways than mobile web…for now!• How do you know? Apps are usually accessed via an online app store like Apple’s App Store, BlackBerry’s App World, or the Android Market
  42. 42. What’s the Mobile Web?• Mobile web is accessed via a browser on the device!• Typing the URL on the mobile browser brings up a mobile formatted version of a traditional website!• Many ways to approach mobile web! • Different presentation of main site (good place to start)! • Fully mobile-designed version (end game)
  43. 43. Apps v. Mobile Web
  44. 44. Apps v. Mobile WebMashable Tech, Sam Laird!
  45. 45. Apps v. Mobile Web First time theres been a decline in mobile web usage as compared to app usage....hmmm....and the gap is widening!Mashable Tech, Sam Laird!
  46. 46. When Do We Get Apps?
  47. 47. How Do People Get Apps?
  48. 48. Strategy ConsiderationsResponsive Design
  49. 49. Responsive DesignWhat is Responsive Web Design?!Responsive web design is the term given to the concept of designing anddeveloping a website so that the layout changes depending on the device/viewporton which the website is being viewed. The term Responsive Web Design wascoined by its creator, Ethan Marcotte.
  50. 50. Responsive Design Fluid GridI dubbed this pattern "mostly fluid" because the core structure of the layout reallydoesnt change until the smallest screen width. Instead, the design mostly relies onfluid grids to adapt to a variety of screen sizesMulti-Device Layout Patterns!by Luke Wroblewski
  51. 51. Responsive Design Column DropAnother popular pattern starts with a multi-column layout and ends up witha single column layout, dropping columns along the way as screen sizes getnarrower. Unlike the Mostly Fluid pattern, the overall size of elements in thislayout tend to stay consistent. Adapting to various screen sizes insteadrelies on stacking columnsMulti-Device Layout Patterns!by Luke Wroblewski
  52. 52. Responsive Design Layout ShifterThis pattern does the most to adapt across different screen sizes.That is, different layouts are used on large, medium, and smallscreens. Because this inherently requires more work, it seems to beless popular than the previous two patterns I outlined. Multi-Device Layout Patterns! by Luke Wroblewski
  53. 53. Responsive Design Other Tools
  54. 54. Mobile Development Tips• Focus is key!• Provide a link to the full site in the app or mobile site!• Leverage how devices might be used!• Don’t make searching hard!• Keep it light
  55. 55. Mobile Development Tips• Think about multiple sizes!• Stay away from flash!• Auto-detect!• Write for mobile—consider the content!• Look into HTML 5
  56. 56. Strategy ConsiderationsContent Considerations
  57. 57. Why people use the web• Answer questions!• Perform tasks!• Satisfy goals!• It’s about their needs—not ours.
  58. 58. How Users Read on the Web• Visitors don’t read—they skim/scan!• They are quickly assessing credibility and looking for the answer to their question!• F-pattern. Reading horizontally first, then lower.
  59. 59. How Users Read on the Web
  60. 60. Content ConsiderationsMashable Tech, Sam Laird!
  61. 61. Writing for the Web(review)• Scannable layout using headlines and sub heads!• Concise text-1/2 or less of what you’d use in print. If it’s possible to cut a word-cut it.!• Use objective language-be clear!• Lead with information carrying words!• Inverted pyramid approach
  62. 62. Writing for the Web(review)• Write to your readers level!• Avoid Jargon or blah blah text- Orwell’s Rules!• Keep a consistent conversational tone!• Short and simple pages, paragraphs and sentences!• Stay reader-focused—both human and search readers
  63. 63. Writing for Handhelds• Like writing for the web only amplified!• Not all of your content needs to go mobile!• 108% harder to understand information when reading from a mobile screen ~ Jakob Nielsen!• Added ‘context’ layer-what do your members need
 when they’re on the go?
  64. 64. How micro?• “Short is too long for mobile”!• Headlines and subheads-60 characters max!• Links 1-3 words!• Rely on cut and defer
  65. 65. Mobile and Social Content• Increasingly, web, mobile and tablet content is integrated with social media!• Social content is similar to mobile—it’s micro format and personal!• Consider the impact of video
  66. 66. Content on Tablets• Personalization—life management devices not just work management devices!• Nexus of print design and web design-look at Flipboard and Zite!• Meta app versus single focused task app
  67. 67. Strategy Considerations Mobile Contexts
  68. 68. Mono-context Multi-context
  69. 69. Mobile Contexts• Location!• Locomotion!• Immediacy!• Device Capabilities/Constraints!
  70. 70. Mobile Context: Location Intentional Serendipity
  71. 71. Location based social serendipity I really need some helpwith this cloud computing My ASAE Technology Colleagues thing… Can we help our members have “not so chance” encounters?
  72. 72. The LBS BreakdownThree categories of location based services fromPew Internet Study!• Geo-social services (Foursquare, Gowalla, Facebook Places, and other places to check in)!• Driving directions, search results, location-based reviews and other location-focused content!• Social media location awareness-such as location enabled tweets or geo-tagged Flickr photos
  73. 73. Adoption of LBS According to Pew Internet Trust,! Younger adults are more likely to! use these services, as are those! in households making at least! $75,000 per year.
  74. 74. How can associations use LBS?• Create places for your association or conference
 !• Have members or staff post a tip 
 to FourSquare
 !• What offline value can you attach to social value (e.g. Mayorship)?
  75. 75. Create a Facebook Place
  76. 76. Leverage locationWhat services do you provide that would benefitfrom location awareness?!• Member directory?!• Maps to your events?!• App location awareness?!• Here are some association examples
  77. 77. Association Examples ASAE’s beta mobile site
 ! Driving directions to events! Associations ‘around me’

  78. 78. Association Examples Houston Association of Realtors
  79. 79. Association Examples American Sailing Association
  80. 80. Association Examples American Lifeguard Association
  81. 81. Association Examples American Heart Association: Walking Paths
  82. 82. Mobile Context: Locomotion How do I design for this situation?! ! - Better have easily accessible navigation! - Better have “small” content! - Better GET TO THE POINT!
  83. 83. Mobile Context: Immediacy Two of the defining characteristics of mobile devices is ALWAYS ON and ALWAYS CONNECTED. Users expectations are colored by this. So mobile must:! ! • Load quickly! • Meet the users need quickly! • Remember what I was doing quickly!
  84. 84. Mobile Context: Device CapabilitiesCan I take advantage of: !• Cameras!• Location Awareness!• Device Orientation!• Other Apps Constraints What do I do about:! • Screen Size! • “Uneven” Internet Access! • User Familiarity with Device
  85. 85. Mobile Device Management is a MUST!
  86. 86. Final Thoughts - Q & A! !Thank You for Your Time and Attention