Fragmentation in mobile design: fact or fiction

Post on 15-May-2015

3496 Views

Category:

Technology

4 Downloads

Preview:

Click to see full reader

Transcript

Puzzle perspective by jugbo http://www.flickr.com/photos/jugbo/366748612/

FACT OR FICTION?

FRAGMENTATION IN MOBILE DESIGN

HARDWARE

Hardware Store by John McNab - http://www.flickr.com/photos/johnmcnab/5758738799/

by mikek http://www.flickr.com/photos/mikek/7068344451/

by mikek http://www.flickr.com/photos/mikek/6875178758/

by mikek http://www.flickr.com/photos/mikek/7024324235/

It’s a box by tim caynes - http://www.flickr.com/photos/timcaynes/5408753242/

Screen resolutions of the 681,900 Android devices using opensignalmapshttp://opensignalmaps.com/reports/fragmentation.php

Hardware Store by John McNab http://www.flickr.com/photos/johnmcnab/5758738799/

HARDWARE FRAGMENTATION?

FACT

Development in Docklands by Destinys Agent http://www.flickr.com/photos/destinysagent/2664658912/

DEVELOPMENT

Development in Docklands by Destinys Agent http://www.flickr.com/photos/destinysagent/2664658912/

Fragmentation challenges have been a key topic of discussion in mobile industry circles since Java ME started proliferating in 2004-5.

Developer Economics 2011 by Vision Mobile

Development in Docklands by Destinys Agent http://www.flickr.com/photos/destinysagent/2664658912/

Developing across the top three or four mobile platforms (iOS, Android, Symbian and Blackberry) reaches just over 20% of the devices sold on average.

Developer Economics 2011 by Vision Mobile

Android

350 million

Symbian

275 million

iOS

150 million

Blackberry

80million

Bada

12million

Series40Brew

many hundred millions

MeegoWebOS

tons of small OSs

http://communities-dominate.blogs.com/brands/2012/05/mobile-services-beyond-messaging-excellent-tns-global-survey-reveals-tons.html

WP

9million

2

1

19

While our survey was conducted slightly before their sudden surge in hype, the smart TVs that emerged at the end of 2011 did not show much momentum. Only a single respondent requested support for smart TVs, while a few more mentioned SmartTV platforms like Google TV and LG TV. There were also several mentions from developers supporting the Playstation3 and Vita, Xbox, and the MS Surface Table. Linux proved to be the most popular alternative platform that we had not identified, with 76 respondents noting that they targeted the platform in embedded, server or desktop form.

Managing development resources

A third very important reason behind the emergence of cross-platform tools is the challenges in managing developer resources. Developing for mobile presents multiple operational issues for software houses, regardless of whether they are a one-man garage operation or a top-five multinational game software vendor.

Each major smartphone, PC or games platform has its own authoring language, its own set of APIs, its own development environment and its own app store. The next table shows how much the major smartphone platforms differ.

LANGUAGES & ENVIRONMENTS

Platform Authoring language Dev Environment App store

Android Dalvik C and C++ (NDK) WebViews

Android Development Tool Plugin for Eclipse Other IDEs, e.g., IntelliJ, Netbeans. Visual Studio

Android Market

Bada C++ (proprietary extension) HTML, CSS, JS

Bada IDE based on Eclipse CDT and JSDT (JavaScript Development Tools)

Samsung Apps

Blackberry Tablet OS

C/C++ Java Android Player HTML5, CSS, JavaScript

QNX Momentics IDE Eclipse plug-ins Standard IDE & Webworks tools

Blackberry App World

Blackberry OS

J2ME MIDP 2.0 HTML WebWorks SDK

Eclipse plug-in Blackberry App World

iOS Objective C WebViews

Mac with Xcode App Store

Symbian C++ Qt

Carbide C++ IDE Ovi Store

Windows Phone

C#, VB.NET Silverlight framework XNA framework

Visual Studio and Microsoft tools such as Expression Blend

Windows Phone Marketplace

source: VisionMobile research

