Your SlideShare is downloading. ×
  • Like
The state-of-the-art in Mobile apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The state-of-the-art in Mobile apps

  • 1,145 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,145
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
34
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. THE STATE-OF-THE-ART IN MOBILE APPS Dec. 10, 2013 PRANAV KADAM pdkadam@mail.upb.de Universität Paderborn, Germany
  • 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. Mobile app development  Devices Slide 3 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  • 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. 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. 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. 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. 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. 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. Technologies: Client-Architectures Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  • 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. 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. 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. 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. 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. 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. 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. Technologies: Client-Architectures Native Slide 6 of 25 Mobile Web The state-of-the-art in Mobile apps Pranav Kadam
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Design Patterns: Categories Security Help Slide 11 of 25 The state-of-the-art in Mobile apps Functionality Pranav Kadam
  • 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. 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. 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. 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. Design Patterns: Examples Gmail | Android Slide 14 of 25 List & Tabs Gmail | Android The state-of-the-art in Mobile apps Pranav Kadam
  • 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. 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. 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. 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. Design Patterns: Examples Multi-Pane Contacts | Android Dropbox | iOS Slide 17 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  • 43. Design Patterns: Examples Multi-Pane Gmail | Android Slide 17 of 25 The state-of-the-art in Mobile apps Pranav Kadam
  • 44. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  • 45. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  • 46. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  • 47. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  • 48. Design Patterns: UI Overview Slide 18 of 25 The state-of-the-art in Mobile apps iOS Pranav Kadam
  • 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. 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. 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. 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. Design Patterns: Case Studies iOS Slide 20 of 25 Twitter Android The state-of-the-art in Mobile apps Pranav Kadam
  • 54. Design Patterns: Case Studies iOS Slide 20 of 25 Twitter Android The state-of-the-art in Mobile apps Pranav Kadam
  • 55. Design Patterns: Case Studies iOS Slide 20 of 25 Twitter Android The state-of-the-art in Mobile apps Pranav Kadam
  • 56. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 57. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 58. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 59. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 60. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 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. Design Patterns: Case Studies Dropbox Options menu iOS Slide 21 of 25 Android The state-of-the-art in Mobile apps Pranav Kadam
  • 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. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 65. Design Patterns: Case Studies iOS Slide 21 of 25 Dropbox Android The state-of-the-art in Mobile apps Pranav Kadam
  • 66. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 67. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 68. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 69. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 70. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 71. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 72. Design Patterns: Case Studies iOS Slide 22 of 25 Foursquare Android The state-of-the-art in Mobile apps Pranav Kadam
  • 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. 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. 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