Advertisement
General

The Web Designer's Guide to Google Glass

by

As I look up into the screen just above my right eye, I think about all of the things Google Glass is: the future, a communication device (and a great one at that), a conversation piece, a camera, information literally right in front of your face, and as of the latest update, a web browser.

To me, the browser is as interesting as it was inevitable. There were obviously some constraints the Glass team had to think about, as well as some some completely new problems. And now that it's out, there are roughly 10,000 Glass Explorers using it. I'm confident that soon there will be millions. And soon after that, our employers, clients and customers will be saying, "I want my website to work on Glass."


What is Google Glass?

Glass is Google's new (still in beta) product which affixes a small screen in front of your eye. You can then use that device to take photos, perform Google searches, call, text, video chat, and more.

glass-website

It's currently not available for consumer purchase - those who own it applied to be in the Glass Explorer's program. Rumor has it that Glass will be available for consumer purchase sometime in 2014, my guess is during the second or third quarter. I was told that, in total, there are about 10,000 sets in the wild right now.

In a recent update, XE7, Google released a web browser for the head set.

What About Competition?

Google may have been the first to announce something like this, and are definitely the biggest company, but that doesn't mean Google Glass is the only product of its kind out there. For a start, there is Glass Up which is claiming to do the same thing Google Glass does.

glass-glass-up

Then PCWorld wrote about several other companies working on similar technology.

There are also watches, bracelets, and other wearable technology that is becoming popular. Apple has trademarked the name iWatch, the Pebble Watch is incredibly popular, and items like the Jawbone UP and Fitbit are in the market full-force. Along with Google Glass, there will be a whole host of devices that may have web browsers, and as web developers, we should be prepared!


Interacting With Glass' Browser

First, let's look at how Glass's browser works. As of right now, you can't really go directly to a website. You perform a Google search and choose websites based on the results.

glass-browser-mashable

Screenshot from mashable.com

Select one of the result cards to follow the link and Glass will bring up the website. You can then scroll by sliding one finger along the touch bar (which extends from around your ear to the front of your temple, or you can place two fingers on the touch bar and "look around" the site. You can "click" on links by centering on them and tapping the touch bar- you have a small circle on the screen that serves as a pointer. Finally, you can zoom: two fingers back to zoom in, two fingers forward to zoom out.

As far as I can tell, these are the only interactions you have; you cannot fill out forms, for example. Simply view and select.

Note: This is still a beta product, so I should mention that these interactions could change by the time Glass is released to consumers.

It's because of this that we as web developers should be mindful of how we develop our websites. As it turns out, the principles I'm going to discuss aren't all that new, but suggest a future-friendly approach to web design; important as devices like Glass (or even Apple's fabled iWatch) are released to the market.


Basic Principles to Keep in Mind

Principles for developing for Glass hinge on two incredibly prevalent ideas in web development right now: Responsive Web Design (RWD) and a Mobile First approach.

Why Viewing Normal Sites Doesn't Work

Desktop/non-responsive sites render just fine in Glass' browser, much like they do on Android or iOS devices. However, the text is incredibly difficult to read without zoom; the same goes for selecting links. There is a certain level of precision you need when selecting a link by looking at it. On a desktop version of a website, that precision often isn't there.

glass-scranton

Note: At the time of this writing, scranton.edu redirects to a mobile site with the option to bring up the full site. In early August, they will be switching to a responsive website.

Mobile First!

A couple of years ago, Luke Wroblewski wrote a fantastic book called, Mobile First. In it he discusses a whole host of topics, including why it's important to consider the mobile experience first when developing a website, then build from there. As Luke puts it:

If you design for mobile first, you can create [an] agreement up front on what matters most. You can then apply the same rationale to the desktop...

Basically, the point of a mobile first approach is to determine the most important content and present it in an accessible way. As you expand to bigger screens, you will find that most of the extra (or less important) features are actually unnecessary.

Wroblewski also presents another theory, which I would consider a basis for why a mobile first approach is so important: with mobile users, you only have "one eyeball and one thumb." Because of this, your interface needs to be easy enough to use with just those.

With Google Glass, that is at least half-true in the literal sense. You only have one eyeball. As for the thumb, depending on how you look at it, you either have one finger or no fingers. As we discovered earlier, you can't reach out and touch the website you're viewing. You use your fingers only as an aid to look where you want to.


Implementing Mobile First for Glass

You are most likely familiar with Responsive Web Design. This is the idea that we should make our websites respond to the screens on which they are being viewed. With Google Glass, this means a viewport of 427x240px. But as you can imagine, it's a bit more complex than that.

There are certain things we can do using media queries to make sure our websites function well on Glass, where you're using little more than your eye to control the website.

Make the Website Readable!

First and foremostly, we want our websites to be easy to read, even on Glass. Here's what a native card on Google Glass looks like:

glass-card

