designing for diversity - how to stop worrying and embrace the android revolution
DESCRIPTION
It took 16 years for smartphone penetration to reach 1 billion people. Analysts believe it will take only 3 years to reach the next billion. The devices these consumers buy will be incredibly diverse, yet many will run on Android; a platform that now sees more than 1.5 million activations per day. In this presentation, we explore the fascinating rise of Android around the globe. From dual SIM phones in Indonesia, to dual screen e-ink devices in Russia and crowd-sourced platform modifications in China, we will discover the role open source has played in Android's popularity and how to design for such a diverse environment.TRANSCRIPT
httpwwwflickrcomphotosjoeshlabotnik305410323
designing for diversity how to stop worrying and embrace the Android revolution
httpwwwflickrcomphotoskhamtran5871541424
this isnrsquot just a talk
about Android
httpwwwflickrcomphotosmwiththeat5426772664
itrsquos a story about Moorersquos Law
of personal computingglobalisation and the future
httpwwwflickrcomphotosmwiththeat5562687410
on the other side of the world
rather than start this story in a factory
(or more specifically the Port of Leithirsquom going to start in Scotland
on the north edge of Edinburgh)
httpwwwflickrcomphotoseguidetravel4683905164
Leith is a working harbour
Source Marinetrafficcom
so as nearby residents we see
all sorts of ships
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotoskhamtran5871541424
this isnrsquot just a talk
about Android
httpwwwflickrcomphotosmwiththeat5426772664
itrsquos a story about Moorersquos Law
of personal computingglobalisation and the future
httpwwwflickrcomphotosmwiththeat5562687410
on the other side of the world
rather than start this story in a factory
(or more specifically the Port of Leithirsquom going to start in Scotland
on the north edge of Edinburgh)
httpwwwflickrcomphotoseguidetravel4683905164
Leith is a working harbour
Source Marinetrafficcom
so as nearby residents we see
all sorts of ships
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosmwiththeat5426772664
itrsquos a story about Moorersquos Law
of personal computingglobalisation and the future
httpwwwflickrcomphotosmwiththeat5562687410
on the other side of the world
rather than start this story in a factory
(or more specifically the Port of Leithirsquom going to start in Scotland
on the north edge of Edinburgh)
httpwwwflickrcomphotoseguidetravel4683905164
Leith is a working harbour
Source Marinetrafficcom
so as nearby residents we see
all sorts of ships
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosmwiththeat5562687410
on the other side of the world
rather than start this story in a factory
(or more specifically the Port of Leithirsquom going to start in Scotland
on the north edge of Edinburgh)
httpwwwflickrcomphotoseguidetravel4683905164
Leith is a working harbour
Source Marinetrafficcom
so as nearby residents we see
all sorts of ships
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
(or more specifically the Port of Leithirsquom going to start in Scotland
on the north edge of Edinburgh)
httpwwwflickrcomphotoseguidetravel4683905164
Leith is a working harbour
Source Marinetrafficcom
so as nearby residents we see
all sorts of ships
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Leith is a working harbour
Source Marinetrafficcom
so as nearby residents we see
all sorts of ships
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Norwegian submarine
oil and gas exploration vessels
giant pipe layers and the occasional
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
and come spring and summer
there are cruise ships
Scoish
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
when ships dock the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
the Philippines
crews often come from
httpwwwflickrcomphotosinsmu744296249058
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosshankaronline9237826940
more than 25 of the 15 million
in fact Filipino sailors account for
mariners worldwide
Source Wikipedia
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
a dramatic change in the devicesover the years wersquove seen
used by crew at the Port of Leith
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
from hulking laptopsin 2010
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
to netbooksin 2011
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
and tablets (or quite often phablets)
throughout 2012 and 2013
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdidbygraham3892420695
and in the hands of people whoall this change in just 3 years
send a good portion of their wages
home to their families
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotossvensson6012726684
Three factors have enabled such rapid change
1 Moorersquos Law
2 The development of off-the-shelf silicon
3 The rise of an open source mobile OS
1
2
3
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Source Intel
True to Moorersquos predictions the number of components on an integrated circuit(or microchip)have continuedto double every18 months
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotoskamshots4104155942Source Wikipedia
to build ever cheaper lighter andthis has enabled us
more powerful devices
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotososkay3300199882
These devices may have been smaller cheaper and more powerful but developing them still took months (or years) and the skill of hundreds of designers and engineers
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
All that changed in 2005 when Taiwanese semiconductor company MediaTek introduced what it called ldquoreference designsrdquo for mobile phones
httpwwwflickrcomphotososkay3300142950
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotososkay3300142950
This ldquocell phone in a boxrdquo concept bundled all the necessary mobile phone components onto a single chip
Manufacturers could customize their chip from a menu of available features and MediaTek even offered training and development tools such as emulators
camera
MP3 music player
low power consumption
feature phone reference chipset
GSMGPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
suddenly tiny companies
httpwwwflickrcomphotososkay3300186490
with only a handful of engineers could
set up shop producing capable mobile devices
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China but others soon appeared in India Malaysia Indonesia
httpwwwflickrcomphotososkay3299338889
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
MediaTek chips provided most of the functionality All companies needed to do was slap on a case add a bit of branding and develop any product-specific customizations
Nexian Indonesia circa 2009
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Micromax India circa 2009
Some companies competed solely on price while others specialized in fun and often eccentric devices designed to suit local needs and fashions
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
fake Blackberry
others simply produced copies of flagship devices from well known brands
iOS lookalike
fake Vodafone
fake Opera Mini
The ever stylish and most desirable Voda-Pod-Berry
Source Danweiorg
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
By late 2007 it was estimated that these small ldquowhite-boxrdquo retailers had captured 10of global device sales
Source Wikipedia
(Because many of these companies began by copying other products they were also often referred to as ldquoShanzhairdquo or bandit manufacturers but this term downplays the presence of many small legitimate companies who designed their own products)
not a BlackBerry
man in an Obama suit
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
didnrsquot just copythey innovatedbut white-box manufacturers
httpwwwflickrcomphotosjurvetson1783467315
video caller 2
video caller 1
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
They ran tiny production runs experimenting wildly with industrial design components and software If a ldquofeaturerdquo didnrsquot sell they simply dreamt up another
TV antenna
watch phone
music phone
detachable lens
regional designs
special occasion
space for 4 SIM cards + projectorQWERTY (popular
in Indonesia)
Photo credit Bunnies studio blog
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
With the release of Android in 2008things changed once again
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Android provided the entire ecosystem with a unique opportunity to rapidly transition from building low-cost feature phones to low mid-and eventually high-end smartphones and tablets
circa 2010one of Spice Indiarsquos firstAndroid smartphones
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Source EBay August 2013
Shanzhai circa 2013
looks like a Nokia Lumia
looks like Windows Phone OS
Some small device makers still chose tocopy the look and feel of well known brands
built on Androidbut hey itrsquos only pound56 ($85)
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
but many have evolved into larger companies that now develop and market devices under their own brand
Meizu M8 Mini One667 MHz 32 mp cameraCustomized Windows CE
Meizu MX2quad core 16 GHz 8mpCustomized Android ldquoFlyMerdquo OS
Meizu M91 GHz 5 mpAndroid 22
2007pound125 ($200)
2011pound218 ($350)
2012pound250 ($400)
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
ldquodesigned by Jack Wong with the help of 30-plus handcrafted wooden prototypes
followed by 3-D scanningrdquo
Source Engadget
The slick NFC-enabled Meizu MX3in 2013
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Other chipset vendors such as Rockchip Broadcom Allwinner and Qualcomm now emulate the MediaTek model resulting in a veritable explosion of options for manufacturers and consumers
httpwwwflickrcomphotosfdecomite2787670078
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotososkay3300199882Source The Internet of things is Android and its everywhere
ldquoEvery screen variant mobile chip and sensor known to man has been tuned to work with Androidtherersquos this network effect so that now anyone who wants to make a custom product can take Android and morph it into anythingrdquo
Jim Zemlin Linux Foundation
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Off the shelf components and an open OS have democratized portable computing
There is now huge consumer choice in connected devices reaching almost every price point
httpwwwflickrcomphotosdesignshard3019335591
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
ldquoGood enoughrdquo smartphones and tablets can now be purchased for ~$100
Very basic models are available for ~$50
Thanks to Moorersquos Law many of these devices already rival the specs of top devices sold just a few years ago
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Android now powers 59 of smart devices(and 80 of smartphones) being sold
That works out to a staggering 15 million Android device activations per dayAccording to Google but not counting many Chinese devices
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
These devices are designed developed manufactured and marketed by many hundreds of companies each with their own audience and product goals
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosjoeshlabotnik305410323
Part 2 Understanding diversity
Before we discuss how to design for Androidrsquos diversity letrsquos dig deeper to discover how diversity affects day-to-day user experience
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
All modern connected devices consist of a carefully chosen collection of components
Source Samsung
Gyro sensor
Internal memory15GHz DualCore Chip
LTE HSPDA Modem
Antenna and stereo speakers
Light sensor module
3 Megapixel back-facing camera
High capacity battery
DMB antenna
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Manufacturers can choose off-the-shelf components or customize each aspect of the device to suit their intended price-point and target audience
WI-FI
Bluetooth
capacitive display
multi-SIM
FM radio
GPS
CPU
speakers
physical size
ppi
responsiveness
gyroscope
proximity
light
motion
operating system
2G3G4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous standby
front
back
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
At the cheapest price point you often find ldquogenericrdquo device with an off-the-shelf chipset stock Android and barely-branded case There are tons of these devices for sale throughout Asia but they havenrsquot (yet) reached Europe and North America
Screenshot Tmart
off-the-shelf
stock
off-the-shelf
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Slightly more customized devices are sold by all sorts of companies
Here is an example ofa very popular device that might fit this category
customized
customized
off-the-shelf
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
yen799 (pound83$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp cameradual SIM w dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Part of Hongmirsquos huge appeal is its MIUI ROM A highly customized (and customizable) version of Android(wersquoll have a better look at Android ROMs in a bit)
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
In case yoursquore thinking ldquoYeah whateverrdquoconsider that when the Hongmi went on sale last monththe first batch of 100000 devices sold out in just 90 seconds(Xiaomi has no shops and until recently only sold online This reduces overhead and enables customers all over China to purchase a device on the very same day)
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
What we most often purchase in Europe and North America is some manner of highly customized device built by an established manufacturer
customized
customized
customized
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
experiment with different form factorsuse Android as a base with which tothese manufacturers
Galaxy Note 101rdquoGalaxy Tab 70rdquoGalaxy Player
58rdquo
Galaxy Note 53rdquo
Galaxy SIII 48rdquo
Admire 35rdquo
Intercept 30rdquo
Gravity 23rdquo
Galaxy Tab 89rdquoGalaxy Tab 77rdquo
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
A new dual screen dual SIM (with dual standby) luxury clamshell phone developed by Samsung The full OS is accessible from back or front This device is expected to retail for ~pound1500 ($2500)
serve varied audiences
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The KDDI Infobar rangewas designed by famed industrial designer Naoto Fukasawa and features iida UI a highly customized version of Android
to differentiateor leverage fashion
their brand
Infobar C01
Infobar A01
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Open source Android OS also provides an ideal platform on which to experiment with new interfaces and interactions
Scrolling turns elements into translucent teardrops
iida UI features a modular widget based interface
There are also lots of platform specific transitions
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
On Sony Xperia and newer Samsung Galaxy devices users can trigger resizable and repositionable floating windows These enable advanced PC-like copypaste and multi-tasking behaviours
Unlike Android widgets (which are simply mini-data views) these windows contain a fragment of the full application that users can interact with
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
some customizations require eventighter coupling of hardware and software
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
scroll using the back panel
206deg repositionable camera
take photos remotely (using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
But (yet again) innovation and experimentation donrsquot just come from the big guys
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
A dual display smartphone developed by Yota a Russian broadband operator The e-paper powered back display can retain an image for weeks even when the device is powered off This feature enables users to completely customize their back case or use it to store a time-and power-sensitive image such as a map or boarding pass
e-paper
with capacitive
touch stripe
standardmulti-touchdisplay
FRONT
BACK
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Toughshield specializes in products for industrial and institutional settings including construction healthcare and retail
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Global supermarket chain Tesco recently announced Hudl a ~pound100 ($150) family-friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration
Tesco Hudl
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Source Quartz Photo courtesy Datawind
The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that countryrsquos students Manufactured in India for a mere $40 the purchase cost to students will be subsidized to further increase access
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Although many consumers still primarily purchase devices designed developed and marketed by large companiesthis may not be the case going forward
If current patterns hold true consumers around the world may increasingly be just as likely to own devices developed by smaller brands and manufactured through any number of ldquootherrdquo manufacturers
Worldwide Smartphone Sales to End Users by Vendor in 2Q13
Apple14
Samsung32
LG 5
ZTE 4Lenovo 4
Others40
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
but Androidrsquos diversity does not stop at brands and hardware The platform itself is also immensely customizable
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The most common customizations come from large manufacturers who attempt to differentiate by offering proprietary user interface skins home screens (or ldquolaunchersrdquo) and enable unique features and personalization options such as themeing
ldquoVanillardquo Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized versions
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosliquene4824175336
users can then layer
their own customizations
ranging from simple interface adjustments
to more substantial OS-altering modifications
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
A relatively common customization might be the installation of an alternate app to control text input
This new app could be triggered just-in-time or set to completely replace the default keyboard
SwiftKey with QWERTY and gesture input
8Pen gesture input
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
In fact thanks to a system called intents users can also specify favourite apps to complete common tasks such as sharing or opening URLs They can do this just-in-time or choose a favourite app to complete that task going forward
Set as default Choose Firefox as default app to browse the web from the current context
Just in time Choose which app you would currently like to use to ldquoSharerdquo a URL
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
A less common but more transformative customization is to install a new launcher This replaces the devicersquos home and lock screens core app menus and often unlocks extensive collections of themes and home screen widgets
The very popular Go Launcher offers an extensive theme collection and enables users to customize transition effects and define their own shortcut gestures
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The most extreme form of customization involves completely replacing the build of Android that came with the device
These third party (and often community-built) modifications (or MODs) provide not just a new launcher skins and themes but replace many default apps and enable entirely new (and often experimental) features
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Paranoid Android MOD for example features a Hybrid Mode that lets you adjust the resolution of every app widget or system component on the device
Because many Android apps adapt to different screen sizes this enables you to choose a preferred ldquoviewrdquo for each app
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The most popular MOD in China is MIUI developed
by upstart handset manufacturer Xiaomi
International versions of MIUI are maintained by
independent developers with versions available for
14 countries including Brazil India and Indonesia
(The MIUI is closed source so it may be in breach of the Android licence)
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomirsquos message boards
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Another popular feature is MIUIsrsquo extensive themeing capabilities and an app store containing thousands of community built themes
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Installing a MOD is far from mainstream (especially in Europe and North America) but as installation becomes simpler who knows what behaviours will develop
CyanogenMod is now a formal company with $7M in investment and plans to develop a one-click installer that will soon be available on Google Play
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
your device your choiceof MOD at purchase
The new Oppo N1
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
How does all this UI diversity impact design
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Although a devicersquos core interfaces icons and even input mechanisms may be customized manufacturers are expected to include the default Holo system theme on every device
This requirement only extends to ldquoofficialrdquo manufacturers who ship devices with Android Marketplace Small manufacturers donrsquot always qualify so although they have nothing to gain (and everything to lose) by not including Holo itrsquos possible they may choose to omit it
Holo lightHolo dark
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Holo provides a consistent look and feel for core components
When designing an Android app you are free to provide your own theme but using Holo will guarantee a consistent look across devices and reduce the need to extensively test your brand-specific theme with the many other themed variants of Android
Thanks to Holo the Twitter image picker interface remains consistent
The Holo-themed settings screen on a Galaxy Nexus running stock-Android
The customized settings screen on a Xiaomi M2S running MiUI
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
What you will need to plan for however is diversity in platform versions
Because Android OS is itself just another component manufacturers are free to use whichever version best suits a devicersquos overall capabilities and performance profile
(And if a manufacturer has highly customized their build they may not be able to immediately update it each time Google releases a new version)
Jelly Bean (2012)
451
Ice Cream Sandwich (2011)
217
Gingerbread (2010)
307
Older versions 25
Source developerandroidcom September 4 2013
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Note Older versions of Android often support different features include different APIs and follow different design patterns Google provides compatibility and support libraries that help smooth out many of these differences
Android 40pound7000 ($11000)
Vertu Ti
For this reason consumers purchasing a device todaymay not automatically end up with the latest version of the OS
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Source Henry Fong Yodo1 presented at GDC 2013
Users may also not access their content through the channels yoursquod expect
A snapshot of the complexity of Android app discovery distribution and payment in China The Chinese ecosystem is particularly complex and include over 200 app stores
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
An unofficial app store in a Bangkok mega mall selling Android (and iOS -) apps to passersby Wersquove been told that in parts of APAC stores like this can also help you install and maintain a custom Android MOD
FWIW This is not a new behaviour The platforms and devices may have changed but we first noticed (J2ME SWF amp ringtone) app store booths in APAC malls in 2002
the more creative people will get
the more open the ecosystem
social discovery
serendipity (and fun)
curation and tech support
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosadactio1799953270
Part 3 Designing for diversity
Throughout the remainder of this presentation we will explore strategies that can help you design for such a diverse environment
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Disclaimer Android is incredibly versatile and now powers thousands of ldquodevicesrdquo including cars TVs fridges stoves and watches
Although this presentation primarily discusses consumer electronics products such as smartphones and tablets many of the guidelines and approaches discussed will be relevant to the design of other types of products
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
1 Be flexible2 Provide assets for all3 Optimize layouts4 Enable diverse experiences
Android design 101
Four key principles
these no doubt seem familiar if you regularly design for the (mobile) web
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 1 Be flexiblecreate flexible density-independent layouts
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
ldquoWe have seen 11868 distinct devices download our app in the past few months In our report last year we saw 3997
OpenSignal device fragmentation report 2013
With so many distinctly different devices you can expect a wide range of screen sizes and pixel densities
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Screen size and pixel density diversity makes defining layouts using pixels problematic
On screens with different densities an identical number of pixels will correspond to different physical sizes
this 4 x 2 pixel button is too big on a low density display
just right on a medium density display
and far too small on a high density display
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
To solve this problem Android enables you to define layouts using density independent pixels (dp)
Use these virtual pixel units to express dimensions or position and the system will automatically scale them as appropriate to the devicersquos screen size and density
medium density(baseline)
high density(adjusted so physical size remains consistent)
low density(adjusted so physical size remains consistent)
Tip 1dp corresponds to approximately 1px on a 160ppi display
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Similar to designing flexibly for the web you should donrsquot specify dimensions in cases where elements are simply meant to stretch to fill the available space
Android enables you to specify how components should scale to fit this space and ways to define the weight of each component within the interface
resizable area no fixed height
resizable and of equal weight
12dp10dp
48dp
48dp
32x32dp
Source developergooglecom
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Layouts that scale and flex are great but to provide the best experience you will often need to go further
bull Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling
bull Specify alternate layouts to improve legibility and overalluser experience
bull Specify alternate content or behaviours to suit a userrsquoslanguage device form factor or capabilities
but thatrsquos not all
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 2 Provide assets for allusing built-in layout and resource adaptation
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Each Android app includesa collection of resources that are used to define and construct the user interface
These include bitmap images layouts colour palettes text strings and numeric values containing content or key dimensions such as global or component-specific margins and font sizes
ltabcdgt
lt200dpgt
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Resources can be grouped using qualifiers that specify their intended context of use
Similar (in spirit) to CSS media queries (but far more versatile)this system enables you to indicate which resources should be used based on common contexts such as screen size orientation pixel density and language
color
drawable
drawable-mhdpi
res
drawable-port-hdpi
layout
values
values-de
orientation
pixel density
language
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
values-de
All you have to do is group assets using the necessary resources and qualifiers
At runtime Android will detect the current device capabilities and load the appropriate resources for your application
color
drawable
res
values
logopng
iconpng
drawable-hdpi
logopng
iconpng
only high dpi devices will use these images
only devices set to German will use whatrsquos in this folder
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
You can also combine qualifiers to increase context specificity
drawable-en-rUS-land-hdpi
language
region
orientation
pixel density
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
A critical use-case for qualifiers is to specify alternate bitmaps for different screen densities These are specified using standard groupings (called generalized densities) that map to common Android screen densities
nodpi can be used to specify for bitmap resources that should not be scaled to match the device density Although still rare you can also use tvdpi to specify bitmaps for mid-density (~213dpi) televisions
ldpi ~120dpi
mdpi ~160dpi
hdpi ~240dpi xhdpi ~320dpi xxhdpi ~480dpi
BASELINE075x
15x
20x
30x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
075x
1x
15x
2x
3x
Put assets in folders labelled with the correct qualifiers and the platform will automatically choose the most appropriate assets to suit a devicersquos screen density
res
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Android regularly publishes screen density statistics Take these into account when deciding which alternate resources to include
xhdpi 237
hdpi 343
tvdpi 12
mdpi 235
ldpi 102
xxhdpi 7
TIP
Source developerandroidcom September 4 2013
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 3 Optimize layoutsusing built-in ldquoresponsive designrdquo
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Creating layouts that are flexible and adapt to different screen densities isnrsquot always enough to deliver the best experience
excessive line length
missed opportunityto use space
reduced visual grouping
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Android provides two additional tools that dramatically improve the experience when dealing with screen size diversity
layout
layout-sw480dp
layout-sw720dp
res
A way to specify alternate layouts using qualifiers to correlate layouts with screen size breakpoints
A way to construct layouts using reusable and adaptable user interface components called fragments
layout-land-w900dp
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Using qualifiers you can define breakpoints between layoutsor tweak existing layouts to better suit the screen size
600dp 720dp320dp 1020dp
baseline experience
and onwards
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Instead of filling these buckets with distinct ldquosmartphonerdquo or ldquotabletrdquo layouts construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components
600dp 720dp320dp 1020dp
baseline experience
and onwards
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
herersquos how it works
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Android apps are made up of activities (things you can do) and fragments (components that provide the content and functionality within each activity)
fragment(s) fragment(s) fragment(s)
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
On small screens itrsquos always best to focus the interaction
Theres often only room to display one fragment at a timeso users must drill-down to access other fragments or activities
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
On larger screens there is an opportunity to combine these fragments to enrich interactions improve usability and make better use of available space
1200 1200
A
B
A
B
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
A B C
On the largest screens Evernote combines up to three fragments into one activity Swipe left on fragment B to reveal a split screen containing fragments B and C Swipe left on C to reveal a full-screen view of that fragment
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Evernote also relies heavily on flexible components and lots of fragment-specific design tweaks Itrsquos this combination of design decisions that enables a consistently great experience
linear layout
fragments expand to fill
the screen
grid layout
grid scales vertically and horizontallyfragment with larger thumbnail
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
One fragment per activity accessible using tabs
Many fragments grouped as a single activity
Many fragments grouped as a single activity
Google IO app
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The list and detail fragments as one activity Swipe right to slide open the menu panel fragment
The menu panel list and detail fragments as one activity
Wordpress app
One fragment per activity Swipe right to slide open the menu panel fragment
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
These layout changes can once again be defined using a collection of resources and qualifiers
layout
layout-sw480dp
res
layout-land-sw720pd
activity_notebookxml
fragment_notebookxml
layout-sw720dp
activity_notebookxml
fragment_notebookxml
layout breakpoint
layout breakpoint
default layout
orientation breakpoint
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language amp region MCC amp MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps to platform version eg Gingerbread Jelly Bean
country code
mnc004
docked with a
no display
network code eg ATampTT-Mobile
right to left
And thatrsquos just the start of what you can do Qualifiers can be also used to specify a wide range of alternate experiences(Here are just a few of the more interesting ones)
For a full list see Providing resources
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images layouts content or behaviours)
Itrsquos not necessary however to account for all combinations
TIP
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Small well-chosen adjustments can make a big difference
When in doubt keep things simple Donrsquot micro-managethe design or introduce complexity just ldquobecause you canrdquo
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Principle 4 Enable diverse experiencesleverage intents to embrace diversity and personalization
Working with an ecosystem of apps
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
Intents are the glue between application components both within an app and across different apps They allow apps to outsource tasks to other apps (that they may not even know about)ldquo - Roman Nurik Google
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
An intent is simply a combination of an action and a piece of data
Source Nick Butcher Google
VIEW
EDIT Contact ldquoBryan Riegerrdquo
wwwyiibucom
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Android apps can register their abilityto handle each type of intent (or if you prefertheir ability to assist the user in completing an activity)
I can
VIEW
EDIT
SHARE
CHOOSE
ldquo
Source Nick Butcher Google
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
EXAMPLE Diversity-friendly social sharing
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
There are hundreds of social networks email clients messenger apps or utilities that a user might prefer to use to share a URL
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
On other platforms a brand decides (ahemguesses presumes) which services to enable and hard codes these into their app
(Orif a user is lucky the platform may enable them to pre-configure a few populardefault services such as Facebook and Twitter)
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
thanks to intents users can choose how they wish to share
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquo
SHARE
data
Share
you choose an appthe intent is broadcast
only apps that are capable of fulfilling a share request are displayed
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
you ldquosaverdquoyou editcompose
your noteyou click ldquosharerdquothe intent is broadcast
SHARE
data
completing the action automatically brings you back to the Twitter app
Intents also enable out-of-the-box seamless experiences Once a task is complete the user automatically ends up back where they initiated that task
Share
only apps that are capable of fulfilling a share request are displayed
you choose an app
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
EXAMPLE Enabling multi-app experiences
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Clicking a URL also triggers an intent Itrsquos therefore possible for brands with both an app and a mobile optimized site to enable behaviours like this
Pick meTwo apps respondldquoI can handle rdquoviewrdquo intents on amazoncoukrdquo
browser resolves the URL
app resolves the URLthe user clicks a link
(within a web page in an email or in another app)
lta href=rdquohttpwwwamazoncouk
bookReferencerdquogt
the intent is broadcast
VIEW
URI
Share
Amazon Chrome
this doesnrsquot happen by magic but the additional work is worth it
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The beauty here is that this is a (progressive) enhancement The web page simply contains a URL If therersquos no Amazon app installed the URL simply opens in a browser
(If the user has two browsers installed (for example a text to speech browser) and hasnrsquot designated a default both will respondand the user can make a choice)
Reminder
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
The more apps support intents the more users can chain apps and activities together to complete very personal experiences
Share (ie open)using Google Translate
then Share in an SMS
hardware Back
open Tweet using your
chosen ldquoapprdquo
click a URL in the Tweet and open using
your favourite ldquoapprdquo seamless auto Back
seamless auto Back
hardware Back
For a deeper exploration of multi-app experiences see Beyond Progressive Enhancement
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Using intents reduces the need to design build and maintain a bespoke system to manage sharing or build regional variants of your app to enable region- or audience-specific social sharing
It also enables your app to deliver a more personalized and future-friendly user experience
CORE BENEFITS
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Be flexibleCreate density-independent layouts that stretch and compress to accommodate various heights and widths
Provide assets for allProvide resources for different screen densities to ensure that your app looks great on any device Take advantage of built-in resource switching to optimize other aspects of the experience
Optimize layoutsOn larger devices take advantage of extra screen real estate Create compound views to reveal more content and ease navigation
Enable diverse experiencesEnable personalization and provide a more global experience using intents
recap four key principles
First three principles provided by Google but expanded by yiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
A few final words
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosdesignshard3019335591
In the summer of 2013 the Android platform surpassed 1 billion activations
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
this doesnrsquot include the manyldquounofficialrdquo devices being imagined
and assembled by makers around the world
httpwwwflickrcomphotostigoe3321975176
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Source The Internet of things is Android and its everywhere
the growing number of
Android-based interfacesfound in cars
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
Internet enabled treadmill Currently considered a luxury product (give it 18 months)
the emerging
Android-based ldquoappliancesrdquo
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
or experimental Android-powered
Source SSTL
ldquothingsrdquo like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
and once we begin to embed swarms of
Android-tethered ldquosmart dustrdquo throughout the world
we may lose count altogether
Source MIT Technology Review smart dust mage UCLA
ldquoBy equipping the clothing and bodies of users with a mesh of multiple sensors - known as ldquosmart dustrdquo - that report to an Android-powered phone researchers are pioneering an open-source route to realizing the dream of always-on medical monitoringrdquo
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
what these ldquodevicesrdquoall have in common is
the magic that happens
httpwwwflickrcomphotosdesignshard3020167188
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
when easily availablecomponents and fabrication
httpwwwflickrcomphotosjadon4853752558
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
meet an openand widely-distributed
ldquoBecause Android is open-source the researchers were able to develop on top of it using the SPINE platform for remote sensing and to add to it their own APIthese platforms allowed them free reign to experimentrdquo
- Android powered sensors monitor vital signs
platform
httpwwwflickrcomphotosandrewmalone2355592191
ldquoI ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teamsthey said
lsquoWe just have six dudes and Androidrsquo
- The Internet of things is Android and its everywhere
ldquoNanosats based on Android phones offer theadvantage of a standardized app platform for running experiments This opens up space experiments to students and hackers around the worldrsquo- Android and Linux Nanosats shine bright
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
some people believe
to be squashed
Androidrsquos diversity is a thing
httpwwwflickrcomphotosgreencolander2502910471
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
but irsquom pretty sure
httpwwwflickrcomphotos92090133N048487832697
diversity is not a bug
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotosboedker3846587018
itrsquos an opportunity
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu
httpwwwflickrcomphotostinou453593446
thank you
many thanks to the amazing photographers on
httpcreativecommonsorglicensesby20
yiibu
helloyiibucomcontact usat
Presentation deck available
httpwwwslidesharenetyiibu