#TABLETDESIGN
WHY AM I HERE?The fate of Android tablets      rests with you.
(NOT) TOO BIG TO FAIL
WHY DEVELOPERS?Android developers love Android, buthave forgotten about everyone else.
WHO IS THIS FOR?     Developers who recognizethe value of quality design, but don’thave a design team at their disposal.
WHO ARE YOU?      Amanda McGlothlin        @uxamandaLet’s tweet about #tabletdesign.
STATE OF HONEYCOMB
STATE OF HONEYCOMB1.8%
COMPARED TO iPad - BEST CASE                      Microsoft                         5%            Android             30% ...
COMPARED TO iPad - MORE LIKELY        8:1
WHO USES THESE THINGS ANYWAYS?• 11% of American adults now use a  tablet¹• ~50% have college degree, earn > $75k²• Schools...
WHY NOT A DESKTOP?On the Go    Simpler to Use            The Nielsen Company, Q1 Mobile Connected Device Report
WHEN ARE THEY USING THEM?• Instead of a smartphone• Instead of a desktop/laptop• As a second monitor
HOPELESS? How can we help increase thepopularity of Honeycomb tablets?
HARDWARE > SOFTWARE > DESIGNIf apps are the missing killer feature,     great design is our way in.
TERMINAL != PHOTOSHOP       INTERACTION DESIGN                             User ExperienceVISUAL DESIGN        DEVELOPMENT
INTERLUDE
WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you  think• Ask your users
WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you  think• Ask your users
USE WHAT YOU ALREADY HAVE• Action Bar• Fragments• Widgets• Holo theme
ACTION BARAction bars help users navigate, know where they are, and do things.
ACTION BAR3 zones - Where am I? What can I see? What can I do?
BROKEN ACTION BARUsing action bars even subtle wrong is unnecessarily confusing.
BROKEN ACTION BARNice app, but be careful breaking the rules.
CONTEXTUAL ACTIONSWhen a user is doing something specific, the action bar can change.
WHAT ARE FRAGMENTS?Zones that stretch to fill and control one another. Think iframes in web.
HOW DO THEY WORKFragments control one another.
FRAGMENTSMake sure you show the user what they selected.
FRAGMENTS - 3 COLUMNCan be very custom and only support landscape - if it makes sense.
FRAGMENTS - HIDING DRAWERSimple in landscape, hidden drawer in portrait.
FRAGMENTS - SHRINKING COLUMNLeft column stays the same width, right column shrinks.
FRAGMENTS - SCROLLING ROWSAll content scales to fit.
FRAGMENTS - 3 COLUMNCollapses to one column in portrait.
FRAGMENTS - 1 COLUMN + 2 COLUMNSComplicated content, requires users attention.
NOT FRAGMENTSToo simple? (not yet optimized for Honeycomb)
WIDGETSUse the grid in your favor.
WIDGETSWidgets, let’s all work together now.
MANY SIZES OF WIDGETSFigure out what the user wants with each size. How do you work with others?
MY FAVORITE WIDGETSimple. Single purpose.
HOLO THEMEHolo Light or Dark, which is closer for your brand and use case - night?
WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you  think• Ask your users
YOU ARE BETTER THAN YOU THINK• User persona• Story mapping• Sketching• Design Patterns
KEEP IT REAL“20% of Fandango ticket sales came  from mobile apps this summer.”                           Business Insider ...
USER PERSONA                                        DO                                     NAME     MOTIVATIONS           ...
USER PERSONA                          Go to movies                                  DO  Likes to be             Transacts ...
STORY MAPPING   Find a movie             Decide when to go            Buy tickets   New Releases             Locations    ...
SKETCHINGKeep this very high level to start, work on pieces individually. Quantity vs. quality.
SIMILAR CONTENTMovie searching service, different audience.
SIMILAR TYPE OF APPMuch busier home screen, ways to browse, see new content.
FANDANGO               SearchNew Releases
FANDANGO              Best Rated                       LocationsTimes
LETS TRY THIS TOGETHER Going from personas to initialwireframes in the next 20 mins.
Create an app for ____________   User Type       to do ____________.   Action Type
5 MINSBrainstorm persona as a group.
5 MINSSketch by yourself.
5 MINS         Group of 3.Make a new sketch of best ideas.
:-)That wasn’t so bad, was it?
WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you  think• Ask your users
ASK YOUR USERS• Testing goals• Prototypes• Guerrilla user testing• Analytics
TESTING GOALS• What are you trying to learn?• Optimize for the golden path• Can ____ do ____?
PROTOTYPINGJust because you are a developer doesn’t mean you should waste time coding.
GUERRILLA USER TESTING• Use anyone, but use many• Have them talk out loud• Don’t ask for feature input
ANALYTICS• Track feature usage• Track the path through the features
LET’S TRY THISCan you learn anything from 10 mins             of testing?
5 MINSBrainstorm testing goals in your        original group.
5 MINS   Test with another group.Take notes on what you learned.
I THINK I CANWhat did we accomplish   in an hour(ish)?
WHAT I HOPE YOU NOW KNOW• Honeycomb has a solid built-in UI  framework• Design inspiration can come from anyone  in the ri...
BUT WAIT, I NEED MORE• Books• Pattern sites• Other resources
BOOKSStephen Anderson    Lukas Mathis   Aarron Walter
PATTERN SITESLovely UI                   Android Patterns
OTHER RESOURCES• j.mp/gddandroidux - @crafty• mobile.tutsplus.com• smashingmagazine.com• littlebigdetails.com• bit.ly/andr...
NOW WHAT?The fate of Android tablets      rests with you.
@UXAMANDA   ?        #TABLETDESIGN       bit.ly/tabletdesign
Upcoming SlideShare
Loading in …5
×

