SlideShare a Scribd company logo
1 of 148
Download to read offline
http://www.flickr.com/photos/joeshlabotnik/305410323
designing for diversity
how to stop worrying and embrace the Android revolution
http://www.flickr.com/photos/khamtran/5871541424
this isn’t just a talk
about Android
http://www.flickr.com/photos/mwiththeat/5426772664
it’s a story about Moore’s Law,
of personal computing
globalisation, and the future
http://www.flickr.com/photos/mwiththeat/5562687410
on the other side of the world...
rather than start this story in a factory,
(or more specifically, the Port of Leith
i’m going to start in Scotland
on the north edge of Edinburgh)
http://www.flickr.com/photos/eguidetravel/4683905164
Leith is a working harbour,
Source: Marinetraffic.com
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
Scoish
when ships dock, the crew head to
the nearby mall to shop for snacks
and use the Internet
the Philippines
crews often come from
http://www.flickr.com/photos/insmu74/4296249058
http://www.flickr.com/photos/shankaronline/9237826940
more than 25% of the 1.5 million
in fact, Filipino sailors account for
mariners worldwide
Source: Wikipedia
a dramatic change in the devices
over the years, we’ve seen
used by crew at the Port of Leith
from hulking laptops
in 2010
to netbooks
in 2011...
...and tablets
(or quite often phablets)
throughout 2012 and 2013
http://www.flickr.com/photos/didbygraham/3892420695
and in the hands of people who
all this change in just 3 years,
send a good portion of their wages
home to their families...
http://www.flickr.com/photos/svensson/6012726684
Three factors have enabled such rapid change...
1. Moore’s 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 Moore’s predictions,
the number of components
on an integrated circuit
(or microchip)
have continued
to double every
18 months.
http://www.flickr.com/photos/kamshots/4104155942Source: Wikipedia
to build ever cheaper, lighter and
this has enabled us
more powerful devices...
http://www.flickr.com/photos/oskay/3300199882
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 “reference designs” for mobile phones.
http://www.flickr.com/photos/oskay/3300142950
http://www.flickr.com/photos/oskay/3300142950
This “cell phone in a box”
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
GSM/GPRS
pre-integrated software
ARM7-EJ 52MHz
ultra-low-cost
MT6233
suddenly, tiny companies
http://www.flickr.com/photos/oskay/3300186490
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...
http://www.flickr.com/photos/oskay/3299338889
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: Danwei.org
By late 2007, it was estimated
that these small “white-box”*
retailers had captured 10%
of global device sales.
Source: Wikipedia
(Because many of these companies began by
copying other products, they were also often
referred to as “Shanzhai”, 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?
didn’t just copy...they innovated
but white-box manufacturers
http://www.flickr.com/photos/jurvetson/1783467315
video caller 2
video caller 1
They ran tiny production runs, experimenting wildly with
industrial design, components and software. If a “feature” didn’t
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 2008,
things 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 2010
one of Spice, India’s first
Android smartphones
Source: EBay, August 2013
Shanzhai circa 2013
...looks like a Nokia Lumia
...looks like Windows Phone OS
Some small device makers still chose to
copy the look and feel of well known brands...
...built on Android
but hey, it’s only £56! ($85)
...but many have evolved into larger companies that now
develop and market devices under their own brand.
Meizu M8 Mini One
667 MHz, 3.2 mp camera
Customized Windows CE
Meizu MX2
quad core 1.6 GHz, 8mp
Customized Android “FlyMe” OS
Meizu M9
1 GHz, 5 mp
Android 2.2
2007
£125 ($200)
2011
£218 ($350)
2012
£250 ($400)
“...designed by Jack
Wong with the help of
30-plus handcrafted
wooden prototypes,
followed by 3-D
scanning...”
Source: Engadget
The slick, NFC-
enabled Meizu MX3
in 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.
http://www.flickr.com/photos/fdecomite/2787670078/
http://www.flickr.com/photos/oskay/3300199882Source: The Internet of things is Android and its everywhere
“Every screen variant, mobile chip, and sensor known to man
has been tuned to work with Android...there’s this network
effect, so that now anyone who wants to make a custom
product can take Android and morph it into anything”.
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.
http://www.flickr.com/photos/designshard/3019335591
http://www.flickr.com/photos/designshard/3019335591
“Good enough” smartphones and tablets can
now be purchased for ~$100.
Very basic models are available for ~$50.
Thanks to Moore’s Law, many of these devices
already rival the specs of top devices sold just
a few years ago.
http://www.flickr.com/photos/designshard/3019335591
Android now powers 59% of smart devices
(and 80% of smartphones) being sold.
That works out to a staggering 1.5 million
Android device activations per day*.
*According 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.
http://www.flickr.com/photos/joeshlabotnik/305410323
Part 2: Understanding diversity
Before we discuss how to design for Android’s diversity, let’s 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 memory
1.5GHz 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
2G/3G/4G
battery
camera
browser
music player
SIM
sensors
graphics card
clarity
toggle
simultaneous
standby
front
back
At the cheapest price
point, you often find
“generic” 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 haven’t (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 of
a very popular device that
might fit this category....
customized
customized
off-the-shelf
¥799 (£83/$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp camera
dual SIM w/ dual standby
highly customized MIUI ROM
Xiaomi Hongmi
fancy Gorilla Glass
Part of Hongmi’s huge appeal is its
MIUI ROM. A highly customized (and
customizable) version of Android.
(we’ll have a better look at Android ROMs in a bit...)
In case you’re thinking “Yeah, whatever...”
consider that when the Hongmi went on sale last month,
the first batch of 100,000 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 factors
use Android as a base with which to
these manufacturers
Galaxy NGalaxy Tab 7.0”Galaxy
Player
5.8”
Galaxy
Note
5.3”
Galaxy SIII
4.8”
Admire
3.5”
Intercept
3.0”
Gravity
2.3”
Galaxy Tab 8.9”Galaxy Tab 7.7”
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 ~£1500 ($2500).
serve varied audiences...
The KDDI Infobar range
was designed by famed industrial
designer Naoto Fukasawa, and
features iida UI, a highly
customized version of Android.
to differentiate
or 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
copy/paste 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 even
tighter coupling of hardware and software
scroll using the
back panel
206° repositionable
camera
take photos remotely
(using Bluetooth LE)
or new extensions to
hardware-based interactions
The new Oppo N1
http://www.flickr.com/photos/designshard/3019335591
But (yet again) innovation and experimentation
don’t 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
standard
multi-touch
display
FRONT
BACK
Designing for diversity -  how to stop worrying and embrace the Android revolution
Designing for diversity -  how to stop worrying and embrace the Android revolution
Toughshield specializes in products for industrial and institutional settings
including construction, healthcare and retail.
Global supermarket chain
Tesco recently announced
Hudl, a ~£100 ($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
country’s 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
companies...this 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 “other” manufacturers.
Worldwide Smartphone Sales to End Users by
Vendor in 2Q13
Apple
14%
Samsung
32%
LG
5%
ZTE 4%
Lenovo 4%
Others
40%
...but Android’s 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 “launchers”) and enable unique features and
personalization options such as themeing.
“Vanilla” Android Samsung Touch Whiz HTC Sense Huawei Emotion UI
customized
versions
http://www.flickr.com/photos/liquene/4824175336
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 “Share” a URL.
A less common, but more transformative customization is to install
a new launcher. This replaces the device’s 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 “view” 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 Xiaomi’s
message boards.
Another popular feature is MIUIs’ 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 choice
of MOD at purchase
The new Oppo N1
http://www.flickr.com/photos/designshard/3019335591
How does all this UI diversity impact design?
Although a device’s 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 “official”
manufacturers who ship devices with Android
Marketplace. Small manufacturers don’t always
qualify, so although they have nothing to gain,
(and everything to lose) by not including Holo,
it’s 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
device’s 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)
45.1%
Ice Cream Sandwich
(2011)
21.7%
Gingerbread (2010)
30.7%
Older versions 2.5%
Source: developer.android.com, 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 4.0
£7,000 ($11,000)
Vertu Ti
For this reason, consumers
purchasing a device today
may 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 you’d 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. We’ve 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 & 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
http://www.flickr.com/photos/adactio/1799953270
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.
http://www.flickr.com/photos/designshard/3019335591
Disclaimer: Android is incredibly versatile and now powers
thousands of “devices” 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 flexible
2. Provide assets for all
3. Optimize layouts
4. 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..
http://www.flickr.com/photos/designshard/3019335591
Principle 1: Be flexible
...create flexible, density-independent layouts
“We have seen
11,868 distinct
devices download
our app in the past
few months. In our
report last year we
saw 3,997.
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
device’s 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
don’t 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: developer.google.com
Layouts that scale and flex are great, but to provide the best
experience, you will often need to go further:
• Provide alternate bitmaps to reduce the blurring and
pixelation caused by automatic scaling.
• Specify alternate layouts to improve legibility and overall
user experience.
• Specify alternate content or behaviours to suit a user’s
language, device form factor or capabilities.
but that’s not all...
http://www.flickr.com/photos/designshard/3019335591
Principle 2: Provide assets for all
...using built-in layout and resource adaptation
Each Android app includes
a 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.
<abcd/>
<200dp>
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
logo.png
icon.png
drawable-hdpi
logo.png
icon.png
only high dpi devices
will use these images
only devices set to German
will use what’s 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
BASELINE
0.75x
1.5x
2.0x
3.0x
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
0.75x
1x
1.5x
2x
3x
Put assets in folders labelled
with the correct qualifiers,
and the platform will
automatically choose the
most appropriate assets to
suit a device’s screen density.
res
Android regularly publishes
screen density statistics.
Take these into account when
deciding which alternate
resources to include.
xhdpi
23.7%
hdpi
34.3%
tvdpi
1.2%
mdpi
23.5%
ldpi
10.2%
xxhdpi 7%
TIP
Source: developer.android.com, September 4 2013
http://www.flickr.com/photos/designshard/3019335591
Principle 3: Optimize layouts
...using built-in “responsive design”
Creating layouts that are flexible, and adapt to different screen
densities, isn’t always enough to deliver the best experience.
excessive line
length
missed
opportunity
to 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 layouts,
or tweak existing layouts to better suit the screen size.
600dp 720dp320dp 1020dp
baseline
experience
and
onwards...
Instead of filling these buckets with distinct “smartphone” or “tablet”
layouts, construct highly adaptive layouts that rely on smart
combinations of flexible and adaptable components.
600dp 720dp320dp 1020dp
baseline
experience
and
onwards...
http://www.flickr.com/photos/designshard/3019335591
here’s 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, it’s always best to focus the interaction.
There's often only room to display one fragment at a time,
so 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.
12:00 12:00
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. It’s 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 I/O 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_notebook.xml
fragment_notebook.xml
layout-sw720dp
activity_notebook.xml
fragment_notebook.xml
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 & region MCC & MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps
to platform
version e.g.
Gingerbread,
Jelly Bean
country code
mnc004
docked
with a...
no display!!
network code
e.g. AT&T,
T-Mobile
right to
left
And that’s 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).
It’s not necessary however to account for all combinations.
TIP
Small well-chosen adjustments can make a big difference.
When in doubt, keep things simple. Don’t micro-manage
the design or introduce complexity just “because you can”.
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-...
http://www.flickr.com/photos/designshard/3019335591
Principle 4: Enable diverse experiences
...leverage intents to embrace diversity and personalization
http://www.flickr.com/photos/designshard/3019335591
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).
“ - Roman Nurik, Google
An intent is simply a
combination of an action,
and a piece of data.
Source: Nick Butcher, Google
VIEW
EDIT Contact “Bryan Rieger”
www.yiibu.com
Android apps can
register their ability
to handle each type of
intent (or if you
prefer...their ability to
assist the user in
completing an activity).
I can....
...VIEW
...EDIT
...SHARE
...CHOOSE
“
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 (ahem...guesses, presumes)
which services to enable, and hard codes these into their app.
(Or...if a user is lucky, the platform may enable them to pre-configure a few popular
default services such as Facebook and Twitter.)
...thanks to intents, users can choose how they wish to share.
you “save”
you edit/compose
your noteyou click “share”
SHARE
{data}
Share
you choose an app*the intent is
broadcast
*only apps that are capable of fulfilling a share request are displayed
you “save”
you edit/compose
your noteyou click “share”
the 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. It’s therefore possible for
brands with both an app, and a mobile optimized site to enable
behaviours like this....
Pick me!!
Two apps respond
“I can handle ”view”
intents on amazon.co.uk”
browser resolves
the URL
app resolves
the URL*the user clicks a link
(within a web page, in an
email, or in another app...)
<a href=”http://
www.amazon.co.uk/
bookReference”>
the intent is
broadcast
VIEW
{URI}
Share
Amazon Chrome
*this doesn’t 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 there’s 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 hasn’t
designated a default, both will respond...and 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 (i.e. open)
using Google Translate
...then Share in an SMS
hardware Back
open Tweet
using your
chosen “app”
click a URL in the
Tweet and open using
your favourite “app” 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 flexible
Create density-independent layouts that stretch and compress to
accommodate various heights and widths.
Provide assets for all
Provide 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 layouts
On larger devices, take advantage of extra screen real estate.
Create compound views to reveal more content and ease navigation.
Enable diverse experiences
Enable personalization, and provide a more global experience using intents.
recap: four key principles
First three principles provided by Google but expanded by yiibu..
http://www.flickr.com/photos/designshard/3019335591
A few final words...
http://www.flickr.com/photos/designshard/3019335591
In the summer of 2013, the Android
platform surpassed 1 billion activations....
this doesn’t include the many
“unofficial” devices being imagined
and assembled by makers around the world
http://www.flickr.com/photos/tigoe/3321975176
Source: The Internet of things is Android and its everywhere
the growing number of
Android-based interfaces
found in cars...
Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).
...the emerging
Android-based “appliances”
or experimental Android-powered
Source: SSTL
“things” like these nanosats
that will one day orbit the earth
and once we begin to embed swarms of
Android-tethered “smart dust” throughout the world,
we may lose count altogether...
Source: MIT Technology Review, smart dust mage: UCLA
“By equipping the clothing and bodies of users with a mesh of multiple
sensors - known as “smart dust” - that report to an Android-powered phone,
researchers are pioneering an open-source route to realizing the dream of
always-on medical monitoring”.
what these “devices”
all have in common is
the magic that happens...
http://www.flickr.com/photos/designshard/3020167188
when easily available
components and fabrication...
http://www.flickr.com/photos/jadon/4853752558
meet an open
and widely-distributed
“Because 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 API...these platforms allowed them free
reign to experiment”.
- Android powered sensors monitor vital signs
platform...
http://www.flickr.com/photos/andrewmalone/2355592191
“I ran into [SAIC] at this trade show where they
were placed next to all these other carmakers
with massive software teams...they said:
‘We just have six dudes and Android.’
- The Internet of things is Android and its everywhere
“Nanosats based on Android phones offerthe...advantage of a standardized appplatform for running experiments. Thisopens up space experiments to studentsand hackers around the world.’
- Android and Linux Nanosats shine bright
some people believe
to be squashed...
Android’s diversity is a thing
http://www.flickr.com/photos/greencolander/2502910471/
but i’m pretty sure
http://www.flickr.com/photos/92090133@N04/8487832697/
diversity is not a bug...
http://www.flickr.com/photos/boedker/3846587018
it’s an opportunity...
http://www.flickr.com/photos/tinou/453593446
thank you
many thanks to the
amazing photographers on
http://creativecommons.org/licenses/by/2.0
@yiibu
hello@yiibu.com
contact us
at
Presentation deck available @
http://www.slideshare.net/yiibu

