Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#gtvweb #wdx
Designing the 10 Foot User ExperienceDaniels LeeMay 13, 2011Twitter: @googletvdevTags: #gtvweb #wdx    #gtvweb #wdx
#gtvweb #wdx
Why is Television Interesting?   #gtvweb #wdx
Why is Television Interesting?    100%    90%    80%    70%    60%    50%    40%    30%    20%    10%     0%             C...
Why is Television Interesting?    100%    90%    80%    70%                                                               ...
Why is Television Interesting?    45M                                        43M    40M    35M    30M    25M    20M    15M...
Why is Television Interesting?        45M                                                                                 ...
Media Use in 8- to 18-Year-Olds                                                                        Movies             ...
Why is Television Interesting?7   #gtvweb #wdx
Why is Television Interesting?• TVs are more common than computers7   #gtvweb #wdx
Why is Television Interesting?• TVs are more common than computers• Americans spend more time watching TV than any other  ...
Why is Television Interesting?• TVs are more common than computers• Americans spend more time watching TV than any other  ...
What about Google TV?8   #gtvweb #wdx
What about Google TV?• Improve TV as we know it today8   #gtvweb #wdx
What about Google TV?• Improve TV as we know it today8   #gtvweb #wdx
What about Google TV?• Improve TV as we know it today• Combine TV and the Web8   #gtvweb #wdx
What about Google TV?• Improve TV as we know it today• Combine TV and the Web8   #gtvweb #wdx
What about Google TV?• Improve TV as we know it today• Combine TV and the Web• Transform TV into an open development platf...
Opportunities9   #gtvweb #wdx
Opportunities    •Media consumption with social aspect     –Watching the game “together”9    #gtvweb #wdx
Opportunities    •Media consumption with social aspect     –Watching the game “together”    •Applications that span - and ...
Opportunities    •Media consumption with social aspect     –Watching the game “together”    •Applications that span - and ...
Opportunities     •Applications using paired “virtual controllers”      – Connecting mobile devices and tablets to “drive,...
Opportunities     •Applications using paired “virtual controllers”      – Connecting mobile devices and tablets to “drive,...
#gtvweb #wdx
Demo: TV as a “social” center  #gtvweb #wdx
Google TV and the Web Platform12   #gtvweb #wdx
Google TV and the Web Platform     • Google TV is based on Android12     #gtvweb #wdx
Google TV and the Web Platform     • Google TV is based on Android     • Google TV’s web platform is Chrome      – “Modern...
Google TV and the Web Platform     • Google TV is based on Android     • Google TV’s web platform is Chrome      – “Modern...
What Makes Designing for TV Different?13   #gtvweb #wdx
What Makes Designing for TV Different?                    TV is a different mental space:                       user is in...
What Makes Designing for TV Different?                       TV is a different mental space:                          user...
#gtvweb #wdx
Demo: Desktop vs 10ft UX  #gtvweb #wdx
What Makes Designing for TV Different?15   #gtvweb #wdx
What Makes Designing for TV Different?     •Technical constraints of TV      – Device issues: resolution, overscan, color,...
What Makes Designing for TV Different?     •Technical constraints of TV      – Device issues: resolution, overscan, color,...
What Makes Designing for TV Different?     •Technical constraints of TV      – Device issues: resolution, overscan, color,...
Technical Constraints - Resolution16   #gtvweb #wdx
Technical Constraints - “Overscan” and Padding17   #gtvweb #wdx
Technical Constraints - “Overscan” and Padding                    “Action Safe” (3.5%)                    “Title Safe” (5-...
Technical Constraints - “Overscan” and Padding                    Bad                      Good18   #gtvweb #wdx
Practical Constraints of Designing for TV19   #gtvweb #wdx
Practical Constraints of Designing for TV     • The color gamut is different on TV      – TVs are also frequently not cali...
Practical Constraints of Designing for TV     • The color gamut is different on TV      – TVs are also frequently not cali...
Practical Constraints of Designing for TV     • The color gamut is different on TV      – TVs are also frequently not cali...
Practical Constraints of Designing for TV20   #gtvweb #wdx
Practical Constraints of Designing for TV     • Optimize your text carefully      – Limit content length      – Avoid smal...
Practical Constraints of Designing for TV     • Optimize your text carefully      – Limit content length      – Avoid smal...
Practical Constraints of Designing for TV     • No horizontal/vertical scroll bars     • Place content “above the fold”   ...
Practical Constraints of Designing for TV                       Strong Focus Model22   #gtvweb #wdx
Practical Constraints of TV23   #gtvweb #wdx
Practical Constraints of TV     • D-Pad is better than mice/trackpads      – Don’t rely on keyboard shortcuts, either23   ...
Practical Constraints of TV     • D-Pad is better than mice/trackpads      – Don’t rely on keyboard shortcuts, either     ...
Practical Constraints of TV     • The expected D-Pad focus model is 2-dimensional        • The Web platform is used to a l...
Enabling The “Back” Key        What happens when the user hits the “Back” key is one        of the most-overlooked feature...
Enabling The “Back” Key        What happens when the user hits the “Back” key is one        of the most-overlooked feature...
Technical Points Specific to Google TV     • Autozoom       – Google TV automatically scales web pages to fit your TV disp...
Design Guidance for Web Apps on TV                    Make the most of your space27   #gtvweb #wdx
Design Guidance for Web Apps on TV                                  !=                    Sit Back. Test Your Design on TV...
Design Guidance for Web Apps on TV     • Visual feedback and motion      – Display visual feedback for all actions      – ...
#gtvweb #wdx
Developer Tools by Google  #gtvweb #wdx
Google TV UI Templates     • Site templates designed for 10ft living room experience     • Both templates are provided in ...
#gtvweb #wdx
Google TV Web UI Librariesgoo.gl/8ajdi  #gtvweb #wdx
Google TV Web UI Libraries (goo.gl/8ajdi)      Google TV jQuery UI Library     $(mydiv)                      goo.gl/ObULa ...
Google TV Web UI Libraries (goo.gl/8ajdi)      Google TV jQuery UI Library     • Requires more JavaScript                 ...
Google TV Web UI Libraries (goo.gl/8ajdi)     1      HTML: Structure     2      CSS: Presentation     3      JavaScript: I...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: Concept                                • Key behavior zones...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: HTML<ul id="zone1"> <div class="item-row">  <li class="item...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: HTML                                                       ...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: HTML                                                       ...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar zone1 = new gtv.jq.KeyBehaviorZone({         ...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar zone1 = new gtv.jq.KeyBehaviorZone({         ...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar zone1 = new gtv.jq.KeyBehaviorZone({         ...
Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar zone1 = new gtv.jq.KeyBehaviorZone({         ...
Google TV Closure UI Library (goo.gl/sCyj4)Decorator: Concept                             • Horizontal / Vertical containe...
Google TV Closure UI Library (goo.gl/sCyj4)Decorator: HTML                                       Left       Right         ...
Google TV Closure UI Library (goo.gl/sCyj4)Decorator: HTML<div class="tv-container-vertical"> <ul class="tv-container-hori...
Google TV Closure UI Library (goo.gl/sCyj4)Decorator: HTML                                          1<div class="tv-contai...
Google TV Closure UI Library (goo.gl/sCyj4)Decorator: JavaScript// Execute the decoratortry {  tv.ui.decorate(goog.dom.get...
#gtvweb #wdx
Google TV Web UI Library Demosgoo.gl/ozKzk  #gtvweb #wdx
Summary     •Think about how your apps apply to the TV space     •Think about new applications you could build     •Think ...
Summary     •Think about how your apps apply to the TV space     •Think about new applications you could build     •Think ...
Summary     Docs: goo.gl/FIxrd                 Twitter: @googletvdev                                        Hash Tags: #gt...
Designing The 10 Foot User Experience
Upcoming SlideShare
Loading in …5
×

Designing The 10 Foot User Experience

10,080 views

Published on

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.

Published in: Technology
  • Be the first to comment

Designing The 10 Foot User Experience

  1. 1. #gtvweb #wdx
  2. 2. Designing the 10 Foot User ExperienceDaniels LeeMay 13, 2011Twitter: @googletvdevTags: #gtvweb #wdx #gtvweb #wdx
  3. 3. #gtvweb #wdx
  4. 4. Why is Television Interesting? #gtvweb #wdx
  5. 5. Why is Television Interesting? 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% Computers Mobile Devices TVs % of households4 #gtvweb #wdx
  6. 6. 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 Figures4 #gtvweb #wdx
  7. 7. Why is Television Interesting? 45M 43M 40M 35M 30M 25M 20M 15M 10M 5M 2M 0M 2010 2014 (proj) Smart TV Adoption5 #gtvweb #wdx
  8. 8. 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 20145 #gtvweb #wdx
  9. 9. Media Use in 8- to 18-Year-Olds Movies Print 4% 6% Video Games 11% TV 42% Computer 14% Music/audioSource: Kaiser Family Foundation: “Media in the Lives 23%of 8- to 18-Year-Olds” (2009)6 #gtvweb #wdx
  10. 10. Why is Television Interesting?7 #gtvweb #wdx
  11. 11. Why is Television Interesting?• TVs are more common than computers7 #gtvweb #wdx
  12. 12. Why is Television Interesting?• TVs are more common than computers• Americans spend more time watching TV than any other media activity7 #gtvweb #wdx
  13. 13. 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 time7 #gtvweb #wdx
  14. 14. What about Google TV?8 #gtvweb #wdx
  15. 15. What about Google TV?• Improve TV as we know it today8 #gtvweb #wdx
  16. 16. What about Google TV?• Improve TV as we know it today8 #gtvweb #wdx
  17. 17. What about Google TV?• Improve TV as we know it today• Combine TV and the Web8 #gtvweb #wdx
  18. 18. What about Google TV?• Improve TV as we know it today• Combine TV and the Web8 #gtvweb #wdx
  19. 19. What about Google TV?• Improve TV as we know it today• Combine TV and the Web• Transform TV into an open development platform for Apps8 #gtvweb #wdx
  20. 20. Opportunities9 #gtvweb #wdx
  21. 21. Opportunities •Media consumption with social aspect –Watching the game “together”9 #gtvweb #wdx
  22. 22. Opportunities •Media consumption with social aspect –Watching the game “together” •Applications that span - and morph between - devices9 #gtvweb #wdx
  23. 23. Opportunities •Media consumption with social aspect –Watching the game “together” •Applications that span - and morph between - devices •Casual games, particularly multi-player9 #gtvweb #wdx
  24. 24. Opportunities •Applications using paired “virtual controllers” – Connecting mobile devices and tablets to “drive,” with the TV as output10 #gtvweb #wdx
  25. 25. Opportunities •Applications using paired “virtual controllers” – Connecting mobile devices and tablets to “drive,” with the TV as output10 #gtvweb #wdx
  26. 26. #gtvweb #wdx
  27. 27. Demo: TV as a “social” center #gtvweb #wdx
  28. 28. Google TV and the Web Platform12 #gtvweb #wdx
  29. 29. Google TV and the Web Platform • Google TV is based on Android12 #gtvweb #wdx
  30. 30. 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 natively12 #gtvweb #wdx
  31. 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 • Updates automatically over the network12 #gtvweb #wdx
  32. 32. What Makes Designing for TV Different?13 #gtvweb #wdx
  33. 33. What Makes Designing for TV Different? TV is a different mental space: user is in “couch mode”13 #gtvweb #wdx
  34. 34. 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
  35. 35. #gtvweb #wdx
  36. 36. Demo: Desktop vs 10ft UX #gtvweb #wdx
  37. 37. What Makes Designing for TV Different?15 #gtvweb #wdx
  38. 38. What Makes Designing for TV Different? •Technical constraints of TV – Device issues: resolution, overscan, color, etc.15 #gtvweb #wdx
  39. 39. 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
  40. 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. •Design guidance for TV – What makes a “TV experience”15 #gtvweb #wdx
  41. 41. Technical Constraints - Resolution16 #gtvweb #wdx
  42. 42. Technical Constraints - “Overscan” and Padding17 #gtvweb #wdx
  43. 43. Technical Constraints - “Overscan” and Padding “Action Safe” (3.5%) “Title Safe” (5-10%)17 #gtvweb #wdx
  44. 44. Technical Constraints - “Overscan” and Padding Bad Good18 #gtvweb #wdx
  45. 45. Practical Constraints of Designing for TV19 #gtvweb #wdx
  46. 46. 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 reds19 #gtvweb #wdx
  47. 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 • Non-white background colors are best – WHITE IS LIKE ALL CAPS – White backgrounds can cause halos19 #gtvweb #wdx
  48. 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 Always test on a real TV display!19 #gtvweb #wdx
  49. 49. Practical Constraints of Designing for TV20 #gtvweb #wdx
  50. 50. Practical Constraints of Designing for TV • Optimize your text carefully – Limit content length – Avoid small text sizes – Make it as big as needed, then bigger20 #gtvweb #wdx
  51. 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 • Typical on-screen font guidance applies: – Sans-serif fonts tend to be more readable – Don’t use too many fonts in one page20 #gtvweb #wdx
  52. 52. Practical Constraints of Designing for TV • No horizontal/vertical scroll bars • Place content “above the fold” • Use strong visual cues21 #gtvweb #wdx
  53. 53. Practical Constraints of Designing for TV Strong Focus Model22 #gtvweb #wdx
  54. 54. Practical Constraints of TV23 #gtvweb #wdx
  55. 55. Practical Constraints of TV • D-Pad is better than mice/trackpads – Don’t rely on keyboard shortcuts, either23 #gtvweb #wdx
  56. 56. 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
  57. 57. 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 model24 #gtvweb #wdx
  58. 58. 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
  59. 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.•Set window.location.hash and listen to “hashchange” events•Don’t over-use this, though!25 #gtvweb #wdx
  60. 60. 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
  61. 61. Design Guidance for Web Apps on TV Make the most of your space27 #gtvweb #wdx
  62. 62. Design Guidance for Web Apps on TV != Sit Back. Test Your Design on TV.28 #gtvweb #wdx
  63. 63. 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
  64. 64. #gtvweb #wdx
  65. 65. Developer Tools by Google #gtvweb #wdx
  66. 66. 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/guzvn31 #gtvweb #wdx
  67. 67. #gtvweb #wdx
  68. 68. Google TV Web UI Librariesgoo.gl/8ajdi #gtvweb #wdx
  69. 69. 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
  70. 70. 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
  71. 71. Google TV Web UI Libraries (goo.gl/8ajdi) 1 HTML: Structure 2 CSS: Presentation 3 JavaScript: Initialize / Events35 #gtvweb #wdx
  72. 72. 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 distance36 #gtvweb #wdx
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar 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
  77. 77. Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar 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
  78. 78. Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar 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
  79. 79. Google TV jQuery UI Library (goo.gl/ObULa)Keyboard Navigation: JavaScriptvar 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
  80. 80. 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 ... more39 #gtvweb #wdx
  81. 81. 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 Down40 #gtvweb #wdx
  82. 82. 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
  83. 83. 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 942 #gtvweb #wdx
  84. 84. Google TV Closure UI Library (goo.gl/sCyj4)Decorator: JavaScript// Execute the decoratortry { tv.ui.decorate(goog.dom.getElement(main));} catch (e) { alert(e.message);}// Set focus on initial elementvar focusElement = goog.dom.getElementByClass(first-focus);var focusComponent = tv.ui.getComponentByElement(focusElement);focusComponent.tryFocus();43 #gtvweb #wdx
  85. 85. #gtvweb #wdx
  86. 86. Google TV Web UI Library Demosgoo.gl/ozKzk #gtvweb #wdx
  87. 87. 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 & mobile45 #gtvweb #wdx
  88. 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 Get a Google TV device and start developing!45 #gtvweb #wdx
  89. 89. Summary Docs: goo.gl/FIxrd Twitter: @googletvdev Hash Tags: #gtvweb Forum: goo.gl/RhuDw Demos: goo.gl/ozKzk Questions?46 #gtvweb #wdx

×