#TABLETDESIGN

The fate of Android tablets rests with you.

WHY AM I HERE?

(NOT) TOO BIG TO FAIL

Android developers love Android, but have forgotten about everyone else.

WHY DEVELOPERS?

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

WHO IS THIS FOR?

Amanda McGlothlin@uxamanda

Let’s tweet about #tabletdesign.

WHO ARE YOU?

STATE OF HONEYCOMB

STATE OF HONEYCOMB

1.8%

COMPARED TO iPad - BEST CASE

Microsoft5%

Android30%

Apple iOS61%

Apple iOS Android Microsoft RIM Others

Strategy Analytics Q2 2011

COMPARED TO iPad - MORE LIKELY

8:1

• 11% of American adults now use a tablet¹

• ~50% have college degree, earn > $75k²

• Schools, hospitals, enterprise

WHO USES THESE THINGS ANYWAYS?

²Pew Project on Excellence in Journalism July 2011¹Gartner Q1 2011

WHY NOT A DESKTOP?

The Nielsen Company, Q1 Mobile Connected Device Report

On the Go

Simpler to Use

• Instead of a smartphone

• Instead of a desktop/laptop

• As a second monitor

WHEN ARE THEY USING THEM?

How can we help increase the popularity of Honeycomb tablets?

HOPELESS?

HARDWARE > SOFTWARE > DESIGN

If apps are the missing killer feature, great design is our way in.

TERMINAL != PHOTOSHOP

VISUAL DESIGN

INTERACTION DESIGN

DEVELOPMENT

User Experience

INTERLUDE

• 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

WHAT CAN I DO?

• Action Bar

• Fragments

• Widgets

• Holo theme

USE WHAT YOU ALREADY HAVE

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?

ACTION BAR

Using action bars even subtle wrong is unnecessarily confusing.

BROKEN ACTION BAR

Nice app, but be careful breaking the rules.

BROKEN ACTION BAR

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

CONTEXTUAL ACTIONS

Zones that stretch to fill and control one another. Think iframes in web.

WHAT ARE FRAGMENTS?

Fragments control one another.

HOW DO THEY WORK

Make sure you show the user what they selected.

FRAGMENTS

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

FRAGMENTS - 3 COLUMN

Simple in landscape, hidden drawer in portrait.

FRAGMENTS - HIDING DRAWER

Left column stays the same width, right column shrinks.

FRAGMENTS - SHRINKING COLUMN

All content scales to fit.

FRAGMENTS - SCROLLING ROWS

Collapses to one column in portrait.

FRAGMENTS - 3 COLUMN

Complicated content, requires users attention.

FRAGMENTS - 1 COLUMN + 2 COLUMNS

Too simple? (not yet optimized for Honeycomb)

NOT FRAGMENTS

Use the grid in your favor.

WIDGETS

Widgets, let’s all work together now.

WIDGETS

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

MANY SIZES OF WIDGETS

Simple. Single purpose.

MY FAVORITE WIDGET

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

HOLO THEME

• Use what you already have

• Realize you are naturally better than you think

• Ask your users

WHAT CAN I DO?

• User persona

• Story mapping

• Sketching

• Design Patterns

YOU ARE BETTER THAN YOU THINK

KEEP IT REAL

“20% of Fandango ticket sales came from mobile apps this summer.”

Business Insider October 18, 2011

Who is this person? What are they like? This is users NOT roles.

USER PERSONA

DO

NAME

ABOUTFEELMOTIVATIONS

SAY

DO

NAME

ABOUTFEELMOTIVATIONS

SAY

Use lots of stickies. Shouldn’t take more than 30 mins or so. Verify info.

USER PERSONA

Go to moviesTransacts on mobile Excited

about new movies

Not enough good movies

Jack

Likes to be the movie buff among friends

“There is nothing like seeing a movie on the big screen”

Movie fanatic

21in college

When did movies get so expensive

What are the main activities and the sub tasks? Where is the minimum line?

STORY MAPPING

Find a movie Decide when to go Buy tickets

New Releases

Best Rated

Search

Category

Friends

Favorite theaterMy scheduleFriend matcher

Locations

Times

Ticket Price

Convenience

Confirm time

Input CC Info

Remember me

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

SKETCHING

Movie searching service, different audience.

SIMILAR CONTENT

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

SIMILAR TYPE OF APP

FANDANGOSearch

New Releases

FANDANGO

Locations

Best Rated

Times

Going from personas to initial wireframes in the next 20 mins.

LETS TRY THIS TOGETHER

Create an app for

____________

to do

____________.

User Type

Action Type

Brainstorm persona as a group.

5 MINS

Sketch by yourself.

5 MINS

Group of 3.Make a new sketch of best ideas.

5 MINS

That wasn’t so bad, was it?

:-)

• Use what you already have

• Realize you are naturally better than you think

• Ask your users

WHAT CAN I DO?

• Testing goals

• Prototypes

• Guerrilla user testing

• Analytics

ASK YOUR USERS

• What are you trying to learn?

• Optimize for the golden path

• Can ____ do ____?

TESTING GOALS

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

PROTOTYPING

• Use anyone, but use many

• Have them talk out loud

• Don’t ask for feature input

GUERRILLA USER TESTING

• Track feature usage

• Track the path through the features

ANALYTICS

Can you learn anything from 10 mins of testing?

LET’S TRY THIS

Brainstorm testing goals in your original group.

5 MINS

Test with another group. Take notes on what you learned.

5 MINS

What did we accomplishin an hour(ish)?

I THINK I CAN

• 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

WHAT I HOPE YOU NOW KNOW

• Books

• Pattern sites

• Other resources

BUT WAIT, I NEED MORE

BOOKS

Stephen Anderson Lukas Mathis Aarron Walter

PATTERN SITES

Lovely UI Android Patterns

• j.mp/gddandroidux - @crafty

• mobile.tutsplus.com

• smashingmagazine.com

• littlebigdetails.com

• bit.ly/androidhig

OTHER RESOURCES

NOW WHAT?

The fate of Android tablets rests with you.

?bit.ly/tabletdesign

#TABLETDESIGN@UXAMANDA