How To Design Awesome Web Apps For Google TV

Few days back, Google announced the new Google TV platform backed by major players like Sony, Logitech, Intel, Dish Network, and Best Buy. It is totally a new concept which is built on Android and featuring the Chrome browser with a full version of Flash Player 10.1. According to Google, Google TV is supposed to bring "the web to your TV and your TV to the web". As Google TV is built on open platforms like Android and Google Chrome, Google also asked web developers to build web applications for their revolutionary product . They also stated that after launch, they will release Google TV SDK and web API's for TV that will help developers to launch much riches applications for Android Market. Also, if any developer is interested in designing web apps for Google TV, they have to follow 10 guidelines stated in Google TV developer site. These guidelines will not only help you to built web apps for Google but also very important for building apps for any TV platform. So, let's see, 10 guidelines which you should keep in mind while developing web apps for Google TV. You can also sign up here for updates related to Google TV. 1) Designing web apps for TV is different : If you are designing apps for a TV platform , you have to consider many points which are as follow :
  • It seems to be content is king everywhere. Try to provide the content to the viewer as quickly as possible
  • Make viewer experience better by providing simple icons and less scrolling
  • Always think what users want to see with family and friends. Respect the living room context.
  • Learn about the how your app looks in TV because colors look different in TV, screens are wider. Text should be clearly visible because mostly we see TV from a distance.
  • Make it simple for users to choose the action
  • Get navigation damn easy so that it becomes simple enough for a remote control
2) Make TV interface very simple : You should always remember that simple interface always wins both in terms of design and concept. Here are some points which help you to achieve effective TV interface : Here are some simple points which help you to create simple yet effective interface :
  • First find the most important parts of your interface and group them according to priority.
  • Stick with one visible mode of navigation or one information hierarchy
  • Make it compatible for all screens
  • Make key features prominent, don't hide them in menu
  • Make easy for users to come back to the previous location
  • Use short, simple and clearly visible labels
  • Try to avoid vertical scrolling
3) Navigation is key for success, make it easy : Difficult navigation always frustrates users, so always check these points to make navigation simple :
  • Make your apps navigable with one hand
  • Make arrow keys clearly visible to make navigation easy for users
  • If viewer is using Mouse, make each target link large
  • Make them highlight when mouse pointed is hover to the links. Simple change the color when pointer hits the links
4) Design for TV Screen : You all know TV screens are wider than the computer screens. Ther both differ in aspect ratio, resolution, pixel shape etc. So, keep these points in mind while designing for a TV :
  • Make UI elements slightly larger
  • Add more padding to your elements
  • Avoid highly bright colors
  • Make buttons and other click targets larger
  • Take advantage of the wide screen
  • Design for 1280x720 and 1920x1080 resolutions
  • Use pure white (#FFFFFF) sparingly instead of using #F1F1F1 or 240/240/240 (RGB)
5) Fonts are also essential part : 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. Here are some ways to improve the readability of your text:
  • Make each paragraph not more than 90 words
  • Break text into small paragraphs so that it is easy to read and interesting
  • Keep line length at about 5–7 words per line. Never go shorter than 3 or longer than 12
  • Try to design in such a way that light text will appear on dark background which is easy to read on TV 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
6) Sounds are also important part : Its quite obvious that TV has in-built speakers or connected to speakers in the living room. So, keep in mind that sound is not disruptive on TV So keep this points in mindif you are using sound in your apps :
  • Make it simple for user to mute the sound
  • Make sound volume low by default
  • Don't make interactions entirely dependent on audio cues
7) Flash support in Google TV but use it wisely : Google TV is capable of playing 720p and 1080p Flash videos. You to check some points for best performance:
  • Use h.264 encoding for all video content. Avoid encoding your videos in h.263 or vp6.
  • Don't add too much Flash-based banners or sidebar ads on a page that includes a video
  • Your content don't stream more than one media player at a time for a smooth video-watching experience
  • Always be conscious of system memory and test for memory leaks
  • Handle errors or crashes gracefully with proper recovery messaging
8 ) Be performance conscious : You can measure application performance by checking how much time application take to open, what is the page load time etc. But the real critics of your work are users. For them, they measure performance how smoothly your application works and responds quickly to input? So, always cross check you application performance in terms of end users. 9) Use Bitmaps, lower CPU usage : Using bitmaps is a good way to optimize rendering rather than using vectors in larger numbers. 10) Check out for Tweening : Try to minimize the use of motion tweens to help your content run faster.