Honeycomb Design For Developers

#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% Apple iOS 61% Strategy Analytics Q2 2011Apple 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 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

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 speciﬁc, the action bar can change.

WHAT ARE FRAGMENTS?Zones that stretch to ﬁll 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 ﬁt.

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?

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 SAYWho 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 buﬀ 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 Conﬁrm 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?

SKETCHINGKeep this very high level to start, work on pieces individually. Quantity vs. quality.

SIMILAR CONTENTMovie searching service, diﬀerent 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?

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 right mindset• Don’t convince me it works, ask a user

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/androidhig

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

@UXAMANDA ? #TABLETDESIGN bit.ly/tabletdesign

http://www.mutualmobile.com	441
http://feeds.feedburner.com	61
http://development.mutualmobile.com	30
http://staging.mutualmobile.com	2

Honeycomb Design For Developers

by Mutual Mobile on Nov 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 534

Statistics

Honeycomb Design For Developers — Presentation Transcript