Honeycomb Design For Developers

2,779 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,779
On SlideShare
0
From Embeds
0
Number of Embeds
631
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Honeycomb Design For Developers

  1. 1. #TABLETDESIGN
  2. 2. WHY AM I HERE?The fate of Android tablets rests with you.
  3. 3. (NOT) TOO BIG TO FAIL
  4. 4. WHY DEVELOPERS?Android developers love Android, buthave forgotten about everyone else.
  5. 5. WHO IS THIS FOR? Developers who recognizethe value of quality design, but don’thave a design team at their disposal.
  6. 6. WHO ARE YOU? Amanda McGlothlin @uxamandaLet’s tweet about #tabletdesign.
  7. 7. STATE OF HONEYCOMB
  8. 8. STATE OF HONEYCOMB1.8%
  9. 9. COMPARED TO iPad - BEST CASE Microsoft 5% Android 30% Apple iOS 61% Strategy Analytics Q2 2011Apple iOS Android Microsoft RIM Others
  10. 10. COMPARED TO iPad - MORE LIKELY 8:1
  11. 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. 12. WHY NOT A DESKTOP?On the Go Simpler to Use The Nielsen Company, Q1 Mobile Connected Device Report
  13. 13. WHEN ARE THEY USING THEM?• Instead of a smartphone• Instead of a desktop/laptop• As a second monitor
  14. 14. HOPELESS? How can we help increase thepopularity of Honeycomb tablets?
  15. 15. HARDWARE > SOFTWARE > DESIGNIf apps are the missing killer feature, great design is our way in.
  16. 16. TERMINAL != PHOTOSHOP INTERACTION DESIGN User ExperienceVISUAL DESIGN DEVELOPMENT
  17. 17. INTERLUDE
  18. 18. WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you think• Ask your users
  19. 19. WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you think• Ask your users
  20. 20. USE WHAT YOU ALREADY HAVE• Action Bar• Fragments• Widgets• Holo theme
  21. 21. ACTION BARAction bars help users navigate, know where they are, and do things.
  22. 22. ACTION BAR3 zones - Where am I? What can I see? What can I do?
  23. 23. BROKEN ACTION BARUsing action bars even subtle wrong is unnecessarily confusing.
  24. 24. BROKEN ACTION BARNice app, but be careful breaking the rules.
  25. 25. CONTEXTUAL ACTIONSWhen a user is doing something specific, the action bar can change.
  26. 26. WHAT ARE FRAGMENTS?Zones that stretch to fill and control one another. Think iframes in web.
  27. 27. HOW DO THEY WORKFragments control one another.
  28. 28. FRAGMENTSMake sure you show the user what they selected.
  29. 29. FRAGMENTS - 3 COLUMNCan be very custom and only support landscape - if it makes sense.
  30. 30. FRAGMENTS - HIDING DRAWERSimple in landscape, hidden drawer in portrait.
  31. 31. FRAGMENTS - SHRINKING COLUMNLeft column stays the same width, right column shrinks.
  32. 32. FRAGMENTS - SCROLLING ROWSAll content scales to fit.
  33. 33. FRAGMENTS - 3 COLUMNCollapses to one column in portrait.
  34. 34. FRAGMENTS - 1 COLUMN + 2 COLUMNSComplicated content, requires users attention.
  35. 35. NOT FRAGMENTSToo simple? (not yet optimized for Honeycomb)
  36. 36. WIDGETSUse the grid in your favor.
  37. 37. WIDGETSWidgets, let’s all work together now.
  38. 38. MANY SIZES OF WIDGETSFigure out what the user wants with each size. How do you work with others?
  39. 39. MY FAVORITE WIDGETSimple. Single purpose.
  40. 40. HOLO THEMEHolo Light or Dark, which is closer for your brand and use case - night?
  41. 41. WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you think• Ask your users
  42. 42. YOU ARE BETTER THAN YOU THINK• User persona• Story mapping• Sketching• Design Patterns
  43. 43. KEEP IT REAL“20% of Fandango ticket sales came from mobile apps this summer.” Business Insider October 18, 2011
  44. 44. USER PERSONA DO NAME MOTIVATIONS FEEL ABOUT SAYWho is this person? What are they like? This is users NOT roles.
  45. 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. 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 matcherWhat are the main activities and the sub tasks? Where is the minimum line?
  47. 47. SKETCHINGKeep this very high level to start, work on pieces individually. Quantity vs. quality.
  48. 48. SIMILAR CONTENTMovie searching service, different audience.
  49. 49. SIMILAR TYPE OF APPMuch busier home screen, ways to browse, see new content.
  50. 50. FANDANGO SearchNew Releases
  51. 51. FANDANGO Best Rated LocationsTimes
  52. 52. LETS TRY THIS TOGETHER Going from personas to initialwireframes in the next 20 mins.
  53. 53. Create an app for ____________ User Type to do ____________. Action Type
  54. 54. 5 MINSBrainstorm persona as a group.
  55. 55. 5 MINSSketch by yourself.
  56. 56. 5 MINS Group of 3.Make a new sketch of best ideas.
  57. 57. :-)That wasn’t so bad, was it?
  58. 58. WHAT CAN I DO?• Use what you already have• Realize you are naturally better than you think• Ask your users
  59. 59. ASK YOUR USERS• Testing goals• Prototypes• Guerrilla user testing• Analytics
  60. 60. TESTING GOALS• What are you trying to learn?• Optimize for the golden path• Can ____ do ____?
  61. 61. PROTOTYPINGJust because you are a developer doesn’t mean you should waste time coding.
  62. 62. GUERRILLA USER TESTING• Use anyone, but use many• Have them talk out loud• Don’t ask for feature input
  63. 63. ANALYTICS• Track feature usage• Track the path through the features
  64. 64. LET’S TRY THISCan you learn anything from 10 mins of testing?
  65. 65. 5 MINSBrainstorm testing goals in your original group.
  66. 66. 5 MINS Test with another group.Take notes on what you learned.
  67. 67. I THINK I CANWhat did we accomplish in an hour(ish)?
  68. 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. 69. BUT WAIT, I NEED MORE• Books• Pattern sites• Other resources
  70. 70. BOOKSStephen Anderson Lukas Mathis Aarron Walter
  71. 71. PATTERN SITESLovely UI Android Patterns
  72. 72. OTHER RESOURCES• j.mp/gddandroidux - @crafty• mobile.tutsplus.com• smashingmagazine.com• littlebigdetails.com• bit.ly/androidhig
  73. 73. NOW WHAT?The fate of Android tablets rests with you.
  74. 74. @UXAMANDA ? #TABLETDESIGN bit.ly/tabletdesign

×