The state-of-the-art in Mobile apps

3,226 views

Published on

The state-of-the-art in Mobile apps (2013) including platform research, client architectures, decision for mobile strategy, design patterns and case studies.

Published in: Technology, Business

The state-of-the-art in Mobile apps

  1. 1. THE STATE-OF-THE-ART IN MOBILE APPS Dec. 10, 2013 PRANAV KADAM pdkadam@mail.upb.de Universität Paderborn, Germany
  2. 2. Agenda  Mobile app development: An introduction  Technologies  Design Patterns  Summary Slide 2 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  3. 3. Mobile app development  Devices Slide 3 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  4. 4. Mobile app development  Devices Est. to surpasas desktop PC shipments in 2013 [1] 40% before getting out of bed 3rd [6] 19% user growth reaching 1.15 billion Slide 3 of 25 +36% [2,3] [4] [5] choice to buy among electronic devices check emails The state-of-the-art in Mobile apps Pranav Kadam
  5. 5. Mobile app development  Platforms Global Smartphone Market Share 2012 4.4% 5.3% [7] 2.5% 2.6% Android Apple iOS Blackberry 18.6% Symbian 66.6% Slide 4 of 25 Windows Phone Others The state-of-the-art in Mobile apps Pranav Kadam
  6. 6. Mobile app development  Platforms Global Smartphone Market Share 2012 4.4% 5.3% 2.5% 2.6% Android Apple iOS 85.2% Blackberry 18.6% Symbian 66.6% Slide 4 of 25 [7] Windows Phone Others The state-of-the-art in Mobile apps Pranav Kadam
  7. 7. Mobile app development  Mobile web Facebook Mobile Usage [6] Native Apps 50% Mobile Web 50% 0% Slide 5 of 25 500 Million Mobile Users (2012) 20% 40% The state-of-the-art in Mobile apps 60% Pranav Kadam
  8. 8. Mobile app development  Mobile web iPhone, Android, Nokia, Palm, Sony Ericsson, Windows Phone, Blackberry, etc. Facebook Mobile Usage [6] Native Apps 50% Mobile Web 50% 0% Slide 5 of 25 500 Million Mobile Users (2012) 20% 40% The state-of-the-art in Mobile apps 60% Pranav Kadam
  9. 9. Mobile app development  Mobile web 1 out of 6 [4] mobile phones is a Smartphone Slide 5 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  10. 10. Technologies: Client-Architectures Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  11. 11. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  12. 12. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  13. 13. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  14. 14. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  15. 15. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  16. 16. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  17. 17. Technologies: Client-Architectures Facebook native | iOS 6 Facebook web | Safari on iOS 6 Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  18. 18. Technologies: Client-Architectures Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  19. 19. Technologies: Client-Architectures Native Built in its native code to run on specific devices & OS. Slide 6 of 25 The state-of-the-art in Mobile apps Mobile Web Pranav Kadam
  20. 20. Technologies: Client-Architectures Native Built in its native code to run on specific devices & OS. Mobile Web iOS: Objective C Android: Java Windows Phone: .NET Slide 6 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  21. 21. Technologies: Client-Architectures Native Built in its native code to run on specific devices & OS. Mobile Web User Experience Cost Slide 6 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  22. 22. Technologies: Client-Architectures Native Mobile Web Built in its native code to run on specific devices & OS. Built to run over the Internet, it can be accessed on any device with a browser User Experience Cost Slide 6 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  23. 23. Technologies: Client-Architectures Native Built in its native code to run on specific devices & OS. Built to run over the Internet, it can be accessed on any device with a browser User Experience Cost Cost Slide 6 of 25 Mobile Web User Experience The state-of-the-art in Mobile apps Pranav Kadam
  24. 24. Technologies: Client-Architectures Native Mobile Web Built in its native code to run on specific devices & OS. Built to run over the Internet, it can be accessed on any device with a browser + User Experience Cost Slide 6 of 25 Cost User Experience The state-of-the-art in Mobile apps Pranav Kadam
  25. 25. Technologies: Client-Architectures Native Mobile Web Built in its native code to run on specific devices & OS. Built to run over the Internet, it can be accessed on any device with a browser Hybrid User Experience Cost Cost User Experience Slide 6 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  26. 26. Technologies: Client-Architectures Native Hybrid Mobile Web Built in its native code to run on specific devices & OS. Built using crossplatform frameworks and runs on multiple platforms Built to run over the Internet, it can be accessed on any device with a browser User Experience Cost Cost User Experience Slide 6 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  27. 27. Technologies: Client-Architectures Native Hybrid Mobile Web Built in its native code to run on specific devices & OS. Built using crossplatform frameworks and runs on multiple platforms Built to run over the Internet, it can be accessed on any device with a browser User Experience User Experience Cost Cost Cost User Experience Slide 6 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  28. 28. Technologies: Client-Architectures  Native Apps  Matured SDKs  Rich User Experience  Fully leverages device hardware (GPS, Camera, Graphics) and software (Calendar, Contacts, File system)  Ability to run offline  Higher development cost compared to web apps Slide 7 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  29. 29. Technologies: Client-Architectures  Mobile web  Platform independence: Designed to run on mobile web browsers  HTML5 apps (HTML, CSS, Javascript)  Approaches: Responsive Web, Mobile First  Frameworks: jQuery Mobile, Sencha Touch  Lower development costs compared to native apps  Low on user experience compared to native apps Slide 8 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  30. 30. Technologies: Client-Architectures  Hybrid  Mobile web apps (HTML5) wrapped inside native wrappers  Bridges gap between HTML5 and device hardware  New tools also providing MVC development pattern using Java, C#, Ruby-on-Rails for non-UX + platform specific UX library  Frameworks: Appcelerator Titanium, Phonegap, Xamarin  Multi-platform, cost effective solution Slide 9 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  31. 31. Technologies: Decision Framework [8,9] Parameter Native Hybrid Mobile Web Cost Multi-Platform Hardware Access Device features Performance User Experience Offline support Time to market SEO Slide 10 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  32. 32. Design Patterns: Categories Security Help Slide 11 of 25 The state-of-the-art in Mobile apps Functionality Pranav Kadam
  33. 33. Design Patterns: Categories (Example)  Functionality  Enables user to complete tasks and achieve their goals Slide 12 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  34. 34. Design Patterns: Categories (Example)  Functionality  Enables user to complete tasks and achieve their goals Slide 12 of 25 The state-of-the-art in Mobile apps Tools Forms Features Pranav Kadam
  35. 35. Design Patterns: Categories (Example)  Functionality  Enables user to complete tasks and achieve their goals Forms Features Tools Toolbar Option Menu Contextual Tools Inline Actions Call-to-action buttons Slide 12 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  36. 36. Design Patterns: Common Gestures Tap Touch & Hold Swipe Rotate Slide 13 of 25 Double Tap Pinch close Pinch open Shake The state-of-the-art in Mobile apps Pranav Kadam
  37. 37. Design Patterns: Examples Gmail | Android Slide 14 of 25 List & Tabs Gmail | Android The state-of-the-art in Mobile apps Pranav Kadam
  38. 38. Design Patterns: Examples Google Maps | iOS Slide 14 of 25 Behance | iOS The state-of-the-art in Mobile apps List & Tabs App Store | iOS Pranav Kadam
  39. 39. Design Patterns: Examples Google Maps | iOS Slide 14 of 25 Behance | iOS The state-of-the-art in Mobile apps List & Tabs App Store | iOS Pranav Kadam
  40. 40. Design Patterns: Examples Snapguide | iOS Slide 15 of 25 Instagram | Android The state-of-the-art in Mobile apps Forms Instagram | Android Pranav Kadam
  41. 41. Design Patterns: Examples Fancy | iOS Slide 16 of 25 App Store | iOS The state-of-the-art in Mobile apps Alerts / Dialog Foursquare| iOS Pranav Kadam
  42. 42. Design Patterns: Examples Multi-Pane Contacts | Android Dropbox | iOS Slide 17 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  43. 43. Design Patterns: Examples Multi-Pane Gmail | Android Slide 17 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  44. 44. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  45. 45. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  46. 46. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  47. 47. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  48. 48. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  49. 49. Design Patterns: UI Overview Android Action Bar Content Area Navigation drawer Action Bar Slide 19 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  50. 50. Design Patterns: UI Overview Android Action Bar Content Area Navigation drawer Action Bar Slide 19 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  51. 51. Design Patterns: UI Overview Android Action Bar Content Area Navigation drawer Action Bar Slide 19 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  52. 52. Design Patterns: UI Overview Android Action Bar Content Area Navigation drawer Action Bar Slide 19 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  53. 53. Design Patterns: Case Studies iOS Slide 20 of 25 Twitter Android The state-of-the-art in Mobile apps Pranav Kadam
  54. 54. Design Patterns: Case Studies iOS Slide 20 of 25 Twitter Android The state-of-the-art in Mobile apps Pranav Kadam
  55. 55. Design Patterns: Case Studies iOS Slide 20 of 25 Twitter Android The state-of-the-art in Mobile apps Pranav Kadam
  56. 56. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  57. 57. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  58. 58. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  59. 59. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  60. 60. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  61. 61. Design Patterns: Case Studies Dropbox Options menu iOS Slide 21 of 25 Android The state-of-the-art in Mobile apps Pranav Kadam
  62. 62. Design Patterns: Case Studies Dropbox Options menu iOS Slide 21 of 25 Android The state-of-the-art in Mobile apps Pranav Kadam
  63. 63. Design Patterns: Case Studies Dropbox Options menu iOS Slide 21 of 25 Android The state-of-the-art in Mobile apps Pranav Kadam
  64. 64. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  65. 65. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  66. 66. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  67. 67. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  68. 68. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  69. 69. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  70. 70. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  71. 71. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  72. 72. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  73. 73. Summary  Devices in demand (Smartphones, Tablets) and usage patterns  Platforms: Android, iOS have significant market share  Decision framework  My recommendation:  Hybrid approach if main consideration is Cost, Time to market and developing for more than 2 platforms   Native approach otherwise Design patterns  Examples  Case studies Slide 23 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  74. 74. References 1. Ericsson Consumerlab. Smartphone usage experience. Technical report Ericsson, January 2013. Online, http://www.ericsson.com/res/docs/2013/consumerlab/smartphone-usage-experience-report.pdf. 2. eMarketer. https://www.emarketer.com/Coverage/Mobile.aspx 3. PortioResearch. Portio research mobile factbook 2013. Online, http://www.portioresearch.com/media/3986/PortioResearchMobileFactbook2013.pdf, February 2013. 4. Natasha Lomas. Idc: Tablet sales grew 78.4sales in 2013, portable pcs in 2014. Online, http://techcrunch.com/2013/03/27/idc-tablet-growth-2012-2017/, March 2013. 5. Ericsson. From apps to everyday situations. Technical report, Ericsson, 2011. Online, http://www.ericsson.com/res/docs/2011/silicon_valley_brochure_letter.pdf. 6. Luke Wroblewski. Mobile First. Happy Cog, October 2011. ISBN: 978-1-937557-02-7 7. Gartner Inc. http://www.gartner.com/technology/research/predicts/ Slide 24 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  75. 75. References 8. RapidValue Solutions. How to Choose the Right Architecture For Your Mobile Application. White Paper, November 2012. Online, http://www.rapidvaluesolutions.com/wp-content/uploads/2013/04/Howto-Choose-the-Right-Technology-Architecture-for-Your-Mobile-Application.pdf. 9. Tata Consultancy Services. Mobile Client Architecture Web vs. Native vs. Hybrid Apps. White Paper, 2012. Online, http://www.tcs.com/resources/white_papers/Pages/mobile_client_architecture.aspx. 10. Theresa Neil. Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More. O’Reilly Media, March 2012. 11. Screen captures: iOS Developer Library, Android Developers, Pttrns, Mobile Patterns 12. Greg Nudelman, Ivo Weevers, Jen Gordon, Luke Wroblewski, Lyndon Cerejo, Matt Lawson, Smashing Editorial. Mobile Design Patterns. Smashing Media, September 2012. Slide 25 of 25 The state-of-the-art in Mobile apps Pranav Kadam

×