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.

2. #gtvweb #wdx

3. Designing the 10 Foot User Experience
Daniels Lee
May 13, 2011
Twitter: @googletvdev
Tags: #gtvweb #wdx
#gtvweb #wdx

4. #gtvweb #wdx

5. Why is Television Interesting?
#gtvweb #wdx

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

11. Why is Television Interesting?
7 #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

15. What about Google TV?
8 #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

21. Opportunities
9 #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

27. #gtvweb #wdx

28. Demo: TV as a “social” center
#gtvweb #wdx

29. Google TV and the Web Platform
12 #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

33. What Makes Designing for TV Different?
13 #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

36. #gtvweb #wdx

37. Demo: Desktop vs 10ft UX
#gtvweb #wdx

38. What Makes Designing for TV Different?
15 #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

42. Technical Constraints - Resolution
16 #gtvweb #wdx

43. Technical Constraints - “Overscan” and Padding
17 #gtvweb #wdx

44. Technical Constraints - “Overscan” and Padding
“Action Safe” (3.5%)
“Title Safe” (5-10%)
17 #gtvweb #wdx

45. Technical Constraints - “Overscan” and Padding
Bad Good
18 #gtvweb #wdx

46. Practical Constraints of Designing for TV
19 #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

50. Practical Constraints of Designing for TV
20 #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

54. Practical Constraints of Designing for TV
Strong Focus Model
22 #gtvweb #wdx

55. Practical Constraints of TV
23 #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

65. #gtvweb #wdx

66. Developer Tools by Google
#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

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

74. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: HTML
<ul id="zone1">
<div class="item-row">
<li class="item-parent"><div class="item">ONE</div></li>
<li class="item-parent"><div class="item">TWO</div></li>
<li class="item-parent"><div class="item">THREE</div></li>
</div>
</ul>
<ul id="zone2">
<div class="item-row">
<li class="item-parent"><div class="item">FOUR</div></li>
<li class="item-parent"><div class="item">FIVE</div></li>
<li class="item-parent"><div class="item">SIX</div></li>
</div>
</ul>
37 #gtvweb #wdx

75. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: HTML
Stylize using CSS3
<ul id="zone1">
<div class="item-row">
<li class="item-parent"><div class="item">ONE</div></li>
<li class="item-parent"><div class="item">TWO</div></li>
<li class="item-parent"><div class="item">THREE</div></li>
</div>
</ul>
<ul id="zone2">
<div class="item-row">
<li class="item-parent"><div class="item">FOUR</div></li>
<li class="item-parent"><div class="item">FIVE</div></li>
<li class="item-parent"><div class="item">SIX</div></li>
</div>
</ul>
37 #gtvweb #wdx

76. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: HTML
Stylize using CSS3
ul {
<ul id="zone1"> list-style-type: none;
<div class="item-row"> margin: 0 auto 10px;
padding: 10px 20px 15px;
<li class="item-parent"><div class="item">ONE</div></li>
}
<li class="item-parent"><div class="item">TWO</div></li>
.item {
<li class="item-parent"><div class="item">THREE</div></li>
-webkit-transition: -webkit-box-shadow 300ms ease;
</div> }
</ul>
#zone1 .item {
border: 3px solid #89a;
<ul id="zone2"> display: inline-block;
<div class="item-row"> font-size: 30px;
<li class="item-parent"><div class="item">FOUR</div></li> 0 0;
margin: 0 15px
padding: 5px 0;
<li class="item-parent"><div class="item">FIVE</div></li>
text-align: center;
<li class="item-parent"><div class="item">SIX</div></li>
width: 170px;
</div> -webkit-border-radius: 10px;
}
</ul>
37 #gtvweb #wdx

77. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: JavaScript
var zone1 = new gtv.jq.KeyBehaviorZone({ var zone2 = new gtv.jq.KeyBehaviorZone({
containerSelector: '#zone1', containerSelector: '#zone2',
navSelectors: { navSelectors: {
item: '.item', item: '.item',
itemParent: '.item-parent', itemParent: '.item-parent',
itemRow: '.item-row' itemRow: '.item-row'
}, },
selectionClasses: { selectionClasses: {
basic: 'item-selected' basic: 'item-selected'
}, }
keyMapping: { });
13: enterCallback
}
});
// Add behavior zones
var keyController = new gtv.jq.KeyController();
keyController.addBehaviorZone(zone1);
keyController.addBehaviorZone(zone2);
keyController.start(zone1, true);
38 #gtvweb #wdx

78. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: JavaScript
var zone1 = new gtv.jq.KeyBehaviorZone({ var zone2 = new gtv.jq.KeyBehaviorZone({
containerSelector: '#zone1', containerSelector: '#zone2',
navSelectors: { selectors navSelectors: {
item: '.item', item: '.item',
itemParent: '.item-parent', itemParent: '.item-parent',
itemRow: '.item-row' itemRow: '.item-row'
}, },
selectionClasses: { selectionClasses: {
basic: 'item-selected' basic: 'item-selected'
}, }
keyMapping: { });
13: enterCallback
}
});
// Add behavior zones
var keyController = new gtv.jq.KeyController();
keyController.addBehaviorZone(zone1);
keyController.addBehaviorZone(zone2);
keyController.start(zone1, true);
38 #gtvweb #wdx

79. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: JavaScript
var zone1 = new gtv.jq.KeyBehaviorZone({ var zone2 = new gtv.jq.KeyBehaviorZone({
containerSelector: '#zone1', containerSelector: '#zone2',
navSelectors: { selectors navSelectors: {
item: '.item', item: '.item',
itemParent: '.item-parent', itemParent: '.item-parent',
itemRow: '.item-row' itemRow: '.item-row'
}, },
selectionClasses: { selectionClasses: {
basic: 'item-selected'
basic: 'item-selected' selected }
},
keyMapping: { });
13: enterCallback
}
});
// Add behavior zones
var keyController = new gtv.jq.KeyController();
keyController.addBehaviorZone(zone1);
keyController.addBehaviorZone(zone2);
keyController.start(zone1, true);
38 #gtvweb #wdx

80. Google TV jQuery UI Library (goo.gl/ObULa)
Keyboard Navigation: JavaScript
var zone1 = new gtv.jq.KeyBehaviorZone({ var zone2 = new gtv.jq.KeyBehaviorZone({
containerSelector: '#zone1', containerSelector: '#zone2',
navSelectors: { selectors navSelectors: {
item: '.item', item: '.item',
itemParent: '.item-parent', itemParent: '.item-parent',
itemRow: '.item-row' itemRow: '.item-row'
}, },
selectionClasses: { selectionClasses: {
basic: 'item-selected'
basic: 'item-selected' selected }
},
keyMapping: { });
13: enterCallback
} event handler
});
// Add behavior zones
var keyController = new gtv.jq.KeyController();
keyController.addBehaviorZone(zone1);
keyController.addBehaviorZone(zone2);
keyController.start(zone1, true);
38 #gtvweb #wdx

81. Google TV Closure UI Library (goo.gl/sCyj4)
Decorator: Concept
• Horizontal / Vertical container building blocks
• Scrolling containers
• Selectable components, buttons, links, input
• Decorate HTML using semantic class names
.tv-container-horizontal
.tv-container-start-scroll
.tv-component
.tv-link
... more
39 #gtvweb #wdx

82. Google TV Closure UI Library (goo.gl/sCyj4)
Decorator: HTML
Left Right
ul {
list-style-type: none;
<ul class="tv-container-horizontal"> margin: 0 auto 10px;
<li class="tv-component">1</li> padding: 10px 20px 15px;
<li class="tv-component">2</li> }
<li class="tv-component">3</li> 1 2 3 li {
border: 3px solid #333;
</ul> margin: 0 15px 0 0;
padding: 10px
-webkit-border-radius: 10px;
}
.tv-container-horizontal li {
<ul class="tv-container-vertical"> display: inline-block;
margin-right: 5px;
<li class="tv-component">1</li> 1 Up }
<li class="tv-component">2</li> .tv-container-vertical li {
<li class="tv-component">3</li> display: block;
</ul> 2 }
margin-bottom: 5px;
3 Down
40 #gtvweb #wdx

83. Google TV Closure UI Library (goo.gl/sCyj4)
Decorator: HTML
<div class="tv-container-vertical">
<ul class="tv-container-horizontal">
<li class="tv-component">1</li>
<li class="tv-component">2</li> 1 2 3
<li class="tv-component">3</li>
</ul>
<ul class="tv-container-horizontal">
<li class="tv-component">1</li>
<li class="tv-component">2</li>
<li class="tv-component">3</li>
</ul> 1 2 3
</div>
41 #gtvweb #wdx

84. Google TV Closure UI Library (goo.gl/sCyj4)
Decorator: HTML
1
<div class="tv-container-vertical"> 2
<ul class="tv-container-start-scroll">
<li class="tv-component">1</li>
3
<li class="tv-component">2</li>
<li class="tv-component">3</li> .tv-container-vertical {
<li class="tv-component">4</li> 4 height: 90px;
overflow: hidden;
<li class="tv-component">5</li> }
<li class="tv-component">6</li> 5
<li class="tv-component">7</li>
<li class="tv-component">8</li> 6
<li class="tv-component">9</li>
</ul> 7
</div>
8
9
42 #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

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

90. Summary
Docs: goo.gl/FIxrd Twitter: @googletvdev
Hash Tags: #gtvweb
Forum: goo.gl/RhuDw
Demos: goo.gl/ozKzk
Questions?
46 #gtvweb #wdx