Our presentation at UX Sofia 2012 about mobile fragmentation.

1. Fragmentation in mobile design
m yt ho r fa ct?
Puzzle perspective by jugbo - http://www.flickr.com/photos/jugbo/366748612/

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

3. by mikek http://www.flickr.com/photos/mikek/6816067326/

4. by mikek http://www.flickr.com/photos/mikek/6810557770/

5. by mikek http://www.flickr.com/photos/mikek/6997113043/

6. by mikek http://www.flickr.com/photos/mikek/7043782841/

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

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

9. by mikek http://www.flickr.com/photos/mikek/6830525152

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

11. http://www.mobiledia.com/phones/nokia/6810/photo-1.html

12. http://n-gageaplicationdownload.blogspot.co.uk/

13. http://www.mobiledia.com/phones/nokia/6810/photo-1.html

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

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

16. hardware fragmentation?
fa ct
Hardware Store by John McNab - http://www.flickr.com/photos/johnmcnab/5758738799/

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

18. Fragmentation challenges have been a key
topic of discussion in mobile industry circles
since Java ME started proliferating in 2004-5.
Developer Economics 2011, created by Vision Mobile

19. SymbianOS
Android
Mobile OSs in Bulgaria (Dec 08 - Apr 12) iOS
BlackBerry OS
80%
70%
60%
50%
40%
30%
20%
10%
0%
Dec 2008 Jan 2009 Feb 2009 Mar 2009 Apr 2009 May 2009 Jun 2009 Jul 2009 Aug 2009 Sep 2009 Oct 2009 Nov 2009 Dec 2009 Jan 2010 Feb 2010 Mar 2010 Apr 2010 May 201
http://gs.statcounter.com/

20. SymbianOS
Android
Mobile OSs in Bulgaria (Dec 08 - Apr 12) iOS
BlackBerry OS
Nov 2010 Dec 2010 Jan 2011 Feb 2011 Mar 2011 Apr 2011 May 2011 Jun 2011 Jul 2011 Aug 2011 Sep 2011 Oct 2011 Nov 2011 Dec 2011 Jan 2012 Feb 2012 Mar 2012 Apr 2012
http://gs.statcounter.com/

21. 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, created by Vision Mobile

22. Brew Series40 Symbian iOS Android
many hundred 275 150 350
millions million million million
Blackberry WP Bada WebOS Meego
80 9 12 tons of small OSs
million million million
http://communities-dominate.blogs.com/brands/2012/05/mobile-services-beyond-messaging-excellent-tns-global-survey-reveals-tons.html

23. 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 Android Development Tool Android Market
C and C++ (NDK) Plugin for Eclipse
WebViews Other IDEs, e.g., IntelliJ,
Netbeans. Visual Studio
Bada C++ (proprietary Bada IDE based on Eclipse Samsung Apps
extension) CDT and JSDT (JavaScript
HTML, CSS, JS Development Tools)
Blackberry C/C++ QNX Momentics IDE Blackberry App World
Tablet OS Java Eclipse plug-ins
Android Player Standard IDE & Webworks
HTML5, CSS, tools
JavaScript
Blackberry J2ME MIDP 2.0 Eclipse plug-in Blackberry App World
OS HTML WebWorks SDK
iOS Objective C Mac with Xcode App Store
WebViews
Symbian C++ Carbide C++ IDE Ovi Store
Qt
Windows C#, VB.NET Visual Studio and Microsoft Windows Phone Marketplace
Phone Silverlight framework tools such as Expression
XNA framework Blend
source: VisionMobile research
Cross-Platform Developer Tools 2012, created by Vision Mobile

24. 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
Runtime Lua Native
(Corona)
Antenna Software HTML5, CSS and
Runtime Hybrid web apps
(Mobility Studio) JavaScript
Antix Labs (Antix
Runtime C/C++ Native
Games)
Appcelerator HTML5, CSS and
Runtime Native apps
(Titanium) JavaScript
Web-to-native wrapper WYSIWYG, HTML,
Application Craft Web apps, Hybrid
(PhoneGap) Javascript, CSS, jQuery
Runtime (Mobius) Web-to-
HTML5, CSS and
AppMobi native app wrapper Web apps, Hybrid
JavaScript
(PhoneGap)
Web-to-native app wrapper HTML5, CSS and
Backelite (BKrender) Web apps, Hybrid
(PhoneGap) JavaScript
DHTMLX Touch JavaScript framework HTML5, CSS, JavaScript Web apps
Didmo (Magmito) App Factory WYSIWYG Web apps, Hybrid

