Building web apps for Google TV #io2011 #gtvweb

Chris Wilson
Daniels Lee

Why is Television interesting?

More households have TV's than cell phones or computers
75% of the households in the world have a TV
2M Internet connected TV expect 24M by 2014

Why GoogleTV?
Make TV better (live tv)
Put great web content on TV
Provide an interactive platform for TV

Opportunities
Media consumption with social aspect 
Applications that span & morph between devices
Casual games, particularly multi-player
Applications using paired "virtual controllers" – connect mobile/tablets to drive with the TV as output

Google TV and the web platform
Based on Android
Google TV's web platform is Chrome with a slim UI
Updates automatically OTN

What makes designing for TV different?
It is a mental space, couch mode
Apps need a 10' UI 
example: vimeo – couch mode, huffington post – NewsGlide

1. Technical constraints
2. Practical constraints
3. Design guidance

Technical Constraints
720p/1080p
Overscan and padding – Action safe 3.5%, Title safe 5-10%
Only 40% of HDTV's have all their pixels so even HD needs padding
Color gamut on TV is different TV's are not calibrated, colors are over saturated (especially orange/red)
non-white background colors are best white is like all caps and white can cause halos
Test your contrast on a TV display

Practical Constraints
Optimize your text carefully
– Limit length
– avoid small text sizes
– make it as big as needed, then bigger
Typical on-screen font guidance applies
– sans-serif

Scrolling
– avoid huge scrollable page design
– put content "above the fold" or give visual cues

Have a strong focus model, show the user where they are and what they can do
User input – don't rely on a mouse, just a directional pad
Directional-pad navigation it's just keypresses
Expected D-pad focus model is 2 dimensional
– web platform is used to linear model
The back key 

Specific to Google TV
Autozoom is enabled for web content

Design Guidance
Make he most of your space
Be sure to sit back and test your design on multiple TV's
– not just look but also test
Visual feedback and motion
– give visual feedback on actions
Give directions
– splash screens and/or overlay controls
Experiences are not "static" on TV
– use transitions and animation

Tools
Google TV UI templates
– site templates designed for 10' living room experience
– both templates provide HTML5 and flash w/support for d-pad navigation and playback

Google TV Web UI Libraries

Google TV jQuery UI Library – http://goo.gl/ObULa
– requires more JS
– CSS selectors to specify navigable areas
– UI control libraries
Google TV Closure UI Library – http://goo.gl/sCyj4
– Requires more HTML markup
– Special CSS class names to specify navigable areas
– UI building blocks

1. HTML: structure
2. CSS: presentation
3. JavaScript: Initialize/Events

Call to Action
Think about how your apps apply to TV space
Think about new apps you could build
Think about these lessons and apply to desktop mobil

@googletvdev
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s