This document discusses Android UX and design from Ice Cream Sandwich to Jelly Bean. It provides an overview of why Android grew in popularity from 2008-2012. It then covers key aspects of Android navigation like the up and back buttons. It discusses visual design principles like color, typography, and icons. It also explores the Android ecosphere including notifications, widgets, and multiple views. Finally, it provides examples of good and bad ports from other platforms to Android.

1. ANDROID UX
& DESIGN
ICE CREAM SANDWICH
& JELLY BEAN
Presented by
ANDY FITZGERALD
JESSE WEED

2. WHY ANDROID?
2008
first commercial Android devices released
2009
2.8% market share
12,000 activations daily
2010
32% market share
362,000 activations daily
2012
59% market share
over 1 million activations daily

3. UX & DESIGN
Navigation & User Interface
Visual Design
The Android Ecosphere
Case Studies

4. NAVIGATION &
USER INTERFACE

5. UP & BACK

6. UP & BACK: SIBLING SCREENS

7. UP & BACK: LINKED SCREENS

8. Intent
A mechanism for one app to signal it
would like another app's assistance in
performing an action.

9. SHARING WITH INTENTS

10. SHARING WITH INTENTS

11. SHARING WITH INTENTS

12. ACTION BAR
Top Level Category View
GMail

13. ACTION BAR
Pageview Spinner
GMail

14. ACTION BAR
Google Play Books Google Play Music
GMail

15. SCROLLABLE TABS
Tab View Horizontal Scrolling
Google Play Music

16. FIXED TABS
Tab View (Fixed) Scrolling
YouTube

17. FIXED TABS
Tab View (Scrolled) Landscape
Tabs Nested in Action Bar
YouTube

18. DRAWERS
Top level view Drawer
YouTube

19. DRAWERS
Drawer menu Category menu
YouTube

20. DRAWERS
Detail view Tabbed navigation
YouTube

21. VISUAL DESIGN

22. WHAT DOES ANDROID “LOOK” LIKE?

23. HOME SCREEN
Android iPhone

24. NOTIFICATIONS
Android iPhone

25. CALLS
Android iPhone

26. SETTINGS
Android iPhone

27. CALENDAR
Android iPhone

28. SHARING
Android iPhone

29. KEY DESIGN PRINCIPLES

30. “PURE ANDROID”
Flat, but not 2D
Elements glow
Understated fields
and elements
Subtle top-light
http://developer.android.com/design

31. TYPOGRAPHY

32. COLOR

33. ICONOGRAPHY

34. METRICS & GRID

35. Devices by Screen size & density as of Aug 1, 2012

36. SUPPORTING MULTIPLE
RESOLUTIONS
Example of app without support for different densities.
Example of app with that supports different densities.

38. SCALING

39. THE ANDROID ECOSPHERE

40. NOTIFICATIONS
Expanded layouts

41. NOTIFICATIONS
Actions
Grouping

42. WIDGETS
Information Widgets
Collection Widgets
Control Widgets

43. WIDGETS
YouTube, AnyDO, BBC YouTube

44. WIDGETS
HTC Sense Email Epicurious & Flipboard

45. WIDGETS
Any.DO Traffic Widget

46. OPEN SIGNAL MAPS
h"p://opensignalmaps.com/reports/fragmenta4on.php

47. MULTIPLE VIEWS

48. SINGLE VIEW WITH
MULTIPLE PANES

49. STRETCH/COMPRESS

50. STACK

51. EXPAND & COLLAPSE

52. SHOW & HIDE

53. TRANSLATION:
A BAD EXAMPLE

54. EPICURIOUS
iPhone

55. EPICURIOUS
Android

56. PORTING PITFALLS
Ugly user interface
Poor use of “Knowledge in the Head”
Shortchanges device capabilities
Require “hacks” that lead to poor performance and
unreliability
Create poor forward compatibility of design work
Generate aggravating user experiences
(& resulting negative feedback and brand damage)

57. TRANSLATION:
A GOOD EXAMPLE

58. EVERNOTE

59. EVERNOTE

60. DELIBERATE DESIGN
Facilitates architectural parity across multiple
contexts
Leverages device specific “knowledge in the head”
Leverages device and context specific capabilities
Is future friendly
Fits naturally into device ecosystems

61. THANK YOU!