Honeycomb UI Patterns Nick Butcher Android  Developer Advocate  @crafty
Optimised for  tablet
Optimised for  tablet portable
Optimised for  tablet portable consumption
Optimised for  tablet portable personal consumption
Optimised for  tablet portable personal focused consumption
Optimised for  tablet portable personal fun focused consumption
Holographic  UI <ul><ul><li>Clean </li></ul></ul><ul><ul><li>Content  focused </li></ul></ul><ul><ul><li>3d elements </li>...
Activity   Fragments Activity Fragment
Action Bar Consistent  application   status  and  control
Action Bar Consistent  application   status  and  control
Action Bar Consistent  application   status  and  control Icon / Logo
Action Bar Consistent  application   status  and  control Icon / Logo Navigation
Action Bar Consistent  application   status  and  control Icon / Logo Navigation Actions
Action Bar Icon   types Icon
Action Bar Icon   types Icon Icon + Up
Action Bar Icon   types Icon Logo Icon + Up
Action Bar Navigation   types Label
Action Bar Navigation   types Label Drop down
Action Bar Navigation   types Label Tabs Drop down
Action Bar Actions <ul><ul><li>Icon & or Text / Custom View </li></ul></ul><ul><ul><li>Overflow </li></ul></ul><ul><ul><li...
Action Bar Contextual   Actions <ul><ul><li>Triggered by selection </li></ul></ul><ul><ul><li>Show / change selection </li...
System  Bar System  wide  navigation  &  status <ul><ul><li>Orientation agnostic </li></ul></ul><ul><ul><li>Can never dism...
System  Bar System  wide  navigation  &  status <ul><ul><li>Orientation agnostic </li></ul></ul><ul><ul><li>Can never dism...
Notifications <ul><ul><li>Unobtrusive  notifications </li></ul></ul><ul><ul><li>Dismiss individually </li></ul></ul><ul><u...
Notifications <ul><ul><li>Large icon </li></ul></ul><ul><ul><li>Custom  layout & ticker text </li></ul></ul><ul><ul><li>Ac...
New Homescreen Widgets <ul><ul><li>Lists </li></ul></ul><ul><ul><li>Grids </li></ul></ul><ul><ul><li>Stacks </li></ul></ul>
New Animation Framework <ul><ul><li>Property  based animations </li></ul></ul>
Multi Touch <ul><ul><li>10  pointers </li></ul></ul><ul><ul><li>Gestures </li></ul></ul>
Orientation <ul><ul><li>Landscape  default </li></ul></ul><ul><ul><li>Provide  portrait   layout </li></ul></ul><ul><ul><l...
Orientation  Strategies <ul><ul><li>a  must support narrow portrait view </li></ul></ul>Stretch  Columns
Orientation  Strategies <ul><ul><li>Up  icon  navigates  back to  a </li></ul></ul>Show / hide  Columns
Orientation  Strategies <ul><ul><li>a  must support  collapsed  view </li></ul></ul><ul><ul><li>Arrow  toggle </li></ul></...
Orientation  Strategies <ul><ul><li>b  &  c   stack  horizontally </li></ul></ul><ul><ul><li>Not  in a list </li></ul></ul...
Drag  &  Drop <ul><ul><li>Visual indication of  grab </li></ul></ul><ul><ul><li>Visual   indication of  drop  targets </li...
Other  great  resources http://j.mp/ androiddesigntips  http://j.mp/ gddandroidux http://j.mp/ androiduiutils  http://j.mp...
Other  great  resources http://j.mp/ android design tips   http://j.mp/ gddandroidux http://j.mp/ androiduiutils  http://j...
Other  great  resources http://j.mp/ android design tips   http://j.mp/ gdd android ux http://j.mp/ androiduiutils  http:/...
Other  great  resources http://j.mp/ android design tips   http://j.mp/ gdd android ux http://j.mp/ android ui utils   htt...
Other  great  resources http://j.mp/ android design tips   http://j.mp/ gdd android ux http://j.mp/ android ui utils   htt...
http://www.youtube.com/watch?v=fqFpq9WXbJo&hd=1
Honeycomb UI Patterns Nick Butcher Android  Developer Advocate  @crafty
Upcoming SlideShare
Loading in...5
×

Honeycomb UI Patterns

