- Design Considerations
- Work To Be Done
- Optimization Activities
- Tips for Individual Page Design
- Custom Bookmark Icons via Favicons
You should make at least a few modifications to sites designed for use on a computer-based browser in order to make a site usable on a 10-foot UI.
Notice the modifications that have been made between the two YouTube user experiences shown here:
There are several noteworthy changes:
- The sizes of all the fonts and buttons were increased
- The "selected" item or item with the mouse over it is clearly highlighted
- The user can navigate intuitively around the page using D-pad up/down/left/right motions
- Additional padding has been added between all elements on the page
- Darker or slightly muted colors have been chosen to suit TVs that are generally tuned to be brighter
Viewer's distance from the screen
TV viewers sit relatively far from their screens. This distance makes a traditional web page harder to read, cluttered, and more difficult to perform basic tasks like navigating menus and selecting buttons.
When designing a web page for TV, the viewable area should display less information overall, and what's there should focus on a confined set of tasks (even consider performing their desired task automatically or select by default). Try to keep all content "above the fold" and fully viewable on the screen without scrolling down.
- Fonts and graphics on the site need to be larger to account for viewing distance. People sit proportionally farther from a TV than from a computer monitor of the same size.
- To avoid a cluttered appearance on the TV, blank space between elements on the page should be greater. This is typically called white space (or padding) and it's a fundamental aspect of making web content easy to discern and navigate.
- Wide screen displays have more usable horizontal real estate than a desktop monitor, so navigation is better handled from the side (conserving valuable vertical space for content) or as an overlay.
Performance vs. visual appeal
Studies overwhelming show that users prefer fast sites -- so it's best to balance any flashy visual appeal with performance considerations. Also, Google TV may not be able to render a page as quickly as your workstation. Before requiring many complex animations for your page to render, test/consider the impact on user satisfaction. Simple, front-end performance improvements (e.g. place style sheets at the top and scripts on the bottom) can be found at code.google.com/speed.
Vertical scrolling, while fundamental on a desktop browser, may not be as appealing on the TV UI. Scrolling can appear less seamless, and important information may be hidden below the fold if users don't recognize that more content exists off-screen. A better approach is to make use of horizontal layouts and visual transitions between pages of content.
Human interface to browser
Google TV includes a "remote" that consists of a keyboard with a pointing device for cursor movements. Many users will have this remote on the sofa with them, and may have difficulty with precise positioning of the cursor -- like a newbie playing video games. Except that they may not be as patient as a first-time gamer (they just want to watch a video!). Try to keep this user happy. Elements on the page should have large selection surfaces for mouse users. Expanding the surface when the user mouses over an element makes it easier for a user to select the right item on the page. Complex or precise movements with a mouse, such as drag-and-drop actions or drop-down menu selections have a high probability of causing frustration.
The main interface of Google TV encourages the use of the D-pad on the remote to make selections on a screen -- it's likely that users will keep this habit even on the web. Web pages should allow every primary activity on it to be engaged from the D-pad: moving through available actions, scrolling through options, selecting items, etc. When navigating with the D-pad, clearly highlight the active item, and make directional movement between items visually and physically logical.
Transitions between pages can also help make D-pad usage more intuitive. For instance, movement of elements on the page in response to actions can be a cue to users on how to "go back" or "reverse" their choice. If a user selects an action that causes a new page to slide in from the right, they can intuitively guess that D-pad left should return them to the previous page. The goal is to allow the user to intuit what will happen on the page based on the "direction" they want to go.
Work To Be Done
Now that you have more of a high-level understanding, let's take stock of what needs to done...
Consider which pages require total redesign vs. simplification
Many video sites have at least 3 types of pages:
- Category page
- Individual video page
It's likely that some pages, such as your homepage, may need a complete overhaul (e.g. YouTube as shown above). Category pages will hopefully require modification rather than rewrite. And it's expected that individual content/video pages require even fewer modifications.
As a side note, remember that the Google TV browser displays all windows in full-screen. Pop-up windows that are meant to display over or alongside the main page will, on Google TV, instead obscure the main page. Any part of the window without content will simply be blank. Pop-up ads, in particular, greatly disrupt the flow of a website on the TV browser. You can check the user-agent and choose not to show a pop-up for the TV experience.
We'll cover these individual pages later. But the main point here is that it's totally doable! A TV optimized site will soon be yours.
TV Optimization Activities
Designing the Experience
When creating an optimized website targeted for Google TV behind a 10-foot UI, keep in mind the many variations of layout and the contrasting dynamics between each. Additional components to consider include setting appropriate zoom levels, lowering latencies to ensure good performance, and optimizing sizes behind each piece of content.
Despite the much greater size of TV displays, the apparent size of elements in a 10-foot experience is noticeably smaller than what is commonly found on PCs. In a PC experience, increasing the display size dramatically increases the apparent size of each pixel. But because the viewer is sitting so much farther from a TV, the same increase in screen size yields a much lower apparent increase in pixel size*.
(*This is because the apparent pixel size is a function of the angle covered by that pixel in the visual field of the viewer. To preserve the apparent size as the viewer recedes from the screen (opposite side lengthens) requires the size of the pixel (adjacent side) to increase at a rate that keeps the angle the same. For more detail, read http://www.w3.org/TR/CSS2/syndata.html#length-units)
Keep in mind that TV displays come in multiple resolutions categories: 720p and 1080i/p (the 'i' and 'p' designations don't impact the number of pixels available). The exact pixel dimensions of the display varies by TV manufacturer.
TV displays also have varying degrees of "overscan", depending on the manufacturer. Overscan is the portion of the screen that is pixel-addressable by the hardware, but outside of the viewing area of the display. This area is not accessible by software (including the web browser). Every TV you test will likely have a different amount of overscan.
By default, the Google TV browser automatically zooms content to make it readable and to fit the user’s TV screen (within reason: it won’t over-zoom if there is limited content on a page). This is a benefit to users who are browsing to sites that have not been optimized for a 10-foot experience. However, this automatic zooming has potential disadvantages. In some cases, the site may not display as originally intended and there may be a reduction in performance.
If you are designing your site specifically for Google TV, you might benefit from controlling layout and sizing of your content directly. You’ll get the layout you want and you’ll see performance improvements. See how to disable autozoom.
Putting it All Together
If you choose to keep autozoom enabled, your best option is to design for one resolution to display unzoomed, and then rely on autozoom to handle the other resolution.
If you pick 720p and specify content at that resolution, the client will have to download less data to display the page; however, the page will have to be scaled by the Google TV up to 1080p, which could result in your content appearing less clear or crisp. If you choose 1080p, you’ll be downloading hi-res data for everyone, but the effort required to downscale this data to 720p is lower.
One benefit to using autozoom is that you don’t have to worry about overscan: autozoom will make sure that your content is accessible to the user. Though convenient, this benefit comes with a few caveats. First, autozoom will try to zoom content so that it is visible from a distance. This will likely result in the browser placing horizontal and vertical scrollbars on the main window, requiring the user to scroll around the page to see everything on it. Second, it is possible for users to disable autozoom, so if your site relies on it, your pages may not render as intended for those users.
If you choose to disable autozoom and size your content directly, you have a few more decisions to make.
Deal with Overscan
First, realize that you’ll have to deal with overscan when autozoom is disabled, regardless of what resolution(s) you design for.
If you lay out your page to use a single, fixed width and height (e.g., 1920x1080 pixels), some of your content will be likely hidden on the sides of the display. You are better off measuring the size of the window when your page loads, and using that information to size the elements on your page. Alternatively, you can float your elements on the page and use the CSS3 flexible box model to make sure that your elements are sized automatically by the browser to fit the layout you intend.
It is important to understand that the browser window is always offset and sized to fit the visible area of the display (that is, as long as your content is within the window boundaries, it will be visible). Also, realize that this window has the same behavior as a browser window in other contexts: if you place content outside the visible area of the screen (that is, in the overscan space) it will trigger scroll bars on the window. (You can disable the scroll bars by setting the CSS property
overflow: hidden on the body, but your content will remain outside of the display area and inaccessible to the user unless you use script to move it into view.)
The Chrome browser in Google TV supports the non-standard CSS
zoom property. This can be included as usual in CSS stylesheets and in element style attributes, but since it is non-standard, the effect may only be visible when tested on Google TV.
For reasons of both image quality and performance, it’s important that you not attempt to stretch your content to fill in the entire display area using a calculated value for the zoom style attribute. Doing so forces Google TV to render a fractionally-zoomed page (e.g., 1.06x) which will take CPU time and result in degraded image quality. Your best bet is to simply design expecting this empty space around your pages.
Use the following worst-case approximations for the browser window on a display with overscan, and test your content on a variety of displays (720p or 1080p) for best results:
Next, you have to decide if you’ll design for 720p, 1080i/p, or both.
If you design for a single resolution, make sure you don’t use a zoom factor for the “native” resolution. This will keep performance high for the chosen resolution.
For the non-native resolution, you’ll have to scale your content using the
zoom property (as noted in the previous section, this is a non-standard style property available on Google TV’s Chrome browser). This short code sample shows how to do this. Since this scaling operation is CPU intensive, it will reduce the performance of your site, particularly if you have Flash content and large images.
To ensure the best performance, choose a fixed zoom factor for the non-native resolution that allows scaling by doubling or halving (e.g., 1.5x for converting native 720p content to 1080p). Computing an odd zoom factor with the intention of fitting content perfectly to the screen in the non-native resolution (e.g., 1.46x) will not only reduce the performance of your site but reduce the visual quality of the scaled images.
You’ll get the best performance and fidelity if you design separate pages for both 720p and 1080p.
In spite of the extra work, we think your users will appreciate the benefits of a site tailored to their TV’s resolution.
A Few Notes
Keep these in mind as you start thinking about desingning for TV:
- Remember that the Google TV browser is the Google Chrome Browser, which allows you take advantage of various HTML5 features. You can use CSS 3 transformations, local data storage, application caches, new form field types, media tags (audio & video), and much more. Check out html5rocks for more information on HTML5 and its use in Google Chrome.
To keep the relative size of your content correct, a good rule of thumb is to increase the size of an element (such as an image or font) 1.5x for 720p and 2.0x for 1080p relative to the size of that element in a normal PC browser experience.
Rework the navigation
Because using a remote and watching TV is about being brain-dead (just kidding! we just mean "relaxed"), as we mentioned earlier, your TV interface should be simple. No one wants to work hard when loafing on the couch.
Simplify category navigation
If your pages display both top and side category navigation, we suggest removing the top nav. TV screen space is plentiful on the sides, but vertical space is precious.
Even more fancy is to include navigation as an overlay (though we're not covering this further in the quick start guide).
Keep categories selection above the fold. This may require reducing overall categories. If you're optimizing your site through CSS, you can place categories in divs and hide eliminated categories with display:none.
Consider reworking (or at minimum, make sure you test) any complicated AJAX-y nested navigation that involves a lot of subcategories within close proximity.
Currently, Google TV and the Chrome browser don't scroll up/down as seamlessly as the desktop experience. At this time, we advise keeping all content above the fold.
- Segments of your page scroll can scroll vertically to reveal new content (i.e. the left nav bar remains static while central area scrolls through content). This will likely have better performance than scrolling the entire page down.
- "Down arrows" to help users be aware that there exists content below the fold, as well as how to reach it.
Enlarge options and emphasize the selection
In a living room experience, the remote is a little clunkier than a mouse and the user is further away. Help the user by highlighting selections and making them big and easy to see.
- Add a hover state to links and buttons to highlight when the pointer has hit its target.
- Make each click target (link, button, and the like) large with ample padding for an expanded target area.
- Elements like close boxes in the corners of pop-ups that are made small to be unobtrusive in a 2-foot UI are either impossible to see or very difficult to click with a mouse from 10 feet.
- Avoid requiring mouse clicks to close pop-ups. For example, some sites designed for the PC will close a pop-up when the user clicks elsewhere on the page; in a 10-foot experience this counter-intuitive. Supply an explicit means to close the window, and make it accessible by D-pad navigation.
- Don't require the user to click on the primary control to make it active. Pages or pop-ups with scrolling elements should either give those elements focus or process the D-pad such that the element can be scrolled without having focus. Requiring the user to click on the element before they can scroll it is obtrusive.
Explain your navigation system
Navigation through your 10-foot experience will be new to most of your users. Providing them with an explanation of how to get around your site will ease user frustration.
- The D-pad arrow keys: do they move between pages? open context or navigation menus? and so on.
- The back button: does it move to a previous page? undo an action? close a pop-up?
- Media keys: what does play/pause do? what about skip forward/skip back?
- Other keys: do you have a key mapped to cancel actions or close pop-ups (such as ESC)?
Consider opening a pop-up on your site home page to offer this navigation help so users are given assistance up-front.
Make text easy on the eyes
For TV, avoid lightweight fonts or fonts with both very narrow and broad strokes. Use simply constructed sans serif fonts and apply anti-aliasing to increase readability.
Google TV currently supports only the Droid Sans and Droid Serif font families.
You can use font embedding techniques to create a more customized appearance. Please see the Fonts section in Implementation Tips for details on how to use more fonts.
- Limit paragraphs to no more than 90 words.
- Break text into small chunks that can be read at a glance.
- Keep line length at about 5-7 words per line. Never go shorter than 3 or longer than 12.
- Remember that light text on a dark background is slightly easier to read on TV (compared to dark text on a light background).
- Target body text to be around 21pt on 720p and 28pt on 1080p.
- Don't use any text smaller than 18pt on 720p and 24pt on 1080p.
- Add more leading (larger line spacing) for onscreen text than print text.
TV screens have higher contrast and saturation levels than computer monitors. Here are guidelines for working with solid colors:
- Use pure white (#FFFFFF) sparingly. Pure whites cause vibrancy or image ghosting in TV displays. Instead use #F1F1F1 or 240/240/240 (RGB).
- Bright whites, reds, and oranges cause particularly bad distortion.
- Be conscious of various display modes that TVs may have. These include Standard, Vivid, Cinema/Theater, Game, etc. Be sure to test your web pages in all these modes.
- Be conscious of using large spanning gradients, it may result in banding if not properly tested.
- Test your website on lower quality displays which may have poor gamma and color settings.
Tips for individual page design
Designing a homepage goes far beyond the scope of a quick start guide :), but still, we can't help but give a few tips.
Your homepage probably links to tons of cool stuff for desktop users, now remove what doesn't work for TV. For example, "Create" here is likely unnecessary for TV.
Check your analytics for the least used links. What's the click through rate on "Live Events"? Can it be removed? (Again, these options can also go single-file on the side of the page rather than the top.)
While your desktop homepage may display tons of cool featured videos, perhaps best to scale it down, as shown with YouTube's desktop vs. TV versions.
Keep it above the fold
Keep it above the fold. Many web sites have banner ads on the top of the page. On a TV experience, these ads can consume most of the TV viewer's screen, forcing them to scroll down in order to see your content.
On category pages, things are a little tricky. Users often want selection, but for TV, it's best if this selection remains above the fold and the navigation simple.
Make sure each option is well highlighted.
When there are more selections than fit above the fold, rather than have the user scroll the page down, consider a left to right selection mechanism.
When using a TV, once we select a channel, we expect to immediately see the show. So when a user clicks the URL of an individual video on TV, it's probably fair to assume they want the same behavior.
Consider auto-playing the video (and even in full screen).
Make full-screen option prominent and highlighted by default as the first action (if you choose not to auto-play).
Custom Bookmark Icons via Favicons
The Honeycomb version of Google TV will introduce a new feature that allows custom icons to be used for web sites that are bookmarked and added to the applications folder or the app launcher bar in the home screen.
When a user bookmarks a web site on Google TV, they will be presented with the option of adding the web site as an icon on the home screen or as an application shortcut in the applications folder.
If a high-resolution “favicon” is referenced via a meta tag in the <head> of the particular page being bookmarked, then the favicon will be used to represent the web site (along with the page title), rather than the default bookmark icon (the default bookmark icon is a generic icon used for sites that do not specify a high-resolution favicon).
Referencing the Favicon
The favicon can be referenced by including a <link> meta tag with the three attributes: rel, href, and type. The rel attribute specifies the type of link, which in this case is an icon, the href attribute specifies the relative or absolute path to the favicon image, and the type attribute specifies the MIME type for the icon. You can use either GIF, PNG, or ICO graphics files for your favicon.
The Chrome browser on Google TV uses the favicon to display a smaller icon when the browser’s address bar is displayed for a particular site, and the same favicon is used as a custom icon when a site is bookmarked.
The example below shows a custom bookmark icon tag that references a favicon named favicon.png at the root level of the domain (e.g., “http://www.yourdomain.com/favicon.png”):
<head> ... <link rel="icon" href="/favicon.png" type="image/png" /> ... </head>
High-resolution Favicon Specifications
Your high-resolution favicon should be 96x96 pixels with alpha transparency (this dimension will ensure that the icon does not need to be upscaled or downscaled). If you use a favicon that is larger or smaller than 96x96 pixels, the image will be downscaled or upscaled respectively. Note that alpha transparency is required to ensure that your icon displays properly in the Google TV UI.