Accessibility and usability for interactive television

Lately I’ve had reason to do some research on accessibility and usability for interactive television, ITV. I can’t reveal too many details at this time, but I have been looking at ITV applications that are based on web technologies: HTML, CSS, and JavaScript.

Basically these are web applications displayed on a television set by a set-top-box running a custom browser based on Mozilla. Considering how hard it was to find information on accessibility and usability in the context of interactive TV, I’d like to share some of what I have found to help others that may be looking for this kind of information.

If you have worked on similar projects, please do share some of your knowledge.

Background

The applications are based on web technologies to make it possible to use them with other browsing devices than the set-top-box. Full interoperability will not always be easy or even possible, but that’s what we’re aiming for.

The goal is to provide easy access to services and information to all people, not just those that have a computer with a broadband connection. That includes older people and people with disabilities. So basically we’re talking about websites built with web standards and best practices for accessibility.

What makes these applications different is that they are displayed on a TV screen instead of a computer monitor, and you use a remote control to navigate them instead of a keyboard and a mouse. And those are pretty major differences.

Important differences compared to the web

I’m going to list some of the areas that designers and developers used to creating normal websites need to take into account when working with applications for ITV.

Keep in mind that this list is by no means complete. And since I don’t have a whole lot of experience in this area myself, I will happily accept corrections and additions.

  1. Screen size: Television screens are often larger than computer screens, but the resolution is lower. And scrolling, though possible, is nowhere near as comfortable as in a web browser on a computer.

    You need to design content around screenfulls. Small screenfulls. You may think that isn’t so bad. But just wait, there’s more.

    The resolution of a PAL TV is 720 by 576 pixels (the NTSC system used in the US has a slightly different resolution, but that is outside the scope of this article). Then there’s the title safe area you need to take into account. Yup, that removes another 20% of the available width and height. What you’re left with is an area of 576 by 460 pixels which you can be confident that the user can see on their TV screen.

  2. Rectangular pixels: TV pixels are rectangular (wider than they are tall), not square like those on a computer screen. So if you use a graphics app like Photoshop to create graphics you need to be aware of this, or circles will become ovals when they are viewed on the TV. Fortunately the latest Photoshop versions have support for non-square pixels and even let you switch view modes between square and rectangular pixels.

  3. Interlacing: Computer screens use progressive scan – each frame is made up of the entire screen area from top to bottom. On a CRT television set, however, each frame is made up of two fields that are interlaced. This makes thin horizontal lines vibrate or flicker.

    To avoid that, you need to use thicker or slightly blurred horizontal lines.

    TV sets that use plasma or LCD technology convert the interlaced picture to progressive frames before displaying them. But the vast majority of people are still using CRT televisions, so that’s what you’ve got to design for.

  4. Colour and contrast: You are limited to a smaller range of colours on a TV. Fully saturated colours and some colour combinations tend to bleed. The picture is generally much more fuzzy than that of a computer screen.

  5. Fonts and readability: Because of the greater viewing distance you need to use larger text on TV than on a computer screen. That’s right. You get a much smaller area to play with and on top of that you also have to make text larger.

    And then there’s the interlacing issue, which tends to make thin horizontal lines vibrate or flicker. So be careful with serif fonts. The best thing is to use a typeface that is specially designed for TV. If that is not an option, go for a sans serif or slab serif font that is designed for on-screen reading. You will also want to increase line height a bit and add a little bit of letter spacing to avoid individual letters bleeding into each other.

  6. Viewing distance: Where are you normally when you’re watching TV? Not in an office chair in front of a desk, right? Of course there are exceptions, but the normal viewing distance is much larger for television than for computers. That makes the image that reaches the eye smaller. So you need to make text and important graphics larger than if the application would have been viewed on a computer screen.

  7. Navigation: The main navigation tool for ITV is the remote control. Other options like wireless keyboards and mice are available, but the remote control is the default. So make sure not do design any fancy fly-out menus and other stuff that relies on precise mouse control to use.

  8. Sound: Websites rarely use sound. Television uses sound a lot. Speech needs to be made available to people who can’t hear. You can do that either by using captioning or by translating the speech to sign language.

    Also make sure that any sound that contains speech is clear, with no distracting noises or background music. If that isn’t acceptable, provide an option for the user to choose a “clear” sound channel with no distractions.

Beyond the obvious

Those are some of the most obvious areas where viewing a web-based application on a television is different than viewing it on a computer screen.

Has anyone else out there done any work related to interactive TV? Care to share some good tips? As you probably know, there’s far less information available than for website usability and accessibility, so let’s change that.

Posted on December 1, 2005 in Accessibility, Usability

