Bringing the web everywhere
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

Bringing the Web Everywhere PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Bringing the Web Everywhere

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Bringing the web everywhere

Bringing the Web Everywhere

Web Design For Google Glass

Jessica Naimo

Wearable technology

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

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 Members

Early prototype

Moving toward the internet

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

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

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)


How to design for it

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 it1

How to Design For it


    • But will deliver mobile version (Responsive)


  • Videos are touch and go:

    • YouTube

    • HTML5 Video and Audio

    • Dailymotion

  • No sign in/form capabilities

  • DISCLAIMER: In Development, Changing every second

First Person POV

Source: Google Support



  • 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

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 */}

Viewing the web

Source: WebDesign.Tutsplus

The easy way1

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

PeachPitreleased a guide book this month ($5)

The hard way

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 way1

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 way2

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


Cut to the chase

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

Exam Questions

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

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

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

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

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

  • Login