The Glass Class - Designing Wearable Interfaces

ALOK CHANDEL: Hello, my name is Alok Chandel. I'm a user experience designer on Project Glass. Today, we'll be talking about how to create some great experiences on Glass. We'll look at what are the great experiences on Glass, and then, how do you go about creating some of those? Let's get right to it. What are the experiences which feel right at home on Glass? Keep the user in the moment. As a user of Glass, if I'm walking down a bridge, I have a question, I ask, get answered instantly. What's important on Glass is that you allow the user to stay in the physical world, while still taking these short, small dips in the digital world and continue through rest of their day. Voice first. Now, this is really important. Because unlike other devices where voice may be just one of the ways the user interact with it, on Glass, voice is critical. It is also fast and a natural way to interact. As a Glassware developer, you will have an opportunity to provide some voice commands. When you are doing such a thing, think about what are the actions your users are going to take to invoke your Glassware. Something like "OK, Glass, take a picture," is a great command. "OK, Glass, start a camera," not so much. Just like any other wearable device, speed truly matters. If you can deliver amazing experiences in less than five seconds, they're just going to become perfect. If you have a feature-rich mobile or web application, think about what are the specific nuggets of amazing experiences you can provide on Glass. And then you can use voice or one tap actions for users to access those. If you can reduce the amount of time between an intent that the user has and the action they need to take to fulfill that intent, you will be able to create brilliant Glasswares. Keep things relevant. Now, on Glass, you want to deliver experiences which are relevant right down to the moment user is interacting with them. If I have a Glassware which lists all of my shopping list, and I walk into a grocery store, show me only the part of the shopping list which I can purchase in the grocery store. Something which I'm going to order online just doesn't belong on Glass at that moment. Understand the context, like a location, time of day, day of the week, even my personal preferences. Combine all of these to create some amazing experiences. The display of the Glass sits so close to the user's eyes that you have a unique opportunity to create Glassware which orient to the view that the user is having of the world. Now, it's important, that when you're creating these experiences, that you update the view the moment user is turning their head. Now, that's how you create good experiences. What makes these experiences even better are if you can use either voice or head gestures to free up the hands, so that the users can interact with the world around them. Let's summarize what are the experiences which work great on Glass. Those who keep the user in the moment. Those who use voice for quick and natural interactions. Make sure that experiences of delivering the right amount of information at just the right time, that orient to the view of the world around me. And finally, free up my hand so that I can interact with the world around me. In the next section, let's take a look at some of the recommendations on how to create some great experiences. Let's start with typography. On Glass, the default system font is Roboto. We use two weights of this font, thin and light. When you look at all the templates, 40 pixel is the font size we use almost as a regular or normal font size. You can increase it to 50, something like large, or 70 pixel, like an extra large font size. Anything larger than this may not give you enough space on Glass to write full sentences. However, you may be able to use larger font sizes for very specific pieces of information. For example, temperature or sports scores. Let's take a look at the other end of the spectrum. If you go down to 34 pixel font size, think of it as small. 30 pixel, extra small. Anything smaller than this in the body text, it's just not going to be legible for a user. So stay away from those sizes. Let's look at a very important facet of designing really, really good and legible Glassware-- padding. You'll notice that all of our templates will have 40 pixel padding on all sides. Now, this is important so that the content that you're putting in front of the user doesn't get clipped on the left or the right side. Similarly, this will allow some of the system UIs like scroll bar or progress bar to easily occupy this 40 pixel space without interacting with the content that you're presenting to the user. The closer you can present the content to the center of the screen, the easier it will be for a user to focus on it. Let's take a look at some of the core templates that we provide. This is a basic template. Really good for putting in a lot of text which is still digestible on Glass. One important thing that you'll notice on all the templates is there is a space provided to put in metadata. Now, this metadata allows the user to understand who is providing this content, and also, what is the context in which this content is being provided. Another template, we call it Otter. This is great for both providing who is the sender, as well as the subject line, of course, in addition to the body of the message. There are tons of other templates which you can find at our developer website that deal with things like lists, full-bleed images, et cetera. Glanceable UIs. Now, this is an important part. Glass is a device which is designed from grounds up to be used out and about. When you are presenting the user an information which is divided up into lots of small chunks, really start thinking, can you actually spread this information across couple of different screens? Can you reduce this information into something which is much more easily digestible? So, for example, if I change this screen to something like this, all of a sudden it is much more easy for me to read this information even when I'm jogging. If you are able to reduce the number of chunks down to just one without diminishing the value of information, you may actually have a truly great Glassware. Low density, high quality. Now, you may have created some great experiences on mobile and web using responsive design. If you want to scale down those designs on Glass and expect that those experiences are going to work, you may not actually have that much luck. If you want to create experience on Glass think about creating them from grounds up. There are certain experiences which work especially beautiful, especially nice on Glass. Things like full-bleed images. Again, make use of the space provided for metadata to make sure that the user is understanding what is the context in which this image is being provided to them. The last point here, and this is really important. When you are creating experiences on Glass, make sure that you are testing it both indoors and outdoors. Now, it is important because some colors may look different on Glass compared to how they look on your computer monitor. This happens because Glass is a transparent display. A color like black may actually be just transparent. White may actually provide you with the max amount of contrast to improve the legibility of your text. Make sure that you are truly testing all of your UIs, both indoors and outdoors. Let's recap some of the recommendations we talked about. Use proper typography. If you have your own brand related fonts, use them. But make sure that they are following the guidelines we talked about. Similarly, make sure that you're using the standard templates, or at least using them as guidelines to create really rich, nice, legible content on Glass. Make sure that the content you are presenting to a user is in small bite-size chunks that they can easily digest. And lastly, make sure that every single interface you're creating on Glass, you test both indoors and outdoors. As you go about creating some amazing Glassware, think about what can you do on Glass which can be done better on Glass than any other device? At the same time, think about some of the things we talked about in this talk. Create the content which is relevant right down to the moment. Use voice for fast and natural interactions. Work with some of the standard patterns and styles to create truly useful Glassware. And finally, the better you can do these things together, the better the experience for your users is going to be. We have some amazing documentation on our developer website, which you can take a look. At the same time, make sure that you continue exploring more and more ways in which you can create amazing experiences for your users. Thank you very much.