#TABLETDESIGN
WHY AM I HERE?




The fate of Android tablets
      rests with you.
(NOT) TOO BIG TO FAIL
WHY DEVELOPERS?




Android developers love Android, but
have forgotten about everyone else.
WHO IS THIS FOR?




     Developers who recognize
the value of quality design, but don’t
have a design team at their disposal.
WHO ARE YOU?




      Amanda McGlothlin
        @uxamanda

Let’s tweet about #tabletdesign.
STATE OF HONEYCOMB
STATE OF HONEYCOMB




1.8%
COMPARED TO iPad - BEST CASE



                      Microsoft
                         5%



            Android
             30%
                                          Apple iOS
                                            61%




                                                        Strategy Analytics Q2 2011



Apple iOS     Android             Microsoft       RIM         Others
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, hospitals, enterprise

¹Gartner Q1 2011                   ²Pew Project on Excellence in Journalism July 2011
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 the
popularity of Honeycomb tablets?
HARDWARE > SOFTWARE > DESIGN




If apps are the missing killer feature,
     great design is our way in.
TERMINAL != PHOTOSHOP




       INTERACTION DESIGN


                             User Experience



VISUAL 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 BAR




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




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




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




Nice app, but be careful breaking the rules.
CONTEXTUAL ACTIONS




When 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 WORK




Fragments control one another.
FRAGMENTS




Make sure you show the user what they selected.
FRAGMENTS - 3 COLUMN




Can be very custom and only support landscape - if it makes sense.
FRAGMENTS - HIDING DRAWER




Simple in landscape, hidden drawer in portrait.
FRAGMENTS - SHRINKING COLUMN




Left column stays the same width, right column shrinks.
FRAGMENTS - SCROLLING ROWS




All content scales to fit.
FRAGMENTS - 3 COLUMN




Collapses to one column in portrait.
FRAGMENTS - 1 COLUMN + 2 COLUMNS




Complicated content, requires users attention.
NOT FRAGMENTS




Too simple? (not yet optimized for Honeycomb)
WIDGETS




Use the grid in your favor.
WIDGETS




Widgets, let’s all work together now.
MANY SIZES OF WIDGETS




Figure out what the user wants with each size. How do you work with others?
MY FAVORITE WIDGET




Simple. Single purpose.
HOLO THEME




Holo 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 October 18, 2011
USER PERSONA

                                        DO


                                     NAME
     MOTIVATIONS                                              FEEL
                                     ABOUT



                                       SAY


Who is this person? What are they like? This is users NOT roles.
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.
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?
SKETCHING




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




Movie searching service, different audience.
SIMILAR TYPE OF APP




Much busier home screen, ways to browse, see new content.
FANDANGO
               Search




New Releases
FANDANGO




              Best Rated



                       Locations


Times
LETS TRY THIS TOGETHER




 Going from personas to initial
wireframes in the next 20 mins.
Create an app for

 ____________
   User Type



       to do

 ____________.
   Action Type
5 MINS




Brainstorm persona as a group.
5 MINS




Sketch 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 ____?
PROTOTYPING




Just 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 THIS




Can you learn anything from 10 mins
             of testing?
5 MINS




Brainstorm testing goals in your
        original group.
5 MINS




   Test with another group.
Take notes on what you learned.
I THINK I CAN




What 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 right mindset

• Don’t convince me it works, ask a user
BUT WAIT, I NEED MORE




• Books

• Pattern sites

• Other resources
BOOKS




Stephen Anderson    Lukas Mathis   Aarron Walter
PATTERN SITES




Lovely UI                   Android Patterns
OTHER RESOURCES


• j.mp/gddandroidux - @crafty

• mobile.tutsplus.com

• smashingmagazine.com

• littlebigdetails.com

• bit.ly/androidhig
NOW WHAT?




The fate of Android tablets
      rests with you.
@UXAMANDA   ?        #TABLETDESIGN
       bit.ly/tabletdesign

Honeycomb Design For Developers