Web meets TV.
Finding < Watch
Control & Personalize
TV contents More Interestingi
More than just a TV.
하루에 5시간 TV 시청
1년에 광고매출 $70Billion ($700억, 한화로 약 84조억원)
전세계, 40억 TV 사용자
Designing websites for Google TV
Designing for TV: A Primer
Here are a few tips for those who haven't designed for TV before. In a television environment, you must:
- Understand that content is king.
-
- Get users to the content as quickly and easily as possible.
- Don't interrupt when users are watching TV. Instead, make the viewing experience better.
- Respect the living room context.
-
- Think about what users will and won't want to do when viewing TV with their family and friends.
- Remember that TV is social.
-
- Consider how groups might use your website or application.
- Offer ways for individuals to use your site or apps in social settings.
- Learn the pros and cons of TV screens and audio.
-
- TV screens are wider and colors look different.
- Text must be readable from a distance.
- Sound is now a viable interface element.
- Make it easy.
-
- Offer simple choices and make actions obvious and easy to select.
- Provide navigation that is simple enough for a remote control.
Simplicity above all
Successful TV interfaces are simple in both concept and design. Very simple. Here are some ways to achieve an interface that is easy to understand and to use:
- Identify the vital parts of your interface before you start work.
-
- Group your content, controls, and interactions by priority.
- Throw out anything nonessential.
- Stick with one visible mode of navigation or one information hierarchy.
-
- Help users create a mental model that works for all your screens.
- When appropriate, take advantage of habits that people have learned on the web.
- Make the primary action reachable in one click.
-
- Make other onscreen actions few and prominent. Don't hide key features in a menu.
- Always display an easy way for users to return to their previous location. Don't rely on the back button.
- Preselect the user's next action when you can.
-
- For instance, move the insertion point into the next text box, or select the first item in a list.
- Avoid the temptation to use abstract icons.
-
- Use short, clear labels and test them with users.
- Limit vertical scrolling.
-
- Think about how your content will scale when it increases in size. What if a list becomes ten times longer?
- If you must scroll, make sure a portion of the lowest section is always visible on the screen.
Navigation is critical
Getting the navigation right is essential for success. Users will quickly abandon a screen whose navigation frustrates them.
Remote controls, arrow keys, and directional pads
All input devices for Google TV will have QWERTY keyboards, but users will often navigate using a directional pad. Like remote controls, these limit the navigation model to up, down, left, right, and enter.
Users need interactions that are fast and easy to do—at a distance, with one hand, in the dark. When designing a navigation scheme:
- Set arrow keys to navigate all visible, actionable items on the screen.
- If the down arrow key scrolls down a list, make sure the elements in the list are selectable and the selected item scrolls.
Mouse navigation
On a TV screen, the mouse moves a pointer that is small and far away from the user. Mouse control is difficult.
To assist your users:
- Make each click target (link, button, and the like) large with ample padding for an expanded target area.
- Add a hover state to links and buttons to highlight when the pointer has hit its target.
A new kind of screen
TV screens and computer screens differ in canvas size, aspect ratio, safe areas, resolution, cropping, and pixel shape.
When designing for TV screens, you should:
- Avoid highly saturated and very bright colors.
- Make UI elements slightly larger, specifically:
-
- Keep the sections of the screen over-sized.
- Add more padding to your elements.
- Make buttons and other click targets larger.
- Take advantage of the wide screen.
- Design for 1280x720 and 1920x1080 resolutions.
Screen resolution
TV screens have a fixed number of pixels in width and height. The native resolution of the screen determines whether the screen is HD ready or not. If your image has the same dimensions as the screen, it will be shown as it is. If not, it will be scaled to fit the screen with a slight reduction in image quality.
The safe area
Televisions have a safe central display area surrounded by a small amount of screen space that can vary in size. If you place graphics or text outside the safe area, they may not be visible. to be sure that users can see all your interface elements lay out your pages with flexible layouts. At the very least, include at least a 10 percent margin at each resolution:
- 1280x720 resolution. Recommended width is 1152x648.
- 1920x1080 resolution. Recommended width is 1728x972.
The Google TV browser zooms a webpage to fit the width of the screen. So you can design a page for the 720 pixel resolution, and it will work just as well in 1080 pixel resolution. However, if your page uses many images, it's best to create two separate versions to avoid scaling the images.
If you must choose one resolution, design for 720p resolution and Google TV will scale it up on 1080p resolution.
You can specify a property that controls the width of the page in your CSS.
Color
TV screens have higher contrast and saturation levels than computer monitors. Follow these guidelines when 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 webpages 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.
Even TV needs text
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, but you can use font embedding techniques to create a more customized appearance. However, keep in mind that font embedding, which relies on Flash, will be slower than other methods.
Here are some ways to improve the readability of your text:
- Limit each paragraph 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.
Sound matters
Google TV will often be connected to the best speakers in the household. Sound is not disruptive on TV (as it often is on a computer), So think about ways to use sound in your interface.
Keep in mind:
- Sounds should be appropriate to the living room environment.
- By default, the volume should be low.
- Some users will be listening to music from a player application running in the background. Provide a simple way to mute your website or application, and don't make interactions entirely dependent on audio cues.
Flash on Google TV
Google TV is capable of playing 720p and 1080p Flash videos. For best performance:
- Use h.264 encoding for all video content. Avoid encoding your videos in h.263 or vp6.
- Avoid adding continuous-playing, Flash-based banner or sidebar ads on a page that includes a video. If you cannot avoid such ads, unload or stop them when a user starts watching the primary video or goes to full screen.
- To ensure a smooth video-watching experience, make sure your content uses only one instance of the media player at a time. For example, make sure that your primary content and the ads are not running two parallel streams of the media player. Two parallel streams can significantly degrade system performance.
- Be conscious of system memory, check availability and limitations when running Flash. Consume only what is necessary and test for memory leaks.
- Handle errors or crashes gracefully with proper recovery messaging.
Perceived vs. actual performance
Users are the ultimate judges of whether your application performs well. Developers may measure application performance in terms of how long certain operations take or how many instances of objects are created. However, those metrics aren't important to end users. Sometimes users measure performance by different criteria. For example, does the application operate quickly and smoothly, and respond quickly to input? Does it have a negative effect on the performance of the system as a whole?
Ask yourself the following questions to measure perceived performance:
- Are animations smooth or choppy?
- Does video content look smooth or choppy?
- Do audioclips play continuously, or do they pause and resume?
- Does the window flicker or turn blank during long operations?
- When you type, does the text input keep up or lag behind?
- If you click, does something happen immediately, or is there a delay?
- Do other applications respond poorly when the application is running?
The distinction between perceived performance and actual performance is important. The way to achieve the best perceived performance isn't always the same as the way to get the absolute fastest performance. Make sure your application never executes So much code that the runtime isn't able to frequently update the screen and gather user input. In some cases, achieving this balance involves dividing up a program task into parts So that, between parts, the runtime updates the screen.
Using bitmaps
Using vectors, especially in large numbers, dramatically increases the need for CPU or GPU resources. Using bitmaps is a good way to optimize rendering, because the Flash player needs fewer processing resources to draw pixels on the screen than to render vector content.
Tweening syndrome
Limit the use of tweening to save CPU processing and memory. Designers and developers producing content for Flash tend to use many motion tweens in their applications. Try to minimize the use of motion tweens to help your content run faster.
Some Flash guidelines referenced from Adobe Systems Inc.
