The web platform has already taken a center role in our desktop and mobile computing lives. The next space for the web platform to take over is the biggest screen in your house — the TV in your living room. However, designing for television has its own set of demands, different than designing for desktop and mobile implementations. This talk outlines the most important best practices to keep in mind when designing web applications for TV. We’ll cover issues like directional pad navigation, user interface design for TV, color issues, and zooming, as well as discussing some unique opportunities for TV applications.
6. Why is Television Interesting?
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
Computers Mobile Devices TVs
% of households
4 #gtvweb #wdx
7. Why is Television Interesting?
100%
90%
80%
70%
More American households
60% have TVs than cell phones
50%
or computers.
40%
30%
20%
10%
0%
Computers Mobile Devices TVs
% of households
1 Source: Nielsen Research
2 Source: Pew Research, Internet and American Life Project 2011
3 Source: International Telecommunication Union, The World in 2009: ICT Facts and Figures
4 #gtvweb #wdx
8. Why is Television Interesting?
45M 43M
40M
35M
30M
25M
20M
15M
10M
5M
2M
0M
2010 2014 (proj)
Smart TV Adoption
5 #gtvweb #wdx
9. Why is Television Interesting?
45M 43M
40M
35M By 2014, more than 1/3
30M
of households in the US
25M
will have an Internet-
20M
15M
connected television.
10M
5M
2M
0M
2010 2014 (proj)
Smart TV Adoption
1 Source: James McQuivey, Forrester Research, Connected TVs Will Sell, But Will They Get Used?, 2010
2 Source: In-Stat Research, Installed Base of “Smart TV” Web-Enabled Home Consumer Electronics Devices to Reach Over 230 Million by 2014
5 #gtvweb #wdx
10. Media Use in 8- to 18-Year-Olds
Movies
Print 4%
6%
Video Games
11%
TV
42%
Computer
14%
Music/audio
Source: Kaiser Family Foundation: “Media in the Lives
23%
of 8- to 18-Year-Olds” (2009)
6 #gtvweb #wdx
12. Why is Television Interesting?
• TVs are more common than computers
7 #gtvweb #wdx
13. Why is Television Interesting?
• TVs are more common than computers
• Americans spend more time watching TV than any other
media activity
7 #gtvweb #wdx
14. Why is Television Interesting?
• TVs are more common than computers
• Americans spend more time watching TV than any other
media activity
We should make better use of this time
7 #gtvweb #wdx
16. What about Google TV?
• Improve TV as we know it today
8 #gtvweb #wdx
17. What about Google TV?
• Improve TV as we know it today
8 #gtvweb #wdx
18. What about Google TV?
• Improve TV as we know it today
• Combine TV and the Web
8 #gtvweb #wdx
19. What about Google TV?
• Improve TV as we know it today
• Combine TV and the Web
8 #gtvweb #wdx
20. What about Google TV?
• Improve TV as we know it today
• Combine TV and the Web
• Transform TV into an open development platform for Apps
8 #gtvweb #wdx
22. Opportunities
•Media consumption with social aspect
–Watching the game “together”
9 #gtvweb #wdx
23. Opportunities
•Media consumption with social aspect
–Watching the game “together”
•Applications that span - and morph between - devices
9 #gtvweb #wdx
24. Opportunities
•Media consumption with social aspect
–Watching the game “together”
•Applications that span - and morph between - devices
•Casual games, particularly multi-player
9 #gtvweb #wdx
25. Opportunities
•Applications using paired “virtual controllers”
– Connecting mobile devices and tablets to “drive,” with the TV as output
10 #gtvweb #wdx
26. Opportunities
•Applications using paired “virtual controllers”
– Connecting mobile devices and tablets to “drive,” with the TV as output
10 #gtvweb #wdx
30. Google TV and the Web Platform
• Google TV is based on Android
12 #gtvweb #wdx
31. Google TV and the Web Platform
• Google TV is based on Android
• Google TV’s web platform is Chrome
– “Modern Browser” (i.e. many HTML5 features, Webkit)
– Adobe Flash (10.1) supported, supports H.264 video natively
12 #gtvweb #wdx
32. Google TV and the Web Platform
• Google TV is based on Android
• Google TV’s web platform is Chrome
– “Modern Browser” (i.e. many HTML5 features, Webkit)
– Adobe Flash (10.1) supported, supports H.264 video natively
• Updates automatically over the network
12 #gtvweb #wdx
34. What Makes Designing for TV Different?
TV is a different mental space:
user is in “couch mode”
13 #gtvweb #wdx
35. What Makes Designing for TV Different?
TV is a different mental space:
user is in “couch mode”
• Applications need a “10-foot UI”:
– UI design is page-based
– Interactions via d-pad, i.e. no mouse
– TV content is dynamic - even when “static”
– and more ...
13 #gtvweb #wdx
39. What Makes Designing for TV Different?
•Technical constraints of TV
– Device issues: resolution, overscan, color, etc.
15 #gtvweb #wdx
40. What Makes Designing for TV Different?
•Technical constraints of TV
– Device issues: resolution, overscan, color, etc.
•Practical constraints of TV
– Apparent sizes, user input devices, layout, etc.
15 #gtvweb #wdx
41. What Makes Designing for TV Different?
•Technical constraints of TV
– Device issues: resolution, overscan, color, etc.
•Practical constraints of TV
– Apparent sizes, user input devices, layout, etc.
•Design guidance for TV
– What makes a “TV experience”
15 #gtvweb #wdx
47. Practical Constraints of Designing for TV
• The color gamut is different on TV
– TVs are also frequently not calibrated
– It’s easy to over-saturate, so tone down your colors
• Particularly oranges and reds
19 #gtvweb #wdx
48. Practical Constraints of Designing for TV
• The color gamut is different on TV
– TVs are also frequently not calibrated
– It’s easy to over-saturate, so tone down your colors
• Particularly oranges and reds
• Non-white background colors are best
– WHITE IS LIKE ALL CAPS
– White backgrounds can cause halos
19 #gtvweb #wdx
49. Practical Constraints of Designing for TV
• The color gamut is different on TV
– TVs are also frequently not calibrated
– It’s easy to over-saturate, so tone down your colors
• Particularly oranges and reds
• Non-white background colors are best
– WHITE IS LIKE ALL CAPS
– White backgrounds can cause halos
Always test on a real TV display!
19 #gtvweb #wdx
51. Practical Constraints of Designing for TV
• Optimize your text carefully
– Limit content length
– Avoid small text sizes
– Make it as big as needed, then bigger
20 #gtvweb #wdx
52. Practical Constraints of Designing for TV
• Optimize your text carefully
– Limit content length
– Avoid small text sizes
– Make it as big as needed, then bigger
• Typical on-screen font guidance applies:
– Sans-serif fonts tend to be more readable
– Don’t use too many fonts in one page
20 #gtvweb #wdx
53. Practical Constraints of Designing for TV
• No horizontal/vertical scroll bars
• Place content “above the fold”
• Use strong visual cues
21 #gtvweb #wdx
56. Practical Constraints of TV
• D-Pad is better than mice/trackpads
– Don’t rely on keyboard shortcuts, either
23 #gtvweb #wdx
57. Practical Constraints of TV
• D-Pad is better than mice/trackpads
– Don’t rely on keyboard shortcuts, either
• D-Pad navigation: Listen for keypresses
– Useful on desktop web, too: http://windowshop.com/, Google search results
document.body.onkeypress = keydown;
function keydown(e) {
switch(e.keyCode) {
case 37:// Left arrow - move to previous
next = $(".selectable");
var i = next.index($('.selected')) - 1;
focus.removeClass("selected");
// <more code>
}
23 #gtvweb #wdx
58. Practical Constraints of TV
• The expected D-Pad focus model is 2-dimensional
• The Web platform is used to a linear model
“Traditional Web” model Directional-pad model
24 #gtvweb #wdx
59. Enabling The “Back” Key
What happens when the user hits the “Back” key is one
of the most-overlooked features of modern web apps.
25 #gtvweb #wdx
60. Enabling The “Back” Key
What happens when the user hits the “Back” key is one
of the most-overlooked features of modern web apps.
•Set window.location.hash and listen to “hashchange” events
•Don’t over-use this, though!
25 #gtvweb #wdx
61. Technical Points Specific to Google TV
• Autozoom
– Google TV automatically scales web pages to fit your TV display. If your
site attempts to be "pixel-perfect", the algorithm may not be optimal.
– Disable auto-zoom:
<meta name="gtv-autozoom" content="off" />
– Manually configure zoom:
document.getElementsByTagName('body')[0].style.zoom = 1.3;
26 #gtvweb #wdx
62. Design Guidance for Web Apps on TV
Make the most of your space
27 #gtvweb #wdx
63. Design Guidance for Web Apps on TV
!=
Sit Back. Test Your Design on TV.
28 #gtvweb #wdx
64. Design Guidance for Web Apps on TV
• Visual feedback and motion
– Display visual feedback for all actions
– Display hints or help dialogs
– Auto-hide overlay controls
– Use smooth transitions and animation
– Keep things dynamic
<style type='text/css'>
div {
-webkit-transition: opacity 2s ease;
}
</style>
29 #gtvweb #wdx
67. Google TV UI Templates
• Site templates designed for 10ft living room experience
• Both templates are provided in both HTML5 and Flash,
and support D-Pad navigation and video playback controls
• Site templates at goo.gl/guzvn
31 #gtvweb #wdx
69. Google TV Web UI Libraries
goo.gl/8ajdi
#gtvweb #wdx
70. Google TV Web UI Libraries (goo.gl/8ajdi)
Google TV jQuery UI Library $('mydiv')
goo.gl/ObULa $('.a:even')
$('.a').click(function() { ... })
$('button').html('Look mah')
$("div:hidden:first").fadeIn("slow");
Google TV Closure UI Library goog.inherits(childClass, parentClass)
goo.gl/sCyj4 goog.require('tv.ui.Container')
goog.dom.getElement('mydiv')
goog.dom.getElementsByClass('buttons')
goog.debug.expose(person)
33 #gtvweb #wdx
71. Google TV Web UI Libraries (goo.gl/8ajdi)
Google TV jQuery UI Library • Requires more JavaScript
goo.gl/ObULa
• CSS selectors to specify navigable areas
• UI Control Libraries:
(Row, SideNav, Sliding, Photo, Video, Roller, Rotator,
Stack)
Google TV Closure UI Library • Requires more HTML markup
goo.gl/sCyj4 • Special CSS class names to specify navigable areas
• UI building blocks:
(Grid, scrolling containers, components, buttons, links,
input, menu, ... more)
34 #gtvweb #wdx
72. Google TV Web UI Libraries (goo.gl/8ajdi)
1 HTML: Structure
2 CSS: Presentation
3 JavaScript: Initialize / Events
35 #gtvweb #wdx
73. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: Concept
• Key behavior zones (HTML containers)
• Specify zones using CSS selectors:
.item:not(.nonav)
• Remembers last selected item per zone
• (optional) Geometry feature:
Select next closest item based on
distance
36 #gtvweb #wdx
85. Google TV Closure UI Library (goo.gl/sCyj4)
Decorator: JavaScript
// Execute the decorator
try {
tv.ui.decorate(goog.dom.getElement('main'));
} catch (e) {
alert(e.message);
}
// Set focus on initial element
var focusElement = goog.dom.getElementByClass('first-focus');
var focusComponent = tv.ui.getComponentByElement(focusElement);
focusComponent.tryFocus();
43 #gtvweb #wdx
87. Google TV Web UI Library Demos
goo.gl/ozKzk
#gtvweb #wdx
88. Summary
•Think about how your apps apply to the TV space
•Think about new applications you could build
•Think about how these lessons apply to desktop & mobile
45 #gtvweb #wdx
89. Summary
•Think about how your apps apply to the TV space
•Think about new applications you could build
•Think about how these lessons apply to desktop & mobile
Get a Google TV device and start developing!
45 #gtvweb #wdx
Good afternoon! I&#x2019;m Daniels Lee. I&#x2019;m here to talk about designing/developing web applications for the 10ft experience. I&#x2019;m also here to talk about Google TV.\n\nIf you wish to tweet about this presentation, the hashtag is at the bottom of each slide in our deck for your convenience - #gtvweb.\n
Good afternoon! I&#x2019;m Daniels Lee. I&#x2019;m here to talk about designing/developing web applications for the 10ft experience. I&#x2019;m also here to talk about Google TV.\n\nIf you wish to tweet about this presentation, the hashtag is at the bottom of each slide in our deck for your convenience - #gtvweb.\n
Before we really get going, I want to answer the question &#x201C;Why should we even care about TV? Isn&#x2019;t that old media? We have the web now!&#x201D;\n
Most importantly, the first fact I want to share is just how popular television is. While only 80% of American households have computers, and about 90% have cell phones, 99% of American households have televisions - in fact, more than half of those have three or more TVs! That&#x2019;s a lot of screens, and a lot of potential surface area.\n\nWorld-wide, of course, the numbers are a bit different - but even there, world-wide, about 3/4 of all households have a television.\n
Most importantly, the first fact I want to share is just how popular television is. While only 80% of American households have computers, and about 90% have cell phones, 99% of American households have televisions - in fact, more than half of those have three or more TVs! That&#x2019;s a lot of screens, and a lot of potential surface area.\n\nWorld-wide, of course, the numbers are a bit different - but even there, world-wide, about 3/4 of all households have a television.\n
Most importantly, the first fact I want to share is just how popular television is. While only 80% of American households have computers, and about 90% have cell phones, 99% of American households have televisions - in fact, more than half of those have three or more TVs! That&#x2019;s a lot of screens, and a lot of potential surface area.\n\nWorld-wide, of course, the numbers are a bit different - but even there, world-wide, about 3/4 of all households have a television.\n
Now, that&#x2019;s ALL TVs - and what we&#x2019;re really talking about is internet-capable, or &#x201C;smart&#x201D; tvs. Relatively speaking, there aren&#x2019;t tons of them today. There are rougly 2 million in the US - but by 2014, it&#x2019;s projected that there&#x2019;ll be close to 43 million - nearly one third of the 115 million households in the US will have an internet-capable, &#x201C;smart&#x201D; TV.\n\n
Now, that&#x2019;s ALL TVs - and what we&#x2019;re really talking about is internet-capable, or &#x201C;smart&#x201D; tvs. Relatively speaking, there aren&#x2019;t tons of them today. There are rougly 2 million in the US - but by 2014, it&#x2019;s projected that there&#x2019;ll be close to 43 million - nearly one third of the 115 million households in the US will have an internet-capable, &#x201C;smart&#x201D; TV.\n\n
Now, that&#x2019;s ALL TVs - and what we&#x2019;re really talking about is internet-capable, or &#x201C;smart&#x201D; tvs. Relatively speaking, there aren&#x2019;t tons of them today. There are rougly 2 million in the US - but by 2014, it&#x2019;s projected that there&#x2019;ll be close to 43 million - nearly one third of the 115 million households in the US will have an internet-capable, &#x201C;smart&#x201D; TV.\n\n
Besides TV presence in the home, TV takes up a tremendous amount of our leisure-time activity - on an average day, Americans spend more time watching TV than any other &#x201C;media&#x201D; activity - in fact, watching TV takes up more time than listening to music and computer use put together. &#xA0;In fact, 8-18 year olds watch TV more than any other media activity - three times as much as they use computers, and nearly twice as much as they listen to music.\n\n
So, to sum up - TVs are more common than computers or cell phones, and Americans spend more time watching TV than anything else. We should really make better use of this time. That might sound like I&#x2019;m suggesting that we stop watching TV, but I really mean there are a lot of opportunities to make our TV experience better. \n
So, to sum up - TVs are more common than computers or cell phones, and Americans spend more time watching TV than anything else. We should really make better use of this time. That might sound like I&#x2019;m suggesting that we stop watching TV, but I really mean there are a lot of opportunities to make our TV experience better. \n
So, to sum up - TVs are more common than computers or cell phones, and Americans spend more time watching TV than anything else. We should really make better use of this time. That might sound like I&#x2019;m suggesting that we stop watching TV, but I really mean there are a lot of opportunities to make our TV experience better. \n
And that&#x2019;s really what sparked the Google TV project. The ideas behind the Google TV are relatively simple:\n- First, We can make live TV better - we can apply search to live TV, we can give live info on &#x201C;what&#x2019;s on&#x201D; so you don&#x2019;t have to channel-surf through 500 channels to find something good - in short, help you find stuff you WANT to watch\n- Second, There is lots of great content out there on the web. It&#x2019;s silly to watch videos in a six-inch window on your 13&#x201D; laptop, when you can put them on the biggest screen in your house. There are 2 billion videos watched daily, just on YouTube alone - there are 35 hours of video uploaded to YT every minute - outstripping what you can watch by 2100x. They can&#x2019;t all be funny cat videos, but there are enough to keep you entertained.\n- The final idea behind Google TV is that smart TV obviously needs a platform for interactive applications - manufacturers were already starting to roll their own vertical platforms. We said hey, we already have a great platform - two platforms, actually - Android and the Web platform.\n\n\n\n\n
And that&#x2019;s really what sparked the Google TV project. The ideas behind the Google TV are relatively simple:\n- First, We can make live TV better - we can apply search to live TV, we can give live info on &#x201C;what&#x2019;s on&#x201D; so you don&#x2019;t have to channel-surf through 500 channels to find something good - in short, help you find stuff you WANT to watch\n- Second, There is lots of great content out there on the web. It&#x2019;s silly to watch videos in a six-inch window on your 13&#x201D; laptop, when you can put them on the biggest screen in your house. There are 2 billion videos watched daily, just on YouTube alone - there are 35 hours of video uploaded to YT every minute - outstripping what you can watch by 2100x. They can&#x2019;t all be funny cat videos, but there are enough to keep you entertained.\n- The final idea behind Google TV is that smart TV obviously needs a platform for interactive applications - manufacturers were already starting to roll their own vertical platforms. We said hey, we already have a great platform - two platforms, actually - Android and the Web platform.\n\n\n\n\n
And that&#x2019;s really what sparked the Google TV project. The ideas behind the Google TV are relatively simple:\n- First, We can make live TV better - we can apply search to live TV, we can give live info on &#x201C;what&#x2019;s on&#x201D; so you don&#x2019;t have to channel-surf through 500 channels to find something good - in short, help you find stuff you WANT to watch\n- Second, There is lots of great content out there on the web. It&#x2019;s silly to watch videos in a six-inch window on your 13&#x201D; laptop, when you can put them on the biggest screen in your house. There are 2 billion videos watched daily, just on YouTube alone - there are 35 hours of video uploaded to YT every minute - outstripping what you can watch by 2100x. They can&#x2019;t all be funny cat videos, but there are enough to keep you entertained.\n- The final idea behind Google TV is that smart TV obviously needs a platform for interactive applications - manufacturers were already starting to roll their own vertical platforms. We said hey, we already have a great platform - two platforms, actually - Android and the Web platform.\n\n\n\n\n
And that&#x2019;s really what sparked the Google TV project. The ideas behind the Google TV are relatively simple:\n- First, We can make live TV better - we can apply search to live TV, we can give live info on &#x201C;what&#x2019;s on&#x201D; so you don&#x2019;t have to channel-surf through 500 channels to find something good - in short, help you find stuff you WANT to watch\n- Second, There is lots of great content out there on the web. It&#x2019;s silly to watch videos in a six-inch window on your 13&#x201D; laptop, when you can put them on the biggest screen in your house. There are 2 billion videos watched daily, just on YouTube alone - there are 35 hours of video uploaded to YT every minute - outstripping what you can watch by 2100x. They can&#x2019;t all be funny cat videos, but there are enough to keep you entertained.\n- The final idea behind Google TV is that smart TV obviously needs a platform for interactive applications - manufacturers were already starting to roll their own vertical platforms. We said hey, we already have a great platform - two platforms, actually - Android and the Web platform.\n\n\n\n\n
And that&#x2019;s really what sparked the Google TV project. The ideas behind the Google TV are relatively simple:\n- First, We can make live TV better - we can apply search to live TV, we can give live info on &#x201C;what&#x2019;s on&#x201D; so you don&#x2019;t have to channel-surf through 500 channels to find something good - in short, help you find stuff you WANT to watch\n- Second, There is lots of great content out there on the web. It&#x2019;s silly to watch videos in a six-inch window on your 13&#x201D; laptop, when you can put them on the biggest screen in your house. There are 2 billion videos watched daily, just on YouTube alone - there are 35 hours of video uploaded to YT every minute - outstripping what you can watch by 2100x. They can&#x2019;t all be funny cat videos, but there are enough to keep you entertained.\n- The final idea behind Google TV is that smart TV obviously needs a platform for interactive applications - manufacturers were already starting to roll their own vertical platforms. We said hey, we already have a great platform - two platforms, actually - Android and the Web platform.\n\n\n\n\n
1) Social connections in the living room (watching funny videos, sports, live streams, movies) together with friends/family\n2) Multi-device, from Desktop to TV to Mobile to Tablet, e.g. Air travel, cooking\n3) Casual games for TV using less advanced controls, i.e. D-Pad, no touch-screen\n\nWith an interactive platform, when you think of all the time spent parked in front of the TV, there are some specific opportunities that come to mind, particular areas that are very compelling for TV applications.\n\nApp space revolving around social interactions, particularly apps focused on media consumption or entertainment, e.g. sporting events, without having to have them actually *IN* your living room\n\nBeginning to be realized in Mobile, applications that span multiple devices. Example: App around food that lets you watch episodes of your cooking show; then, when you&#x2019;ve decided what you want to make for dinner, you go to the store, pull out your mobile device and get a shopping list; then, when you&#x2019;re actually preparing and cooking, the app walks through the steps including video on their tablet.\n\nCasual games are another big area - I say &#x201C;casual&#x201D; because I think the console gaming market has serious gaming already there on TV, but casual games are not as common. One challenge, of course, is that controls on the couch aren&#x2019;t the same as controls on the desktop, or on a mobile phone or tablet. Your TV is probably not a touch screen.\n\n
1) Social connections in the living room (watching funny videos, sports, live streams, movies) together with friends/family\n2) Multi-device, from Desktop to TV to Mobile to Tablet, e.g. Air travel, cooking\n3) Casual games for TV using less advanced controls, i.e. D-Pad, no touch-screen\n\nWith an interactive platform, when you think of all the time spent parked in front of the TV, there are some specific opportunities that come to mind, particular areas that are very compelling for TV applications.\n\nApp space revolving around social interactions, particularly apps focused on media consumption or entertainment, e.g. sporting events, without having to have them actually *IN* your living room\n\nBeginning to be realized in Mobile, applications that span multiple devices. Example: App around food that lets you watch episodes of your cooking show; then, when you&#x2019;ve decided what you want to make for dinner, you go to the store, pull out your mobile device and get a shopping list; then, when you&#x2019;re actually preparing and cooking, the app walks through the steps including video on their tablet.\n\nCasual games are another big area - I say &#x201C;casual&#x201D; because I think the console gaming market has serious gaming already there on TV, but casual games are not as common. One challenge, of course, is that controls on the couch aren&#x2019;t the same as controls on the desktop, or on a mobile phone or tablet. Your TV is probably not a touch screen.\n\n
1) Social connections in the living room (watching funny videos, sports, live streams, movies) together with friends/family\n2) Multi-device, from Desktop to TV to Mobile to Tablet, e.g. Air travel, cooking\n3) Casual games for TV using less advanced controls, i.e. D-Pad, no touch-screen\n\nWith an interactive platform, when you think of all the time spent parked in front of the TV, there are some specific opportunities that come to mind, particular areas that are very compelling for TV applications.\n\nApp space revolving around social interactions, particularly apps focused on media consumption or entertainment, e.g. sporting events, without having to have them actually *IN* your living room\n\nBeginning to be realized in Mobile, applications that span multiple devices. Example: App around food that lets you watch episodes of your cooking show; then, when you&#x2019;ve decided what you want to make for dinner, you go to the store, pull out your mobile device and get a shopping list; then, when you&#x2019;re actually preparing and cooking, the app walks through the steps including video on their tablet.\n\nCasual games are another big area - I say &#x201C;casual&#x201D; because I think the console gaming market has serious gaming already there on TV, but casual games are not as common. One challenge, of course, is that controls on the couch aren&#x2019;t the same as controls on the desktop, or on a mobile phone or tablet. Your TV is probably not a touch screen.\n\n
Which brings me to the opportunity to make connected applications that work across devices. You probably all have in your pocket, your hand or your purse a device that has a ton of controllers - a touchscreen display, accelerometer, gyroscope, a camera, a microphone for taking voice input, and more. Does anyone watch TV or movies at home without an available tablet or mobile device to look up stuff on imdb, check listings, etc anymore? We&#x2019;ve already used this to make a Google TV remote control app for iPhone and Android, but more interesting than just driving the TV will be applications that use this multi-device concept for compelling group experiences - we want to show a couple of apps realizing some of this opportunity now.\n\n\n\n\n
Which brings me to the opportunity to make connected applications that work across devices. You probably all have in your pocket, your hand or your purse a device that has a ton of controllers - a touchscreen display, accelerometer, gyroscope, a camera, a microphone for taking voice input, and more. Does anyone watch TV or movies at home without an available tablet or mobile device to look up stuff on imdb, check listings, etc anymore? We&#x2019;ve already used this to make a Google TV remote control app for iPhone and Android, but more interesting than just driving the TV will be applications that use this multi-device concept for compelling group experiences - we want to show a couple of apps realizing some of this opportunity now.\n\n\n\n\n
Which brings me to the opportunity to make connected applications that work across devices. You probably all have in your pocket, your hand or your purse a device that has a ton of controllers - a touchscreen display, accelerometer, gyroscope, a camera, a microphone for taking voice input, and more. Does anyone watch TV or movies at home without an available tablet or mobile device to look up stuff on imdb, check listings, etc anymore? We&#x2019;ve already used this to make a Google TV remote control app for iPhone and Android, but more interesting than just driving the TV will be applications that use this multi-device concept for compelling group experiences - we want to show a couple of apps realizing some of this opportunity now.\n\n\n\n\n
We want to give a very quick demo of a casual, social game - WeDraw, who you may have caught in the Sandbox.\n
As I mentioned before, Google TV is based on Android, and we will soon be unlocking the ability for consumers to install Android apps;\nGoogle TV web platform is Google Chrome with a TV user interface applied; this gives you lots of great HTML5 features supported by Webkit. This instance of Chrome also supports Adobe Flash 10.1 currently and H.264 video support. Web platform will improve over time as updates are received OTA.\n
As I mentioned before, Google TV is based on Android, and we will soon be unlocking the ability for consumers to install Android apps;\nGoogle TV web platform is Google Chrome with a TV user interface applied; this gives you lots of great HTML5 features supported by Webkit. This instance of Chrome also supports Adobe Flash 10.1 currently and H.264 video support. Web platform will improve over time as updates are received OTA.\n
As I mentioned before, Google TV is based on Android, and we will soon be unlocking the ability for consumers to install Android apps;\nGoogle TV web platform is Google Chrome with a TV user interface applied; this gives you lots of great HTML5 features supported by Webkit. This instance of Chrome also supports Adobe Flash 10.1 currently and H.264 video support. Web platform will improve over time as updates are received OTA.\n
As I mentioned before, Google TV is based on Android, and we will soon be unlocking the ability for consumers to install Android apps;\nGoogle TV web platform is Google Chrome with a TV user interface applied; this gives you lots of great HTML5 features supported by Webkit. This instance of Chrome also supports Adobe Flash 10.1 currently and H.264 video support. Web platform will improve over time as updates are received OTA.\n
As I mentioned before, Google TV is based on Android, and we will soon be unlocking the ability for consumers to install Android apps;\nGoogle TV web platform is Google Chrome with a TV user interface applied; this gives you lots of great HTML5 features supported by Webkit. This instance of Chrome also supports Adobe Flash 10.1 currently and H.264 video support. Web platform will improve over time as updates are received OTA.\n
As I mentioned before, Google TV is based on Android, and we will soon be unlocking the ability for consumers to install Android apps;\nGoogle TV web platform is Google Chrome with a TV user interface applied; this gives you lots of great HTML5 features supported by Webkit. This instance of Chrome also supports Adobe Flash 10.1 currently and H.264 video support. Web platform will improve over time as updates are received OTA.\n
I just said we support the web platform, webkit, HTML5, etc. As a web developer, what more do you need to know?\n- When watching TV, users are a much more passive with their interaction\n- YouTube came out with &#x2018;leanback&#x2019; mode.\n- Needs a 10ft UI vs 1-2ft\n- Different input devices; users should be able to drive from a remote control using 5-way d-pad, sitting back on the couch\n- Web apps need to scroll its content for the user, activated by a d-pad keypress\n- Content is rarely completely static on TV; even &#x201C;static&#x201D; backgrounds in TV are usually subtly moving\n- Users&#x2019;s mental space is much more passive\n\nIt&#x2019;s almost as if since the mental space is much more passive, all that action the consumer would usually be taking needs to be sucked into the application, and it needs to make up for the consumer being a couch potato.\n
I just said we support the web platform, webkit, HTML5, etc. As a web developer, what more do you need to know?\n- When watching TV, users are a much more passive with their interaction\n- YouTube came out with &#x2018;leanback&#x2019; mode.\n- Needs a 10ft UI vs 1-2ft\n- Different input devices; users should be able to drive from a remote control using 5-way d-pad, sitting back on the couch\n- Web apps need to scroll its content for the user, activated by a d-pad keypress\n- Content is rarely completely static on TV; even &#x201C;static&#x201D; backgrounds in TV are usually subtly moving\n- Users&#x2019;s mental space is much more passive\n\nIt&#x2019;s almost as if since the mental space is much more passive, all that action the consumer would usually be taking needs to be sucked into the application, and it needs to make up for the consumer being a couch potato.\n
1) Show Vimeo vs. Vimeo couch mode\n2) Flixster vs Flixster TV\n\nNote that from a design perspective, these have a single-page UI - the canvas is fixed, you never see scrollbars, per se - there are pagination points for some controls, of course.\n\nAlso note from a design perspective that the video sites like YouTube leanback start immediately, and you get loading \n
Backup if net isn&#x2019;t working\n\n
Backup if net isn&#x2019;t working\n\n
Let&#x2019;s discuss what makes designing for TV different:\n- Clarify these design guidelines apply to all TV web apps, not just for Google TV\n\n\n
Let&#x2019;s discuss what makes designing for TV different:\n- Clarify these design guidelines apply to all TV web apps, not just for Google TV\n\n\n
Let&#x2019;s discuss what makes designing for TV different:\n- Clarify these design guidelines apply to all TV web apps, not just for Google TV\n\n\n
The great thing about TV design is that the screen size is becoming pretty well fixed, on two resolutions - 720p and 1080p. It feels very odd to say that designing for a fixed screen size is a good thing, but there you have it.\n\n
In old TV, prior to HD, there was a concept called &#x201C;overscan&#x201D;. Overscan is the area around the edges of the display not guaranteed to be displayed on screen:\n1) it was around the curved edges of the CRT\n2) hidden by the bezel of the TV\n\n- Only ~40% of HDTVs display *all* pixels\n- 1/3 drop up to 10% around the edges\nThis is why you don&#x2019;t see a lot of important information on TV, like the titles, popups, etc., showing up right around the edges. TV content follows guidelines.\nAlthough technically you would think an LCD or plasma HDTV would not have &#x201C;overscan&#x201D;, it turns out only about 40% of HDTVs actually display all the pixels; a good third or so of all HDTVs drop up to 10% around the edges. This means the edge of the screen may still get cut off - and ...\n
it&#x2019;s a good idea to use negative space for balance anyway, as you will likely find that UI that runs right next to the edges of the screen will feel out of place. Use some extra padding space.\n
Now I&#x2019;d like to briefly talk about color. TV&#x2019;s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it&#x2019;s not always calibrated. In fact, TVs are frequently deliberately set up to over-saturate their colors, because when consumers walk into best buy, they frequently buy the TV that&#x2019;s the most colorful, brightest, - the shiniest one. You&#x2019;ll note that &#x201C;Accurate&#x201D; does not appear in that list of attributes.\n\nTV doesn&#x2019;t typically have a white background like the web does - it&#x2019;s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
Now I&#x2019;d like to briefly talk about color. TV&#x2019;s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it&#x2019;s not always calibrated. In fact, TVs are frequently deliberately set up to over-saturate their colors, because when consumers walk into best buy, they frequently buy the TV that&#x2019;s the most colorful, brightest, - the shiniest one. You&#x2019;ll note that &#x201C;Accurate&#x201D; does not appear in that list of attributes.\n\nTV doesn&#x2019;t typically have a white background like the web does - it&#x2019;s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
Now I&#x2019;d like to briefly talk about color. TV&#x2019;s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it&#x2019;s not always calibrated. In fact, TVs are frequently deliberately set up to over-saturate their colors, because when consumers walk into best buy, they frequently buy the TV that&#x2019;s the most colorful, brightest, - the shiniest one. You&#x2019;ll note that &#x201C;Accurate&#x201D; does not appear in that list of attributes.\n\nTV doesn&#x2019;t typically have a white background like the web does - it&#x2019;s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
Now I&#x2019;d like to briefly talk about color. TV&#x2019;s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it&#x2019;s not always calibrated. In fact, TVs are frequently deliberately set up to over-saturate their colors, because when consumers walk into best buy, they frequently buy the TV that&#x2019;s the most colorful, brightest, - the shiniest one. You&#x2019;ll note that &#x201C;Accurate&#x201D; does not appear in that list of attributes.\n\nTV doesn&#x2019;t typically have a white background like the web does - it&#x2019;s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
Now I&#x2019;d like to briefly talk about color. TV&#x2019;s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it&#x2019;s not always calibrated. In fact, TVs are frequently deliberately set up to over-saturate their colors, because when consumers walk into best buy, they frequently buy the TV that&#x2019;s the most colorful, brightest, - the shiniest one. You&#x2019;ll note that &#x201C;Accurate&#x201D; does not appear in that list of attributes.\n\nTV doesn&#x2019;t typically have a white background like the web does - it&#x2019;s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
When you &#x201C;lean in and squint&#x201D; at a computer screen to look more closely at something, you can easily more than double the apparently size of something - however, when you lean in a foot closer to your TV, when you&#x2019;re sitting 10ft away, you only make it roughly 10% larger. \n\n
When you &#x201C;lean in and squint&#x201D; at a computer screen to look more closely at something, you can easily more than double the apparently size of something - however, when you lean in a foot closer to your TV, when you&#x2019;re sitting 10ft away, you only make it roughly 10% larger. \n\n
When you &#x201C;lean in and squint&#x201D; at a computer screen to look more closely at something, you can easily more than double the apparently size of something - however, when you lean in a foot closer to your TV, when you&#x2019;re sitting 10ft away, you only make it roughly 10% larger. \n\n
Simplify your navigation - in particular, you need to avoid scrollbars - use paging or other intentional scrolling elements, with visual cues to tell users there is more content - don&#x2019;t expect them to scroll around to look for it. You may have head of the term &#x201C;above the fold&#x201D; - in newspapers, this is everything that goes in the top half of the newspaper, since it&#x2019;s above the place where it&#x2019;s folded in half. TV doesn&#x2019;t really have a &#x201C;below the fold&#x201D; - users aren&#x2019;t used to scrolling.\n
You also want to have a very strong focus model - you need to lead the user, and help them see where they are in the app, and what they can do. Quick show of hands - how many of you have popped a DVD into the player, and when it gets to the first screen, have to hit the up/down arrows on the remote before you realize that &#x201C;Play&#x201D; was already selected? Yeah. Don&#x2019;t do that. So make those design elements large, if the user needs to see them. This was surprising to me... the user can&#x2019;t just mouse around to tell what they can do, and small hit targets suck.\n\n\n
In that same vein, the user will typically want to use the directional pad for control - they&#x2019;re already used to it from their TV remote control, and their DVD or BluRay player remote, let alone their gaming console&#x2019;s controller. Thankfully, this is easily supported in TV by responding to the arrow key presses keydown events. Supporting these can also be useful for keyboard navigation in the desktop - for example, Google search results are arrow-key navigable, as is Amazon&#x2019;s Windowshop application.\n
In that same vein, the user will typically want to use the directional pad for control - they&#x2019;re already used to it from their TV remote control, and their DVD or BluRay player remote, let alone their gaming console&#x2019;s controller. Thankfully, this is easily supported in TV by responding to the arrow key presses keydown events. Supporting these can also be useful for keyboard navigation in the desktop - for example, Google search results are arrow-key navigable, as is Amazon&#x2019;s Windowshop application.\n
In that same vein, the user will typically want to use the directional pad for control - they&#x2019;re already used to it from their TV remote control, and their DVD or BluRay player remote, let alone their gaming console&#x2019;s controller. Thankfully, this is easily supported in TV by responding to the arrow key presses keydown events. Supporting these can also be useful for keyboard navigation in the desktop - for example, Google search results are arrow-key navigable, as is Amazon&#x2019;s Windowshop application.\n
The biggest challenge with keyboard navigation is...\n
1) Use window.location.hash and hashchange events\n2) Useful to create &#x2018;waypoints&#x2019; in your app\n3) Useful for creating deep links within your app (more advanced)\n\nWhile we&#x2019;re on the subject of the keyboard and navigation, I want to mention one thing that definitely would benefit ALL web applications, not just on TV - responding to the back button. This is one of the most frustrating and over-looked features of web applications. If there are natural &#x201C;waypoints&#x201D; in your application, you should make the back button work for these! You can do this in Javascript by setting window.location.hash and responding to hashchange events. Now, I wouldn&#x2019;t put navigation hashes in for every state change in your app, but ones that naturally feel like a page change - popping up a visual modal dialog, for example - should definitely have them.\n
I want to point out at this point that all the guidance I&#x2019;ve given holds true for ANY TV-Web platform - it&#x2019;s NOT Google TV-specific. Resolution, overscan, colors are attributes of the TV display; Although I showed the input devices for two GTV devices, other TV/internet devices use the arrow key/dpad model too. The one thing specific to GTV is...\n
Utilize your screen real estate, all of it.\n
Secondly, be sure to test out your design on a TV, in a TV context - not just looking at it on a TV screen, but sitting 10ft back from the screen, kickin&#x2019; back on a couch, with a remote control in hand. I have a TV on my desk, sitting right next to my computer monitor - this is NOT where I would create and test out TV designs. It&#x2019;s not a real TV experience.\n
Finally, as I hinted before...\n\nIf you turned on the TV, and you saw something up on the screen that wasn&#x2019;t moving at all, you&#x2019;d think the TV channel&#x2019;s computers had crashed. TV is a very dynamic experience, given that it&#x2019;s a passive, one-way experience.\n\nBut the point is, you need to give visual feedback, and use animated loading icons, transitions and animation, and even subtly dynamic backgrounds.\n
\n
- Good starting boilerplate\nThe Google TV UI Templates provide two approaches to a video playback site designed for a 10-foot, living room experience. The templates are provided in both HTML5 and Flash. All of them support full keyboard navigation and support for the video playback controls on the Google TV remote.\n\nFLIP TO LIVE DEMO of TEMPLATES\n
Introduce UI libraries\n- What is it? Mention it&#x2019;s in BETA.\n- When did we launch? Feb 2011\n- Why did we build it?\n- Equip web developers with an easier way to build 10ft UIs\n- Primary goal: provide keyboard navigation library\n- Common pitfalls and implementation challenges faced by developers\n- Keyboard navigation is critical to a positive user experience\n\n
jQuery vs Closure\n- Present both libraries to developers\n- Recommend a particular library to developers based on what they&#x2019;re familiar with\n- Speak a little about both libraries\n\n
Present both libraries to developers. jQuery vs Closure\n- jQuery UI Library is heavier on JavaScript\n- Use CSS selectors to specify navigable areas\n- UI control packages for common UI mechanisms\n- Closure UI Library, do more in HTML markup\n- Decorate HTML markup with semantic class names\n- Raw building blocks for UI interactions\n- Libraries focus primarily on enabling keyboard navigation\n
Both libraries require three main steps:\n1) HTML defines structure\n2) CSS to create visual representation of UI to guide navigation\n3) JavaScript to initialize keyboard navigation and register other events\n
Key behavior zones\n- Use jQuery CSS selectors\n- Zones keep track of last selected item\n- Explain &#x2018;geometry feature&#x2019;: Euclidean distance calculation\n- Good for quick prototyping\n- Not recommended for production\n\n
1) Highlight rows, parents, items\n2) Transition: Stylize using CSS3\n\nMention again. Zones are simply HTML containers, specified by ID.\n\n
1) Highlight rows, parents, items\n2) Transition: Stylize using CSS3\n\nMention again. Zones are simply HTML containers, specified by ID.\n\n
- Initialize key controller and behavior zones\n- CSS applied to current item selected\n- Handling key presses\n\n[Transition to Closure UI Library]\n
- Initialize key controller and behavior zones\n- CSS applied to current item selected\n- Handling key presses\n\n[Transition to Closure UI Library]\n
- Initialize key controller and behavior zones\n- CSS applied to current item selected\n- Handling key presses\n\n[Transition to Closure UI Library]\n
1) HTML element nesting\n2) Horizontal / Vertical containers are the building blocks\n3) Containers can be set to scroll. Currently two modes: start vs middle\n4) Components, buttons, links, ... also specified with class names\n\n
How to create horizontal / vertical containers\n- Navigate horizontal containers using LEFT/RIGHT arrow keys\n- Navigate vertical containers using UP/DOWN arrow keys\n
Nest containers within containers to create additional rows.\n
How to create horizontal / vertical containers\n- Navigate horizontal containers using LEFT/RIGHT arrow keys\n- Navigate vertical containers using UP/DOWN arrow keys\n
1) Highlight rows, parents, items\n2) Transition: Stylize using CSS3\n
\n
<Show spotlight - this is the goal - to get your application integrated into the GTV user experience.>\n\n\n
<Show spotlight - this is the goal - to get your application integrated into the GTV user experience.>\n\nOur Code site, with Documentation, Templates and UI Libraries is linked here, as is our web apps for Google TV forum.\n\n