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