Your SlideShare is downloading. ×
Designing The 10 Foot User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing The 10 Foot User Experience

6,952

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 …

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
0 Comments
22 Likes
Statistics
Notes

  • Be the first to comment

Show More
No Downloads
Views
Total Views
6,952
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
274
Comments
0
Likes
22
Embeds 0
No embeds
Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • Good afternoon! I’m Daniels Lee. I’m here to talk about designing/developing web applications for the 10ft experience. I’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’m Daniels Lee. I’m here to talk about designing/developing web applications for the 10ft experience. I’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 “Why should we even care about TV? Isn’t that old media? We have the web now!”\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’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’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’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’s ALL TVs - and what we’re really talking about is internet-capable, or “smart” tvs. Relatively speaking, there aren’t tons of them today. There are rougly 2 million in the US - but by 2014, it’s projected that there’ll be close to 43 million - nearly one third of the 115 million households in the US will have an internet-capable, “smart” TV.\n\n
  • Now, that’s ALL TVs - and what we’re really talking about is internet-capable, or “smart” tvs. Relatively speaking, there aren’t tons of them today. There are rougly 2 million in the US - but by 2014, it’s projected that there’ll be close to 43 million - nearly one third of the 115 million households in the US will have an internet-capable, “smart” TV.\n\n
  • Now, that’s ALL TVs - and what we’re really talking about is internet-capable, or “smart” tvs. Relatively speaking, there aren’t tons of them today. There are rougly 2 million in the US - but by 2014, it’s projected that there’ll be close to 43 million - nearly one third of the 115 million households in the US will have an internet-capable, “smart” 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 “media” activity - in fact, watching TV takes up more time than listening to music and computer use put together.  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’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’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’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’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 “what’s on” so you don’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’s silly to watch videos in a six-inch window on your 13” 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’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’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 “what’s on” so you don’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’s silly to watch videos in a six-inch window on your 13” 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’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’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 “what’s on” so you don’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’s silly to watch videos in a six-inch window on your 13” 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’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’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 “what’s on” so you don’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’s silly to watch videos in a six-inch window on your 13” 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’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’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 “what’s on” so you don’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’s silly to watch videos in a six-inch window on your 13” 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’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’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’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 “casual” 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’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’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’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 “casual” 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’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’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’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 “casual” 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’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’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’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’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 ‘leanback’ 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 “static” backgrounds in TV are usually subtly moving\n- Users’s mental space is much more passive\n\nIt’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 ‘leanback’ 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 “static” backgrounds in TV are usually subtly moving\n- Users’s mental space is much more passive\n\nIt’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’t working\n\n
  • Backup if net isn’t working\n\n
  • Let’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’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’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 “overscan”. 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’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 “overscan”, 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’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’d like to briefly talk about color. TV’s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it’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’s the most colorful, brightest, - the shiniest one. You’ll note that “Accurate” does not appear in that list of attributes.\n\nTV doesn’t typically have a white background like the web does - it’s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
  • Now I’d like to briefly talk about color. TV’s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it’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’s the most colorful, brightest, - the shiniest one. You’ll note that “Accurate” does not appear in that list of attributes.\n\nTV doesn’t typically have a white background like the web does - it’s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
  • Now I’d like to briefly talk about color. TV’s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it’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’s the most colorful, brightest, - the shiniest one. You’ll note that “Accurate” does not appear in that list of attributes.\n\nTV doesn’t typically have a white background like the web does - it’s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
  • Now I’d like to briefly talk about color. TV’s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it’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’s the most colorful, brightest, - the shiniest one. You’ll note that “Accurate” does not appear in that list of attributes.\n\nTV doesn’t typically have a white background like the web does - it’s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
  • Now I’d like to briefly talk about color. TV’s color gamut comes from the NTSC gamut, and its color profile is a bit different - and more importantly, it’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’s the most colorful, brightest, - the shiniest one. You’ll note that “Accurate” does not appear in that list of attributes.\n\nTV doesn’t typically have a white background like the web does - it’s typically dark if not black. White is like YOUR TV IS SCREAMING AT YOU.\n
  • When you “lean in and squint” 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’re sitting 10ft away, you only make it roughly 10% larger. \n\n
  • When you “lean in and squint” 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’re sitting 10ft away, you only make it roughly 10% larger. \n\n
  • When you “lean in and squint” 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’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’t expect them to scroll around to look for it. You may have head of the term “above the fold” - in newspapers, this is everything that goes in the top half of the newspaper, since it’s above the place where it’s folded in half. TV doesn’t really have a “below the fold” - users aren’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 “Play” was already selected? Yeah. Don’t do that. So make those design elements large, if the user needs to see them. This was surprising to me... the user can’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’re already used to it from their TV remote control, and their DVD or BluRay player remote, let alone their gaming console’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’s Windowshop application.\n
  • In that same vein, the user will typically want to use the directional pad for control - they’re already used to it from their TV remote control, and their DVD or BluRay player remote, let alone their gaming console’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’s Windowshop application.\n
  • In that same vein, the user will typically want to use the directional pad for control - they’re already used to it from their TV remote control, and their DVD or BluRay player remote, let alone their gaming console’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’s Windowshop application.\n
  • The biggest challenge with keyboard navigation is...\n
  • 1) Use window.location.hash and hashchange events\n2) Useful to create ‘waypoints’ in your app\n3) Useful for creating deep links within your app (more advanced)\n\nWhile we’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 “waypoints” 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’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’ve given holds true for ANY TV-Web platform - it’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’ 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’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’t moving at all, you’d think the TV channel’s computers had crashed. TV is a very dynamic experience, given that it’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’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’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 ‘geometry feature’: 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

    • Transcript

    • 1. #gtvweb #wdx
    • 2. Designing the 10 Foot User ExperienceDaniels LeeMay 13, 2011Twitter: @googletvdevTags: #gtvweb #wdx #gtvweb #wdx
    • 3. #gtvweb #wdx
    • 4. Why is Television Interesting? #gtvweb #wdx
    • 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. 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. 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. 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. 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. Why is Television Interesting?7 #gtvweb #wdx
    • 11. Why is Television Interesting?• TVs are more common than computers7 #gtvweb #wdx
    • 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. 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. What about Google TV?8 #gtvweb #wdx
    • 15. What about Google TV?• Improve TV as we know it today8 #gtvweb #wdx
    • 16. What about Google TV?• Improve TV as we know it today8 #gtvweb #wdx
    • 17. What about Google TV?• Improve TV as we know it today• Combine TV and the Web8 #gtvweb #wdx
    • 18. What about Google TV?• Improve TV as we know it today• Combine TV and the Web8 #gtvweb #wdx
    • 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. Opportunities9 #gtvweb #wdx
    • 21. Opportunities •Media consumption with social aspect –Watching the game “together”9 #gtvweb #wdx
    • 22. Opportunities •Media consumption with social aspect –Watching the game “together” •Applications that span - and morph between - devices9 #gtvweb #wdx
    • 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. Opportunities •Applications using paired “virtual controllers” – Connecting mobile devices and tablets to “drive,” with the TV as output10 #gtvweb #wdx
    • 25. Opportunities •Applications using paired “virtual controllers” – Connecting mobile devices and tablets to “drive,” with the TV as output10 #gtvweb #wdx
    • 26. #gtvweb #wdx
    • 27. Demo: TV as a “social” center #gtvweb #wdx
    • 28. Google TV and the Web Platform12 #gtvweb #wdx
    • 29. Google TV and the Web Platform • Google TV is based on Android12 #gtvweb #wdx
    • 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. 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. What Makes Designing for TV Different?13 #gtvweb #wdx
    • 33. What Makes Designing for TV Different? TV is a different mental space: user is in “couch mode”13 #gtvweb #wdx
    • 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. #gtvweb #wdx
    • 36. Demo: Desktop vs 10ft UX #gtvweb #wdx
    • 37. What Makes Designing for TV Different?15 #gtvweb #wdx
    • 38. What Makes Designing for TV Different? •Technical constraints of TV – Device issues: resolution, overscan, color, etc.15 #gtvweb #wdx
    • 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. 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. Technical Constraints - Resolution16 #gtvweb #wdx
    • 42. Technical Constraints - “Overscan” and Padding17 #gtvweb #wdx
    • 43. Technical Constraints - “Overscan” and Padding “Action Safe” (3.5%) “Title Safe” (5-10%)17 #gtvweb #wdx
    • 44. Technical Constraints - “Overscan” and Padding Bad Good18 #gtvweb #wdx
    • 45. Practical Constraints of Designing for TV19 #gtvweb #wdx
    • 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. 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. 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. Practical Constraints of Designing for TV20 #gtvweb #wdx
    • 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. 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. Practical Constraints of Designing for TV • No horizontal/vertical scroll bars • Place content “above the fold” • Use strong visual cues21 #gtvweb #wdx
    • 53. Practical Constraints of Designing for TV Strong Focus Model22 #gtvweb #wdx
    • 54. Practical Constraints of TV23 #gtvweb #wdx
    • 55. Practical Constraints of TV • D-Pad is better than mice/trackpads – Don’t rely on keyboard shortcuts, either23 #gtvweb #wdx
    • 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. 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. 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. 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. 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. Design Guidance for Web Apps on TV Make the most of your space27 #gtvweb #wdx
    • 62. Design Guidance for Web Apps on TV != Sit Back. Test Your Design on TV.28 #gtvweb #wdx
    • 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. #gtvweb #wdx
    • 65. Developer Tools by Google #gtvweb #wdx
    • 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. #gtvweb #wdx
    • 68. Google TV Web UI Librariesgoo.gl/8ajdi #gtvweb #wdx
    • 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. 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. Google TV Web UI Libraries (goo.gl/8ajdi) 1 HTML: Structure 2 CSS: Presentation 3 JavaScript: Initialize / Events35 #gtvweb #wdx
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. #gtvweb #wdx
    • 86. Google TV Web UI Library Demosgoo.gl/ozKzk #gtvweb #wdx
    • 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. 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. Summary Docs: goo.gl/FIxrd Twitter: @googletvdev Hash Tags: #gtvweb Forum: goo.gl/RhuDw Demos: goo.gl/ozKzk Questions?46 #gtvweb #wdx

    ×