http://www.flickr.com/photos/joeshlabotnik/305410323
designing for diversity
how to stop worrying and embrace the Android r...
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...
http://www.flickr.com/photos/mwiththeat/5562687410
on the other side of the world...
rather than start this story in a fact...
(or more specifically, the Port of Leith
i’m going to start in Scotland
on the north edge of Edinburgh)
http://www.flickr.co...
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 fo...
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 ...
http://www.flickr.com/photos/svensson/6012726684
Three factors have enabled such rapid change...
1. Moore’s Law
2. The deve...
Source: Intel
True to Moore’s predictions,
the number of components
on an integrated circuit
(or microchip)
have continued...
http://www.flickr.com/photos/kamshots/4104155942Source: Wikipedia
to build ever cheaper, lighter and
this has enabled us
mo...
http://www.flickr.com/photos/oskay/3300199882
These devices may have been smaller, cheaper and more
powerful, but developin...
All that changed in 2005, when Taiwanese
semiconductor company MediaTek introduced what
it called “reference designs” for ...
http://www.flickr.com/photos/oskay/3300142950
This “cell phone in a box”
concept bundled all the
necessary mobile
phone com...
suddenly, tiny companies
http://www.flickr.com/photos/oskay/3300186490
with only a handful of engineers could
set up shop p...
Most of these companies clustered around the electronics
and manufacturing hub of Shenzhen in China, but others
soon appea...
MediaTek chips provided most of the functionality.
All companies needed to do was slap on a case, add a bit of
branding an...
Micromax India
circa 2009
Some companies competed solely on price, while others
specialized in fun and often eccentric dev...
fake Blackberry
...others simply produced copies
of flagship devices from well
known brands...
iOS lookalike
fake Vodafone
...
By late 2007, it was estimated
that these small “white-box”*
retailers had captured 10%
of global device sales.
Source: Wi...
didn’t just copy...they innovated
but white-box manufacturers
http://www.flickr.com/photos/jurvetson/1783467315
video calle...
They ran tiny production runs, experimenting wildly with
industrial design, components and software. If a “feature” didn’t...
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 phone...
Source: EBay, August 2013
Shanzhai circa 2013
...looks like a Nokia Lumia
...looks like Windows Phone OS
Some small device...
...but many have evolved into larger companies that now
develop and market devices under their own brand.
Meizu M8 Mini On...
“...designed by Jack
Wong with the help of
30-plus handcrafted
wooden prototypes,
followed by 3-D
scanning...”
Source: Eng...
Other chipset vendors such as Rockchip, Broadcom,
Allwinner and Qualcomm now emulate the MediaTek
model, resulting in a ve...
http://www.flickr.com/photos/oskay/3300199882Source: The Internet of things is Android and its everywhere
“Every screen var...
Off the shelf components and an open OS have
democratized portable computing.
There is now huge consumer choice in connecte...
http://www.flickr.com/photos/designshard/3019335591
“Good enough” smartphones and tablets can
now be purchased for ~$100.
V...
http://www.flickr.com/photos/designshard/3019335591
Android now powers 59% of smart devices
(and 80% of smartphones) being ...
These devices are designed, developed, manufactured and
marketed by many hundreds of companies, each with their
own audien...
http://www.flickr.com/photos/joeshlabotnik/305410323
Part 2: Understanding diversity
Before we discuss how to design for An...
All modern connected devices
consist of a carefully chosen
collection of components.
Source: Samsung
Gyro sensor
Internal ...
Manufacturers can choose
off-the-shelf components,
or customize each aspect
of the device to suit their
intended price-poin...
At the cheapest price
point, you often find
“generic” device with
an off-the-shelf
chipset, stock Android
and barely-branded...
Slightly more customized
devices are sold by all
sorts of companies.
Here is an example of
a very popular device that
migh...
¥799 (£83/$130)
nice but basic plastic case
stock MediaTek MT6589T chipset
8 Mp camera
dual SIM w/ dual standby
highly cus...
Part of Hongmi’s huge appeal is its
MIUI ROM. A highly customized (and
customizable) version of Android.
(we’ll have a bet...
In case you’re thinking “Yeah, whatever...”
consider that when the Hongmi went on sale last month,
the first batch of 100,0...
What we most often purchase in
Europe and North America is some
manner of highly customized device
built by an established...
experiment with different form factors
use Android as a base with which to
these manufacturers
Galaxy NGalaxy Tab 7.0”Galax...
A new dual screen, dual SIM (with dual standby) luxury clamshell phone developed
by Samsung. The full OS is accessible fro...
The KDDI Infobar range
was designed by famed industrial
designer Naoto Fukasawa, and
features iida UI, a highly
customized...
Open source Android OS also provides an ideal platform on
which to experiment with new interfaces and interactions.
Scroll...
On Sony Xperia and newer
Samsung Galaxy devices,
users can trigger resizable
and repositionable
floating windows. These
ena...
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
hard...
http://www.flickr.com/photos/designshard/3019335591
But (yet again) innovation and experimentation
don’t just come from the...
A dual display smartphone developed by Yota, a Russian broadband
operator. The e-paper powered back display can retain an ...
Toughshield specializes in products for industrial and institutional settings
including construction, healthcare and retai...
Global supermarket chain
Tesco recently announced
Hudl, a ~£100 ($150) family-
friendly tablet featuring
extensive ClubCar...
Source: Quartz, Photo courtesy Datawind
The Indian government hopes
to distribute at least 220
million Aakash 2 tablets to...
Although many consumers still
primarily purchase devices
designed, developed and
marketed by large
companies...this may no...
...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 inte...
http://www.flickr.com/photos/liquene/4824175336
users can then layer
their own customizations,
ranging from simple interfac...
A relatively common
customization might
be the installation of
an alternate app to
control text input.
This new app could ...
In fact, thanks to a system called intents, users can also specify
favourite apps to complete common tasks such as sharing...
A less common, but more transformative customization is to install
a new launcher. This replaces the device’s home and loc...
The most extreme form of customization involves completely
replacing the build of Android that came with the device.
These...
Paranoid Android MOD for example
features a Hybrid Mode that lets you
adjust the resolution of every app, widget
or system...
The most popular MOD in
China is MIUI, developed
by upstart handset
manufacturer Xiaomi.
International versions of
MIUI ar...
MIUI is particularly
popular as its design is
actively crowd sourced
through the discussions
of thousands of Chinese
Mi-Fa...
Another popular feature is MIUIs’ extensive themeing capabilities,
and an app store containing thousands of community buil...
Installing a MOD is far from mainstream (especially in Europe
and North America), but as installation becomes simpler, who...
...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 inc...
Holo provides a consistent look and feel for core components.
When designing an Android app, you are free to provide your ...
What you will need to plan for however
is diversity in platform versions.
Because Android OS is itself just another
compon...
Note: Older versions of Android often support
different features, include different APIs and follow
different design patterns...
Source: Henry Fong, Yodo1, presented at GDC 2013
Users may also not access their content
through the channels you’d expect...
An unofficial app store in a Bangkok mega mall selling
Android (and iOS :-) apps to passersby. We’ve been told
that in parts...
http://www.flickr.com/photos/adactio/1799953270
Part 3: Designing for diversity
Throughout the remainder of this presentati...
http://www.flickr.com/photos/designshard/3019335591
Disclaimer: Android is incredibly versatile and now powers
thousands of...
1. Be flexible
2. Provide assets for all
3. Optimize layouts
4. Enable diverse experiences
Android design 101
Four key prin...
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.
OpenS...
Screen size and pixel density diversity makes defining layouts
using pixels problematic.
On screens with different densities...
To solve this problem, Android enables you to define layouts using
density independent pixels (dp).
Use these virtual pixel...
Similar to designing flexibly
for the web, you should
don’t specify dimensions in
cases where elements are
simply meant to ...
Layouts that scale and flex are great, but to provide the best
experience, you will often need to go further:
• Provide alt...
http://www.flickr.com/photos/designshard/3019335591
Principle 2: Provide assets for all
...using built-in layout and resour...
Each Android app includes
a collection of resources that
are used to define and
construct the user interface.
These include...
Resources can be grouped
using qualifiers that specify
their intended context of use.
Similar (in spirit) to CSS media
quer...
values-de
All you have to do is group
assets using the necessary
resources and qualifiers.
At runtime, Android will
detect ...
You can also combine
qualifiers to increase
context specificity.
drawable-en-rUS-land-hdpi
language
region
orientation
pixel...
A critical use-case for qualifiers is to specify alternate bitmaps for
different screen densities. These are specified using ...
drawable-ldpi
drawable-mhdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
0.75x
1x
1.5x
2x
3x
Put assets in folders labell...
Android regularly publishes
screen density statistics.
Take these into account when
deciding which alternate
resources to ...
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 experie...
Android provides two additional tools that dramatically improve
the experience when dealing with screen size diversity.
la...
Using qualifiers, you can define breakpoints between layouts,
or tweak existing layouts to better suit the screen size.
600d...
Instead of filling these buckets with distinct “smartphone” or “tablet”
layouts, construct highly adaptive layouts that rel...
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
function...
On small screens, it’s always best to focus the interaction.
There's often only room to display one fragment at a time,
so...
On larger screens, there is an opportunity to combine these
fragments to enrich interactions, improve usability, and make
...
A B C
On the largest screens Evernote combines up to three fragments into one activity.
Swipe left on fragment B to reveal...
Evernote also relies heavily on flexible components, and lots of
fragment-specific design tweaks. It’s this combination of d...
One fragment per
activity, accessible
using tabs.
Many fragments grouped as a
single activity.
Many fragments grouped as a...
The list and detail fragments as
one activity. Swipe right to slide
open the menu panel fragment.
The menu panel, list and...
These layout changes can
once again be defined
using a collection of
resources and qualifiers.
layout
layout-sw480dp
res
lay...
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Lang...
Almost any application will benefit from the inclusion of
alternate resources to support diversity (be they images,
layouts...
Small well-chosen adjustments can make a big difference.
When in doubt, keep things simple. Don’t micro-manage
the design o...
http://www.flickr.com/photos/designshard/3019335591
Principle 4: Enable diverse experiences
...leverage intents to embrace ...
http://www.flickr.com/photos/designshard/3019335591
Intents are the glue between application
components, both within an app...
An intent is simply a
combination of an action,
and a piece of data.
Source: Nick Butcher, Google
VIEW
EDIT Contact “Bryan...
Android apps can
register their ability
to handle each type of
intent (or if you
prefer...their ability to
assist the user...
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...
On other platforms, a brand decides (ahem...guesses, presumes)
which services to enable, and hard codes these into their a...
...thanks to intents, users can choose how they wish to share.
you “save”
you edit/compose
your noteyou click “share”
SHAR...
you “save”
you edit/compose
your noteyou click “share”
the intent is
broadcast
SHARE
{data}
...completing the action autom...
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 t...
The beauty here is that this is a (progressive) enhancement.
The web page simply contains a URL. If there’s no Amazon app
...
The more apps support intents, the more users can chain apps
and activities together to complete very personal experiences...
Using intents reduces the need to design, build, and
maintain a bespoke system to manage sharing, or build
regional varian...
Be flexible
Create density-independent layouts that stretch and compress to
accommodate various heights and widths.
Provide...
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 activat...
this doesn’t include the many
“unofficial” devices being imagined
and assembled by makers around the world
http://www.flickr....
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 “a...
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...
S...
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 usi...
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.o...
Designing for diversity -  how to stop worrying and embrace the Android revolution
Designing for diversity -  how to stop worrying and embrace the Android revolution
Upcoming SlideShare
Loading in …5
×

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

41,856 views
38,883 views

Published on

It took 16 years for smartphone penetration to reach 1 billion people. Analysts believe it will take only 3 years to reach the next billion. The devices these consumers buy will be incredibly diverse, yet many will run on Android; a platform that now sees more than 1.5 million activations per day.


In this presentation, we explore the fascinating rise of Android around the globe. From dual SIM phones in Indonesia, to dual screen e-ink devices in Russia and crowd-sourced platform modifications in China, we will discover the role open source has played in Android's popularity and how to design for such a diverse environment.

Published in: Technology
6 Comments
62 Likes
Statistics
Notes
  • #Android Android Tutorial (Videos and Books) Just $9.95 http://www.dbmanagement.info/Tutorials/Android.htm
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @ysascha Yes :-) It's the only photo I currently have from this era. The devices are now so small that it's much harder to take a photo of people using them, especially in this scenario. Phablets far outweigh 10' tablets, so they're now palm-sized.

    What often happens these days is the crew members wander around the mall, grab a coffee to go, and use the Internet along the way (the only wifi used to be at Starbucks and Costa Coffee, now there's wi-fi all over the mall...I suspect the cruise ships also now have relatively economical broadband). So yes...it's not the most accurate picture, but I wanted to show the real context and real behaviours. Will hopefully update the photo soon...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • slide 15 is supposed to show how android tablets took center stage. yet, the picture shows nothing but a laptop and an apple ipad.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is globally mind blowing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very cool, stephanie. I love the diversity slides, showing all those different mods / adverts / national habits!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
41,856
On SlideShare
0
From Embeds
0
Number of Embeds
854
Actions
Shares
0
Downloads
393
Comments
6
Likes
62
Embeds 0
No embeds

No notes for slide

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
  2. http://www.flickr.com/photos/khamtran/5871541424 this isn’t just a talk about Android
  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
  13. from hulking laptops in 2010
  14. to netbooks in 2011...
  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
  60. Toughshield specializes in products for industrial and institutional settings including construction, healthcare and retail.
  61. 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
  62. 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.
  63. 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%
  64. ...but Android’s diversity does not stop at brands and hardware. The platform itself is also immensely customizable.
  65. 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
  66. 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
  67. 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
  68. 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.
  69. 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.
  70. 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.
  71. 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.
  72. 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.)
  73. 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.
  74. Another popular feature is MIUIs’ extensive themeing capabilities, and an app store containing thousands of community built themes.
  75. 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.
  76. ...your device, your choice of MOD at purchase The new Oppo N1
  77. http://www.flickr.com/photos/designshard/3019335591 How does all this UI diversity impact design?
  78. 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
  79. 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.
  80. 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
  81. 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.
  82. 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.
  83. 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
  84. 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.
  85. 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.
  86. 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..
  87. http://www.flickr.com/photos/designshard/3019335591 Principle 1: Be flexible ...create flexible, density-independent layouts
  88. “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.
  89. 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
  90. 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.
  91. 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
  92. 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...
  93. http://www.flickr.com/photos/designshard/3019335591 Principle 2: Provide assets for all ...using built-in layout and resource adaptation
  94. 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>
  95. 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
  96. 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
  97. You can also combine qualifiers to increase context specificity. drawable-en-rUS-land-hdpi language region orientation pixel density
  98. 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
  99. 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
  100. 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
  101. http://www.flickr.com/photos/designshard/3019335591 Principle 3: Optimize layouts ...using built-in “responsive design”
  102. 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
  103. 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
  104. 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...
  105. 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...
  106. http://www.flickr.com/photos/designshard/3019335591 here’s how it works...
  107. 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)
  108. 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.
  109. 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
  110. 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.
  111. 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
  112. 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
  113. 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.
  114. 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
  115. 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
  116. 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
  117. 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-...
  118. http://www.flickr.com/photos/designshard/3019335591 Principle 4: Enable diverse experiences ...leverage intents to embrace diversity and personalization
  119. 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
  120. 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
  121. 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
  122. EXAMPLE Diversity-friendly social sharing
  123. There are hundreds of social networks, email clients, messenger apps or utilities that a user might prefer to use to share a URL.
  124. 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.)
  125. ...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
  126. 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*
  127. EXAMPLE Enabling multi-app experiences
  128. 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!
  129. 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:
  130. 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
  131. 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
  132. 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..
  133. http://www.flickr.com/photos/designshard/3019335591 A few final words...
  134. http://www.flickr.com/photos/designshard/3019335591 In the summer of 2013, the Android platform surpassed 1 billion activations....
  135. this doesn’t include the many “unofficial” devices being imagined and assembled by makers around the world http://www.flickr.com/photos/tigoe/3321975176
  136. Source: The Internet of things is Android and its everywhere the growing number of Android-based interfaces found in cars...
  137. Internet enabled treadmill. Currently considered a luxury product (...give it 18 months). ...the emerging Android-based “appliances”
  138. or experimental Android-powered Source: SSTL “things” like these nanosats that will one day orbit the earth
  139. 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”.
  140. what these “devices” all have in common is the magic that happens... http://www.flickr.com/photos/designshard/3020167188
  141. when easily available components and fabrication... http://www.flickr.com/photos/jadon/4853752558
  142. 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
  143. some people believe to be squashed... Android’s diversity is a thing http://www.flickr.com/photos/greencolander/2502910471/
  144. but i’m pretty sure http://www.flickr.com/photos/92090133@N04/8487832697/ diversity is not a bug...
  145. http://www.flickr.com/photos/boedker/3846587018 it’s an opportunity...
  146. 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

×