I'm not suggesting that we drill our designs down to something like that, but we should remember that viewing the screen is like viewing a 25in HD screen from eight feet away. We don't want our users to have to zoom in a lot and then have to move their head around to look at the whole site. We want them to be able to get the information they came to the website to get quickly and easily. As we design we should remember to:

  1. Use suitable font size. Glass users don't have the luxury of holding the device closer to their face to read the text.
  2. Use contrasting colors. You want to create a noticeable difference between the background and the text for your users, especially if it's especially bright outside, or a lot is going on in the background. I'm not saying change your entire design just for Glass, but it's something to keep in mind during the design process.
  3. Make links obvious. They should stand out in a big way because this is really the only way a user will interact with your website. As a matter of fact...

Make Using Links Easy!

Anchors should be big, easy targets for your users. You don't want them circling their heads a lot just to be able to move to a different page of your site. Make links blocks that stand out and make users aware of the entire clickable area so they know just how precise they need to be.

glass-mysite

Selecting a link on my site (note the cursor)

Use Calls to Action Generously

Completely input-based websites are not going to work well with Glass' browser. At this point, users will have found your site because of a Google search they performed. Make sure you present your information in an easy manner and then give your users actionable items to do. "Call here", or "Email us at..." Show them an address they can plug into Glass to get directions. Give them things they can do independently of your website.

Tip: Ads are the devil. I went to a website with a popup ad on Glass and it rendered the site completely useless because the "X" was in a place where I couldn't look to click on it. Maybe forget about ads on Glass for now (or forever).

Quick Look: Casabona.org

My website (casabona.org) functions surprisingly well on Glass, in-part because I inadvertently followed the conventions listed above. I might want to boost the font size a bit so it's easier to read, but navigating currently provide no issues.

RWD and Mobile First are two very strong pillars on which we should rely. I redesigned my site well before Google Glass because of what I learned from reading up on these subjects, and it turns out that they got me most of the way there. The fact is, we don't know what's around the corner where the web is concerned.

glass-this-will-bethe-web

From Brad Frost's This is the Web

A Note on Testing & Developing

The vast majority of people do not currently have Google Glass and because of that, testing might be difficult. There are a few methods of testing, including Google's Mirror API, various third party solutions, and an unofficial emulator. All or none of these solutions may even work; at the time of writing this, most have not been updated to include the new browser.

On that same token, there don't seem to be a lot of examples of people designing specifically for Glass, or examples of what websites look like on Glass...that may be something to think about :)

If you are interested in developing native Google Glass apps, head on over to Google's Mirror API for some great tutorials!


Keep it Simple

Wrapping up, I want to tell you what the developers at Google I/O said this year: keep it simple. Interacting with Glass needs to be easy and light.

I have only just scratched the surface here. Glass' browser is still relatively new and there is a bit to discover. In my upcoming ebook, also titled, The Web Designer's Guide to Google Glass, I'm going to delve deeper into the capabilities of Glass' browser, what to keep in mind for future builds of Glass (XE8 and beyond), and look at a few case studies for what is already out there.

As Glass takes off, I suspect we will first see developers create separate sites optimized for Glass- e.g. glass.website.com. However, we should try to stick to the principles set forth by Luke W and Ethan Marcotte to create great web experiences agnostic of device. Glass may be the first of its kind, but it certainly won't be the last.

So what do you think? Will websites on Glass (or even Glass in general) be a hit? Would a tutorial on optimizing a site for Google Glass be worthwhile? I look forward to hearing your thoughts in the comments!

Related Posts
  • Code
    Articles
    Mobile Operating Systems in 2014Dj45i preview image@2x
    As a mobile developer, it's good to be familiar with the most important platforms in the mobile space. In this article, we'll take a look at the most important mobile operating systems, their current state, and how they're performing in the current mobile landscape.Read More…
  • Design & Illustration
    Interviews
    Interview With Mobile Interface Designer, Alan PowerPreview
    A chat about designing mobile interfaces with Alan Power.Read More…
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Code
    Articles
    What Makes Mobile Design Unique?Mobile unique icon2x
    Are you getting started with mobile design? Any designer who's had the opportunity to design for mobile devices as well as desktop computers knows that mobile design is a one of a kind discipline. You'll find challenges unique for mobile. In this introductory article, I'd like to take a look at some of the attributes that make mobile unique. It's no secret that thinking about a product's design makes for a better product. This doesn't solely relate to aesthetics as design also influences how a product's functionality and how the user interacts with it. Design choices have a distinct influence on usability and user experience. When you start out as a mobile designer or developer, it's your responsibility to make the product not only work for you, but also for its target audience.Read More…
  • Web Design
    S.E.O.
    The State of SEO in 2014Seo retina
    Back in December 2012, we published the first article of our SEO for Web Designers series. The fundamentals we covered still form a great basis for the optimization of a website, but because of some changes to Google’s algorithm, I've decided to give you some additional advice about the application of these techniques.Read More…
  • Web Design
    Case Studies
    How They Did It: Alice in VideolandAlice retina
    This summer I started building a modern retelling of "Alice in Wonderland", an interactive storybook web app by the name of Alice in Videoland. It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice's source up on GitHub where anyone can examine my code, but sometimes it's nice to have someone go over the reasoning with you.Read More…