Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

User Focus 2014 - Choosing The Right Mobile Approach

839 vues

Publié le

My presentation at User Focus 2014

Publié dans : Mobile
  • Soyez le premier à commenter

User Focus 2014 - Choosing The Right Mobile Approach

  1. 1. Choosing the Right Mobile Approach Responsive, Dedicated, Native, or Hybrid? Jasper Liu Sr. UX Architect, ICF International User Focus 2014
  2. 2. 2 A Strong Mobile Presence Is A Must-Have 1.75 billion people around the world have a smartphone (Google, September 2014) 90% of American adults have a cell phone 58% of American adults have a smartphone 42% of American adults have a tablet (Pew Internet, January 2014) Mobile internet usage in the US had increased by 73% over the last 12 months (StatCounter, August 2014)
  3. 3. 3 Responsive Dedicated Hybrid Native Mobile Websites Mobile Apps
  4. 4. Mobile Websites
  5. 5. 5 Mobile Websites • Universally accessible through a mobile browser in any platform/device • No installation required • High discoverability • Built with standard web technologies
  6. 6. 6 Responsive Websites • Responsive websites adapt layouts to the viewing environment by using fluid grids, flexible images, CSS3 media queries, and JavaScript. Source: http://www.dtelepathy.com/blog/design/responsive-design-great-ux
  7. 7. 7 Responsive Websites - Pros • One website optimized for all devices • Cross-channel consistency • Low maintenance cost • Focused marketing efforts • Consolidated analytics
  8. 8. 8 Responsive Websites - Pros • Good responsive web design is device-agnostic, and provides a future-friendly solution for new devices. iPhone 5 320 x 568 pt iPhone 6 375 x 667 pt iPhone 6 Plus 414 x 736 pt 7.9” iPad Mini 1024x768 pt
  9. 9. 9 Responsive Websites - Cons • Without optimization, a responsive mobile website can be slow, as it loads all content and scripts of the page for every device, even when they are set to be hidden on smaller screens. • If milliseconds mean money to your business, you have to be cautious about the responsive design approach. ?
  10. 10. 10 Responsive Websites The Search Agency evaluated the mobile sites of top 100 retailers in the US in October 2013.
  11. 11. 11 Responsive Websites The Search Agency evaluated the mobile sites of top 100 retailers in the US in October 2013.
  12. 12. 12 Dedicated Mobile Websites or Web Apps A separate website is created for small screens. The site detects users are using a mobile device and redirects them to the mobile site. www.bankofamerica.mobile.walmart.com com/mobile/ m.cancer.gov
  13. 13. 13 Dedicated Mobile Websites/Apps - Pros • Fast • Simple and focused • Quick and inexpensive to build if the mobile site/app focuses on a small portion of the full website • Allows a different mobile web experience independent of the full site
  14. 14. 14 Dedicated Mobile Websites/Apps - Cons • The experience may not be consistent in different channels.
  15. 15. 15 Dedicated Mobile Websites/Apps - Cons • Time-consuming to maintain and update two separate websites if they often change. • Usually a binary solution that is not always optimized for a wide variety of internet-connected devices.
  16. 16. 16 Dedicated Mobile Websites/Apps - Cons • Usually presents only a portion of the full website. • May still need to provide a link to the full site which usually does not offer an excellent mobile experience.
  17. 17. 17 The Advancement of Mobile Websites Responsive Websites One site to rule them all Client-side optimization
  18. 18. 18 The Advancement of Mobile Websites Responsive Websites One site to rule them all Dedicated Mobile Sites Faster performance; device detection Merge the best of each RESS Responsive Design + Server Side Components Client-side optimization
  19. 19. 19 Responsive Design + Server Side Components • One site, single URL • Server sends device-specific code for the key page components
  20. 20. 20 Responsive Design + Server Side Components
  21. 21. 21 Some High Profile Websites Have Shifted to Responsive Design m.dominos.com
  22. 22. 22 Some High Profile Websites Have Shifted to Responsive Design m.samsung.com www.samsung.com
  23. 23. 23 Some High Profile Websites Have Shifted to Responsive Design
  24. 24. 24 Mobile Websites Summary • A mobile optimized site is a must-have. • The evolving responsive design with client-side and server-side optimization is the preferred approach, especially in the long term. • If you need the fastest website or have limited flexibility to change your existing website, a separate mobile site can be an interim solution to consider.
  25. 25. Mobile Apps
  26. 26. 26 Mobile Apps Dominate Mobile Usage Source: http://mobilemarketingstand.com/2014/04/15/mobile-as-the-future-marketing- platform
  27. 27. 27 On Average, People Don’t Use More Than 30 Apps A Month Source: http://www.nielsen.com/us/en/insights/news/2014/smartphones-so-many-apps--so-much-time.html
  28. 28. 28 20% of Mobile Apps Are Used Only Once Source: http://info.localytics.com/blog/app-retention-improves
  29. 29. 29 Native Apps Native apps are specific to a mobile platform (e.g. iOS, Android, Windows Phone, etc.) using the development tools and languages that the respective platform supports. Pros • Best performance • Superior user experience • Easy to access after initial installation • Personalized tools for regular use
  30. 30. 30 Native Apps - Pros Fast graphics and fluid animations. Sources: http://capptivate.co/
  31. 31. 31 Native Apps - Pros Take full advantage of all native device features, such as: • GPS • Accelerometer • Compass • Camera • Advanced device gestures • Push notifications • Offline use • Access contacts, calendar, emails, text messages, and even health data.
  32. 32. 32 Native Apps - Cons • Compared with mobile websites, native apps have lower discoverability and require installation. • App updates needs to be downloaded by users. It can become difficult to maintain and provide support for users on different versions. • Supporting multiple platforms results in higher costs in development, maintenance, pushing out updates, etc. $
  33. 33. 34 Hybrid Apps Hybrid apps bridge the middle ground between native apps and mobile websites. They are built using web technologies, like HTML5 and JavaScript, and then wrapped in a platform-specific shell allowing them to be installed like native apps.
  34. 34. 35 Hybrid Apps - Pros Cost-effective, as it allows code reuse across platforms. Use standard web technologies. Access most device features. Below are the features supported by PhoneGap.
  35. 35. 36 Hybrid Apps - Pros • Leverage the existing website to power the app. Amazon.com Amazon app
  36. 36. 37 Hybrid Apps - Cons • The performance and graphics can’t match the native apps. Hybrid apps are executed by the platform’s Web engine, which adds another layer of operation between the user and the app. “Facebook tried HTML5 for years. When they switched to native code, they were able to improve performance by 200% and increase their average user rating from two stars to four stars.” (source: http://www.smashingmagazine.com/2012/11/07/ succeed-with-your-app/).
  37. 37. 38 Hybrid Apps - Cons • It may be more expensive to build a hybrid app that can deliver as-good-as-native experience. Xero, an accounting software company, abandoned hybrid and went native, because: “And the lesson we’ve learnt over the last 12 months has been that the cost in time, effort and testing to bring an HTML5 application to a native level of performance seems to be far greater than if the application was built with native technologies from the get-go.” (source: https://www.xero.com/blog/2013/03/making-mobile-work/).
  38. 38. 39 The Advancement of Mobile Apps Native Apps Best performance and visuals Hybrid Apps Cross-platform solution Improving performance Adaptive layout Responsive Native Apps?
  39. 39. Summary
  40. 40. 41 Responsive Sites Dedicate Sites Native Apps Hybrid Apps Use Case Occasional use Frequent use Content/Features Full Focused Focused Installation No Required Discoverability High Low Performance Good (if optimized) Good Excellent Good (if optimized) Visuals, Animations OK Excellent OK Device Features Some All Most Development Skills Standard Platform specific Standard Maintenance Cost Low Medium High Medium Development Cost Depends (You get what you pay for)
  41. 41. 42 Mobile Strategy Is the Key • The key to mobile success is building a strategy that continually aligns business goals, user needs, and evolving mobile technologies. Business Mobile Strategy Technologies Users
  42. 42. 43 Thank you! Jasper Liu Senior User Experience Architect ICF International jasper.liu@icfi.com www.linkedin.com/in/jasperlz www.pinterest.com/jasper1084