Watch Out – Google TV Is Coming
Google TV is coming and it promises, as do most of Google’s products, to be very cool, user friendly and cutting edge. Quality video and quality content is quickly becoming the king of the internet. What is Google TV? Google TV is a new product that will combine your TV, DVR and the internet. Simply put, it will turn your TV into a giant computer screen allowing you to access videos (and the internet) from all over the world!
Here are a few things to know about creating a website optimized for Google TV. Many of these are great things to keep in mind when creating a website for any delivery method. The section on perceived vs. actual performance is spot on.
This information is provided by Google at http://www.google.com/tv/developer/ if you would like to read more about it.
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.
- Remember that TV is social. – Offer ways for individuals to use your site or apps in social settings.
- Learn the pros and cons of TV screens and audio.
- Make it easy.
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 content, controls and interactions by priority.
- Stick with one visible mode of navigation or one information hierarchy.
- Make the primary action reachable in one click.
- Avoid the temptation to use abstract icons.
- Limit vertical scrolling.
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:
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:
- Make buttons and other click targets larger.
- Take advantage of the wide screen.
- Design for 1280×720 and 1920×1080 resolutions.
- 1280×720 resolution. Recommended width is 1152×648.
- 1920×1080 resolution. Recommended width is 1728×972.
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.
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.
- 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:
- 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.
- 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 audio clips 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.
eye9 Design…Your Denver Web Design Company!
Leave a Comment
Related Posts
- Google Goes Universal
Last week Google made the most significant change to its search results in years. I have... - Focusing on Google still the best bet for SEO
Google continues to gain market share and widen its lead against other search engines, as reported... - Google Analytics 101 – Who are your Visitors? – Part 2 of 4
Use your Google Analytics Visitors report effectively. In this episode, we discuss visitors vs. visits, pageviews,...
Subscribe
