honeycomb design for developers
Post on 03-Sep-2014
2.681 Views
Preview:
DESCRIPTION
TRANSCRIPT
#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
top related