bringing the web everywhere
Post on 26-Feb-2016
53 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
top related