How to Design a Web App for Google TV
Google has released a preliminary developer's guide to aid those interested in porting their web or mobile applications to Google TV, the newly announced platform built on top of Google Chrome technology. With Google TV, "television is no longer confined to showing just video" explains Salahuddin Choudhary, Google TV Product Manager, in a blog post. "It can be a photo slideshow viewer, a gaming console, a music player and much more."
But how does one build a working application for Google TV?
Although deeper, technical details are still forthcoming (sign up here for updates), developers interested in this new platform can now follow the guidelines put forth by Google here on the Google TV developer site. These are essentially style suggestions for building TV-enabled web apps, something which developers should consider if building apps for any TV platform, not just Google's.
They are, as follows:
- Make it Simple: identify the vital parts of your app before starting work, 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, preselect the user's next action when you can.
- Get Navigation Right: Google TV users will often navigate with a directional pad, so the navigation model involves up, down, left, right and enter buttons/action. Make you app navigable with one hand.
- Design for TV screens, not Computer screens: TVs have wider screens, so you should make UI elements slightly larger. Also, avoid highly saturated and very bright colors and design for 1280x720 and 1920x1080 resolutions, including at least a 10% margin. Use pure white (#FFFFFF) sparingly.
- Pick the Right Fonts: Avoid lightweight fonts or those with very narrow or 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. If you want to use font embedding techniques to create a more customized appearance, you can, but this relies on Flash which will be slower.
- Make Onscreen Text Readable: o Limit each paragraph to no more than 90 words. o Break text into small chunks that can be read at a glance. o Keep line length at about 5-7 words per line. Never go shorter than 3 or longer than 12. o Remember that light text on a dark background is slightly easier to read on TV (compared to dark text on a light background). o Target body text to be around 21pt on 720p and 28pt on 1080p. o Don't use any text smaller than 18pt on 720p and 24pt on 1080p. o Add more leading (larger line spacing) for onscreen text than print text.
- Don't Use Disruptive Sounds: By default, volume should be low. Make it simple to mute the app. Don't make interactions dependent on audio cues.
- Use Flash Wisely: Google TV can play 720p and 1080p Flash videos. Use h.264 encoding, not h.263 or vp6. Avoid Flash banner or sidebar ads that include video. Only use one instance of the media player at a time. Be conscious of system memory.
- Be Conscious of Performance: Perceived performance is more important than actual performance for TV apps. Make sure the app never executes so much code that the runtime can't frequently update the screen and gather user input. You may need to divide a task into parts to accomplish this.
- Use Bitmaps: Use bitmaps to optimize rendering.
- Watch Out for Tweening: Minimize the use of motion tweens to help content run faster.
View Internet News Archive