O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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...
http://www.flickr.com/photos/liquene/4824175336 users can then layer
http://www.flickr.com/photos/liquene/4824175336 users can then layer
Próximos SlideShares
Carregando em…5
×

http://www.flickr.com/photos/liquene/4824175336 users can then layer Designing for diversity - how to stop worrying and embrace the Android revolution

90.444 visualizações

Publicada em

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

Publicada em: Tecnologia
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • @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...
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • slide 15 is supposed to show how android tablets took center stage. yet, the picture shows nothing but a laptop and an apple ipad.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • This is globally mind blowing.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Very cool, stephanie. I love the diversity slides, showing all those different mods / adverts / national habits!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

×