How to adapt your website for TV browsers?

Question

Many home electronic brands have presented new television sets with built-in browsers and apps. Even though not many of these have enjoyed widespread adoption, the responsive web design movement talks about how you should start adapting your web sites for not only mobile, tablets and desktop but also for the television set.

What are the main differencies between a desktop web experience and a television experience? Are there any studies or guidelines that you could point to?

Answer 1

Here are some other resources:

• Opera TV Styleguide

• Interactive Television Design by BBC (this one is made for former IP-TV tech called MHP, but it goes into specific technical details of TV-Screens and how to design for it ie. typosize, screensize)

  Several rules can improve legibility on screen:

  • Body text should not generally be smaller than 24 point
  • No text should ever be smaller than 18 point in any circumstances
  • Light text on a dark background is slightly easier to read on screen
  • Text on screen needs looser leading (greater line spacing) than in print
  • When technically possible, tracking should be increased by up to 30%
  • A full screen of text should contain a rough maximum of 90 words
  • Text should be broken into small chunks that can be read almost instantly

  .

Technical constraints:

• Fullscreen mode in Firefox and other browsers (as TV-sites tend to be watched fullscreen there are UX limitations in browsers for fullscreen mode due to security issues ie. pishing)

Possible resources:

• Samsung Smart-TV Styleguide (right now a guide for developers)
• Boxee Dev Blog and HTML5 Examples
• Telekom Entertain IP-TV Devcenter (not sure if they have a Styleguide yet, you need a login)
• Microsoft X-Box might be out there (try App Hub as starting point)
• Yahoo Connected TV (has a forum for design related questions, but more questions than answers)

Edit: Having read through all of them - it actually caught me - I feel most so called styleguides are a sort of break my website down to Tv, but I think it doesn't work this way. Because TVs are technically very different from computer screens, despite the fact that more and more TVs are based on computer screens aka LCD TVs, still most are old NTSC or PAL TVs. Personally, I think making website for TV will shift to the responsibility of Motion Design - this are the guys who have expertise in this area.

Answer 2

I recommend checking the guidelines given by Google with regards to designing for Google TV. To quote them:

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.

• 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.

However I would be interested in seeing the impact of having to force users to move across relatievly much large screens to strike a target and the potential scope for arm strain because of that.Hence I guess aspects will mouse/trackball sensitivity will also have to be considered.

Edit: This optimization guide is also pretty useful

Answer 3

A few pointers:

• Larger fonts, as TV sets are usually about 3m / 10feet away and resolution is usually 1920x1080 (smaller pixels)

• Bright text (not too bright) on dark background

  • TVs are usually in living room which is not lighted as much as offices therefore an average color close to white is too bright for eyes

  • Since TVs are further away, higher contrast is required. This can be achieved with or dark bright text on dark background text on not too bright background
    Constrast = (0.05 + brighter intensity out of 1) / (0.05 + darker intensity out of 1)

• Bigger and further apart buttons - small buttons are harder to click on with many remote pointing devices (e.g. trackpad, air mouse)

• Don't assume site is using full-screen - since the TV screen can be very large, some users open up multiple sites side by side and horizontal scrolling is annoying and not simple with some input devices

• If site is to be used via TV's internal browser (no via a connected computer) then these also apply (many of these apply to mobile too):

  • Don't use pop-ups or assume user can see tooltips

  • Reduce textual input to minimum and support (but don't enforce) auto-completion

  • Less menus (this is always a good idea, but in this case especially). Navigation between menus using a remote control requires a lot of clicks. Try to use one bigger menu, preferably at side of screen.

  • Consider keeping history in tabs since opening multiple links in a new windows may not be possible. Or perhaps enable opening link differently with different remote buttons (e.g. select = current tab, right = new tab in background, right and then select = new tab and jump to it)

  • Enable log in with a hardware id of the TV e.g. MAC address (if use logs in regularly and adds hardware id as an optional log-in) - this can save user input, however, encrypt the id using https.

  • Save favorites / recent / most commonly visited pages or functions in a more accessible region (save clicks as search will be more difficult)

Answer 4

I think you need to first ask if your site is designed specifically for the use on a TV...such as a video streaming service or the like. If so, then you pretty much want to design for a very particular screen (HDTV) and an extremely simply UI (to avoid the hassle of typing/lots of clicking with the remote, etc).

Otherwise, I wouldn't sweat it too much...a standard site should be OK on the TV. Keep in mind people aren't doing a lot of general web browsing via their TVs.