The state-of-the-art in Mobile apps

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



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]


+36%check emails

[6]


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]



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%



Mobile web


0% 20% 40% 60%

Mobile Web

Native Apps

Facebook Mobile Usage

500 Million Mobile Users (2012)

[6]

50%

50%


Mobile web

iPhone,Android,

Nokia,Palm,

Sony Ericsson,Windows Phone,

Blackberry,etc.


0% 20% 40% 60%

Mobile Web

Native Apps

Facebook Mobile Usage

500 Million Mobile Users (2012)

[6]

50%

50%


Mobile web


1 out of 6mobile phones is a Smartphone [4]

Technologies: Client-Architectures

Native Mobile Web



Native Mobile Web


Facebook native | iOS 6 Facebook web | Safari on iOS 6


Native Mobile Web




Native Mobile Web




Native Mobile Web




Native Mobile Web




Native Mobile Web




Native Mobile Web




Native Mobile Web


Built in its native code to run on

specific devices & OS.


Native

Mobile Web





Native

Mobile Web

iOS: Objective CAndroid: JavaWindows Phone: .NET





Native

Mobile Web

User Experience

Cost


Built to run over the Internet, it can

be accessed on any device with a

browser




Native Mobile Web

User Experience

Cost




browser




Native Mobile Web

User Experience

Cost

Cost

User Experience




browser




Native Mobile Web

User Experience

Cost

Cost

User Experience

+




browser




Native Mobile Web

User Experience

Cost

Cost

User Experience

Hybrid


Built using cross-platform

frameworks and runs on multiple

platforms



browser




Native Mobile Web

User Experience

Cost

Cost

User Experience

Hybrid


Built using cross-platform

frameworks and runs on multiple

platforms



browser




Native Mobile Web

User Experience

Cost

Cost

User Experience

Hybrid

User Experience

Cost



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



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



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


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]


Design Patterns: Categories

Functionality

Security

Help


Design Patterns: Categories (Example)

Functionality

Enables user to complete tasks and

achieve their goals


Tools


Functionality


achieve their goalsForms

Features


Tools


Functionality


achieve their goalsForms

Features

ToolbarOption MenuContextual ToolsInline ActionsCall-to-action buttons


Design Patterns: Common Gestures

Tap Double Tap Touch & Hold Swipe

Pinch close Pinch openRotate Shake


Design Patterns: Examples List & Tabs


Gmail | Android Gmail | Android



Google Maps | iOS Behance | iOS App Store | iOS



Google Maps | iOS Behance | iOS App Store | iOS

Design Patterns: Examples Forms


Snapguide | iOS Instagram | Android Instagram | Android

Design Patterns: Examples Alerts / Dialog


Fancy | iOS App Store | iOS Foursquare| iOS

Design Patterns: Examples Multi-Pane


Contacts | Android

Dropbox | iOS

Design Patterns: Examples Multi-Pane


Gmail | Android

Design Patterns: UI Overview iOS










Design Patterns: UI Overview

Navigation drawer

Content Area

Action Bar

Action Bar

Android



Navigation drawer

Content Area

Action Bar

Action Bar

Android



Navigation drawer

Content Area

Action Bar

Action Bar

Android



Navigation drawer

Content Area

Action Bar

Action Bar

Android


Design Patterns: Case Studies Twitter

iOS Android



iOS Android



iOS Android


Design Patterns: Case Studies Dropbox

iOS Android



iOS Android



iOS Android



iOS Android



iOS Android



iOS Android


Optionsmenu


iOS Android


Optionsmenu


iOS Android


Optionsmenu


iOS Android



iOS Android


Design Patterns: Case Studies Foursquare

iOS Android



iOS Android



iOS Android



iOS Android



iOS Android



iOS Android



iOS Android


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


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/

http://www.ericsson.com/res/docs/2013/consumerlab/smartphone-usage-experience-report.pdf







https://www.emarketer.com/Coverage/Mobile.aspx

http://www.portioresearch.com/media/3986/PortioResearchMobileFactbook2013.pdf

http://techcrunch.com/2013/03/27/idc-tablet-growth-2012-2017/









http://www.ericsson.com/res/docs/2011/silicon_valley_brochure_letter.pdf

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.


http://www.rapidvaluesolutions.com/wp-content/uploads/2013/04/How-to-Choose-the-Right-Technology-Architecture-for-Your-Mobile-Application.pdf























http://www.tcs.com/resources/white_papers/Pages/mobile_client_architecture.aspx

https://developer.apple.com/library/ios/navigation/

http://developer.android.com/

http://pttrns.com/

http://www.mobile-patterns.com/

http://www.mobile-patterns.com/