“We have found that by using cross-platform tools our time to market is reduced by 70% on average. We choose cross-platform tools even if we need to build a single application for a single platform”

Paulius Uza CEO of InRuntime

Cross-Platform Developer Tools 2012 by Vision Mobile

2

1

27

an app factory with the tools of a games engine. Lightweight JavaScript libraries like Impact JS and Lime JS are positioned as HTML5 game frameworks.

The next table lists over 50 cross-platform tools by technology approach, authoring language and deployment format (web vs. native).

MAJOR CROSS-PLATFORM TOOLS & APPROACHES

Vendor (Tool) Technology approach Authoring language Deploym. format

Adobe (AIR) Runtime Actionscript Native, Hybrid

Adobe (Flex) SDK addition to AIR MXML Native, Hybrid

Ansca Mobile (Corona)

Runtime Lua Native

Antenna Software (Mobility Studio)

Runtime HTML5, CSS and JavaScript

Hybrid web apps

Antix Labs (Antix Games)

Runtime C/C++ Native

Appcelerator (Titanium)

Runtime HTML5, CSS and JavaScript

Native apps

Application Craft Web-to-native wrapper (PhoneGap)

WYSIWYG, HTML, Javascript, CSS, jQuery

Web apps, Hybrid

AppMobi Runtime (Mobius) Web-to-native app wrapper (PhoneGap)

HTML5, CSS and JavaScript

Web apps, Hybrid

Backelite (BKrender) Web-to-native app wrapper (PhoneGap)

HTML5, CSS and JavaScript

Web apps, Hybrid

DHTMLX Touch JavaScript framework HTML5, CSS, JavaScript Web apps

Didmo (Magmito) App Factory WYSIWYG Web apps, Hybrid

Elements Interactive Mobile (EDGELIB)

Runtime C++ Native

Enough Software (J2ME Polish)

Source code translator, Runtime

Java Native

Exadel (Tiggzi) Web-to-native app wrapper (PhoneGap)

WYSIWYG, JavaScript Web apps, Hybrid

FeedHenry Web-to-native app wrapper (PhoneGap)

HTML5, CSS, JavaScript Web apps, Hybrid

IBM (Worklight) Runtime, Web-to-native app wrapper (PhoneGap)

HTML5, CSS, Javascript Web apps, Hybrid, Native

iBuildapp App Factory WYSIWYG (templates) Web apps, Hybrid

Ideaworks3D (Marmalade)

Source code translator C++ Native

2

1

28

iFactr / iFactr Monocross

Source code translator, Runtime

C# .NET Native

impact.js JavaScript framework HTML5, CSS, JavaScript Web app, Hybrid, Native

iUI Framework HTML5, CSS, JavaScript Web app

Jo App JavaScript framework HTML5, CSS, JavaScript Web apps, hybrid

JQuery Mobile Framework HTML5, CSS, JavaScript Web apps

Kony Web-to-native app wrapper WYSIWYG, HTML5, CSS, Javascript

Hybrid, Native

Mobile Nation (MobileNationHQ)

App Factory WYSIWYG Web app, Hybrid

Mobjectify App Factory WYSIWYG, HTML, JavaScript, CSS

Web app

MoSync Source code translator, runtimes

C++, HTML5, CSS, JavaScript

Native

Netbiscuits Framework / App factory WYSIWYG, HTML5, CSS, Javascript, BiscuitML

Web app, Hybrid

Nokia (Qt) Runtime C++ QML (Qt Meta Language)

Native

PhoneGap (Nitobi-Adobe)

Web-to-native app wrapper HTML5, CSS, JavaScript Hybrid

Pyxis (now Verivo) App factory WYSIWYG Native

Radical Breeze (Illuminations Software Creator)

Source code translator WYSIWYG Native

Red Foundry App builder WYSIWYG Native

RhoMobile (Rhoelements)

Runtime HTML, JavaScript, Ruby Native

RunRev (LiveCode) Runtime WYSIWYG, LiveCode (natural-like language)

Native

Sencha (Touch, jQtouch)

