Download to read offline
Uploaded byDigitalMarketingShow
Putting Mobile First by Lindsay Herbert
The document discusses putting mobile first in digital strategies. It notes that the landscape is constantly changing as mobile use increases, with tablets and smartphones surpassing desktop use. It examines options for mobile including responsive websites, mobile-optimized sites, and native and hybrid apps. Key considerations for design are discussed like screen sizes, touch targets, and one-handed use. The optimal approach depends on priorities like speed, offline use and access to device features. Implementing mobile requires adapting content and user flows for small screens. The future will see more connected devices and integration of digital into other areas like TV and wearables.
More Related Content
Similar to Putting Mobile First by Lindsay Herbert
More from DigitalMarketingShow
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Putting Mobile First by Lindsay Herbert
- 1. Putting Mobile First November27, 2013 Lindsay Herbert Head of Digital @precedent#@lindzeiy
- 2.
- 3.
- 4.
- 5. 135 experts Strategy & research Branding& communications User-centred design Development & hosting Digital marketing @precedent#@lindzeiy
- 6.
- 7. Who we workwith @precedent#@lindzeiy
- 8.
- 9. Mobile whitepaper series 1.Optimising Mobile 2. Targeting Mobile @precedent#@lindzeiy 3.
- 10. Putting Mobile First 1.A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
- 11. A Changing World– What do your customers use? Windows Blackberry Android iOS Smart TV @precedent#@lindzeiy
- 12. A Changing World– Mobile operating system by region June 2012 to May 2013 Australia Asia iOS Europe Android SymbianOS Other Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/ @precedent#@lindzeiy
- 13. A Changing World– Constantly evolving landscape @precedent#@lindzeiy
- 14. A Changing World– Google I/O @precedent @lindzeiy
- 15. A Changing World– Tablets @precedent#@lindzeiy
- 16. A Changing World– The surge towards tablets Global Units Shipped (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. @precedent#@lindzeiy Note: Notebook PCs include Net books
- 17. A Changing World– Affordable tablets @precedent#@lindzeiy
- 18. Putting Mobile First 1.A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
- 19. What Are MyOptions? Take the time to understand your user’s behaviour and context. @precedent#@lindzeiy
- 20.
- 21. What Are MyOptions? Remember a Mobile User… 1. Typically has short bursts of activity 2. Can be time poor or network restricted 3. Is usually goal driven 4. Loves using her phone - joy of use, personal item 5. Tells others of a good experience 6. Needs a simple uncomplicated experience @precedent#@lindzeiy
- 22. What Are MyOptions? Take the opportunity to innovate in design and function. @precedent#@lindzeiy
- 23. What Are MyOptions? Don’t just follow the web @precedent#@lindzeiy
- 24. What Are MyOptions? 4(ish) choices Mobi Responsive Feeds Apps Native @precedent#@lindzeiy Hybrid
- 25. What Are MyOptions? – Roll It: App or Web? @precedent#@lindzeiy
- 26. Putting Mobile First 1.A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
- 27. Design Considerations ‘ Effectivemobile designs not only account for these one thumb/one eyeball experiences but aim to optimize for them as well. ’ Luke Wroblewski – Mobile First @precedent#@lindzeiy
- 28. Design Considerations –Hit Areas @precedent @lindzeiy
- 29. Design Considerations –Hit Areas User interface control sizes: Apple = 44px Windows = 9mm Nokia = between 7 and 8mm The average finger pad is 10-14mm with the fingertip being 8-10mm @precedent @lindzeiy
- 30. Design Considerations –Common Language Use existing visual shortcuts for essential operations: Hamburger icon = menu Circular arrow = refresh Magnifying glass = search Cog = settings Thumb = like @precedent#@lindzeiy
- 31. Design Considerations -Reach Hard Easy Average Left hand @precedent#@lindzeiy Hard Easy Average Right hand
- 32. Design Considerations -Reach Hard: Things you don’t want to hit by mistake Hard Easy Hard Easy Easy: Things that require the most scrolling Average: Where the thumb naturally hovers Average Left hand @precedent#@lindzeiy Average Right hand
- 33. Putting Mobile First 1.A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
- 34. Choosing the OptimumApproach - mobi @precedent#@lindzeiy
- 35. Choosing the OptimumApproach - mobi What it’s good for: – Providing focus and clear structure – Deploying without impact on main website – Delivering quickly – Wide reach working via browser – Can be designed to respond to screen size or orientation @precedent#@lindzeiy
- 36. Choosing the OptimumApproach - mobi Drawbacks: – Can’t access device functions (e.g. internal storage) – Offline functions limited to HTML5 caching – User interface needs to be more simplistic – Slower than a native or hybrid app @precedent#@lindzeiy
- 37. Choosing the OptimumApproach - Responsive @precedent#@lindzeiy
- 38. Choosing the OptimumApproach - Responsive What it’s good for: – You only have to write the content once – Easy updates and maintenance – Experience stays consistent for users across all devices and platforms @precedent#@lindzeiy
- 39. Choosing the OptimumApproach - Responsive Drawbacks: – One-size fits all means you can’t cater as well for different user behaviours and contexts – The same drawbacks for mobi also apply here @precedent#@lindzeiy
- 40. Choosing the OptimumApproach - Responsive ‘ It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration. ’ Jakob Neilsen – 21st May 2012 @precedent#@lindzeiy
- 41. Choosing the OptimumApproach - Responsive @precedent#@lindzeiy
- 42. Choosing the OptimumApproach – Hybrid Apps @precedent#@lindzeiy
- 43. Choosing the OptimumApproach – Hybrid Apps What it’s good for: – Lets you develop once to many devices – Can access some device features like internal storage – Better offline use (thanks to internal storage access) @precedent#@lindzeiy
- 44. Choosing the OptimumApproach – Hybrid Apps Drawbacks: – Not as a fast as a native app – Can’t access all device functions – Has to be downloaded from app stores – Will not be a rich interface @precedent#@lindzeiy
- 45. Choosing the OptimumApproach – Hybrid Apps @precedent#@lindzeiy
- 46. Choosing the OptimumApproach – Native Apps @precedent#@lindzeiy
- 47. Choosing the OptimumApproach – Native Apps What it’s good for: – Fastest speeds – Richest possible user interface – Can access every feature of the device – Best offline usage @precedent#@lindzeiy
- 48. Choosing the OptimumApproach – Native Apps Drawbacks: – Needs to be developed for each device type – Data is a key consideration for unconnected use – Updates need to be rolled out for each type – Developing for each device type quickly adds to costs @precedent#@lindzeiy
- 49. Choosing the OptimumApproach – Feeds @precedent#@lindzeiy
- 50. Choosing the OptimumApproach – Feeds @precedent#@lindzeiy
- 51. Choosing the OptimumApproach – Your priorities? Device features Native first, then Hybrid Offline functioning Native first, then Hybrid Speed Native (learn from Facebook) User interface Native Maintenance Web or Hybrid Platform independence Web or Hybrid Development cost Web or Hybrid Discoverability Web Installation Web Content restrictions, approval process and fees Web (learn from Playboy) @precedent#@lindzeiy
- 52. Putting Mobile First 1.A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
- 53. Making It Happen– Mobile First approach @precedent#@lindzeiy
- 54. Making It Happen– Adapting content @precedent#@lindzeiy
- 55. Making It Happen– Adapting content Don’t just follow the web @precedent#@lindzeiy
- 56. Making It Happen– UI Flow @precedent#@lindzeiy
- 57.
- 58. Making It Happen– Resource and Process ‘ The more channels I run, the more resource I’ll need, right? ’ @precedent#@lindzeiy
- 59. Making It Happen– Resource and Process @precedent @lindzeiy
- 60. Putting Mobile First 1.A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
- 61. Considering The Future– Remember it’s a Phone! @precedent#@lindzeiy
- 62.
- 63. Considering The Future– PrecEvents Out of the Box! @precedent#@lindzeiy
- 64. Considering The Future– PrecEvents Out of the Box! @precedent#@lindzeiy
- 65. Considering The Future– Customer journeys with Sitecore www.sitecore.net
- 66. Considering The Future– Sitecore engagement platform www.sitecore.net
- 67. Considering The Future– Trends for 2014 – 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 applications @precedent#@lindzeiy
- 68. Considering The Future– Finally… Don’t disappoint Don’t be afraid to innovate Don’t delay in providing a solution (think-apply-review-refine) @precedent#@lindzeiy
- 69. Considering The Future– Finally… Think big. Start small. Act Quickly. Smart thinking wins… @precedent#@lindzeiy
- 70.
- 71. Follow Precedent onLinkedIn to find out more about our seminars and ideas, and add me to keep in touch. Follow @Precedentcomms on Twitter to see what we think is interesting in digital, and follow me for updates from my blog. @lindzeiy on Twitter
Editor's Notes
- #10 Mobile OS by region statsProfile your audience – look at key parameters, for example operating systemsConsider global regions differently (iOSin Australia compared with Asia)
- #11 What’s changed… chat through the key events in the past yearPick a trend … Siri & free messaging 9challenge to BBerry
- #12 Google Glass. Seems daft now but…
- #14 Diagram: Mary Meeker at the Wall Street Journal D11 Conference May 29 2013The uptake of tablets has been rocket like surpassing desktop and notebook PC’s less than 3 years after they were first introducedPredicted sales of tablets will surge from 72.7 million in 2011 to 383.3 million in 2017
- #16 Average person looks at their phone 150 times a day most of these are very brief interactionsDesign needs to accommodate for these very brief interactions
- #18 People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Apple - 44pxWindows – 9mmNokia – between 7 and 8mmThe average finger pad is 10-14mm with the fingertip being 8-10mmWhat does this mean? Don’t make tiny links and tiny spaces…
- #19 Use existing visual shortcuts for essential operations. These are already emerging as standards so don’t reinvent the wheel.Hamburger icon = menuCircular arrow = refreshMagnifying glass = searchCog = settingsThumb = like
- #20 Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
- #21 Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
- #22 Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
- #23 Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
- #24 Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
- #25 One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
- #26 One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
- #27 One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
- #28 My issue with responsive design is when it becomes lowest common denominator design, 'working' on all screens but not excelling on any. – Roan Lavery (Free Agent)
- #30 One website, that flows across multiple devicesBrowser basedSame content delivered to all users
- #31 One website, that flows across multiple devicesBrowser basedSame content delivered to all users
- #32 One website, that flows across multiple devicesBrowser basedSame content delivered to all users
- #33 Examples of some framework providers
- #34 Mobile browser basedStandard mobiWeb app mobi
- #35 Mobile browser basedStandard mobiWeb app mobi
- #36 Mobile browser basedStandard mobiWeb app mobi
- #37 Use on the go
- #38 Use on the go
- #39 Device features. Although web apps can take advantage of some features, native apps (and the native components of the hybrid apps) have access to the full paraphernalia of device-specific features, including GPS, camera, gestures, and notifications.Offline functioning. A native app is best if your app must work when there is no connectivity. In-browser caching is available in HTML5, but it’s still more limited than what you can get when you go native.Discoverability. Web apps win the prize on discoverability. Content is a lot more discoverable on the web than in an app: When people have a question or an information need, they go to a search engine, type in their query, and choose a page from the search results. They do not go to the app store, search for an app, download it, and then try to find their answer within the app. Although there are app aficionados who may fish for apps in app stores, most users don’t like installing and maintaining apps (and also wasting space on their device), and will install an app only if they expect to use it often.Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app.Installation. Installing a native or hybrid app is a hassle for users: They need to be really motivated to justify the effort. “Installing” a web app involves creating a bookmark on the home screen; this process, while arguably simpler than downloading a new app from an app store, is less familiar to users, as people don’t use bookmarks that much on mobile.Maintenance. Maintaining a native app can be complicated not only for users, but also for developers (especially if they have to deal with multiple versions of the same information on different platforms): Changes have to be packaged in a new version and placed in the app store. On the other hand, maintaining a web app or a hybrid app is as simple as maintaining a web page, and it can be done as often or as frequently as needed.Platform independence. While different browsers may support different versions of HTML5, if platform independence is important, you definitely have a better chance of achieving it with web apps and hybrid apps than with native apps. As discussed before, at least parts of the code can be reused when creating hybrid or web apps.Content restrictions, approval process, and fees. Dealing with a third party that imposes rules on your content and design can be taxing both in terms of time and money. Native and hybrid apps must pass approval processes and content restrictions imposed by app stores, whereas the web is free for all. Not surprisingly, the first web apps came from publications such as Playboy, who wanted to escape Apple’s prudish content censure. And buying a subscription within an iOS app means that 30% of that subscription cost goes to Apple, a big dent in the publishers’ budget.Development cost. It’s arguably cheaper to develop hybrid and web apps, as these require skills that build up on previous experience with the web. NN/g clients often find that going fully native is a lot more expensive, as it requires more specialized talent. But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are also fairly advanced skills.User Interface. Last but not least, if one of your priorities is providing a user experience that is consistent with the operating system and with the majority of the other apps available on that platform, then native apps are the way to go. That doesn’t mean that you cannot provide a good user experience with a web app or a hybrid app–it just means that the graphics and the visuals will not be exactly the same as those with which users may be already accustomed.
- #40 There are two approachesEither is fine
- #41 2. Is probably the most comfortable fit given you already have Corporate website; Microsite ; Campaign site is fine
- #42 TescoBank UI flow
- #43 Digital bloat
- #44 Digital bloatAvoid digital bloat by monitoring the effectiveness of your channels and adjust your resourcing accordingly
- #45 Chinese taxi appsSay your current location and where you are going and a voice message is sent to all nearby available taxisView the taxi's location in realtime and then push to talk directly to the driver to co-ordinate pickup
- #46 BlipparJawbonePebbleSmart TVVuzixPingit from BarclaysbankSquare (Credit card reader)
- #66 ORGANISATIONS MUST SEEK OUT TECHNOLOGIES THAT PROVIDE A SINGLE CUSTOMER VIEW, AN INTEGRATED EXPERIENCE AND BUSINESS INTELLIGENCE
- #67 ORGANISATIONS MUST SEEK OUT TECHNOLOGIES THAT PROVIDE A SINGLE CUSTOMER VIEW, AN INTEGRATED EXPERIENCE AND BUSINESS INTELLIGENCE