BrainPower

Interactive Web Page Design for Web- and TV-based Browsers

by Marinela Miclea and Cindy Hall

Presented on 23 October 1998 – STC Region 8 Conference (San Ramon, California)

Contents:

Abstract

This presentation will cover design tips to help Web designers design with TV and computer monitor display in mind. We will discuss hot topics such as Web content, graphics, JavaScript, Java, multimedia, etc. Also, you probably test your pages on computer browsers such as Netscape, Internet Explorer, and Lycos, but are you also checking them for display on TV screens?

With the rise in popularity of TV browsers, it's important for Web designers to be aware of the issues involved in delivering Web content through this new vehicle. Many of the techniques that we will share will result in better Web page design overall, ensuring that your pages work well, look good, and attract a wider audience.

Overview

Web- and TV-based browsers – You probably haven't given much thought to them, or perhaps you didn't even know they existed, but TV-based browsers are becoming increasing popular and represent the wave of the future. More and more people are discovering the Web, and many are doing so via consumer electronics products such as TV. Although WebTV has the leading set-top box on the market, there are other companies offering similar devices and services that deliver the Web through a TV:

  • @Home
  • Compaq
  • Gateway
  • IBM
  • iBox
  • ICTV
  • iTV
  • Motorola
  • Navio/Oracle
  • Sega
  • Sharp Electronics
  • Sony
  • Sun (kit)
  • TCI
  • Thompson Electronics
  • Wink Communications

Demo of WebTV – At this point in the presentation we'll give a brief demonstration of WebTV.

Web Design

In this section we will discuss general design principles and testing your Web pages on computer and TV browsers. In addition, we will look at the commonalities and differences between the TV and computer audiences and how to ensure your Web design is appropriate for both audiences. Lastly, we will look at simple, effective ways of empowering your audience by adding interactivity to your Web pages.

General design principles – You need to consider the following elements:

  • Inclusive/low-end vs. exclusive/high-end design – Your design depends on the type of audience you're aiming for: if you want to include as large an audience as possible you should aim for a low-end design; however, if your client is a software company, for instance, you will want to design the site towards the high-end.
  • Simple, attractive, effective layout – In all instances, a simple, attractive, effective layout wins out over an overly complex, fussy design.
  • Informative, concise content (text) – A Web site should always inform visitors in a concise way.
  • Good navigation links – Visitors to a site should be able to navigate the site's pages with ease.

Testing your pages on computer and TV browsers – You should always test your site on various browsers; currently, the top three are:

  • Internet Explorer
  • Netscape Navigator
  • WebTV

If you don't have access to a WebTV system but wish to check for readability of your site for the TV audience, adjust your Web browser's settings to simulate the way a Web page will display on a TV screen:

  • Change your proportional typeface to a rounded sans-serif typeface (such as Arial or Helvetica)
  • Increase the typeface to 18 points

You will notice that these adjustments make a big difference in the way a Web page displays, especially if your design includes narrow columns or lots of wraps around graphics or fixed layouts (for example, with the <PRE> tag or tables). The WebTV screen display, for example, allows for 40-character lines or 20 lines per "screen-page."

TV vs. computer audiences

  • Old habits are hard to break – Keep in mind that the TV audience is used to:

    - Seeing large images and graphics (typically, people sit further away from TV sets than when sitting in front of computer monitors)
    - Not interacting with their TVs (other than to change the channel)
    - Having all content fit on one screen
    - Being entertained
    - Not waiting for images to appear on-screen


  • Plug-ins – Web users typically have to keep up with their computer browser's plug-in upgrades. TV browsers such as WebTV, however, run software that provides built-in support of a wide variety of graphics, animation, audio and other formats.

Web design for TV audience – In contrast to computer monitors, TV sets are devices with really low resolution. Fine details, such as small text or graphics with thin lines, are difficult to read on the screen, and backgrounds that look great on a computer screen tend to be distorted on a television.

