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