The document discusses Android design patterns and user experience. It begins by introducing the author and their background in UX design for Android. It then outlines five layers that comprise a user experience: value proposition, structure, behavior, code, and visual design. The document also defines design patterns as solutions to recurring problems. It provides examples of navigation patterns for Android, such as using shallow hierarchies, avoiding deep structures, and utilizing the action bar and tabs. The evolution of the Android UI from 2009 to 2011 is reviewed. Challenges like navigation, information visualization, and emotion/expression in design are also addressed.
2. 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
4. Five layers of user experience
Value
proposition Structure
Behaviour
Code
Visual design
Giorgio Venturi twitter: gventuri
5. Five layers of user experience
Value
proposition Structure
Behaviour
Code
Visual design
User
experience
can
be
decomposed
into
its
five
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
five
layers
holis?cally
Giorgio Venturi twitter: gventuri
7. It’s a design solution to a recurring
problem
Giorgio Venturi twitter: gventuri
8. 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.
Giorgio Venturi twitter: gventuri
10. 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?fica?ons
Quick
ac?on/contact
Carousels
Sharing
Intents
Search
filters
Only
normal,
mid-‐density
Support
for
mul?ple
screen
Fluid
design:
screens
sizes
Fragments
Giorgio Venturi twitter: gventuri
11. 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
Giorgio Venturi twitter: gventuri
16. Use shallow structures
/!"0$)..$
%)123&!
%)*+,*-$ 0),*$ 0),*$ 0),*$
.)-& ',&4 ',&4 ',&4
!""#$%&'&%
%&'&%$(
Giorgio Venturi twitter: gventuri
17. 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.
Giorgio Venturi twitter: gventuri
18. Shun deep hierarchies
+,-.'"(('!"*#/0),1
)23),#"!'"((
-4),4%)5'
("&) ,--3'!)4)!
*(
!"#$%#&'
("&) !)4)!'6
!)4)!'7
Giorgio Venturi twitter: gventuri
19. 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)
Giorgio Venturi twitter: gventuri
20. Up and back in Android
Contacts
Inbox
Contact
details
Compose
email
Giorgio Venturi twitter: gventuri
21. Contacts
Inbox
Back
Back
Contact
details
Compose
email
Giorgio Venturi twitter: gventuri
22. Contacts
Inbox
Back
Up
Back
Contact
details
Compose
email
Giorgio Venturi twitter: gventuri
23. 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
Giorgio Venturi twitter: gventuri
24. 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)
Giorgio Venturi twitter: gventuri
26. 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.
Giorgio Venturi twitter: gventuri
28. 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.
Giorgio Venturi twitter: gventuri
29. 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
Giorgio Venturi twitter: gventuri
30. Action bar on large and small screens
Action Bar
Phones and
smaller screens
39
Giorgio Venturi twitter: gventuri
31. 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.
Giorgio Venturi twitter: gventuri
35. 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.
Giorgio Venturi twitter: gventuri
37. 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
40. Portrait dominant or fluid?
?
Un?l
Android
1.6,
OS
had
a
fluid
behaviour.
Unfortunately,
it
is
not
very
efficient
&
to
design
the
app
twice.
If
you
have
a
limited
set
of
resources,
to
design
the
app
for
one
orienta?on
only
Giorgio Venturi twitter: gventuri
42. 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.
43. 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
Giorgio Venturi twitter: gventuri
47. 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
Giorgio Venturi twitter: gventuri
50. Toolbars & Actions frames
Fixed
ac?ons
frame
at
the
boAom,
allows
users
to
quickly
execute
an
ac?on
with
no
scrolling.
Giorgio Venturi twitter: gventuri
52. 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
Giorgio Venturi twitter: gventuri
53. 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
Giorgio Venturi twitter: gventuri
54. Use the appropriate input type for text
field
Giorgio Venturi twitter: gventuri
57. Toast notifications
from androidpatterns.com
Giorgio Venturi twitter: gventuri
58. 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
Giorgio Venturi twitter: gventuri
63. 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,
Giorgio Venturi twitter: gventuri
markers,
buAon,
etc.
64. Take care in designing your icons
Giorgio Venturi twitter: gventuri
65. Take care in designing your icons
Purchase
decisions
are
made
on
an
impulse.
A
well
designed
icon
&
logo
can
make
the
difference
between
success
and
failure
if
you
are
on
the
market.
Giorgio Venturi twitter: gventuri
It
will
work
also
work
wonders
on
the
ac?on
bar…
66. Use of splash screens
Giorgio Venturi twitter: gventuri
67. 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
first
seconds,
rather
than
once
they
start
interac?ng.
Giorgio Venturi twitter: gventuri
It’s
also
a
good
opportunity
to
reinforce
your
branding
69. Design strategies
Understand who’s it for, go and talk
to them
Involve a designer (or two)
Prototype & test
Analytics
Giorgio Venturi twitter: gventuri
I started using Android in 2008, and the apps were jus terrible. But still you can find a high percentage very solid apps with poor design in it.
User experience can be decomposed into its five 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 all these five layers holistically
Can a design pattern help us designing a great user experience? Yes, they can! It’s also about not reinventing the wheel. People want to use what they have learnt already using the phone. Hence, know your patterns and use them to build your applications. Don’t use patterns you have seen on other platforms like iOS, use Android patterns.
Designing for Android back in 2009 was very different from what is designing for Android in 2011 The Google Android team has been gradually addressing several design challenges – especially with navigation. Also, a formidable challenge is designing for a wide range of form factors (candybar, tablets, keyboards, etc) & screen resolutions & densities
Navigation answers to 2 fundamental questions: Where am I? Where can I go?
General rule: Mobile applications should have a shallow hierarchy & be light on functionality. If possible, try simplifying & reducing the amount of function the app has, and don’t try adding several nested features.
Sometimes 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 action bar (see next slides)
This issue has been discussed at length in: Designing and Implementing Android UIs for Phones and Tablets,Google IO 2011This has been a great area of concern as the back button brings you back in the history stack
A typical usability problem: You had to go back to the homescreen, then tap on email, then where do you go? To the root view or to the last opened screen?
From Honeycomb moving forward:๏ SYSTEM BACK navigates history between related screens ๏ APPLICATION UP navigates hierarchy within a single app
Introduced at Google Io 2010 with the Twitter app, it has quickly spread to other apps (but it is far from being ubiquitous)
They expose main functionality & 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.
Entrypoint screen into the main views. It was made popular by Facebook on iOS. We don’t particularly 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 navigation. It hides information. In fact twitter has recently removed the dashboard and gone back to tabs view – for good.
It works particularly well with large screens & tablets - as you can imagine. This approach is discussed in Designing and Implementing Android UIs for Phones and Tablets,Google IO 2011
Honeycomb (& Ice cream sandwich?)
Aka ‘slidingtabs’ They are used to pivot between different views in the same category – for example browsing your circles, or filtering between different sections 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.
Raise your hand who has used tabs at least once Raise your hand who has placed navigation options in the Menu
Discovery problem: out of sight, out of mind
Nobody is going to give you a prize for re-inventing basic navigation. Linkedin for example is trying to reinvent the wheel by having a custom swipe gesture on the action bar. There’s another problem with this screen: the tiles beneath seem a image carousel – but they are not.
SPOTIFY is using a navigation 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
Until Android 1.6, OS had a fluid behaviour. Unfortunately, it is not very efficient & to design the app twice. If you have a limited set of resources, to design the app for one orientation only
Make sure you understand where your application is going to be used most when deciding the primary orientation. With laid back interaction, make landscape the primary view With ‘on the move’ interaction (e.g. location based services), stick to portrait orientation.
Pulse, it has two column layout and works incredibly well on handsets as well. I am also looking forward to have Flipboard & Twitter and see if they use progressive disclosure
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 multiple 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 left.This topic is a presentation in itself, so I won’t indulge on this topic, I will point to other references
Fixed actions frame at the bottom, allows users to quickly execute an action with no scrolling.
There’s way too many dialogues in Android, this one is especially threatening. If you have to use them, the positive action is always on theleft
Tooltips allow the user to avoid making errors – especially useful in registration forms
(e.g. URL vs numeric vs textual)
I am sure you have all seen this… and you all hate it. Sometimes it can be a necessary evil, but sometimes it is just plain bad design
When no response is required at all from the user. It can appear on top of any user activity or app – not necessarily the app that originated it
Use this when action is applicable . E.g. previewing the uploaded image
This is by itself the topic of a presentation, this is just a quick overview
The quality of your visual language is a strong cue towards the quality of your application! Spend time developing a peculiar, distinctive visual language including tiles, markers, button, etc.
Purchase decisions are made on an impulse. A well designed icon & logo can make the difference between success and failure if you are on the market. It will work also work wonders on the action bar…
Not compulsory, but it is especially useful to show while apppreloads libraries, collections, caching location etc. – better having users wait in the first seconds, rather than once they start interacting. It’s also a good opportunity to reinforce your branding
Even if design patterns will put you on a good start, there are four strategies you should consider to design great user experiences: