Android Design Guidelines: The Missing Pages Tricia Cervenan Mobile Product Manager & UX Architect November 29, 2012 1 @triciacervenan
Nov 17, 2014
Android Design Guidelines: The Missing Pages
Tricia CervenanMobile Product Manager & UX ArchitectNovember 29, 2012
1@triciacervenan
HISTORY
2@triciacervenan
Android Market, circa 2010
@triciacervenan 3
Android iPhone
@triciacervenan 4
Android 4.0 (ICS) released November 2011
@triciacervenan 5
Android Design Guidelines released January 2012
@triciacervenan 6
Fragmentation in May 2012 (via Flurry Analytics)
@triciacervenan 7
8@triciacervenan
WHY FOLLOW GUIDELINES?
9@triciacervenan
10@triciacervenan
“These design principles were developed by and for the Android User Experience Team to keep users’ best interests in mind.”
- Android Design Guidelines
11@triciacervenan
“Your app will play an important part in keeping the overall Android experience consistent and enjoyable to use.”
- Android Design Guidelines
12@triciacervenan
You have about 30 seconds to captivate someone before you potentially lose them forever.
13@triciacervenan
My own personal mantra: If I have to tell you how to use it, I didn’t do my job right.
14@triciacervenan
Ratings and reviews are second most important contributor to rankings.
15@triciacervenan
It’s easier to develop to the guidelines... if you understand them.
16@triciacervenan
Let’s Talk Guidelines:Seventeen tips (and four rules) to delivering a better app
17@triciacervenan
NAVIGATION
18@triciacervenan
Root Navigation
19@triciacervenan
Section Main View
20@triciacervenan
Item Detail
21@triciacervenan
Collection List
22@triciacervenan
Up is not Back, except when it is.
Up is Back, except when it’s not?
23@triciacervenan
“When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back button has the same result as pressing an Up button—this is a common occurrence.”
24@triciacervenan
“When your app supports navigation from a list of items to a detail view of one of those items, it's often desirable to support direction navigation from that item to another one which precedes or follows it in the list.”
25@triciacervenan
“However, a notable exception to this occurs when browsing between related detail views not tied together by the referring list.”
26@triciacervenan
“You have the ability to make the Up behavior even smarter based on your knowledge of detail view.”
27@triciacervenan
Rule #1: As long as the user stays in the same section, up is back.
28@triciacervenan
Rule #2: A collection list is not part of a section, so up is back.
29@triciacervenan
Rule #3: If a user jumps to a different section or app, up takes the user to the top of the new section.
30@triciacervenan
Rule #4: See rules 2 and 3.A collection list isn’t part of a section, but the detail view that it can bring a user to is. So, if a user navigates to a detail view from a collection list, up takes the user to the top of that detail view’s section.
31@triciacervenan
The Problem?
That’s a lot for a user to remember.
32@triciacervenan
?
33@triciacervenan
Tip #1
An app is not a website. Be careful about linking between sections. Or
don’t do it at all.
@triciacervenan 34
Tip #2
Your user is not stupid, but they are in a hurry. Don’t make them have to work extra hard to get the thing
done they are trying to do.
@triciacervenan 35
Tip #3
If you have to provide an alternate “easier” way to do something, take a look at your app structure. The user may benefit from a revision
there instead.
@triciacervenan 36
ACTION BARS
37@triciacervenan
11
22
33
Top Bar/Tab Bar
Bottom Bar
Main Action Bar
11
22
33
38@triciacervenan
Main Action Bar
A. Up button
B. Branding
C. App section navigation
D. Active app section’s options
E. Active app section’s options overflow
11
AA
BB
CC
DD EE
39@triciacervenan
Tip #4
Don’t use an up button on the root navigation view.
@triciacervenan 40
Tip #5
Google got rid of the menu button for a reason. Don’t hide your navigation
in another version of a menu.
@triciacervenan 41
Tip #6
Keep your branding simple.
@triciacervenan 42
Tip #7
The action bar icons are not the place to be creative. Use common, standard, easy to understand icons
to indicate what the action is.
@triciacervenan 43
Tab Bars
A. Fixed Tab Bar
B. Scrollable Tab Bar
22
AA
BB
44@triciacervenan
Tip #8
Fixed tab bars do not scroll. Only use them if you have two or three tabs.
@triciacervenan 45
Tip #9
Tabs should be used to group like things together, not as your main
navigation.
Exception: Your app truly has only one section.
@triciacervenan 46
Bottom Bar
A. Icons for view specific options
B. Overflow icon
33
AA
BB
47@triciacervenan
Tip #10
Only use the bottom bar if you are using it as a contextual bar. Section options stay in the main action bar.
@triciacervenan 48
Contextual Action Bar
Top Bar v.1
Top Bar v.2
Bottom Bar
11
22
33
49@triciacervenan
50@triciacervenan
Tip #11
Don’t forget about your view transitions. Make it obvious to your
user that views with contextual action bars are different.
@triciacervenan 51
FEEDBACK
52@triciacervenan
53@triciacervenan
54@triciacervenan
Tip #12
You need to constantly and consistently give your user feedback so they know what they did right and
what they did wrong, even if the feedback only appears for a second.
@triciacervenan 55
What else?
56@triciacervenan
Tip #13
Only provide landscape for an app that will truly benefit from the size and shape of that screen orientation.
@triciacervenan 57
Tip #14
Your average user probably bought their smartphone for Facebook, to
take good photos, and text with a full keyboard. Your app will be used as
much as it is memorable.
@triciacervenan 58
Tip #15
Do user tests. With real users.
@triciacervenan 59
Tip #16
Google doesn’t always follow their own guidelines.
@triciacervenan 60
Tip #17
Be nice to your UX people and product owners. They may change
their minds a lot, but its only because they want what’s best for
the user.
@triciacervenan 61
THANK YOU!
@triciacervenan
linkedin.com/in/triciacervenan
Follow me:
62@triciacervenan