JavaScript Framework, Web-to-native app wrapper (2.0)

HTML5. CSS, JavaScript Web apps, Hybrid

Seregon Solutions (DragonRad)

App Factory WYSIWYG, Lua Native

SIO2 Interactive Runtime C/C++, Lua Native

Smartface Runtime WYSIWYG Native

Software AG (Bedrock)

Source code Translator Java Native C++, ActionScript and JavaScript

2

1

29

Spot Specific Runtime or Web-to-native app wrapper

WYSIWYG, HTML5, CSS, Javascript

Web app, Hybrid

Strobe / Sproutcore (acq. by Facebook)

Framework HTML5, CSS, JavaScript Web apps

SuperWaba (TotalCross)

Runtime Java Native

The M Project JavaScript framework, Web-to-native app wrapper

HTML5, CSS, JavaScript Web apps, Hybrid

Unity Technologies (Unity)

Runtime C# .NET, JavaScript and Boo

Native

Unreal (Unreal Engine)

Runtime UnrealScript Native

Uxebu (Aparrat.io, Storage.js )

Frameworks, Web-to-native app wrapper

HTML5, CSS, JavaScript Hybrid

UXplus (Aqua Platform)

Runtime WYSIWYG, JavaScript, C++

Native

Wink JavaScript Framework, Web-to-native wrapper (PhoneGap)

HTML5, CSS, JavaScript Web app

Wix Mobile App factory WYSIWYG Web app

Xamarin (Mono Touch, Mono for Android)

Source code translator, Runtime

C# .NET Native

XMLVM Source code translator .Net, Java or Ruby Bytecode

Java Bytecode, .NET CIL, JavaScript, Python, Obj. C C++

Zipline Games (Moai)

App factory, Runtime (for Lua script)

Lua Native

source: VisionMobile research

The full list of 100 cross-platform tools that we have tracked as part of our research appears below.

FULL LIST OF CROSS-PLATFORM TOOLS

Adobe (AIR) The Dojo Foundation (dojo toolkit)

The jQuery Project (jQuery Mobile)

RunRev (Livecode)

Adobe (Flex) Seregon (DragonRad) Kony (KonyOne Platform) Sencha (Touch, jQtouch)

Innaworks (Alchemo)

Elements Interactive Mobile (EDGELIB)

Vexed Digital (Kirin, NB FOSS project)

Stonetrip (ShiVa3D)

Antenna Software (Mobility Studio)

Emo-Framework.com Kyros (Velocity) SIO2 Interactive (SiO2 Engine)

Antix Labs (Games Development Kit)

Enough Software (J2ME Polish)

Digital Fruit (Lime JS) Mobinex Inc (Smartface Platform)

2

1

27

an app factory with the tools of a games engine. Lightweight JavaScript libraries like Impact JS and Lime JS are positioned as HTML5 game frameworks.

The next table lists over 50 cross-platform tools by technology approach, authoring language and deployment format (web vs. native).

MAJOR CROSS-PLATFORM TOOLS & APPROACHES

Vendor (Tool) Technology approach Authoring language Deploym. format

Adobe (AIR) Runtime Actionscript Native, Hybrid

Adobe (Flex) SDK addition to AIR MXML Native, Hybrid

Ansca Mobile (Corona)

Runtime Lua Native

Antenna Software (Mobility Studio)

Runtime HTML5, CSS and JavaScript

Hybrid web apps

Antix Labs (Antix Games)

Runtime C/C++ Native

Appcelerator (Titanium)

Runtime HTML5, CSS and JavaScript

Native apps

Application Craft Web-to-native wrapper (PhoneGap)

WYSIWYG, HTML, Javascript, CSS, jQuery

Web apps, Hybrid

AppMobi Runtime (Mobius) Web-to-native app wrapper (PhoneGap)

HTML5, CSS and JavaScript

Web apps, Hybrid

Backelite (BKrender) Web-to-native app wrapper (PhoneGap)

HTML5, CSS and JavaScript

Web apps, Hybrid

DHTMLX Touch JavaScript framework HTML5, CSS, JavaScript Web apps

Didmo (Magmito) App Factory WYSIWYG Web apps, Hybrid

Elements Interactive Mobile (EDGELIB)

Runtime C++ Native

Enough Software (J2ME Polish)

Source code translator, Runtime

Java Native

Exadel (Tiggzi) Web-to-native app wrapper (PhoneGap)

WYSIWYG, JavaScript Web apps, Hybrid

FeedHenry Web-to-native app wrapper (PhoneGap)

HTML5, CSS, JavaScript Web apps, Hybrid

IBM (Worklight) Runtime, Web-to-native app wrapper (PhoneGap)

HTML5, CSS, Javascript Web apps, Hybrid, Native

iBuildapp App Factory WYSIWYG (templates) Web apps, Hybrid

Ideaworks3D (Marmalade)

Source code translator C++ Native

2

1

28

iFactr / iFactr Monocross

Source code translator, Runtime

C# .NET Native

impact.js JavaScript framework HTML5, CSS, JavaScript Web app, Hybrid, Native

iUI Framework HTML5, CSS, JavaScript Web app

Jo App JavaScript framework HTML5, CSS, JavaScript Web apps, hybrid

JQuery Mobile Framework HTML5, CSS, JavaScript Web apps

Kony Web-to-native app wrapper WYSIWYG, HTML5, CSS, Javascript

Hybrid, Native

Mobile Nation (MobileNationHQ)

App Factory WYSIWYG Web app, Hybrid

Mobjectify App Factory WYSIWYG, HTML, JavaScript, CSS

Web app

MoSync Source code translator, runtimes

C++, HTML5, CSS, JavaScript

Native

Netbiscuits Framework / App factory WYSIWYG, HTML5, CSS, Javascript, BiscuitML

Web app, Hybrid

Nokia (Qt) Runtime C++ QML (Qt Meta Language)

Native

PhoneGap (Nitobi-Adobe)

Web-to-native app wrapper HTML5, CSS, JavaScript Hybrid

Pyxis (now Verivo) App factory WYSIWYG Native

Radical Breeze (Illuminations Software Creator)

Source code translator WYSIWYG Native

Red Foundry App builder WYSIWYG Native

RhoMobile (Rhoelements)

Runtime HTML, JavaScript, Ruby Native

RunRev (LiveCode) Runtime WYSIWYG, LiveCode (natural-like language)

Native

Sencha (Touch, jQtouch)

JavaScript Framework, Web-to-native app wrapper (2.0)

HTML5. CSS, JavaScript Web apps, Hybrid

Seregon Solutions (DragonRad)

App Factory WYSIWYG, Lua Native

SIO2 Interactive Runtime C/C++, Lua Native

Smartface Runtime WYSIWYG Native

Software AG (Bedrock)

Source code Translator Java Native C++, ActionScript and JavaScript

2

1

29

Spot Specific Runtime or Web-to-native app wrapper

WYSIWYG, HTML5, CSS, Javascript

Web app, Hybrid

Strobe / Sproutcore (acq. by Facebook)

Framework HTML5, CSS, JavaScript Web apps

SuperWaba (TotalCross)

Runtime Java Native

The M Project JavaScript framework, Web-to-native app wrapper

HTML5, CSS, JavaScript Web apps, Hybrid

Unity Technologies (Unity)

Runtime C# .NET, JavaScript and Boo

Native

Unreal (Unreal Engine)

Runtime UnrealScript Native

Uxebu (Aparrat.io, Storage.js )

Frameworks, Web-to-native app wrapper

HTML5, CSS, JavaScript Hybrid

UXplus (Aqua Platform)

Runtime WYSIWYG, JavaScript, C++

Native

Wink JavaScript Framework, Web-to-native wrapper (PhoneGap)

HTML5, CSS, JavaScript Web app

Wix Mobile App factory WYSIWYG Web app

Xamarin (Mono Touch, Mono for Android)

Source code translator, Runtime

C# .NET Native

XMLVM Source code translator .Net, Java or Ruby Bytecode

