1 / 16

Bringing the Web Everywhere

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.

jovita
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bringing the Web Everywhere Web Design For Google Glass Jessica Naimo

  2. 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!

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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 First Person POV Source: Google Support

  9. 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

  10. 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

  11. 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)

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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.

More Related