Droidcon 2011 - Android Design patterns

Android Design patterns
Giorgio Venturi 
User Experience lead - Closertag 
twitter: @gventuri"

Who am I?

Information Architecture, User
research

Founder of Closertag, design agency

designing for Android since early 2009

One of the lead UX architects for the
Skype application in 2010

Giorgio Venturi twitter: gventuri

HOW DO I CREATE A GREAT
USER EXPERIENCE?

Five layers of user experience
Value
proposition Structure
Behaviour
Code
Visual design


Five layers of user experience
Value
proposition Structure
Behaviour
Code
Visual design

User
experience
can
be
decomposed
into
its
ﬁve
building

components.

However,
users
will
experience
all
those
layers
as
a
whole
–
not

separately.

You
won’t
have
a
great
user
experience
unless
you
address
these
ﬁve

layers
holis?cally

It’s a design solution to a recurring
problem


It’s a design solution to a recurring
problem

Can
a
design
paAern
help
us
designing
a
great
user
experience?

Yes,
they
can!

It’s
also
about
not
reinven?ng
the
wheel.
People
want
to
use
what
they
have
learnt

already
using
the
phone.

Hence,
know
your
paAerns
and
use
them
to
build
your
applica?ons.

Don’t
use
paAerns
you
have
seen
on
other
plaGorms
like
iOS,
use
Android
paAerns.


The evolution of the Android UI

Google
IO
2009
Google
IO
2010
Google
IO
2011

Cupcake
Froyo
Gingerbread/Honeycomb

First
session
at
Google
IO
First
presenta?on
on
Introducing
the
new

on
UI
design
PaAerns
based
on
the
honeycomb
paAerns

TwiAer
app

Hypertext
nav
Ac?on
bar
v1
Ac?on
bar
v2

No?ﬁca?ons
Quick
ac?on/contact
Carousels

Sharing
Intents
Search
ﬁlters

Only
normal,
mid-‐density
Support
for
mul?ple
screen
Fluid
design:

screens
sizes
Fragments


The evolution of the Android UI

Google
IO
2009
Google
IO
2010
Google
IO
2011

Cupcake
Froyo
Gingerbread/Honeycomb

First
session
at
Google
IO
First
presenta?on
on
Introducing
the
new

on
UI
design
PaAerns
based
on
the
honeycomb
paAerns

TwiAer
app

Hypertext
nfor
Android
back
in
2009
was
very
different
from
war
v2
s
designing

Designing
av
Ac?on
bar
v1
Ac?on
b hat
i
No?fica?ons
in
2011

for
Android
Quick
ac?on/contact
Carousels

Sharing
Intents
Search
filters

The
Google
Android
team
has
been
gradually
addressing
several
design

Only
normal,
mid-‐density
with
naviga?on.

challenges
–
especially
Support
for
mul?ple
screen
Fluid
design:

screens
formidable
challenge
is
designing
for
a
wide
range
of
form
factors

Also,
a
sizes
Fragments

(candybar,
tablets,
keyboards,
etc)
&
screen
resolu?ons
&
densi?es


UI challenges

Navigation
Information visualisation
On screen interaction
Notifications & responsiveness
Emotion & Expression

Naviga?on
answers
to
2
fundamental
ques?ons:

• here
am
I?

W
• here
can
I
go?

W

Use shallow structures

/!"0$)..$
%)123&!

%)*+,*-$ 0),*$ 0),*$ 0),*$
.)-& ',&4 ',&4 ',&4
!""#$%&'&%

%&'&%$(


Use shallow structures

/!"0$)..$
%)123&!

%)*+,*-$ 0),*$ 0),*$ 0),*$
.)-& ',&4 ',&4 ',&4
!""#$%&'&%

%&'&%$(

General
rule:

Mobile
applica?ons
should
have
a
shallow
hierarchy
&
be

light
on
func?onality.

If
possible,
try
simplifying
&
reducing
the
amount
of
func?on

the
app
has;
don’t
try
adding
several
nested
features.


Shun deep hierarchies
+,-.'"(('!"*#/0),1
)23),#"!'"((

-4),4%)5'
("&) ,--3'!)4)!

*(

!"#$%#&'
("&) !)4)!'6

!)4)!'7


Shun deep hierarchies
+,-.'"(('!"*#/0),1
)23),#"!'"((