More Related Content

What's hot

Top 10 greatest inventions of decade
Top 10 greatest inventions  of decadeTop 10 greatest inventions  of decade
Top 10 greatest inventions of decadeAbhishek Dawachya
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuBryan Rieger
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileJason Grigsby
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of WonderfulBryan Rieger
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesJason Grigsby
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101Antony Ribot
 
Lufthansa Technik TECH TALK
Lufthansa Technik TECH TALKLufthansa Technik TECH TALK
Lufthansa Technik TECH TALKPaul Saunders
 
Technologies that will disappear in next 5 years
Technologies that will disappear in next 5 yearsTechnologies that will disappear in next 5 years
Technologies that will disappear in next 5 yearsShrey Kapoor
 
iPhone transfer software
iPhone transfer softwareiPhone transfer software
iPhone transfer softwarejohnjuly123
 
Mind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between DevicesMind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between DevicesJosh Clark
 
Future of user interface design
Future of user interface designFuture of user interface design
Future of user interface designRanjeet Tayi
 
Native vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesNative vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesJason Grigsby
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Anna Dahlström
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeJason Grigsby
 
The Future of Things
The Future of ThingsThe Future of Things
The Future of ThingsJason Griffey
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD UK Ltd
 

What's hot (20)

Top 10 greatest inventions of decade
Top 10 greatest inventions  of decadeTop 10 greatest inventions  of decade
Top 10 greatest inventions of decade
 