Java Bytecode, .NET CIL, JavaScript, Python, Obj. C C++

Zipline Games (Moai)

App factory, Runtime (for Lua script)

Lua Native

source: VisionMobile research

The full list of 100 cross-platform tools that we have tracked as part of our research appears below.

FULL LIST OF CROSS-PLATFORM TOOLS

Adobe (AIR) The Dojo Foundation (dojo toolkit)

The jQuery Project (jQuery Mobile)

RunRev (Livecode)

Adobe (Flex) Seregon (DragonRad) Kony (KonyOne Platform) Sencha (Touch, jQtouch)

Innaworks (Alchemo)

Elements Interactive Mobile (EDGELIB)

Vexed Digital (Kirin, NB FOSS project)

Stonetrip (ShiVa3D)

Antenna Software (Mobility Studio)

Emo-Framework.com Kyros (Velocity) SIO2 Interactive (SiO2 Engine)

Antix Labs (Games Development Kit)

Enough Software (J2ME Polish)

Digital Fruit (Lime JS) Mobinex Inc (Smartface Platform)

Cross-Platform Developer Tools 2012 by Vision Mobile

Spiderweb by jk079 - http://www.flickr.com/photos/jk079/5236562439/

Spiderweb by jk079 - http://www.flickr.com/photos/jk079/5236562439/

Mobile web moving from hype to reality. Developers stumbling on three challenges: fragmentation, performance limitations and lack of distribution and monetisation channels.

Developer Economics 2012 by Vision Mobile

OpenSignalMaps, a popular Android application, has tracked over 600 thousand devices (...) and reported nearly 600 device models and 4,000 device variants.

Developer Economics 2012 by Vision Mobile

© VisionMobile 2011 | www.DeveloperEconomics.com

45

Measuring fragmentation

Fragmentation is as old as software itself. Fragmentation challenges have been a key topic of discussion in mobile industry circles since Java ME started proliferating in 2004-5. No matter the platform advances, fragmentation remains an unsolved problem – both for developers targeting multiple platforms, but also for the likes of Apple, Google and Microsoft, for whom fragmentation can break the ‘platform story’.

Moreover, fragmentation is a challenge for brands and commercial organisations going mobile, as it adds a completely new dimension of complexity. For brands, extending presence to the web is a straightforward process involving developing a website and testing it across the two or three mainstream browsers found on 80% of devices. Going mobile complicates things much further, as developing across the top three or four mobile platforms (iOS, Android, Symbian and BlackBerry) reaches just over 20% of the devices sold on average, and represents a much more resource-intensive operation as there is very little code reuse across these platforms. Extending user reach beyond this 20% presents formidable challenges which can only be addressed only with a lowest common denominator approach.

To quantify platform fragmentation we asked developers how many versions (also referred to as SKUs - stock-keeping units) of their apps they need to develop.

“Commercial and UX considerations aside, 97% of the application code across iPhone and iPad is usually the same.”

Alex Curylo Winner of "Most Innovative Product", Apple Design Awards

Digital madness by ric_k - http://www.flickr.com/photos/ric_k/2545124107/

DEVELOPMENT FRAGMENTATION?

FACT Development in Docklands by Destinys Agent http://www.flickr.com/photos/destinysagent/2664658912/

DESIGN

APPLICATIONS

APPLICATIONS What the user has in a digital experience: 1) information and 2) the potential of doing something with this information

Arturo Toledo, User Experience Designer (WP Design Studio) - http://ux.artu.tv/?p=240

content

actions

APPLICATIONS What the user has in a digital experience: 1) information and 2) the potential of doing something with this information

Arturo Toledo, User Experience Designer (WP Design Studio) - http://ux.artu.tv/?p=240

content

CONTENT SCREENS

SIBLING NAVIGATION

TOP-DOWN NAVIGATION

BACK NAVIGATION

APPLICATIONS What the user has in a digital experience: 1) information and 2) the potential of doing something with this information

Arturo Toledo, User Experience Designer (WP Design Studio) - http://ux.artu.tv/?p=240