1,072

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,072
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • ...but doesn&apos;t go everywhere. Mostly used around the house Fits somewhere between phone &amp; laptop
  • Excellent for consuming content - (long form) reading / browsing - photos - video Not going to write a novel: - Phone = sentances - Laptop = pages -&gt; Tablet = paragraphs
  • Might hand to someone else, but experience is deeply personal.  My data, my login...
  • One primary task at a time Common actions immediately visible
  • Not a work laptop replacement Primarily used at home in the evenings Large real estate gives ample opportunity for delightful interactions
  • Not much chrome around controls Demo: - Create calendar appointment - Books - YouTube homescreen
  • Allows multi-pane experience - Avoid excessively long spans Can dynamically add / replace Fragments can interact
  • Highly encouraged to use this - We are training uses that this is where you go to nav / perform action Can completely customise / remove as appropriate
  • Your application&apos;s Icon
  • Navigation affordance Similar to masthead on web
  • More branded experience
  • Give sense of place
  • For navigation between siblings in view hierarchy Can also mention can use for filtering / have multiple drop downs e.g. gallery
  • Must be unambiguous what the action will act upon e.g. if an &apos;edit&apos; action could apply to more than one fragment then the action should be within the fragment
  • Consistent way of acting upon selections
  • Goes back to the sharable/fun principles: you pass it around and it just follows you
  • For immersive content - does not distract / draw attention
  • Builds on phone notifications but more consistent with the platform Incoming notifications appear then fade Invoked from clock Stack up
  • Gives ability to quickly interact with new info / ongoing tasks Demo:  - Music
  • Demo  - Adding widget to homescreen - Gmail &amp; Calender list widgets - Bookmarks grid - YouTube, Books stacks    - News apps love this kind of widget for showing headlines
  • Gives the ability to animate ANYTHING Subtle animations can help make the UX more immersive New View properties to work with animations Can define custom evaluators to control how animated values are applied Demo:  - Romain&apos;s photo viewer - My fragment animation demo
  • Not new... but larger screen gives greater opportunity for use e.g. multiplayer games Gesturaly language is still emerging.  Pinch &amp; rotate are well established.  Maps introduced tilt.   What else will emerge as standards?
  • So annoying when a legacy app is locked to portrait!! Apps using tilt sensors need to work with Landscape default devices Ideally provide optimized layouts for both orientations - Fragments are you friend :)
  • e.g. gmail labels &amp; message list view
  • e.g. gmail message detail view Useful as a signal that rotating means user wants to concentrate on content (e.g. long form reading). MUST provide a way to bring pane a back - i.e. the up arrow.  Don&apos;t force users to rotate back to reclaim.
  • e.g. gtalk Works well when list a has strong iconography - e.g. News sections Arrow at top of collapsed pane a expands to show fill details, and allows re-collapsing.
  • e.g. YouTube video detail 
  • Grab indications: - change opacity - jump up 20dp Recede: - Labels in gmail grey out Destructive: - e.g. hightlight the grabbed item in red Demo: - Gmail moving message - Remove widget from homescreen
  • Mostly for designers not familiar with Android basics
  • Great design tips and covers Android basics such ae: - Resource framework - RelativeLayout - 9 Patches - State list drawables - Layer drawables - Dashboard + Action Bar pattern
  • Roman&apos;s awesome talk on wider Android UX
  • Prototyping tools
  • Make pixel perfect icons ;)
  • Just because it&apos;s cool... Also speaks to the opportunity out there... look at the change when Droid is launched.  This is the point that tablets are at now.
  • kthnxbai
  • Honeycomb UI Patterns

    1. 1. Honeycomb UI Patterns Nick Butcher Android Developer Advocate  @crafty
    2. 2. Optimised for tablet
    3. 3. Optimised for tablet portable
    4. 4. Optimised for tablet portable consumption
    5. 5. Optimised for tablet portable personal consumption
    6. 6. Optimised for tablet portable personal focused consumption
    7. 7. Optimised for tablet portable personal fun focused consumption
    8. 8. Holographic  UI <ul><ul><li>Clean </li></ul></ul><ul><ul><li>Content focused </li></ul></ul><ul><ul><li>3d elements </li></ul></ul>
    9. 9. Activity   Fragments Activity Fragment
    10. 10. Action Bar Consistent application status and control
    11. 11. Action Bar Consistent application status and control
    12. 12. Action Bar Consistent application status and control Icon / Logo
    13. 13. Action Bar Consistent application status and control Icon / Logo Navigation
    14. 14. Action Bar Consistent application status and control Icon / Logo Navigation Actions
    15. 15. Action Bar Icon   types Icon
    16. 16. Action Bar Icon   types Icon Icon + Up
    17. 17. Action Bar Icon   types Icon Logo Icon + Up
    18. 18. Action Bar Navigation   types Label
    19. 19. Action Bar Navigation   types Label Drop down
    20. 20. Action Bar Navigation   types Label Tabs Drop down
    21. 21. Action Bar Actions <ul><ul><li>Icon & or Text / Custom View </li></ul></ul><ul><ul><li>Overflow </li></ul></ul><ul><ul><li>Unambiguous </li></ul></ul><ul><ul><li>Clear primary action? </li></ul></ul><ul><ul><ul><li>Left: Icon + Text </li></ul></ul></ul>
    22. 22. Action Bar Contextual Actions <ul><ul><li>Triggered by selection </li></ul></ul><ul><ul><li>Show / change selection </li></ul></ul>
    23. 23. System Bar System  wide  navigation & status <ul><ul><li>Orientation agnostic </li></ul></ul><ul><ul><li>Can never dismiss </li></ul></ul>
    24. 24. System Bar System  wide  navigation & status <ul><ul><li>Orientation agnostic </li></ul></ul><ul><ul><li>Can never dismiss... turn the lights down </li></ul></ul>
    25. 25. Notifications <ul><ul><li>Unobtrusive notifications </li></ul></ul><ul><ul><li>Dismiss individually </li></ul></ul><ul><ul><li>Ongoing </li></ul></ul>
    26. 26. Notifications <ul><ul><li>Large icon </li></ul></ul><ul><ul><li>Custom layout & ticker text </li></ul></ul><ul><ul><li>Actionable  buttons </li></ul></ul>
    27. 27. New Homescreen Widgets <ul><ul><li>Lists </li></ul></ul><ul><ul><li>Grids </li></ul></ul><ul><ul><li>Stacks </li></ul></ul>
    28. 28. New Animation Framework <ul><ul><li>Property  based animations </li></ul></ul>
    29. 29. Multi Touch <ul><ul><li>10  pointers </li></ul></ul><ul><ul><li>Gestures </li></ul></ul>
    30. 30. Orientation <ul><ul><li>Landscape default </li></ul></ul><ul><ul><li>Provide portrait layout </li></ul></ul><ul><ul><li>Use fragments </li></ul></ul>
    31. 31. Orientation Strategies <ul><ul><li>a  must support narrow portrait view </li></ul></ul>Stretch Columns
    32. 32. Orientation Strategies <ul><ul><li>Up  icon navigates back to  a </li></ul></ul>Show / hide Columns
    33. 33. Orientation Strategies <ul><ul><li>a  must support collapsed view </li></ul></ul><ul><ul><li>Arrow toggle </li></ul></ul>Expand / Collapse Columns
    34. 34. Orientation Strategies <ul><ul><li>b & c stack horizontally </li></ul></ul><ul><ul><li>Not in a list </li></ul></ul>Stack Columns
    35. 35. Drag & Drop <ul><ul><li>Visual indication of grab </li></ul></ul><ul><ul><li>Visual indication of drop targets </li></ul></ul><ul><ul><li>Non-targets recede </li></ul></ul><ul><ul><li>Highlight destructive operations </li></ul></ul>
    36. 36. Other great resources http://j.mp/ androiddesigntips  http://j.mp/ gddandroidux http://j.mp/ androiduiutils  http://j.mp/ androidassetstudio
    37. 37. Other great resources http://j.mp/ android design tips   http://j.mp/ gddandroidux http://j.mp/ androiduiutils  http://j.mp/ androidassetstudio
    38. 38. Other great resources http://j.mp/ android design tips   http://j.mp/ gdd android ux http://j.mp/ androiduiutils  http://j.mp/ androidassetstudio
    39. 39. Other great resources http://j.mp/ android design tips   http://j.mp/ gdd android ux http://j.mp/ android ui utils   http://j.mp/ androidassetstudio
    40. 40. Other great resources http://j.mp/ android design tips   http://j.mp/ gdd android ux http://j.mp/ android ui utils   http://j.mp/ android asset studio
    41. 41. http://www.youtube.com/watch?v=fqFpq9WXbJo&hd=1
    42. 42. Honeycomb UI Patterns Nick Butcher Android Developer Advocate  @crafty
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×