No fault found
No fault foundNo fault found
No fault found
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by Yiibu
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Lufthansa Technik TECH TALK
Lufthansa Technik TECH TALKLufthansa Technik TECH TALK
Lufthansa Technik TECH TALK
 
Technologies that will disappear in next 5 years
Technologies that will disappear in next 5 yearsTechnologies that will disappear in next 5 years
Technologies that will disappear in next 5 years
 
iPhone transfer software
iPhone transfer softwareiPhone transfer software
iPhone transfer software
 
Creating Android apps
Creating Android appsCreating Android apps
Creating Android apps
 
Mind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between DevicesMind the Gap: Designing the Space Between Devices
Mind the Gap: Designing the Space Between Devices
 
Future of user interface design
Future of user interface designFuture of user interface design
Future of user interface design
 
Native vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesNative vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development Choices
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 
POWERPOINT2
POWERPOINT2POWERPOINT2
POWERPOINT2
 
what_is_next _now_ppt
what_is_next _now_pptwhat_is_next _now_ppt
what_is_next _now_ppt
 
Why You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark CollegeWhy You Should Make Mobile Your Career | Clark College
Why You Should Make Mobile Your Career | Clark College
 
The Future of Things
The Future of ThingsThe Future of Things
The Future of Things
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
 

Viewers also liked