Comments

  1. Very interesting, I hope I don’t have to do any TV work until HD is the norm, which should make life easier? A screenshot of a typical ITV page would be nice to illustrate your points :-)

    I also though PAL was 625 lines, 576 viewable?

  2. December 1, 2005 by Tommy Olsson

    Very interesting post, Roger. Thanks! So far I’ve stayed away from testing on a TV, but I guess I’ll have to bite the bullet sooner or later.

  3. nice points, well made.

    I’ve done a lot of work designing sites for ‘set top boxes’, internet TV.

    Both for entertainment sites and e-learning.

    Here are a few more pointers.

    1. colour. really vibrant and really pale colours cause problems, avoid extreme ranges - especially next to each other.

    2. picture in picture. most services reserve part of the screen to display live TV over the top of the site. Avoid placing any content in this area.

    3. scrolling. dont do it - it’s a real pain in the ass to have to scroll on these systems, so you tend to build sites with many short pages. next. next. next. etc.

    4. pictures. large jpgs can look really fuzzy on some systems. avoid.

    5. javascript. anything beyond js v1.2 probably wont work. DOM scripting is a no-no

    6. standards. HTML 3.2 seems to be the norm. although this was at least a year ago - it may have got better.

  4. By the way in the UK, ITV is one of our channels.

  5. Interesting post. I’ve been reading about DVB-HTML lately. I imagine this stuff relates?

  6. I thought the pixels were taller than they are wide.

  7. Does anyone know if the navigation with these interactive TV is subject to codec changes or if it is being rendered on the TV using browser specific fonts etc. If it isnt being rendered in the interactive TV itself the signal will be compressed which is a bit of a nightmare for flat colour etc Kenstone.net

    Not sure what codec most current Interactive TV is but I can only imagine it is a very lossy codec like MPEG2 (at lower quality than DVDs) and I know of an innovative interactive TV channel in Stratford London that is using MPEG1.

    So until we have TV screens that are in H236 (check quicktime.com for a description) you also need to deal with the fact that the picture wont be great quality.

    Kenstone.netGreat Titles with the DV Codec By Philip Hodgetts

    My suggestion would be to use hover states and pop ups with really large text like at CSSpopups I would also suggest using a lot of text with a transparent background set to a contrasting colour to the text itself. I am thinking transparent backgrounds work in Mozilla browsers so this should be fine, not IE or Opera though I think.

    Could also be good to use a lot of list based navigation and break up larger bodies of text like the slideshow technique at slideshowS5

  8. Fascinating project and hopefully you’ll keep us posted with this information as it moves forward. Its something that I have to admit was in the back of my mind as being interesting to me but hadn’t ever taken the time to sit down and think about it much.

    thanks, great post.

  9. A huge resource in the area, believe it or not, is Microsoft. For the last couple of years they have been pushing and developing their Windows Media Center OS.

    They have most likely spent millions on usability testing for their Media Center applications. It looks like you cover most of the important points here, though.

    If you want more, you can look at Micorsofts Windows Media Center guidlines and the SDK - there are tons of helpful tips for developing web apps for the Media Center.

    When windows Vista comes out, Media center will be included with every copy, so you can expect this area to have huge growth in the coming years.

    Then you have Front Row from apple on the other size, which my guess is that their front row apps will be very similar to Dashboard Widgets.

  10. December 2, 2005 by Roger Johansson (Author comment)

    Steve: I can’t show any screenshots now. Maybe later. PAL resolution is 625 lines, that is correct. Somehow that translates to 720 pixels.

    jim: Thanks for those additions. Regarding standards, in this case the set-top boxes run a browser based on Mozilla, so HTML 4.01 and XHTML are both fine. No need to revert to old-school coding.

    Devon: I haven’t heard of DVB-HTML before, but it does look related to this.

    Kim: Some NTSC formats use pixels that are taller than wide, i.e. have an aspect ratio below 1, but PAL pixels are either square (rare) or wider than tall, i.e. have an aspect ratio above 1. More info: Work with non-square pixels (D1, DV) in After Effects (4.0-6.5).

    ben: Text for the navigation is being rendered by the set-top box, so it is not compressed.

    Geoff: Yeah there is some good info at the MSN TV Developer Support Site.

  11. December 5, 2005 by Caroline Robinson

    I was the community coordinator for Intouch kirklees in West Yorkshire, England when we were just piloting the project. The company I worked for, Artimedia, is a tiny company dedicated to using computer technology to empower people who are considered to be “socially excluded”. The local council included our company in their grant application to central government so that they would have a community element in their project. We recruited, hired and trained 12 community consultants from 5 low income neighbourhoods and included community in every aspect of the project. Primarily design and content. Eventually, the grant ran out and the Council assumed full responsibility for the whole project, but not without ending up with one of our community consultants as pretty much the main decision maker in the project that continues to this day.

    The project began with NTL, for which we wrote our own Content Management System and it became the lead project for the national program for councils across the country who wanted to build interactive digital tv sites.

    INtouch kirklees then moved on to Sky TV as well, which has a completely different CMS and set up. Although all the polls said people wouldn’t use keyboards - our users ALL preferred them and used them. If you want to see what it looks like on television, you can download movie clips interviewing some of the people who used the site from the Kirklees website. You can see them using the site on their televisions and hear how they described the project. There is a great deal of real information about the evolution of the project on the kirklees website.

    Artimedia was only involved in the pilot of the project, the first 3 years and has now moved on. However at the time, the BBC had a wonderful style guide for people designing for interactive TV which we found very useful at the time - full of specifics and NTL had a n emulator program - the “emmy” you could download and install on your computer to see what the site would like. There is a great deal of information out there and the movies are a pretty exciting way to see the thing in action - much better than screen grabs. I don’t think there are any movies of the Sky platform though.

    It is an awkward and clunky thing, but for people who do not have internet access and / or are in homes where the tv is always on, it was a remarkable way to enroll people into the world wide web and begin to narrow the “digital divide”.

  12. Congratulations and thanks for sharing this!

    Dr. Bruce Klopfenstein University of Georgia

  13. Roger, I was a contract programmer with LodgeNet, the largest provider of on-demand movies, music, and games for the lodging industry. You seem to have the concerns down but I would like to comment on the navigation area.

    There is no mouse - there will be no mouse - don’t ever count on a mouse. But you have buttons 0-9. You’ll probably want to reserve 0 for main menu, 7 for BACK and 9 for FORWARD and 8 for something special such as SELECT. So for the most part the screen will be menu after menu after menu of six choices.

    Also there’s a subtle difference in the concept of BACK between DVD-style navigation and WEB-stle navigation. On DVD menus BACK really means “up one level” and in browsers it means “the page I just viewed.” So there were debates about what should happen when the user pressed the BACK button.

    Also the interface that I worked on allowed seamless transition from section to section. Here’s the scenario: If you are browsing “action” movie titles and the next section is “drama” and the user is pressing NEXT NEXT NEXT when you get to the last action title we then displayed the first “drama” title. This avoided having the user go UP and back DOWN to continue reviewing movie titles. Of course the BACK button would get you back to the “action” movie titles as well and when you reached the very end it wrapped back to “action”.

    BUT if you decended into “action” titles and moved over into “drama” titles, if the user pressed “UP” then we would display the Drama Section page not the Action Section page where he decended.

    Navigation is tricky and not all web-based rules apply.

  14. December 7, 2005 by Roger Johansson (Author comment)

    Caroline: The link to the page about the project was broken, but I managed to find the working one on their site :-).

    Bruce: Thanks!

    Carl: Yes, navigation is a bit different. The developers on this project used JavaScript to make the arrow keys (if you use a keyboard) emulate the cursor keys on the remote. The different actionable items are placed in a virtual grid and the JS keeps track of where the focus is. The demos I’ve tried work pretty well.

  15. I would suggest that you also map actionable items to number keys rather than requiring navigation to an item and pressing ENTER. From an end-user’s standpoint this is very easy and intuitive. Also because the remote key-press to screen reaction time is much longer than keyboard-to-computer response. Folks see the item they want immediately and if it takes four arrows and an enter, there’s going to be dissatisfaction as the user waits for each button press to register onscreen.

    DVD UIs that require the ENTER button drive me nuts. Have you ever experienced a DVD movie menu with “play movie” highlighted and the PLAY button on the remote did nothing? This is happening less often nowadays but I’ve experienced it more than a few times. Arrgh!

  16. December 8, 2005 by Roger Johansson (Author comment)

    Carl: Number key navigation is also being implemented.

  17. We have some experience here at the University of Dundee (Scotland) in looking at accessibility and usability of interactive digital television, particularly in terms of the issues facing older people. There is a particular concern in the UK, where our government has plans to turn off analogue TV early next decade, that existing DTV systems simply have not considered the needs of those people who currently face the greatest levels of social exclusion and the result will be less people able to access and use TV even for the basic task of watching the main channels.

    We’ve expressed our concerns in a couple of papers, including one available online as a PDF: Digital Interactive Television in the UK: is the opportunity for ‘inclusivity’ being missed?

    Not mentioned by other posts, but Joe Clark also has a lot to say on the issue, and as you might expect is highly critical of many broadcasters and their approach.

  18. In addition to my previous post, another publication may be of interest, written by a colleague (be warned, this is a 117 page PDF so get in touch if you’d like it in another format): Style Guide for the Design of Interactive TV services for elderly people

  19. January 6, 2006 by Roger Johansson (Author comment)

    David: Thanks for the links. I’ve downloaded the papers and put them in my “To Read” folder :-).

  20. I did have a regular visitor to my site using a browser on his NTL cable TV.

    When he hit a problem I was found I was able to debug it using a free of charge emulator.

    If nothing else, it’s interesting to see how your current sites look on TV!

  21. You might be interested to read this short paper that I wrote giving guidelines for interactive TV design. It is based on my experience in the UK designing for the Sky digital TV platform.

    interactive television design

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.