25. (TotalCross)
JavaScript framework, Web-
The M Project HTML5, CSS, JavaScript Web apps, Hybrid
to-native app wrapper
Unity Technologies C# .NET, JavaScript and
Runtime Native
(Unity) Boo
Unreal (Unreal
Runtime UnrealScript Native
Engine)
Uxebu (Aparrat.io, Frameworks, Web-to-native
HTML5, CSS, JavaScript Hybrid
Storage.js ) app wrapper
UXplus (Aqua WYSIWYG, JavaScript,
Runtime Native
Platform) C++
JavaScript Framework, Web-
Wink to-native wrapper HTML5, CSS, JavaScript Web app
(PhoneGap)
Wix Mobile App factory WYSIWYG Web app
Xamarin (Mono
Source code translator,
Touch, Mono for C# .NET Native
Runtime
Android)
Java Bytecode, .NET
.Net, Java or Ruby
XMLVM Source code translator CIL, JavaScript,
Bytecode
Python, Obj. C C++
Zipline Games App factory, Runtime (for
Lua Native
(Moai) Lua script)
source: VisionMobile research
Cross-Platform Developer Tools 2012, created by Vision Mobile
The full list of 100 cross-platform tools that we have tracked as part of our research appears below.

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

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

29. development fragmentation?
fa ct
Development in Docklands by Destinys Agent - http://www.flickr.com/photos/destinysagent/2664658912/

30. design

32. content
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

33. Input screen
Content Content Content
screen screen screen
Content
Input screen
screen
Content
Input screen
screen

35. Input screen
Content Content Content
screen screen screen
Content
Input screen
screen
Content
Input screen
screen

37. Input screen
Content Content Content
screen screen screen
Content
Input screen
screen
Content
Input screen
screen

39. Input screen
Content Content Content
screen screen screen
Content
Input screen
screen
Content
Input screen
screen

42. content
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

43. Input screen
A A A
Content Content Content
screen screen screen
A
Content
Input screen
screen
A
Content
Input screen
screen

48. A
Input screen
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
Input screen
Input screen
screen
A A
Content
Input screen
Input screen
screen

50. A
Input screen
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
Input screen
Input screen
screen
A A
Content
Input screen
Input screen
screen

52. A
Input screen
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
Input screen
Input screen
screen
A A
Content
Input screen
Input screen
screen

53. A
Mailboxes
A
Folder list
A A
A
Edit
New message Message list message list
A
A
A
Move
Message
A

54. G G
Write Search Sign in Sign up
Home Connect Discover Me
Tweet Settings Details
Me Switch a/c
Connect
Retweeted Favourited
Followed you
you you
Lists Tweet Saved
DMs Drafts Lists Profile
searches
Tweet
Profile
Lists New list
Tweet
Profile Edit profile
List details Edit list
Retweeted Favourited
Profile
Tweets Following Followers Favourites Blocked Lists by by
Tweet Profile

56. Applications
A
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
screen Input screen
A A
Content
screen Input screen

57. Applications
A
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
screen Input screen
A A
Content
screen Input screen

65. Applications
A
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
screen Input screen
A A
Content
screen Input screen

76. Applications
A
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
screen Input screen
A A
Content
screen Input screen

95. Applications
A
Input screen
A A A
Content Content Content
screen screen screen
A A
Content
screen Input screen
A A
Content
screen Input screen

98. The switcher test
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?

99. app structure

100. app structure

101. app structure

102. activity

103. activity

104. activity

105. app
structure both
activity

106. 1

107. 2

108. 3

109. 4

110. 5

111. 6

112. 7

113. 8 9

114. M Y T H
design fragmentation?

115. Commonplace means familiar, and for your
audience, familiarity leads to efficiency and
ease - exactly what most folks want from an
app (...) Novices in particular benefit from
interfaces that use icons and controls they’ve
seen elsewhere.
Tapworthy - Designing Great iPhone apps, J. Clark

116. 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

117. technology has radically changed how we
live, but the underlying cultural philosophies
that drive aesthetic and visual fashion have
remained largely unchanged for 20 years (...)
perhaps Apple’s digital recreations of things
we know and love is simply a sign of the
times?
http://www.fastcodesign.com/1669879/can-we-please-move-
past-apples-silly-faux-real-uis

118. 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://m.guardian.co.uk/technology/2012/jun/03/john-naughton-smartphone-
revolution-cost?cat=technology&type=article

119. disruption in mobile design
will come from third party
services or won’t come at all.

120. disruption in mobile design
will come from you or won’t
come at all.