The state-of-the-art in Mobile apps
•
5 gostaram•5,469 visualizações
The state-of-the-art in Mobile apps (2013) including platform research, client architectures, decision for mobile strategy, design patterns and case studies.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a The state-of-the-art in Mobile apps
Semelhante a The state-of-the-art in Mobile apps (20)
Último
Último (20)
The state-of-the-art in Mobile apps
- 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