The future of Android tablets rests with designers. Android has captured only a small marketshare largely due to it's lack of apps, poor graphic design and poor UX. Mutual Mobile Creative Director Amanda McGlothlin makes a case for the importance of design to the future of Android and how designers can more effective cater to the end user. This speech from the 2011 Android Developers Conference looks at popular apps that break correct design conventions, great examples of Android design and exercises in profiling users. Find more at www.mutualmobile.com

1. #TABLETDESIGN

2. WHY AM I HERE?
The fate of Android tablets
rests with you.

3. (NOT) TOO BIG TO FAIL

4. WHY DEVELOPERS?
Android developers love Android, but
have forgotten about everyone else.

5. WHO IS THIS FOR?
Developers who recognize
the value of quality design, but don’t
have a design team at their disposal.

6. WHO ARE YOU?
Amanda McGlothlin
@uxamanda
Let’s tweet about #tabletdesign.

7. STATE OF HONEYCOMB

8. STATE OF HONEYCOMB
1.8%

9. COMPARED TO iPad - BEST CASE
Microsoft
5%
Android
30%
Apple iOS
61%
Strategy Analytics Q2 2011
Apple iOS Android Microsoft RIM Others

10. COMPARED TO iPad - MORE LIKELY
8:1

11. WHO USES THESE THINGS ANYWAYS?
• 11% of American adults now use a
tablet¹
• ~50% have college degree, earn > $75k²
• Schools, hospitals, enterprise
¹Gartner Q1 2011 ²Pew Project on Excellence in Journalism July 2011

12. WHY NOT A DESKTOP?
On the Go
Simpler to Use
The Nielsen Company, Q1 Mobile Connected Device Report

13. WHEN ARE THEY USING THEM?
• Instead of a smartphone
• Instead of a desktop/laptop
• As a second monitor

14. HOPELESS?
How can we help increase the
popularity of Honeycomb tablets?

15. HARDWARE > SOFTWARE > DESIGN
If apps are the missing killer feature,
great design is our way in.

16. TERMINAL != PHOTOSHOP
INTERACTION DESIGN
User Experience
VISUAL DESIGN DEVELOPMENT

17. INTERLUDE

18. WHAT CAN I DO?
• Use what you already have
• Realize you are naturally better than you
think
• Ask your users

19. WHAT CAN I DO?
• Use what you already have
• Realize you are naturally better than you
think
• Ask your users

20. USE WHAT YOU ALREADY HAVE
• Action Bar
• Fragments
• Widgets
• Holo theme

21. ACTION BAR
Action bars help users navigate, know where they are, and do things.

22. ACTION BAR
3 zones - Where am I? What can I see? What can I do?

23. BROKEN ACTION BAR
Using action bars even subtle wrong is unnecessarily confusing.

24. BROKEN ACTION BAR
Nice app, but be careful breaking the rules.

25. CONTEXTUAL ACTIONS
When a user is doing something specific, the action bar can change.

26. WHAT ARE FRAGMENTS?
Zones that stretch to fill and control one another. Think iframes in web.

27. HOW DO THEY WORK
Fragments control one another.

28. FRAGMENTS
Make sure you show the user what they selected.

29. FRAGMENTS - 3 COLUMN
Can be very custom and only support landscape - if it makes sense.

30. FRAGMENTS - HIDING DRAWER
Simple in landscape, hidden drawer in portrait.

31. FRAGMENTS - SHRINKING COLUMN
Left column stays the same width, right column shrinks.

32. FRAGMENTS - SCROLLING ROWS
All content scales to fit.

33. FRAGMENTS - 3 COLUMN
Collapses to one column in portrait.

34. FRAGMENTS - 1 COLUMN + 2 COLUMNS
Complicated content, requires users attention.

35. NOT FRAGMENTS
Too simple? (not yet optimized for Honeycomb)

36. WIDGETS
Use the grid in your favor.

37. WIDGETS
Widgets, let’s all work together now.

