The Glass Class Lecture 6: Interface Guidelines

1,212 views

Published on

Lecture 6 in the Glass Class, taught by Mark Billinghurst on February 20th 2014. This lecture provides interface design guidelines for devel

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,212
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
81
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The Glass Class Lecture 6: Interface Guidelines

  1. 1. The Glass Class: Lecture 6 – Interface Guidelines Feb 17th – 21st 2014 Mark Billinghurst, Gun Lee HIT Lab NZ University of Canterbury
  2. 2. THE GLASS CLASS Glass Philosophy
  3. 3. THE GLASS CLASS "Computing should just be more comfortable" "Google should do the hard work, and you should have a chance to live, have a good life, and get on with it."
  4. 4. THE GLASS CLASS As technology becomes more personal and immediate, it can start to disappear. Distant Intimate
  5. 5. THE GLASS CLASS Last year Last week NowForever The Now machine Focus on location, contextual and timely information, and communication.
  6. 6. Interface Guidelines
  7. 7. THE GLASS CLASS The Timeline   Controls most of the User Experience   Standard way to present static/live cards   System wide voice commands   Way to launch Glassware applications
  8. 8. THE GLASS CLASS Types of Cards   Static Cards   Text, HTML, images, video   Live Cards   Important now, rendered at high frequency   Access to low level sensor data, run in timeline   Immersion   Android activities taking over timeline
  9. 9. THE GLASS CLASS Static Cards
  10. 10. THE GLASS CLASS Special Properties (Mirror API)   Paginated   Spread across several cards, Read more   Bundled   Group together similar content
  11. 11. THE GLASS CLASS Live Cards   Access to low level sensor data   Don’t remain on timeline
  12. 12. THE GLASS CLASS Immersions   Take over user experience
  13. 13. THE GLASS CLASS When to Use   Static   Periodic notifications   Live Cards   Ongoing tasks that user jumps in and out of   Immersions   Need full control over user experience
  14. 14. THE GLASS CLASS Menus   Way to invoke actions on a card   Tap card to show menu
  15. 15. THE GLASS CLASS Input   Voice   Main, Contextual, Free form   Touch Gestures   Tap, swipe left/right   Head Gestures   Head tracking, look-up, nudge
  16. 16. THE GLASS CLASS UX Design Patterns   Types of UX Patterns   Periodic notifications   Ongoing task   Immersion
  17. 17. THE GLASS CLASS Static - Periodic Notifications
  18. 18. THE GLASS CLASS Some time later..
  19. 19. THE GLASS CLASS Live Card - Ongoing Task   Long-running cards that users come back to
  20. 20. THE GLASS CLASS Eg Strava   Inserts live card for current run
  21. 21. THE GLASS CLASS Immersion – take over timeline
  22. 22. Style Guidelines
  23. 23. THE GLASS CLASS Style – Card Regions
  24. 24. THE GLASS CLASS Example Layouts
  25. 25. THE GLASS CLASS Icons
  26. 26. THE GLASS CLASS Typography - Roboto
  27. 27. THE GLASS CLASS Text Resizing
  28. 28. THE GLASS CLASS Colour
  29. 29. THE GLASS CLASS Best Practices   Don’t use pinned timeline item as launcher   Follow standard card design   Don’t use Mirror API for immediate interactivity   Follow standard menu design   Create content appropriately   Bundle and paginate appropriately
  30. 30. THE GLASS CLASS Lessons Learned from Using Glass
  31. 31. THE GLASS CLASS Transparent  displays  are  tricky    Colors  are  funny  and  inconsistent.    You  can  only  add  light  to  a  scene,  not  cover  anything  up.    Mo;on  can  be  disorien;ng.   Clarity,  contrast,  brightness,  visual  field  and  a>en;on  are  important.  
  32. 32. THE GLASS CLASS
  33. 33. THE GLASS CLASS Reading   Some  things  don’t  work  
  34. 34. THE GLASS CLASS ImmersionSome  things  don’t  work  
  35. 35. THE GLASS CLASS DetailsSome  things  don’t  work  
  36. 36. THE GLASS CLASS The  world  is  the  experience   Get  the  interface  and  interac;ons  out  of  the  way.  
  37. 37. THE GLASS CLASS
  38. 38. THE GLASS CLASS Micro   Interac;ons   The  posi;on  of  the  display  and   limited  input  ability  makes   longer  interac;ons  less   comfortable.   Using  it  shouldn’t  take  longer   than  taking  out  your  phone.  
  39. 39. THE GLASS CLASS
  40. 40. THE GLASS CLASS It's  like  a  rear  view  mirror     Don't  overload  the  user.  S;ck  to  the   absolutely  essen;al,  avoid  long   interac;ons.  Be  explicit.      
  41. 41. THE GLASS CLASS
  42. 42. THE GLASS CLASS As personal as it gets Glass  is  the  most  personal  device  you   own.  It  should  recognize and adapt to you… not the other way around.
  43. 43. THE GLASS CLASS For  the  closest  people   and  most  important   moments     Glass  should  be  for  priori;zing  your   closest  people  and  crea;ng  value   for  the  whole  group,  not  just  the   wearer.          
  44. 44. THE GLASS CLASS Our tools are becoming more intimate and immediate. We can craft a future of learning, creative expression and empathy. Distant Intimate

×