Optimising Mobile Seminar, Melbourne & Perth-June'13


Published on

Precedent latest "Putting Mobile First" seminar run in Melbourne on the 4 & 5th June and Perth on the 7th June.

John Campbell and Rufus Spiller presented

Published in: Technology, Business
  • 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

Optimising Mobile Seminar, Melbourne & Perth-June'13

  1. 1. 4th June, 2013Putting Mobile First@precedentau ##PrecSemJohn CampbellHead of MobileRufus SpillerCreative Director
  2. 2. 1. A Changing World2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen6. Considering The FuturePutting Mobile First
  3. 3. A Changing World
  4. 4. A Changing World – Google I/O
  5. 5. A Changing World - Stats…
  6. 6. 2013Asia Pacific Europe North America Middle East and Africa Latin AmericaA Changing World – Users of Mobile by Region 2012 - 20172012Source: Portio Research2017
  7. 7. Australia Brazil China India Italy Russia SouthKoreaTurkey UK US0%10%20%30%40%50%60%70%80%90%100%SMS Web Browsing Email Social Networking Apps Streaming Music Instant Messaging Video/Mobile TVActivities performed by Smartphone Users at Least Once aMonthSource: Nielsen, (February 2013) via: mobiThinking
  8. 8. A Changing World – The Surge Towards TabletGlobalUnitsShipped(MMs)Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013)Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. Note: Notebook PCs include Net books
  9. 9. A Changing World – What Do Your Customers Use?Smart TVBlackberry WindowsiOSAndroid
  10. 10. A Changing World – Tablets
  11. 11. A Changing World – Tablets
  12. 12. A Changing World – Tablets
  13. 13. A Changing World – Mobile Operating System by RegionEuropeAustraliaJune 2012 to May 2013AsiaiOS Android SymbianOS OtherSource: Stat Counter – Global Stat Counter - http://gs.statcounter.com/
  14. 14. 1. A Changing World2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen6. Considering The FuturePutting Mobile First
  15. 15. Take the time tounderstand your user’sbehaviour and context.What Are My Options?
  16. 16. 1. Typically has short bursts of activity2. Often is time restricted3. Is goal driven4. Loves using his phone - joy of use5. Tells others of a good experience6. Needs a simple uncomplicated experienceWhat Are My Options? – Remember a Mobile User…
  17. 17. Take the opportunityto innovate in designand function.What Are My Options?
  18. 18. What Are My Options? – Mathew Algie - Ethical CoffeeCampaign
  19. 19. What Are My Options?MobiResponsiveFrameworkNative
  20. 20. What Are My Options?
  21. 21. What Are My Options?MobiResponsiveHybrid AppsNative Framework Web AppFeed Aggregators
  22. 22. What Are My Options? – Roll It - App or Web?
  23. 23. 1. A Changing World2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen6. Considering The FuturePutting Mobile First
  24. 24. ‘’Design ConsiderationsEffective mobile designs not onlyaccount for these one thumb/one eyeballexperiences but aim to optimize for themas well.Luke Wroblewski – Mobile First
  25. 25. Design Considerations – Common Language
  26. 26. Design Considerations – Hit Areas
  27. 27. RecognitionPutting a picture to either a personor a place:‘Meet Bob the new councilmember for your area’Or‘Drop by the new office onFlinders Lane’DescriptionWhere a specific item is betterdescribed visually:‘We will be rolling out newwheely bins to replace our oldones, they will look like this:’Or‘Our new Series 125fx is thefastest widget on the market andcomes in blue!’Design Considerations - Images
  28. 28. Design Considerations – Responsive layouts
  29. 29. Design Considerations - ReachRight handEasyAverageHardLeft handEasyAverageHard
  30. 30. 1. A Changing World2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen6. Considering The FuturePutting Mobile First
  31. 31. The Optimum Approach - mobi
  32. 32. The Optimum Approach - mobi
  33. 33. The Optimum Approach - mobi
  34. 34. What it’s good for:• Providing focus and clearstructure• Deploying without impact onmain website• Delivering quickly• Wide reach working viabrowser• Can be designed tounderstand and respond toscreen size or orientationConsiderations:• Careful consideration tocontent impacting performance.• Keep the design simplyeffective• You need to design for tabletand phone to maximiseexperience.• Links to m. or mobi domainnameThe Optimum Approach - mobi
  35. 35. The Optimum Approach - Responsive
  36. 36. The Optimum Approach - Responsive
  37. 37. The Optimum Approach - Responsive
  38. 38. The Optimum Approach - Responsive
  39. 39. What it’s good for:• Reflows the same contentfrom the website• Content is presented on alldevices and screen sizes.• Architecture of the siteremaining the same• Single update of contentConsiderations:• Cannot apply a different tone ofvoice for mobile usage.• Experience not built around theuser or context• Requires to think in % and notfixed width• Supported screen size has tobe chosenThe Optimum Approach - Responsive
  40. 40. ‘’The Optimum Approach - ResponsiveIts cheap but degrading to reuse contentand design across diverging mediaforms like print vs. online or desktop vs.mobile. Superior UX requires tightplatform integration.Jakob Neilsen – 21st May 2012
  41. 41. The Optimum Approach - Responsive
  42. 42. The Optimum Approach – Hybrid Apps
  43. 43. Are apps going outof fashion?The Optimum Approach – What do you think?
  44. 44. Yes NoThe Optimum Approach – What do you think?
  45. 45. The Optimum Approach - Frameworks
  46. 46. What it’s good for:• Lets you develop once anddeploy many• Cross device supportwidening reach• A balance between rich designand reach• Simplifying the interface whilstenabling functionality• Deployment via app storesConsiderations:• Will not be a rich interface• Restricted in functions• Balance between features andreach• Typically uses HTML5 andJavaScript.The Optimum Approach - Frameworks
  47. 47. The Optimum Approach – Native Apps
  48. 48. The Optimum Approach – Native Apps
  49. 49. The Optimum Approach – Native Apps
  50. 50. The Optimum Approach – Native Apps
  51. 51. The Optimum Approach – iButterfly
  52. 52. What it’s good for:• Provides a rich interface• Uses the full phone feature set• Designed around the user• Optimal performance• Provides joy of use• Can differentiate your brandConsiderations:• Needs to be developed foreach device type• Designs typically can beshared• Data is a key consideration forunconnected useThe Optimum Approach - Native
  53. 53. The Optimum Approach
  54. 54. The Optimum Approach - Feeds
  55. 55. The Optimum Approach - Feeds
  56. 56. 1. A Changing World2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen6. Considering The FuturePutting Mobile First
  57. 57. From the ground up:• Custom approaches• Considered context• Specific contentFrom pre-existing:• Desktop applied to mobile• Stress / break points• Reworked contentMaking It Happen - Content
  58. 58. Making It Happen – Content: Mobile First
  59. 59. Making It Happen – Content: Adapting content
  60. 60. Making It Happen – UI Flow
  61. 61. Typical Assets• Logos• Iconography• Image galleries• Product shots• multiple sizes neededMaking It Happen – Image Support
  62. 62. ‘’Making It Happen - ImagesWhat about performance?Won’t a lot of images slow down themobile experience?
  63. 63. Making It Happen – Images
  64. 64. ‘’Making It Happen – Data IntegrationUsers are sympathetic to poor networkcoverage and adjust their expectationswhen WIFI isn’t available.
  65. 65. ‘’Making It Happen – Data IntegrationUsers are NOT sympathetic to poornetwork coverage and adjust theirexpectations when WIFI isn’t available.
  66. 66. 1. Ensure your existing web APIdoes not bundle unnecessarydata with requests for data2. Expand your API to deal withshort, quick requests andhook it into your CMS solutionas soon as possible3. FEO is vital. Use mobileoptimisation and analyticstools to see where yourdelivery speeds can beimproved4. Track user interaction in yourapp using an analytics toolMaking It Happen – Data Integration – 4 Key points
  67. 67. Making It Happen – Data Integration
  68. 68. ‘’Making It Happen – Resource and ProcessThe more channels I run, the moreresource I’ll need, right?
  69. 69. Making It Happen – Resource and Process
  70. 70. Making It Happen – Resource and Process
  71. 71. Making It Happen – Resource and Process
  72. 72. 1. A Changing World2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen6. Considering The FuturePutting Mobile First
  73. 73. Considering the Future – Lifestyle Health Bands
  74. 74. Considering The Future
  75. 75. Considering The Future – Remember it’s a Phone!
  76. 76. ‘’Considering The FutureIf you want the Internet to beeverywhere it has to be visible nowhere.It has to be unseen, unnoticed,undiscussed.David St. Charles - Integrated Systems Inc. (Wired 1996)
  77. 77. SpaceBook is a speech-driven, hands-free,eyes-free device for pedestrian navigation andexploration.Considering The Future - PrecedentLabs
  78. 78. Considering The Future – PrecEvents – Out of the Box!
  79. 79. Considering The Future – New mobile platforms in 2013
  80. 80. • Connected devices• Mobile payments and e-wallet• Mobile advancement - wearable devices (NFC)• Lounge computing - socially integrated TV• Move towards social business• Smart content with personalisation & aggregation• Self service applicationsConsidering The Future - Our view of the digital trends for2013 ‘14
  81. 81. Don’t disappointDon’t be afraid to innovateDon’t delay in providing a solution( think-apply-review-refine )Considering The Future – Finally…
  82. 82. Think big.Start small.Act Quickly.Smart thinking wins…Considering The Future – Finally…
  83. 83. Years24 ExperienceQualityStabilityLoyaltyResults
  84. 84. Experts100 Strategy and researchBranding and communicationsUser centered designDevelopment and hostingDigital marketing
  85. 85. Sectors6 EducationMembership organisationThird sectorFinancial servicesHealthDestinations