Everything old is new again
Everything old is new againEverything old is new again
Everything old is new againyiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancementyiibu
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Webyiibu
 
Reset the Web
Reset the WebReset the Web
Reset the Webyiibu
 
Closed society and social diversity in Urban Areas in Germany with some remar...
Closed society and social diversity in Urban Areas in Germany with some remar...Closed society and social diversity in Urban Areas in Germany with some remar...
Closed society and social diversity in Urban Areas in Germany with some remar...smartmetropolia2014
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyRob Manson
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...Rob Manson
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web PresentationRob Manson
 
RCM - Leveraging Diversity
RCM - Leveraging DiversityRCM - Leveraging Diversity
RCM - Leveraging Diversityibzmir
 
5--Leveraging D&I for a Global Economy March Infoline_FINAL
5--Leveraging D&I for a Global Economy March Infoline_FINAL5--Leveraging D&I for a Global Economy March Infoline_FINAL
5--Leveraging D&I for a Global Economy March Infoline_FINALmderven
 
Embracing Diversity
Embracing DiversityEmbracing Diversity
Embracing DiversityCara Turner
 
Kelly Services - Understanding Generational Diversity In Workplace
Kelly Services - Understanding Generational Diversity In WorkplaceKelly Services - Understanding Generational Diversity In Workplace
Kelly Services - Understanding Generational Diversity In WorkplaceKylie Perry
 
Promoting Diversity in Evolutionary Optimization: Why and How
Promoting Diversity in Evolutionary Optimization: Why and HowPromoting Diversity in Evolutionary Optimization: Why and How
Promoting Diversity in Evolutionary Optimization: Why and HowGiovanni Squillero
 
Shrm poll diversity_final
Shrm poll diversity_finalShrm poll diversity_final
Shrm poll diversity_finalshrm
 
ABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for Lawyers
ABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for LawyersABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for Lawyers
ABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for LawyersBrian Focht
 

Viewers also liked (20)

Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Closed society and social diversity in Urban Areas in Germany with some remar...
Closed society and social diversity in Urban Areas in Germany with some remar...Closed society and social diversity in Urban Areas in Germany with some remar...
Closed society and social diversity in Urban Areas in Germany with some remar...
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business Fly
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentation
 
RCM - Leveraging Diversity
RCM - Leveraging DiversityRCM - Leveraging Diversity
RCM - Leveraging Diversity
 
5--Leveraging D&I for a Global Economy March Infoline_FINAL
5--Leveraging D&I for a Global Economy March Infoline_FINAL5--Leveraging D&I for a Global Economy March Infoline_FINAL
5--Leveraging D&I for a Global Economy March Infoline_FINAL
 
Strategic Leveraging of Diversity, Agility & Emotional Intelligence
Strategic Leveraging of Diversity, Agility & Emotional IntelligenceStrategic Leveraging of Diversity, Agility & Emotional Intelligence
Strategic Leveraging of Diversity, Agility & Emotional Intelligence
 
Embracing Diversity
Embracing DiversityEmbracing Diversity
Embracing Diversity
 
Kelly Services - Understanding Generational Diversity In Workplace
Kelly Services - Understanding Generational Diversity In WorkplaceKelly Services - Understanding Generational Diversity In Workplace
Kelly Services - Understanding Generational Diversity In Workplace
 
Promoting Diversity in Evolutionary Optimization: Why and How
Promoting Diversity in Evolutionary Optimization: Why and HowPromoting Diversity in Evolutionary Optimization: Why and How
Promoting Diversity in Evolutionary Optimization: Why and How
 
Shrm poll diversity_final
Shrm poll diversity_finalShrm poll diversity_final
Shrm poll diversity_final
 
ABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for Lawyers
ABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for LawyersABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for Lawyers
ABA TECHSHOW 2016 - Common Grounds: 60 Android and iOS Apps for Lawyers
 

Similar to Designing for diversity - how to stop worrying and embrace the Android revolution

It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...yiibu
 
Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devicesAlexander Anikin
 
Android-Chapter01-Intro.pptx
Android-Chapter01-Intro.pptxAndroid-Chapter01-Intro.pptx
Android-Chapter01-Intro.pptxMonika Poriye
 
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Gustavo Luveira
 
Prueba Adelanto Ingles 3º Bd April 2008
Prueba Adelanto Ingles 3º Bd April 2008Prueba Adelanto Ingles 3º Bd April 2008
Prueba Adelanto Ingles 3º Bd April 2008Graciela Bilat
 
The Canon Powershot A510 Digital Camera
The Canon Powershot A510 Digital CameraThe Canon Powershot A510 Digital Camera
The Canon Powershot A510 Digital CameraWendy Robertson
 
Automatic Active Phase Selector
Automatic Active Phase SelectorAutomatic Active Phase Selector
Automatic Active Phase SelectorKara Richards
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Raymond Morin
 
What smartphones can teach futurists
What smartphones can teach futuristsWhat smartphones can teach futurists
What smartphones can teach futuristsDavid Wood
 
What Smartphones Can Teach Futurists
What Smartphones Can Teach FuturistsWhat Smartphones Can Teach Futurists
What Smartphones Can Teach FuturistsCynthia G. Wagner
 
Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012Jeff Bollinger
 
Android and android phones
Android and android phonesAndroid and android phones
Android and android phonessariorodolfo
 
Future Of Consumer Electronics
Future Of Consumer ElectronicsFuture Of Consumer Electronics
Future Of Consumer ElectronicsBob Snyder
 
