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