The Glass Class: Lecture 6 – Interface Guidelines
Feb 17th – 21st 2014
Mark Billinghurst, Gun Lee HIT Lab NZ
University of Canterbury
THE GLASS CLASS
Glass Philosophy
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."
THE GLASS CLASS
As technology becomes more personal and immediate, it can start to disappear.
Distant Intimate
THE GLASS CLASS
Last year Last week Now Forever
The Now machine Focus on location, contextual and timely information, and communication.
Interface Guidelines
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
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
THE GLASS CLASS
Static Cards
THE GLASS CLASS
Special Properties (Mirror API) Paginated
Spread across several cards, Read more
Bundled Group together similar content
THE GLASS CLASS
Live Cards
Access to low level sensor data Don’t remain on timeline
THE GLASS CLASS
Immersions
Take over user experience
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
THE GLASS CLASS
Menus
Way to invoke actions on a card Tap card to show menu
THE GLASS CLASS
Input Voice
Main, Contextual, Free form
Touch Gestures Tap, swipe left/right
Head Gestures Head tracking, look-up, nudge
THE GLASS CLASS
UX Design Patterns Types of UX Patterns
Periodic notifications Ongoing task Immersion
THE GLASS CLASS
Static - Periodic Notifications
THE GLASS CLASS
Some time later..
THE GLASS CLASS
Live Card - Ongoing Task
Long-running cards that users come back to
THE GLASS CLASS
Eg Strava
Inserts live card for current run
THE GLASS CLASS
Immersion – take over timeline
Style Guidelines
THE GLASS CLASS
Style – Card Regions
THE GLASS CLASS
Example Layouts
THE GLASS CLASS
Icons
THE GLASS CLASS
Typography - Roboto
THE GLASS CLASS
Text Resizing
THE GLASS CLASS
Colour
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
THE GLASS CLASS
Lessons Learned from Using Glass
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.
THE GLASS CLASS
THE GLASS CLASS
Reading Some things don’t work
THE GLASS CLASS ImmersionSome things don’t work
THE GLASS CLASS DetailsSome things don’t work
THE GLASS CLASS
The world is the experience
Get the interface and interac;ons out of the way.
THE GLASS CLASS
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.
THE GLASS CLASS
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.
THE GLASS CLASS
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.
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.
THE GLASS CLASS
Our tools are becoming more intimate and immediate. We can craft a future of learning, creative expression and empathy.
Distant Intimate