BRINGING THE WEB EVERYWHERE

WEB DESIGN FOR GOOGLE GLASS

Jessica Naimo

WEARABLE TECHNOLOGY

• New paradigm• 2020: Ubiquitous Technology

• Computing is everywhere and anywhere

• Wearable Technology= Next Step

• New Products:• Samsung Galaxy Gear

• GoPro Cameras “Minority Report” will be a reality!

EARLY BEGINNINGS• Shift to wearable technology New interfaces to view internet

• Accommodate to new platform

• Adapt new design principles

• Google Glass: Project Glass• Initiated at Google[x] by Sergey Brin

• Reported Feb 21, 2012: New York Times

• First Features: With Voice Commands• Map

• Camera

• Currently:• Explorers Program

• 18+ $1,500

• Google Community: 27,958 MembersEarly prototype

MOVING TOWARD THE INTERNET• UPDATE: July 2013

• Call or Message Gmail contacts

• Web Browser- Not just for searching

• What the critics have to say:• “…practically useless on such a small screen.”

- Technology Review

• “….it isn't particularly useful…it's far from an ideal experience.” – Gizmag

• “the logistics of navigating a website through Google Glass is a little bit weird”

– Gizmodo

• Head movements to click on center + tapping on the glasses

Google Hangout

WHERE DO WE FIT IN?• Full of opportunity

• UX design

• Safety:• Jake Steinerman - Michigan programmer

• Drive Safe: Detect driver’s drowsiness

• Government Work

• Police Departments • Have to multitask in a police car

• New application for searching statutes and license plates

• Patrick Jackson – Firefighter

• Sync police calls and fire hydrant locations to Glass

HOW THE INTERNET WORKS

• Voice Command: “Okay, Glass Google (web address)”• Select “View Website”

• Scroll= One finger sliding forward

• Zoom: Two finger forward or background

• Round Pointer: Targets Links

• Select: Touchpad tap (Link must be centered on screen)

YouTube

HOW TO DESIGN FOR IT• Need to know:

• nHD display 640 x 360px

• Bone conduction transducer for audio (no ear buds)

• 5mp camera

• Touchpad

• Bluetooth

• WiFi

• Storage Synced with Google cloud

• Sensors: Gyroscope (orientation), Accelerometer Getting to know Glass

HOW TO DESIGN FOR IT• NOT A MOBILE APP

• But will deliver mobile version (Responsive)

• NOT A TRANSPARENT BACKGROUND • Videos are touch and go:

• YouTube

• HTML5 Video and Audio

• Dailymotion

• No sign in/form capabilities• DISCLAIMER: In Development, Changing every second

Source: Google Support

First Person POV

BASICS• Timeline :

• Homepage

• Set of cards (content)

• Built with CSS and HTML

• Card:• Piece of content appearing on timeline

• Swipe: To search through cards

• Display information from the server

• Approved Card Designs and Templates: CSS

Google Glass Timeline

Card Template

THE EASY WAY • Normal websites can be viewed:

• Near impossible to read

• Hard to select links

• Luke Wroblewski’s “Mobile First” Approach• “One eyeball, one thumb” Approach

• Loads mobile automatically

• Responsive (640 x 360px): Media Queries• Orientation: landscape

• @media screen and (width: 427px) {/* Glass layout */}

Source: WebDesign.Tutsplus

Viewing the web

THE EASY WAY• Small bits of content• Eliminate:

• Long scrollable pages

• Forms

• Sidebars

• Banners

• Readability• Contrasting colors

• Font Size (large enough to read without zoom)

• Obvious Links: Big and Locatable

• Limit Calls to Action• Simplicity is Key

PeachPit released a guide book this month ($5)

THE HARD WAY • Not just for a web browser Applications

• Web Service APIs

• RESTful HTTP services• Alternative to SOAP

• Android Development Tools• Google Glass is an Android Device

• Google Development Kit:• GDK: Android Development add-on

• Google Mirror API (Glassware)

• Building a web server to communicate with google web server

• Within Timeline Paradigm (Card)

• No access without Google Glass

World Maker Faire New York

THE HARD WAY

• Do You Sleep With That Thing On?• Matt Richardson

• Github

• Application using Google Mirror API

• Things people said about Google Glass• Automatically published to blog

• Speech to Text

Web Blog for Application

THE HARD WAY • Need To Know

• Everything is the Internet• Server–side platform: Go, Java, .NET, Python, PHP, Ruby

• Quick Start Examples

• Static Display: No animation

• Respond to key presses (not touch coordinates)

• Black background/ White text

• If not updated in ten days: Deleted

• Insert Timeline Item:• POST a JSON representation to REST endpoint

POST JSON in RAW HTTP

CUT TO THE CHASE

• The Future is Ubiquitous

• Not just web browser• Static Cards

• Built with HTML, text, images, CSS, Server-Side

• Mobile First

• Content:• Brief

• Simple

• Easy to Read

• Be able to Adapt!

Iron Man’s suit is becoming reality

EXAM QUESTIONS

1. What are the two means of creating web content for Google Glass?

2. What are the basic design principles for creating content for Google Glass? What should be avoided in your design?

3. Describe the Mobile first approach and how it relates to Google Glass.

4. Explain the Timeline paradigm of Google Glass and how a card relates to web service APIs.

5. What is the importance of Google Glass in relation to safety and government work? Give an example.