Based on our experience with TV browsers such as WebTV, we have developed the following recommendations for Web designers to ensure their pages look as good on TV screens as they do on computer monitors.

Note: Currently, WebTV is the most popular and widely-used TV browser, and so we have decided to use it as our example; however, our tips apply to other TV browsers as well.

  • Screen dimensions – WebTV's default is 544 pixels wide by 378 pixels high, all of which is available for Web content display. (Additional space is reserved for WebTV interface components: a top margin of 6 pixels; left and right margins of 8 pixels; and a bottom margin of 36 pixels.)
    In comparison, Netscape Navigator's default is 490 by 337 pixels.

WebTV screen dimensions

WebTV screen dimensions as reflected on WebTV Networks' set-up screen

  • Colors – Although full white backgrounds are in wide use and are the easiest choice, they are not the best choice if you want your pages to look good on TV sets as well as on computer monitors.
    In general, darker-colored backgrounds display better on TV than lighter-colored backgrounds. A charcoal background (hex value #191919) is a good color to use.
    Full white or full red backgrounds cause screen distortion; that is, the edges of the page will appear to bow.
    If you really want a white background, try using 90% white. For example, try using the color linen, whitesmoke, or the hex color value #EFEFEF.
    When choosing colors for text, it is best to use light-colored text against dark-colored backgrounds; TV audiences find pages designed this way easier to read.


  • Graphics, animation, audio
    Graphics – Use small images for quick download times. Avoid using images with many fine details as they can be difficult to see and will take longer to download.
    Use HEIGHT and WIDTH attributes so that text will load first while images are still downloading.
    Avoid using thin graphics (for example, one-pixel lines, horizontal rules) as they flicker on the TV screen and so distract your TV audience from Web content.
    If horizontal rules or thin lines are necessary to your design, add a pixel of width to the <HR> tag (for example, <HR SIZE=2>) or antialias lines that are graphical in nature (antialiasing adds at least a couple of pixels to the width of a line; use your art tool's antialiasing feature).
    Use client-side image maps instead of server-side image maps; they work better with remote controls.
    Avoid using narrow columns as images will be scaled and text will wrap frequently.
    Use the <NOBR> tag to prevent line breaks in a series of images or any other horizontal flow.
    Avoid using too many form elements in your Web pages as form options can quickly become overwhelming to noncomputer users.

    Animation – Use animation in your Web pages to provide your TV audience with some of the movement they are accustomed to seeing on TV.
    Avoid large animation files as they will take long to download or may even hang.

    Audio – Use background music or theme music on your Web pages to provide your TV audience with an experience more like television.
    Avoid large audio files as they will take long to download or may even hang.


  • Text – Avoid using small text sizes as they are very difficult to read on TV screens.
    Use the <NOBR> tag to prevent line breaks in text or any other horizontal flow.
    Avoid making fonts smaller than the base font size of your window.
    Generally, text embedded in images is more difficult to read than normal text. Because small text size is often included in an image button label, consider placing the label outside of the button itself.
    Enlarge graphical text (for example, text on top of a button or within an image map) for better readablility on TV screens. Alternately, insert larger text links below the graphical text.
    Keep Web page titles short so they won't be truncated when displayed on a TV screen.

A few more tips...

  • Put the most important information on the first visible screen of your Web page.
  • Eliminate scrolling as much as possible; keep the length of your Web pages down to 1-2 screen lengths.
  • Place larger images below the first visible screen so that your audience can start viewing the text while the images finish loading.
  • If you have a set of related pages, reuse an image to take advantage of automatic caching.
  • Try to reduce the number of items on your page because TV audiences are used to looking at one focal point.
  • Avoid placing links to downloadable software on your home page. WebTV users cannot download software to WebTV receivers (other than the automatic upgrades they receive from WebTV Networks, Inc.). Provide alternatives such as e-mail links or telephone numbers.

Remember: the TV audience differs from the computer audience, so ensure your Web design includes both types of audiences.

Adding interactivity to your Web pages – Developers often interpret interactive design as being part of a sophisticated package that would include VRML, for example, and would therefore be inaccessible to many (if not most) viewers. However, this is an inaccurate perception.

"Interactivity" simply means giving your viewers the opportunity to indicate their needs or desires and/or control the information they receive from your site. One example would be to make any audio files at your site optional; in other words, rather than playing an audio file automatically as soon as a Web page is accessed, let the viewer select the file (as indicated by a commonly-recognized audio icon). Of course it helps if you indicate in a few words what the file is about and how long it will play if selected.

Add interactivity to your Web pages by:

  • Offering different file formats for users to download and giving them the option to send e-mail or phone (especially useful for TV-based Web surfers who don't have the capability to download files)
  • Making audio and video files optional by not having them play as soon as the Web page containing them is accessed; let the user decide whether to take the time to listen to or watch them (especially useful for those surfing the Web in "quiet environments" such as an office or library)
  • Create some movement at your site with animation, JavaScript, or Java applets – but don't base your whole design approach on these elements; keep in mind that some viewers disable such technologies on their computers or, in the case of WebTV users, don't have Java enabled on their TV browsers

Review of Web Sites

Listed below in alphabetical order are the sites we have evaluated for the purposes of this presentation:

  • Carnegie Hall – www.carnegiehall.org
    - GOOD:
      Attractive visuals.
      Fast-loading graphics.
    - BAD:
      Small fonts (hard to read).


  • David Siegel (Web designer) – www.dsiegel.com
    - GOOD:
      Interesting graphical design.
      Thought-provoking comments (though sometimes narcissistic).
    - BAD:
      Nonintuitive front page (4 images, no text); visitors don't know what the page is about or where to go.
      Select the top left Marilyn; the page that comes up is better, but still not that informative.
      "Balkanization of Web" page; the left margin is forced to curve through the use of a clear GIF and by altering the HSPACE on each line (with <NOBR> and <BR> tags).
    When displayed on a computer monitor, the effect is interesting, but when displayed on TV screen, the left margin appears straight – not curved – and line endings appear cut off.


  • Delta Airlines – www.delta-air.com
    - GOOD:
      Clean, navigable, all items fit on one screen.
      Uses a white background, but the effect is good because of the contrasting colors of the text and images.
      Animation works well.
    - BAD:
      Drop-down menus group information, but the dotted lines between groups of selection items are ugly and confusing (the user doesn't know whether s/he can select them, too).


  • Discovery – www.discovery.com
    - GOOD:
      Well-organized; users can easily find their way around.
      Small, fast-loading images intermixed with text; attractive.
      Good balance of text vs. images (viewers aren't overloaded with too much text to read or with too many images that are slow to load, which can make a site look like it's just eye-candy with no real content).
      Some animation highlighting major links; creates interest for viewers.
    - BAD:
      Background color is bright white; doesn't look good on TV sets.


  • FAO Schwartz – www.faoschwartz.com (no longer active)
    - GOOD:
      The purple contrasts well with the orange; however, it would be better to use an orange that doesn't flicker as much (use WebTV's color test page) and use the purple or other dark colors for contrasting text and other visual elements.
      Animation works well.
      Sound works well (soft ticking noise for the clock).
      Inside pages work better than the front page; select the clock face or "About FAO Schartz."
    - BAD:
      Too much flicker, hard on the eyes of TV viewers; colors don't contrast enough (only brassy/warm oranges and reds).
      Slow-loading graphics.
      "About" page could use more spacing between links on the left.


  • Music of Cyberspace – www.keybdwizrd.com/ (no longer active)
    - GOOD:
      Fast-loading audio and graphics.
      Light colors on dark background.
      BAD:
      Some flicker.


  • Retro-Fit – www.retro-fit.com (no longer active)
    - GOOD:
      Nice and clean in general; good colors.
      All items fit on one page (one screen length – no scrolling).
    - BAD:
      Text on buttons should stand out more; it would be better to use either black or another contrasting color for text on buttons.


  • Stanford University – www.stanford.edu
    - GOOD:
      Page displays almost exactly the same on a TV set as on a computer screen.
      Great background color.
      Image loads pretty fast.
      The browser controls text display (the designer isn't going for absolute control.
    - BAD:
      5 screen lengths is too much scrolling, but it's not bad for an educational site (the designer could regroup the information in order to get it down to 1-2 screen lengths; the result, unfortunately, would probably be that some of the information would be pushed down another level at the site).


  • United Airlines – www.ual.com
    - BAD:
      Slow-loading (huge image map).
      Text is too small.
      No selectable hot spots (probably because they overlap or are of irregular shape); image map should be redesigned.


  • Whirlgirl – www.whirlgirl.com/
    - GOOD:
      Attractive site design.
      Items fit within 2 screen lengths.
      Fast-loading animation (achieved with animated GIFs and Shockwave, not JavaScript).
      Black background with white text, contrasting colors, graphics.
      Hey, she's a WebTV user, too! Look at the "I watch WebTV" box at the bottom of the home page.

Note: The above Web site evaluations were made as of late September 1998. The design and content of these Web sites may have changed by the time you view them, in which case the evaluations may no longer apply.

Web Resources

Some Web sites that you may wish to explore for further information:

  • WebTV's Developer site – http://developer.webtv.net/ (no longer active)
    Browse through the wide variety of information about Web design and Web content display on TV. Participate in topic-specific forums where developers exchange design tips. Note the free, downloadable WebTV Viewer for both the PC and Mac.
  • WebTV Networks, Inc.'s home page – www.webtv.net
    WebTV's home page where you can read about the company's latest projects and products as well as its history and vision.
  • WebTV's HTML Reference Guide – http://developer.webtv.net/docs/html/ (no longer active)
    Comprehensive guide covering all HTML elements in current use (HTML 4.0 and previous), complete with definitions, HTML code examples, and a list indicating whether they are supported by the top 3 Web browsers (Netscape, Internet Explorer, and WebTV).
  • WebTV's Test Colors – http://developer.webtv.net/tools/colorpick/ (no longer active)
    Test the colors you're planning to use in your Web page here! Look at all possible combinations of background and text – (accurate for a WebTV system displayed on a TV, not using an RGB display).
  • NCSA – Beginner's Guide to HTML – www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html (no longer active)
    Explanations, examples, a helpful glossary, and links to other helpful sites.
  • W3C – About the World Wide Web – www12.w3.org/WWW/ (no longer active)
    General information and a history of the Web.
  • C|net – Builder.com – www.builder.com
    Useful information on design, programming, scripting, and tools.
  • Sun – Guide to Web Style – www.sun.com/styleguide/ (no longer active)
    Guidelines for effective Web design.
  • Useit.com – www.useit.com
    Jakob Nielsen's forum for Web site usability contains biweekly articles.
  • WebDeveloper.com – www.webdeveloper.com
    Covers everything from design to HTML, Java, JavaScript, tools, and site management.

About the Presenters

  • Marinela Miclea, Technical/Marketing Writer and Web Designer, BrainPower
    Marinela is a published writer who has provided technical and marketing writing as well as Web page publishing to a variety of clients including WebTV Networks, Sun Microsystems, Wells Fargo, and John Deere. Marinela has a degree in sociology from UCLA and is the founder/former Webmaster of the National Writers Union's San Francisco Bay (Local 3) Web site.

  • Cindy Hall, Technical Writer/Editor
    After earning a degree in English and a certificate in Technical Writing from San Francisco State University, Cindy began her career as a technical editor at Sun Microsystems. She has held a variety of positions in the field, including that of technical writer and Webmaster (most recently for Netscape) before arriving at WebTV, where she is a technical writer and member of the Web Developer team.

Return to Marinela Miclea's resume.