22

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?

Improve this question
6
  • Related question: ux.stackexchange.com/questions/15405/…
    – Kris
    Jan 31, 2012 at 7:34
  • This is a really interesting question imo - responsive design but upwards (most TV sets are likely 1920px wide and running the browser in (close to) fullscreen)... rearranging the fluid layout to cater for that width is interesting as I hate when fluid designs simply makes text a thousand pixels wide ^^
    – Oskar Duveborn
    Feb 2, 2012 at 22:28
  • 2
    On top of the design being responsive for the size of the tv, I believe there should be additional emphasis on being responsive for context, level of attention, pattern of interaction, distance from screen, presence of 2nd/3rd screen etc.
    – Jay
    Jun 27, 2012 at 14:17
  • 1
    If you have an hour or so, there's a great episode of The Web Ahead podcast about this - http://5by5.tv/webahead/22
    – Steve
    Jun 27, 2012 at 23:39
  • TV is SUCH a different medium that I think you'd really end up designing a custom TV centric UI for your site if there was a compelling reason to do so.
    – DA01
    Jun 28, 2012 at 5:06

5 Answers 5

Reset to default
16

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:

Possible resources:

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.

Improve this answer
6
  • So if I understand you correctly ,since televisions are primarily used for motion ,websites must adapt design layouts to have a sense of motion before porting to televisions?
    – Mervin
    Feb 2, 2012 at 21:31
  • @MFrank2012 Mmm, yes and no. Actually its just a quick thought. Basically, I recognised that all styleguides so far are for Webdesigners/-devs as audience, but lack of the specific technical constraints that is critical for TV-screens. Searching around for a link describing them I found nothing and saw, that its like asking a question like how to do webdesign? This field is so wide not been able to pack into a dense tutorial or so. Same with design for TV-screen. Which is done by Motion Designers since years (but lacking knowledge of HTML)
    – FrankL
    Feb 3, 2012 at 9:53
  • @MFrank2012 And yes motion is kind of essential, we are used to certain patterns towards our viewing habits watching TV: ie. scrolling vertically is good at desktop sites and important at mobile, but can you imagine it at TV? Its not readable and thus not been used. Motion Designers know, Web-UX not. And the list would go on. But its not a blank canvas like mobile was, its already knowledge there. So, I wonder how our disciplines will merge or fertilise? As a conclusion, I think one have to read and learn some or discuss in Motion Design boards.
    – FrankL
    Feb 3, 2012 at 10:01
  • Not sure I entirely agree with that. Look at some of the easier-to-use TV UIs. Take Netflix, for instance. Both on Wii and Roku, they scroll vertically just fine, and don't involve motion graphics at all. In fact, they are really only optimizing the fact that you are 'pointing' with a remote.
    – DA01
    Jun 28, 2012 at 5:08
  • I don't know Netflix - I'm German, but I googled for some pics... I think it scrolls horizontally as far as I can guess from the pics. The absence of motion or graphics is for me a sign, that right now its about interaction design only:
    – FrankL
    Jul 3, 2012 at 9:23
10

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

Improve this answer
4
  • 1
    The keyboard that comes with the Logitech Revue (Google TV) makes the transition from desktop-to-television rather easy. The keyboard houses a touchpad, and I'm willing to bet other competitors will have it too. Resolution for Google TV is rather tricky, however, as it goes off of aspect ratio. But fret not, my friend, because 16:9 generally renders as 1728 x 972 ( developers.google.com/tv/android/docs/gtv_displayguide ) Moving across large screens is as effortless and painless as being on your laptop.
    – Vin Burgh
    Jan 30, 2012 at 23:15
  • 1
    I've been through Googles styleguide and have to say it lacks any deeper information as it just say make text bold and readable, but how big? And it assumes everybody has got LDC 720 or 1080 screens. And NTSC! No mention of critical colors, nor flicker on 1px lines. Thats not a critique towards you MFrank2012, but to Google. Anyway, same is Operas and Samsungs guide. The only useful guide I found so far is BBCs from 2005.
    – FrankL
    Feb 2, 2012 at 20:13
  • @FrankL ,Thats very good feedback and thanks for pointing it out ,I suspect Google designed the style guides on basis of the Televisions which support Google TV and I would assume Samsung based it upon their television specifications. Since BBC is the only independent agency ,the style guide would be have been designed without any assumptions.However I didnt even know that opera even had a TV websdesign style guide. Can you please post the link to that.
    – Mervin
    Feb 2, 2012 at 20:30
  • Sure Opera is dev.opera.com/tv
    – FrankL
    Feb 2, 2012 at 20:52
4

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)

Improve this answer
3
  • Please back up your assertions with references, it will make your answer more useful to future visitors.
    – Rahul
    Feb 2, 2012 at 11:42
  • 2
    a. Much of it is from various academic studies on the eye, TVs and etc, experience with surfing on TVs and plain old common sense. Finding online references for everything takes a lot of time and I am not Wikipedia. b. From the lack of votes, it seems like no one bothered reading it anyway, so what is the point?!
    – Danny Varod
    Feb 2, 2012 at 13:30
  • Heuristic evaluation is as valid as references at times. ;)
    – DA01
    Jun 28, 2012 at 5:10
1

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.

Improve this answer
1

I know I'm late to the party and although many have shared very interesting links to guidelines and documentation, I think we're missing the point in the answers IMHO.

Adapting the layout and design to large screens TVs is not the responsibility of design, CSS, HTML, RWD, browser engines, HIG or any of those things.

The way I see it, adapting your website for TV browsers is the responsibility of Content Architecture, Content Strategy and Interaction Design.

This means that the content used in the website may not necessarily be suitable for a TV experience not only because of the physical implications (larger distance from device for example) but mostly because the interactions very well happens mostly with TV remote controls rather than touchscreens or mouse/keyboard combinations (although you can connect them via Bluetooth, but we know users rarely change any defaults), and this is where Interaction Design can shine.

RWD techniques work just fine and I haven't had to come up with anything magical during implementation to be able to see my work display just fine in my 55" screen.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.