actions

A

A

A

A AA

GLOBAL ACTIONS

SCREEN ACTIONS

OBJECT ACTIONS

A

A

A

A AA

A

A

A

A AA

INPUT SCREENS

A

A A A A

A

A

AA

A

AA

A

A

A

A

A

A

A A A

A

A

A

A

A

A

A

A

AA

A

A

AA

A

Applications

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

GLOBAL & SCREEN ACTIONS

OBJECT ACTIONS

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Content screen

Content screen

Content screen

Content screen

Content screen

Applications

Input screen

Input screen

Input screen

A

A

A

A A A

A

A

Step 1 - Go to one app

Step 2 - Open the apps switcher

Step 3 - Go to a different app

Step 4 - Press the back button

Where are you now?

The switcher test

APPLICATION STRUCTURE

(navigates) within an app based on the hierarchical relationships between screens

http://developer.android.com/design/patterns/navigation.html

ACTIVITY HISTORY (navigates) in reverse chronological order,

through the history of screens the user has recently worked with

http://developer.android.com/design/patterns/navigation.html

appstructure

activity

appstructure

activity

Android 2.3 and earlier relied upon the system Back button for supporting navigation within an app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared: the Up button, consisting of the app icon and a left-point caret

http://developer.android.com/design/patterns/navigation.html

appstructure

activity

When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back button has the same result as pressing the Up button - this is a common occurrence

http://developer.android.com/design/patterns/navigation.html

1

1

2

2

3

3

4

4

5

5

6

6

7

8

DESIGN FRAGMENTATION?

FICTION

DESIGN FRAGMENTATION?

FICTION DOES THIS MATTER?

Commonplace means familiar, and for your audience, familiarity leads to efficiency and ease (...) Novices in particular benefit from interfaces that use icons and controls they’ve seen elsewhere.

Tapworthy - Designing Great iPhone apps, J. Clark

There is a confusing and frustrating array of hardware, software, apps, websites, etc (...) using them is burdensome (...) the diversity of them (...) is already problematic (...) So I see whatever will simplify and unify our activities as being popular.

The Future of Apps and Web, Pew Internethttp://pewinternet.org/Reports/2012/Future-of-Apps-and-Web/Overview.aspx

We are only three decades into one of the most important revolutions the world has ever seen. In design development terms, that is a mere blink.

The Mobile Frontier, R. Hinman

the history of mobile has been a long, painful process of copying desktop computers and then sheepishly realizing that is just doesn’t quite work right.

S. Jenson - http://designmind.frogdesign.com/blog/mobile-apps-must.die.html

In light of all the statistical data and anecdotal evidence, it may be difficult to believe that anything is limiting the potential of mobile technology. But there is one limiting factor : it’s our fixation with the desktop paradigm and its graphical user interface.

The Mobile Frontier, R. Hinman

WHY IS IT HAPPENING?

lockdown was the direction a visionary Steve Jobs (...) first took with the iPhone. (...) These technologies can let geeky outsiders build upon them just as they could with PCs, but in a highly controlled and contingent way (...) software written by outsiders that must be approved by and funneled through Apple.

The Future of the Internet, J. Zittrain

When your task is designing an operating system, you are not focusing on interaction innovation: all your energies are going into other things ....

... mainly creating a coherent interaction framework, protecting your users, third-party developers the tools they need.

and giving

There’s a lull in the industry right now (...) If anything, Apple has an interest in maintaining the status quo. So does everyone else.

http://www.mobileindustryreview.com/2012/05/the-facebook-phone-why-its-good-news-for-the-industry.html

with every new smartphone subscription we take another tiny but discrete step towards a networked world dominated by powerful corporations that can (...) control the speed of technological innovation to a pace that is convenient for them rather than determined by the creativity of hackers and engineers.

http://guardian.co.uk/technology/2012/jun/03/john-naughton-smartphone-revolution-cost

disruption in mobile design will not come from the companies designing the OS

disruption in mobile design must come from third party services

disruption in mobile design must come from third party services or might not comeat all.

top related