-4),4%)5'
("&) ,--3'!)4)!

*(

!"#$%#&'
("&) !)4)!'6

!)4)!'7
Some?mes
this
is
just
not
possible
(e.g.
Facebook,
Linkedin,
etc).

In
these
case,
consider
the
most
important
view
or
feature
in
your

app
(e.g.
contacts
view
in
Skype,
Feed
for
Facebook,
etc)
and
make

user
land
on
that
screen.

Allow
then
people
can
go
to
the
overview
screen,
by
using
the
ac?on

bar
(see
next
slides)

Up and back in Android

Contacts
Inbox

Contact
details
Compose
email


Contacts
Inbox

Back

Back

Contact
details
Compose
email


Contacts
Inbox

Back
Up

Back

Contact
details
Compose
email


Contacts
Inbox

Back
Up

Back

From
Honeycomb
moving
forward:

-‐
SYSTEM
BACK
navigates
history
between
related
screens

-‐
APPLICATION
UP
navigates
hierarchy
within
a
single
app

Contact
details
Compose
email

This
issue
has
been
discussed
at
length
in:

Designing
and
ImplemenIng
Android
UIs
for
Phones
and
Tablets,
Google
IO
2011

This
has
been
a
great
area
of
concern
as
the
back
buAon
brings
you
back
in
the
history
stack


Action bar

Up to
HOME
SCREEN
+
BRANDING

Introduced
at
Google
Io
2010
with
the
TwiAer
app,
it
quickly
spread
to
other
apps

(but
it
is
far
from
being
ubiquitous)


Tabs


Tabs

They
expose
main
func?onality
&
views.
They
help
building
a
mental
model
of
the

app.
They
show
you
where
you
are
and
where
you
can
go.

You
can
use
icons,
labels
or
a
mix
of
both
according
to
screen
sizes.

You
can’t
go
wrong
with
tabs
really,
they
have
been
here
since
1996
and
they
are

here
to
stay.


Dashboards


Dashboards

Entrypoint
screen
into
the
main
views.

It
was
made
popular
by
Facebook
on
iOS.

We
don’t
par?cularly
like
this
approach,
it’s
a
bit
lazy
&
it
is
also
an
excuse
for
feature
bloat.

The
main
problem
is
that
if
your
app
has
a
dominant
view
(e.g.
contacts)
it
will
make
it
one

step
further
&
it
adds
an
extra
level
in
the
naviga?on.
It
hides
informa?on.

In
fact
twiAer
has
recently
removed
the
dashboard
and
gone
back
to
tabs
view
–
for
good.


Honeycomb action bar
Action Bar
General organization

๏ App icon

๏ View details
Home View Action
๏icon
Action buttons
details buttons
WHERE WHAT CAN I WHAT CAN I
I AM? SEE? DO HERE?

It
works
par?cularly
well
with
large
screens
&
tablets
-‐

as
you
can
imagine.
This

approach
is
discussed
in

31
Designing
and
ImplemenIng
Android
UIs
for
Phones
and
Tablets,

Google
IO
2011


Action bar on large and small screens
Action Bar
Phones and
smaller screens

39


Carousel tabs

Aka
‘sliding
tabs’

They
are
used
to
pivot
between
different
views
in
the
same
category
–
for
example

browsing
your
circles,
or
filtering
between
different
sec?ons
in
the
market
–

featured,
top
paid,
free,
etc.

The
beauty
is
that
users
can
either
tap
or
swipe
(on
any
part
of
the
screen)

Recent
research
from
N&N
Group
claims
that
people
DO
GET
swiping.


Menu navigation

Discovery
problem:
out
of
sight,
out
of
mind
gventuri
Giorgio Venturi twitter:

Custom navigation


Custom navigation

Nobody
is
going
to
give
you
a
prize
for
re-‐inven?ng
basic
naviga?on.

Linkedin
for
example
is
trying
to
reinvent
the
wheel
by
having
a
custom
swipe

gesture
on
the
ac?on
bar.

There’s
another
problem
with
this
screen:
the
?les
beneath
seem
a
image
carousel

–
but
they
are
not.

Custom navigation - Spotify


Custom navigation - Spotify

SPOTIFY
is
using
a
naviga?on
metaphor
from
Cupcake,
the
‘tray’.

While
the
tray
used
to
be
part
of
the
framework,
it
has
now
become
obsolete
from

2.1+
onwards

Avoid
using
the
tray
from
now
on
Venturi
Giorgio twitter: gventuri

Portrait dominant or fluid?

?


Portrait dominant or fluid?

?

Un?l
Android
1.6,
OS
had
a
ﬂuid
behaviour.

Unfortunately,
it
is
not
very
eﬃcient
&
to
design
the
app
twice.

If
you
have
a
limited
set
of
resources,
to
design
the
app
for
one
orienta?on
only


Consider the primary use of the app


Consider the primary use of the app

Make
sure
you
understand
where
your
applica?on
is
going
to
be
used
most
when

deciding
the
primary
orienta?on.

With
laid
back
interac?on,
make
landscape
the
primary
view

With
‘on
the
move’
interac?on
(e.g.
loca?on
btwitter: gventuri
Giorgio Venturi
ased
services),
s?ck
to
portrait

orienta?on.

Lists

Contacts Contacts
Display options Header Me
+1234567890123
Only contacts with
phones Toggle
A

Recent activities Display Name
Display Latest activity
Enabled
status Quick scroll
Display Name Should be used to
Sort list by Latest activity position the user
First name quickly in a section of
Display Name
the list.
View contact names as Latest activity
First name, surname
Display Name
Import/export contacts
Import/export contacts Latest activity
B
Docking headers
Import contacts Display Name They can dock at the A Display Name
Latest activity top of the viewport Latest activity
when scrolling down. B

Export contacts Call to Action Display Name Display Name
To local storage Latest activity Latest activity
Context
Display Name
Display Name Latest activity
Latest activity


2D carousels


3D carousels
Beyond the List
Examples

66


Use of fragments


Use of fragments

Before
the
release
of
honeycomb,
you
had
to
develop
completely
separate
views
to

take
advantage
of
increased
real
estate
on
tablets.

Now
you
can
use
fragments.

In
general,
fragments
can
be
used
to
have
several
views
into
one
screen
and
it
brings

increased
usability.
Think
Gmail.

–
Combine
a
list
and
a
detail
view
for
browsing
tasks

–
Consolidate
mul?ple
related
phone
screens
into
a
single
compound
view

–
Avoid
excessively
long
line
lengths

Panes
to
the
right
should
generally
present
more
content
or
details
for
items
selected

in
the
panes
on
the
lek.

This
topic
is
a
presenta?on
in
itself,
so
I
won’t
indulge
on
this
topic,
check
the
other

references

Toolbars & Actions frames


Toolbars & Actions frames

Fixed
ac?ons
frame
at
the
boAom,
allows
users
to
quickly
execute
an
ac?on
with

no
scrolling.


Modal dialogues


Modal dialogues

There’s
way
too
many
dialogues
in
Android,
this
one
is
especially
threatening.

If
you
have
to
use
them,
the
posi?ve
call
to
ac?on
is
always
on
the
lek


Forms: use tooltips

| Enter Username i

username must be minimum 6 characters

Tool?ps
allow
the
user
to
avoid
making
errors
–
especially
useful
in
registra?on

forms


Use the appropriate input type for text
field


NOTIFICATIONS &
RESPONSIVENESS

Design for responsiveness, do not
interrupt users or make him wait


Toast notifications

from androidpatterns.com


Toast notifications

from androidpatterns.com

When
no
response
is
required
at
all
from
the
user.

It
can
appear
on
top
of
any
user
ac?vity
or
app
–
not
necessarily
the
app
that

originated
it

Status bar notification


Status bar notification

Use
this
when
ac?on
is
applicable
.
E.g.
previewing
the
uploaded
image


Develop a visual language


Develop a visual language

The
quality
of
your
visual
language
is
a
strong
cue
towards
the
quality
of
your

applica?on!

Spend
?me
developing
a
peculiar,
dis?nc?ve
visual
language
including
?les,

markers,
buAon,
etc.

Take care in designing your icons


Take care in designing your icons

Purchase
decisions
are
made
on
an
impulse.

A
well
designed
icon
&
logo
can
make
the
diﬀerence
between
success
and
failure
if

you
are
on
the
market.

It
will
work
also
work
wonders
on
the
ac?on
bar…

Use of splash screens


Use of splash screens

Not
compulsory,
but
it
is
especially
useful
to
show
while
app
preloads
libraries,

collec?ons,
caching
loca?on
etc.
–
beAer
having
users
wait
in
the
ﬁrst
seconds,

rather
than
once
they
start
interac?ng.

It’s
also
a
good
opportunity
to
reinforce
your
branding

Design strategies

Understand who’s it for, go and talk
to them
Involve a designer (or two)
Prototype & test
Analytics

Thank you

Follow us on Twitter
@gventuri
@closertag

Droidcon 2011 - Android Design patterns

Recommended

Recommended

More Related Content

Similar to Droidcon 2011 - Android Design patterns

Similar to Droidcon 2011 - Android Design patterns (20)

Recently uploaded

Recently uploaded (20)

Droidcon 2011 - Android Design patterns

Editor's Notes