38. MANY SIZES OF WIDGETS
Figure out what the user wants with each size. How do you work with others?

39. MY FAVORITE WIDGET
Simple. Single purpose.

40. HOLO THEME
Holo Light or Dark, which is closer for your brand and use case - night?

41. WHAT CAN I DO?
• Use what you already have
• Realize you are naturally better than you
think
• Ask your users

42. YOU ARE BETTER THAN YOU THINK
• User persona
• Story mapping
• Sketching
• Design Patterns

43. KEEP IT REAL
“20% of Fandango ticket sales came
from mobile apps this summer.”
Business Insider October 18, 2011

44. USER PERSONA
DO
NAME
MOTIVATIONS FEEL
ABOUT
SAY
Who is this person? What are they like? This is users NOT roles.

45. USER PERSONA
Go to movies
DO
Likes to be Transacts on mobile Excited
the movie
about new
buff among Jack
NAME
movies
friends
MOTIVATIONS 21 FEEL
Not enough
ABOUT
Movie in college good movies
fanatic
When did
“There is nothing movies get
SAY so expensive
like seeing a movie
on the big screen”
Use lots of stickies. Shouldn’t take more than 30 mins or so. Verify info.

46. STORY MAPPING
Find a movie Decide when to go Buy tickets
New Releases Locations Confirm time
Search Times Input CC Info
Category Ticket Price
Convenience
Best Rated Favorite theater Remember me
Friends My schedule
Friend matcher
What are the main activities and the sub tasks? Where is the minimum line?

47. SKETCHING
Keep this very high level to start, work on pieces individually. Quantity vs. quality.

48. SIMILAR CONTENT
Movie searching service, different audience.

49. SIMILAR TYPE OF APP
Much busier home screen, ways to browse, see new content.

50. FANDANGO
Search
New Releases

51. FANDANGO
Best Rated
Locations
Times

52. LETS TRY THIS TOGETHER
Going from personas to initial
wireframes in the next 20 mins.

53. Create an app for
____________
User Type
to do
____________.
Action Type

54. 5 MINS
Brainstorm persona as a group.

55. 5 MINS
Sketch by yourself.

56. 5 MINS
Group of 3.
Make a new sketch of best ideas.

57. :-)
That wasn’t so bad, was it?

58. WHAT CAN I DO?
• Use what you already have
• Realize you are naturally better than you
think
• Ask your users

59. ASK YOUR USERS
• Testing goals
• Prototypes
• Guerrilla user testing
• Analytics

60. TESTING GOALS
• What are you trying to learn?
• Optimize for the golden path
• Can ____ do ____?

61. PROTOTYPING
Just because you are a developer doesn’t mean you should waste time coding.

62. GUERRILLA USER TESTING
• Use anyone, but use many
• Have them talk out loud
• Don’t ask for feature input

63. ANALYTICS
• Track feature usage
• Track the path through the features

64. LET’S TRY THIS
Can you learn anything from 10 mins
of testing?

65. 5 MINS
Brainstorm testing goals in your
original group.

66. 5 MINS
Test with another group.
Take notes on what you learned.

67. I THINK I CAN
What did we accomplish
in an hour(ish)?

68. WHAT I HOPE YOU NOW KNOW
• Honeycomb has a solid built-in UI
framework
• Design inspiration can come from anyone
in the right mindset
• Don’t convince me it works, ask a user

69. BUT WAIT, I NEED MORE
• Books
• Pattern sites
• Other resources

70. BOOKS
Stephen Anderson Lukas Mathis Aarron Walter

71. PATTERN SITES
Lovely UI Android Patterns

72. OTHER RESOURCES
• j.mp/gddandroidux - @crafty
• mobile.tutsplus.com
• smashingmagazine.com
• littlebigdetails.com
• bit.ly/androidhig

73. NOW WHAT?
The fate of Android tablets
rests with you.

74. @UXAMANDA ? #TABLETDESIGN
bit.ly/tabletdesign