Android As A Mobile Platform V2
Android As A Mobile Platform V2Android As A Mobile Platform V2
Android As A Mobile Platform V2sbroh
 
complete seminar report on simputer technology
complete seminar report on simputer technology complete seminar report on simputer technology
complete seminar report on simputer technology Suchitra goudar
 
Millicomputing Ignite Talk
Millicomputing Ignite TalkMillicomputing Ignite Talk
Millicomputing Ignite TalkAdrian Cockcroft
 
Smartphone Component Trends and Outlook (Sept 2013)
Smartphone Component Trends and Outlook (Sept 2013)Smartphone Component Trends and Outlook (Sept 2013)
Smartphone Component Trends and Outlook (Sept 2013)JonCarvinzer
 

Similar to Designing for diversity - how to stop worrying and embrace the Android revolution (20)

It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices
 
Android-Chapter01-Intro.pptx
Android-Chapter01-Intro.pptxAndroid-Chapter01-Intro.pptx
Android-Chapter01-Intro.pptx
 
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01
 
Prueba Adelanto Ingles 3º Bd April 2008
Prueba Adelanto Ingles 3º Bd April 2008Prueba Adelanto Ingles 3º Bd April 2008
Prueba Adelanto Ingles 3º Bd April 2008
 
The Canon Powershot A510 Digital Camera
The Canon Powershot A510 Digital CameraThe Canon Powershot A510 Digital Camera
The Canon Powershot A510 Digital Camera
 
Advancement Of The Camera Essay
Advancement Of The Camera EssayAdvancement Of The Camera Essay
Advancement Of The Camera Essay
 
Automatic Active Phase Selector
Automatic Active Phase SelectorAutomatic Active Phase Selector
Automatic Active Phase Selector
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01
 
What smartphones can teach futurists
What smartphones can teach futuristsWhat smartphones can teach futurists
What smartphones can teach futurists
 
What Smartphones Can Teach Futurists
What Smartphones Can Teach FuturistsWhat Smartphones Can Teach Futurists
What Smartphones Can Teach Futurists
 
Moore's law & more
Moore's law & moreMoore's law & more
Moore's law & more
 
Platform Fragmentation With Android
Platform Fragmentation With AndroidPlatform Fragmentation With Android
Platform Fragmentation With Android
 
Mobile News Madness - March 2012
Mobile News Madness - March 2012Mobile News Madness - March 2012
Mobile News Madness - March 2012
 
Android and android phones
Android and android phonesAndroid and android phones
Android and android phones
 
Future Of Consumer Electronics
Future Of Consumer ElectronicsFuture Of Consumer Electronics
Future Of Consumer Electronics
 
Android As A Mobile Platform V2
Android As A Mobile Platform V2Android As A Mobile Platform V2
Android As A Mobile Platform V2
 
complete seminar report on simputer technology
complete seminar report on simputer technology complete seminar report on simputer technology
complete seminar report on simputer technology
 
Millicomputing Ignite Talk
Millicomputing Ignite TalkMillicomputing Ignite Talk
Millicomputing Ignite Talk
 
Smartphone Component Trends and Outlook (Sept 2013)
Smartphone Component Trends and Outlook (Sept 2013)Smartphone Component Trends and Outlook (Sept 2013)
Smartphone Component Trends and Outlook (Sept 2013)
 

Recently uploaded

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 

Recently uploaded (20)

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 

