Upload
pranav-kadam
View
1.463
Download
0
Tags:
Embed Size (px)
DESCRIPTION
The state-of-the-art in Mobile apps (2013) including platform research, client architectures, decision for mobile strategy, design patterns and case studies.
Citation preview
THE STATE-OF-THE-ART IN
MOBILE APPSPRANAV [email protected] Universität Paderborn, Germany
Dec. 10, 2013
Agenda
Mobile app development: An introduction
Technologies
Design Patterns
Summary
Pranav KadamThe state-of-the-art in Mobile appsSlide 2 of 25
Mobile app development
Devices
Pranav KadamThe state-of-the-art in Mobile appsSlide 3 of 25
Mobile app development
Devices
40%before getting
out of bed
[1]
19%user growth
reaching
1.15 billion[2,3]
Est. to surpasas
desktop PC shipments
in 2013
[4]
3rdchoice to
buy among electronic devices
[5]
Pranav KadamThe state-of-the-art in Mobile appsSlide 3 of 25
+36%check emails
[6]
Mobile app development
Platforms
66.6%
18.6%
5.3%
4.4%2.5% 2.6%
Global Smartphone Market Share 2012
Android
Apple iOS
Blackberry
Symbian
Windows Phone
Others
[7]
Pranav KadamThe state-of-the-art in Mobile appsSlide 4 of 25
Mobile app development
Platforms
66.6%
18.6%
5.3%
4.4%2.5% 2.6%
Global Smartphone Market Share 2012
Android
Apple iOS
Blackberry
Symbian
Windows Phone
Others
[7]
85.2%
Pranav KadamThe state-of-the-art in Mobile appsSlide 4 of 25
Mobile app development
Mobile web
Pranav KadamThe state-of-the-art in Mobile appsSlide 5 of 25
0% 20% 40% 60%
Mobile Web
Native Apps
Facebook Mobile Usage
500 Million Mobile Users (2012)
[6]
50%
50%
Mobile app development
Mobile web
iPhone,Android,
Nokia,Palm,
Sony Ericsson,Windows Phone,
Blackberry,etc.
Pranav KadamThe state-of-the-art in Mobile appsSlide 5 of 25
0% 20% 40% 60%
Mobile Web
Native Apps
Facebook Mobile Usage
500 Million Mobile Users (2012)
[6]
50%
50%
Mobile app development
Mobile web
Pranav KadamThe state-of-the-art in Mobile appsSlide 5 of 25
1 out of 6mobile phones is a Smartphone [4]
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Facebook native | iOS 6 Facebook web | Safari on iOS 6
Technologies: Client-Architectures
Native Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native
Mobile Web
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native
Mobile Web
iOS: Objective CAndroid: JavaWindows Phone: .NET
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native
Mobile Web
User Experience
Cost
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built to run over the Internet, it can
be accessed on any device with a
browser
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native Mobile Web
User Experience
Cost
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built to run over the Internet, it can
be accessed on any device with a
browser
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native Mobile Web
User Experience
Cost
Cost
User Experience
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built to run over the Internet, it can
be accessed on any device with a
browser
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native Mobile Web
User Experience
Cost
Cost
User Experience
+
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built to run over the Internet, it can
be accessed on any device with a
browser
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native Mobile Web
User Experience
Cost
Cost
User Experience
Hybrid
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built using cross-platform
frameworks and runs on multiple
platforms
Built to run over the Internet, it can
be accessed on any device with a
browser
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native Mobile Web
User Experience
Cost
Cost
User Experience
Hybrid
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
Built using cross-platform
frameworks and runs on multiple
platforms
Built to run over the Internet, it can
be accessed on any device with a
browser
Built in its native code to run on
specific devices & OS.
Technologies: Client-Architectures
Native Mobile Web
User Experience
Cost
Cost
User Experience
Hybrid
User Experience
Cost
Pranav KadamThe state-of-the-art in Mobile appsSlide 6 of 25
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
Pranav KadamThe state-of-the-art in Mobile appsSlide 7 of 25
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
Pranav KadamThe state-of-the-art in Mobile appsSlide 8 of 25
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
Pranav KadamThe state-of-the-art in Mobile appsSlide 9 of 25
Technologies: Decision Framework
Parameter Native Hybrid Mobile Web
Cost
Multi-Platform
Hardware Access
Device features
Performance
User Experience
Offline support
Time to market
SEO
[8,9]
Pranav KadamThe state-of-the-art in Mobile appsSlide 10 of 25
Design Patterns: Categories
Functionality
Security
Help
Pranav KadamThe state-of-the-art in Mobile appsSlide 11 of 25
Design Patterns: Categories (Example)
Functionality
Enables user to complete tasks and
achieve their goals
Pranav KadamThe state-of-the-art in Mobile appsSlide 12 of 25
Tools
Design Patterns: Categories (Example)
Functionality
Enables user to complete tasks and
achieve their goalsForms
Features
Pranav KadamThe state-of-the-art in Mobile appsSlide 12 of 25
Tools
Design Patterns: Categories (Example)
Functionality
Enables user to complete tasks and
achieve their goalsForms
Features
ToolbarOption MenuContextual ToolsInline ActionsCall-to-action buttons
Pranav KadamThe state-of-the-art in Mobile appsSlide 12 of 25
Design Patterns: Common Gestures
Tap Double Tap Touch & Hold Swipe
Pinch close Pinch openRotate Shake
Pranav KadamThe state-of-the-art in Mobile appsSlide 13 of 25
Design Patterns: Examples List & Tabs
Pranav KadamThe state-of-the-art in Mobile appsSlide 14 of 25
Gmail | Android Gmail | Android
Design Patterns: Examples List & Tabs
Pranav KadamThe state-of-the-art in Mobile appsSlide 14 of 25
Google Maps | iOS Behance | iOS App Store | iOS
Design Patterns: Examples List & Tabs
Pranav KadamThe state-of-the-art in Mobile appsSlide 14 of 25
Google Maps | iOS Behance | iOS App Store | iOS
Design Patterns: Examples Forms
Pranav KadamThe state-of-the-art in Mobile appsSlide 15 of 25
Snapguide | iOS Instagram | Android Instagram | Android
Design Patterns: Examples Alerts / Dialog
Pranav KadamThe state-of-the-art in Mobile appsSlide 16 of 25
Fancy | iOS App Store | iOS Foursquare| iOS
Design Patterns: Examples Multi-Pane
Pranav KadamThe state-of-the-art in Mobile appsSlide 17 of 25
Contacts | Android
Dropbox | iOS
Design Patterns: Examples Multi-Pane
Pranav KadamThe state-of-the-art in Mobile appsSlide 17 of 25
Gmail | Android
Design Patterns: UI Overview iOS
Pranav KadamThe state-of-the-art in Mobile appsSlide 18 of 25
Design Patterns: UI Overview iOS
Pranav KadamThe state-of-the-art in Mobile appsSlide 18 of 25
Design Patterns: UI Overview iOS
Pranav KadamThe state-of-the-art in Mobile appsSlide 18 of 25
Design Patterns: UI Overview iOS
Pranav KadamThe state-of-the-art in Mobile appsSlide 18 of 25
Design Patterns: UI Overview iOS
Pranav KadamThe state-of-the-art in Mobile appsSlide 18 of 25
Design Patterns: UI Overview
Navigation drawer
Content Area
Action Bar
Action Bar
Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 19 of 25
Design Patterns: UI Overview
Navigation drawer
Content Area
Action Bar
Action Bar
Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 19 of 25
Design Patterns: UI Overview
Navigation drawer
Content Area
Action Bar
Action Bar
Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 19 of 25
Design Patterns: UI Overview
Navigation drawer
Content Area
Action Bar
Action Bar
Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 19 of 25
Design Patterns: Case Studies Twitter
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 20 of 25
Design Patterns: Case Studies Twitter
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 20 of 25
Design Patterns: Case Studies Twitter
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 20 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Optionsmenu
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Optionsmenu
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Optionsmenu
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Dropbox
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 21 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
Design Patterns: Case Studies Foursquare
iOS Android
Pranav KadamThe state-of-the-art in Mobile appsSlide 22 of 25
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
Pranav KadamThe state-of-the-art in Mobile appsSlide 23 of 25
References
Pranav KadamThe state-of-the-art in Mobile appsSlide 24 of 25
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/
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/How-
to-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.
Pranav KadamThe state-of-the-art in Mobile appsSlide 25 of 25