Designing for diversity - how to stop worrying and embrace the Android revolution

  • 1. http://www.flickr.com/photos/joeshlabotnik/305410323 designing for diversity how to stop worrying and embrace the Android revolution
  • 3. http://www.flickr.com/photos/mwiththeat/5426772664 it’s a story about Moore’s Law, of personal computing globalisation, and the future
  • 4. http://www.flickr.com/photos/mwiththeat/5562687410 on the other side of the world... rather than start this story in a factory,
  • 5. (or more specifically, the Port of Leith i’m going to start in Scotland on the north edge of Edinburgh) http://www.flickr.com/photos/eguidetravel/4683905164
  • 6. Leith is a working harbour, Source: Marinetraffic.com so as nearby residents, we see all sorts of ships...
  • 7. Norwegian submarine oil and gas exploration vessels, giant pipe layers, and the occasional
  • 8. and come spring and summer, there are cruise ships Scoish
  • 9. when ships dock, the crew head to the nearby mall to shop for snacks and use the Internet
  • 10. the Philippines crews often come from http://www.flickr.com/photos/insmu74/4296249058
  • 11. http://www.flickr.com/photos/shankaronline/9237826940 more than 25% of the 1.5 million in fact, Filipino sailors account for mariners worldwide Source: Wikipedia
  • 12. a dramatic change in the devices over the years, we’ve seen used by crew at the Port of Leith
  • 15. ...and tablets (or quite often phablets) throughout 2012 and 2013
  • 16. http://www.flickr.com/photos/didbygraham/3892420695 and in the hands of people who all this change in just 3 years, send a good portion of their wages home to their families...
  • 17. http://www.flickr.com/photos/svensson/6012726684 Three factors have enabled such rapid change... 1. Moore’s Law 2. The development of off-the-shelf silicon 3. The rise of an open source mobile OS 1 2 3
  • 18. Source: Intel True to Moore’s predictions, the number of components on an integrated circuit (or microchip) have continued to double every 18 months.
  • 19. http://www.flickr.com/photos/kamshots/4104155942Source: Wikipedia to build ever cheaper, lighter and this has enabled us more powerful devices...
  • 20. http://www.flickr.com/photos/oskay/3300199882 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.
  • 21. All that changed in 2005, when Taiwanese semiconductor company MediaTek introduced what it called “reference designs” for mobile phones. http://www.flickr.com/photos/oskay/3300142950
  • 22. http://www.flickr.com/photos/oskay/3300142950 This “cell phone in a box” 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 GSM/GPRS pre-integrated software ARM7-EJ 52MHz ultra-low-cost MT6233
  • 23. suddenly, tiny companies http://www.flickr.com/photos/oskay/3300186490 with only a handful of engineers could set up shop producing capable mobile devices
  • 24. Most of these companies clustered around the electronics and manufacturing hub of Shenzhen in China, but others soon appeared in India, Malaysia, Indonesia... http://www.flickr.com/photos/oskay/3299338889
  • 25. 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
  • 26. 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....
  • 27. 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: Danwei.org
  • 28. By late 2007, it was estimated that these small “white-box”* retailers had captured 10% of global device sales. Source: Wikipedia (Because many of these companies began by copying other products, they were also often referred to as “Shanzhai”, 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?
  • 29. didn’t just copy...they innovated but white-box manufacturers http://www.flickr.com/photos/jurvetson/1783467315 video caller 2 video caller 1
  • 30. They ran tiny production runs, experimenting wildly with industrial design, components and software. If a “feature” didn’t 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
  • 31. With the release of Android in 2008, things changed once again...
  • 32. 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 2010 one of Spice, India’s first Android smartphones
  • 33. Source: EBay, August 2013 Shanzhai circa 2013 ...looks like a Nokia Lumia ...looks like Windows Phone OS Some small device makers still chose to copy the look and feel of well known brands... ...built on Android but hey, it’s only £56! ($85)
  • 34. ...but many have evolved into larger companies that now develop and market devices under their own brand. Meizu M8 Mini One 667 MHz, 3.2 mp camera Customized Windows CE Meizu MX2 quad core 1.6 GHz, 8mp Customized Android “FlyMe” OS Meizu M9 1 GHz, 5 mp Android 2.2 2007 £125 ($200) 2011 £218 ($350) 2012 £250 ($400)
  • 35. “...designed by Jack Wong with the help of 30-plus handcrafted wooden prototypes, followed by 3-D scanning...” Source: Engadget The slick, NFC- enabled Meizu MX3 in 2013...
  • 36. 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. http://www.flickr.com/photos/fdecomite/2787670078/
  • 37. http://www.flickr.com/photos/oskay/3300199882Source: The Internet of things is Android and its everywhere “Every screen variant, mobile chip, and sensor known to man has been tuned to work with Android...there’s this network effect, so that now anyone who wants to make a custom product can take Android and morph it into anything”. Jim Zemlin, Linux Foundation
  • 38. 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. http://www.flickr.com/photos/designshard/3019335591
  • 39. http://www.flickr.com/photos/designshard/3019335591 “Good enough” smartphones and tablets can now be purchased for ~$100. Very basic models are available for ~$50. Thanks to Moore’s Law, many of these devices already rival the specs of top devices sold just a few years ago.
  • 40. http://www.flickr.com/photos/designshard/3019335591 Android now powers 59% of smart devices (and 80% of smartphones) being sold. That works out to a staggering 1.5 million Android device activations per day*. *According to Google but not counting many Chinese devices
  • 41. These devices are designed, developed, manufactured and marketed by many hundreds of companies, each with their own audience and product goals.
  • 42. http://www.flickr.com/photos/joeshlabotnik/305410323 Part 2: Understanding diversity Before we discuss how to design for Android’s diversity, let’s dig deeper to discover how diversity affects day-to-day user experience.
  • 43. All modern connected devices consist of a carefully chosen collection of components. Source: Samsung Gyro sensor Internal memory 1.5GHz DualCore Chip LTE, HSPDA Modem Antenna and stereo speakers Light sensor module 3 Megapixel back-facing camera High capacity battery DMB antenna
  • 44. 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 2G/3G/4G battery camera browser music player SIM sensors graphics card clarity toggle simultaneous standby front back
  • 45. At the cheapest price point, you often find “generic” 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 haven’t (yet) reached Europe and North America. Screenshot: Tmart off-the-shelf stock off-the-shelf
  • 46. Slightly more customized devices are sold by all sorts of companies. Here is an example of a very popular device that might fit this category.... customized customized off-the-shelf
  • 47. ¥799 (£83/$130) nice but basic plastic case stock MediaTek MT6589T chipset 8 Mp camera dual SIM w/ dual standby highly customized MIUI ROM Xiaomi Hongmi fancy Gorilla Glass
  • 48. Part of Hongmi’s huge appeal is its MIUI ROM. A highly customized (and customizable) version of Android. (we’ll have a better look at Android ROMs in a bit...)
  • 49. In case you’re thinking “Yeah, whatever...” consider that when the Hongmi went on sale last month, the first batch of 100,000 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).
  • 50. 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
  • 51. experiment with different form factors use Android as a base with which to these manufacturers Galaxy NGalaxy Tab 7.0”Galaxy Player 5.8” Galaxy Note 5.3” Galaxy SIII 4.8” Admire 3.5” Intercept 3.0” Gravity 2.3” Galaxy Tab 8.9”Galaxy Tab 7.7”
  • 52. 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 ~£1500 ($2500). serve varied audiences...
  • 53. The KDDI Infobar range was designed by famed industrial designer Naoto Fukasawa, and features iida UI, a highly customized version of Android. to differentiate or leverage fashion their brand Infobar C01 Infobar A01
  • 54. 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.
  • 55. On Sony Xperia and newer Samsung Galaxy devices, users can trigger resizable and repositionable floating windows. These enable advanced PC-like copy/paste 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.
  • 56. some customizations require even tighter coupling of hardware and software
  • 57. scroll using the back panel 206° repositionable camera take photos remotely (using Bluetooth LE) or new extensions to hardware-based interactions The new Oppo N1
  • 58. http://www.flickr.com/photos/designshard/3019335591 But (yet again) innovation and experimentation don’t just come from the big guys...
  • 59. 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 standard multi-touch display FRONT BACK
  • 62. Toughshield specializes in products for industrial and institutional settings including construction, healthcare and retail.
  • 63. Global supermarket chain Tesco recently announced Hudl, a ~£100 ($150) family- friendly tablet featuring extensive ClubCard loyalty scheme and blinkbox entertainment service integration. Tesco Hudl
  • 64. Source: Quartz, Photo courtesy Datawind The Indian government hopes to distribute at least 220 million Aakash 2 tablets to that country’s students. Manufactured in India for a mere $40, the purchase cost to students will be subsidized to further increase access.
  • 65. Although many consumers still primarily purchase devices designed, developed and marketed by large companies...this 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 “other” manufacturers. Worldwide Smartphone Sales to End Users by Vendor in 2Q13 Apple 14% Samsung 32% LG 5% ZTE 4% Lenovo 4% Others 40%
  • 66. ...but Android’s diversity does not stop at brands and hardware. The platform itself is also immensely customizable.
  • 67. The most common customizations come from large manufacturers, who attempt to differentiate by offering proprietary user interface skins, home screens (or “launchers”) and enable unique features and personalization options such as themeing. “Vanilla” Android Samsung Touch Whiz HTC Sense Huawei Emotion UI customized versions
  • 68. http://www.flickr.com/photos/liquene/4824175336 users can then layer their own customizations, ranging from simple interface adjustments, to more substantial OS-altering modifications
  • 69. 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
  • 70. 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 “Share” a URL.
  • 71. A less common, but more transformative customization is to install a new launcher. This replaces the device’s 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.
  • 72. 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.
  • 73. 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 “view” for each app.
  • 74. 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.)
  • 75. MIUI is particularly popular as its design is actively crowd sourced through the discussions of thousands of Chinese Mi-Fans on Xiaomi’s message boards.
  • 76. Another popular feature is MIUIs’ extensive themeing capabilities, and an app store containing thousands of community built themes.
  • 77. 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.
  • 78. ...your device, your choice of MOD at purchase The new Oppo N1
  • 80. Although a device’s 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 “official” manufacturers who ship devices with Android Marketplace. Small manufacturers don’t always qualify, so although they have nothing to gain, (and everything to lose) by not including Holo, it’s possible they may choose to omit it. Holo lightHolo dark
  • 81. 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.
  • 82. 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 device’s 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) 45.1% Ice Cream Sandwich (2011) 21.7% Gingerbread (2010) 30.7% Older versions 2.5% Source: developer.android.com, September 4 2013
  • 83. 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 4.0 £7,000 ($11,000) Vertu Ti For this reason, consumers purchasing a device today may not automatically end up with the latest version of the OS.
  • 84. Source: Henry Fong, Yodo1, presented at GDC 2013 Users may also not access their content through the channels you’d 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.
  • 85. An unofficial app store in a Bangkok mega mall selling Android (and iOS :-) apps to passersby. We’ve 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 & 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
  • 86. http://www.flickr.com/photos/adactio/1799953270 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.
  • 87. http://www.flickr.com/photos/designshard/3019335591 Disclaimer: Android is incredibly versatile and now powers thousands of “devices” 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.
  • 88. 1. Be flexible 2. Provide assets for all 3. Optimize layouts 4. 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..
  • 89. http://www.flickr.com/photos/designshard/3019335591 Principle 1: Be flexible ...create flexible, density-independent layouts
  • 90. “We have seen 11,868 distinct devices download our app in the past few months. In our report last year we saw 3,997. OpenSignal device fragmentation report, 2013 With so many distinctly different devices, you can expect a wide range of screen sizes and pixel densities.
  • 91. 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
  • 92. 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 device’s 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.
  • 93. Similar to designing flexibly for the web, you should don’t 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: developer.google.com
  • 94. Layouts that scale and flex are great, but to provide the best experience, you will often need to go further: • Provide alternate bitmaps to reduce the blurring and pixelation caused by automatic scaling. • Specify alternate layouts to improve legibility and overall user experience. • Specify alternate content or behaviours to suit a user’s language, device form factor or capabilities. but that’s not all...
  • 95. http://www.flickr.com/photos/designshard/3019335591 Principle 2: Provide assets for all ...using built-in layout and resource adaptation
  • 96. Each Android app includes a 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. <abcd/> <200dp>
  • 97. 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
  • 98. 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 logo.png icon.png drawable-hdpi logo.png icon.png only high dpi devices will use these images only devices set to German will use what’s in this folder
  • 99. You can also combine qualifiers to increase context specificity. drawable-en-rUS-land-hdpi language region orientation pixel density
  • 100. 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 BASELINE 0.75x 1.5x 2.0x 3.0x
  • 101. drawable-ldpi drawable-mhdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi 0.75x 1x 1.5x 2x 3x Put assets in folders labelled with the correct qualifiers, and the platform will automatically choose the most appropriate assets to suit a device’s screen density. res
  • 102. Android regularly publishes screen density statistics. Take these into account when deciding which alternate resources to include. xhdpi 23.7% hdpi 34.3% tvdpi 1.2% mdpi 23.5% ldpi 10.2% xxhdpi 7% TIP Source: developer.android.com, September 4 2013
  • 103. http://www.flickr.com/photos/designshard/3019335591 Principle 3: Optimize layouts ...using built-in “responsive design”
  • 104. Creating layouts that are flexible, and adapt to different screen densities, isn’t always enough to deliver the best experience. excessive line length missed opportunity to use space reduced visual grouping
  • 105. 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
  • 106. Using qualifiers, you can define breakpoints between layouts, or tweak existing layouts to better suit the screen size. 600dp 720dp320dp 1020dp baseline experience and onwards...
  • 107. Instead of filling these buckets with distinct “smartphone” or “tablet” layouts, construct highly adaptive layouts that rely on smart combinations of flexible and adaptable components. 600dp 720dp320dp 1020dp baseline experience and onwards...
  • 109. 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)
  • 110. On small screens, it’s always best to focus the interaction. There's often only room to display one fragment at a time, so users must drill-down to access other fragments or activities.
  • 111. On larger screens, there is an opportunity to combine these fragments to enrich interactions, improve usability, and make better use of available space. 12:00 12:00 A B A B
  • 112. 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.
  • 113. Evernote also relies heavily on flexible components, and lots of fragment-specific design tweaks. It’s 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
  • 114. One fragment per activity, accessible using tabs. Many fragments grouped as a single activity. Many fragments grouped as a single activity. Google I/O app
  • 115. 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.
  • 116. These layout changes can once again be defined using a collection of resources and qualifiers. layout layout-sw480dp res layout-land-sw720pd activity_notebook.xml fragment_notebook.xml layout-sw720dp activity_notebook.xml fragment_notebook.xml layout breakpoint layout breakpoint default layout orientation breakpoint
  • 117. Touch screen UI mode API level notouch stylus trackball finger car desk television appliance v1 v2 v3 Layout direction Language & region MCC & MNC ldrtl ldltr en fr en-rUS fr-rFR mcc310 loosely maps to platform version e.g. Gingerbread, Jelly Bean country code mnc004 docked with a... no display!! network code e.g. AT&T, T-Mobile right to left And that’s 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
  • 118. Almost any application will benefit from the inclusion of alternate resources to support diversity (be they images, layouts, content or behaviours). It’s not necessary however to account for all combinations. TIP
  • 119. Small well-chosen adjustments can make a big difference. When in doubt, keep things simple. Don’t micro-manage the design or introduce complexity just “because you can”. layout-en-rUS-land-car-hdpi-night-qwerty-trackball-...
  • 120. http://www.flickr.com/photos/designshard/3019335591 Principle 4: Enable diverse experiences ...leverage intents to embrace diversity and personalization
  • 121. http://www.flickr.com/photos/designshard/3019335591 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). “ - Roman Nurik, Google
  • 122. An intent is simply a combination of an action, and a piece of data. Source: Nick Butcher, Google VIEW EDIT Contact “Bryan Rieger” www.yiibu.com
  • 123. Android apps can register their ability to handle each type of intent (or if you prefer...their ability to assist the user in completing an activity). I can.... ...VIEW ...EDIT ...SHARE ...CHOOSE “ Source: Nick Butcher, Google
  • 125. There are hundreds of social networks, email clients, messenger apps or utilities that a user might prefer to use to share a URL.
  • 126. On other platforms, a brand decides (ahem...guesses, presumes) which services to enable, and hard codes these into their app. (Or...if a user is lucky, the platform may enable them to pre-configure a few popular default services such as Facebook and Twitter.)
  • 127. ...thanks to intents, users can choose how they wish to share. you “save” you edit/compose your noteyou click “share” SHARE {data} Share you choose an app*the intent is broadcast *only apps that are capable of fulfilling a share request are displayed
  • 128. you “save” you edit/compose your noteyou click “share” the 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*
  • 130. Clicking a URL also triggers an intent. It’s therefore possible for brands with both an app, and a mobile optimized site to enable behaviours like this.... Pick me!! Two apps respond “I can handle ”view” intents on amazon.co.uk” browser resolves the URL app resolves the URL*the user clicks a link (within a web page, in an email, or in another app...) <a href=”http:// www.amazon.co.uk/ bookReference”> the intent is broadcast VIEW {URI} Share Amazon Chrome *this doesn’t happen by magic, but the additional work is worth it!
  • 131. The beauty here is that this is a (progressive) enhancement. The web page simply contains a URL. If there’s 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 hasn’t designated a default, both will respond...and the user can make a choice). Reminder:
  • 132. The more apps support intents, the more users can chain apps and activities together to complete very personal experiences... Share (i.e. open) using Google Translate ...then Share in an SMS hardware Back open Tweet using your chosen “app” click a URL in the Tweet and open using your favourite “app” seamless auto Back seamless auto Back hardware Back For a deeper exploration of multi-app experiences, see Beyond Progressive Enhancement
  • 133. 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
  • 134. Be flexible Create density-independent layouts that stretch and compress to accommodate various heights and widths. Provide assets for all Provide 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 layouts On larger devices, take advantage of extra screen real estate. Create compound views to reveal more content and ease navigation. Enable diverse experiences Enable personalization, and provide a more global experience using intents. recap: four key principles First three principles provided by Google but expanded by yiibu..
  • 136. http://www.flickr.com/photos/designshard/3019335591 In the summer of 2013, the Android platform surpassed 1 billion activations....
  • 137. this doesn’t include the many “unofficial” devices being imagined and assembled by makers around the world http://www.flickr.com/photos/tigoe/3321975176
  • 138. Source: The Internet of things is Android and its everywhere the growing number of Android-based interfaces found in cars...
  • 139. Internet enabled treadmill. Currently considered a luxury product (...give it 18 months). ...the emerging Android-based “appliances”
  • 140. or experimental Android-powered Source: SSTL “things” like these nanosats that will one day orbit the earth
  • 141. and once we begin to embed swarms of Android-tethered “smart dust” throughout the world, we may lose count altogether... Source: MIT Technology Review, smart dust mage: UCLA “By equipping the clothing and bodies of users with a mesh of multiple sensors - known as “smart dust” - that report to an Android-powered phone, researchers are pioneering an open-source route to realizing the dream of always-on medical monitoring”.
  • 142. what these “devices” all have in common is the magic that happens... http://www.flickr.com/photos/designshard/3020167188
  • 143. when easily available components and fabrication... http://www.flickr.com/photos/jadon/4853752558
  • 144. meet an open and widely-distributed “Because 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 API...these platforms allowed them free reign to experiment”. - Android powered sensors monitor vital signs platform... http://www.flickr.com/photos/andrewmalone/2355592191 “I ran into [SAIC] at this trade show where they were placed next to all these other carmakers with massive software teams...they said: ‘We just have six dudes and Android.’ - The Internet of things is Android and its everywhere “Nanosats based on Android phones offerthe...advantage of a standardized appplatform for running experiments. Thisopens up space experiments to studentsand hackers around the world.’ - Android and Linux Nanosats shine bright
  • 145. some people believe to be squashed... Android’s diversity is a thing http://www.flickr.com/photos/greencolander/2502910471/
  • 146. but i’m pretty sure http://www.flickr.com/photos/92090133@N04/8487832697/ diversity is not a bug...
  • 148. http://www.flickr.com/photos/tinou/453593446 thank you many thanks to the amazing photographers on http://creativecommons.org/licenses/by/2.0 @yiibu hello@yiibu.com contact us at Presentation deck available @ http://www.slideshare.net/yiibu