[LINK] Advice for very large screens

[stephen at melbpc.org.au]

Hi all,

Recently, Google have created a large repository of information, hints
and general advice for writing normal 'pages' to be read by normal web
browsers BUT on large screen television sets. Some televisions with an
interactive screen, but often 'television' navigated with four buttons. 

Designing For TV: http://code.google.com/tv/web/docs/design_for_tv.html

It strikes me that presentations on *Interactive White Boards* call for
much the same considerations as 'pages' on a 10' interactive television?

For those with more experience utilizing IWBs in group settings than me,
what are additional IWB page-design features for your well-written page?

  
Here's Google's advice below for writing for ten foot screens:

--

You should make at least a few modifications designed to make a website 
usable on a 10-foot UI screen.

There are several noteworthy changes: 

* The sizes of all the fonts and buttons are increased

* The "selected" item or item with the mouse over it is clearly
  highlighted

* The user can navigate intuitively around the page, using
  up/down/left/right motions

* Additional padding has been added between all elements on the page


Viewers sit relatively far from their screens. This distance makes a 
traditional web page harder to read, cluttered, and more difficult to 
perform basic tasks like navigating menus and selecting buttons. 

When designing a web page for large screens, 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. 

1. 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 same size computer monitor.

2. To avoid a cluttered appearance on the TV, blank space between
elements on the page should be greater. This is typically called white 
space (or padding) and it's a fundamental aspect of making web content
easy to discern and navigate.

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

Vertical scrolling

Vertical scrolling, while fundamental on a desktop browser, may not be as 
appealing on the TV UI. Scrolling can appear less seamless, and important 
information may be hidden below the fold if users don't recognize that 
more content exists off-screen. A better approach is to make use of 
horizontal layouts and visual transitions between pages of content. 

Simplify category navigation

If your pages display both top and side category navigation, we suggest 
removing the top nav. TV screen space is plentiful on the sides, but 
vertical space is precious. 
 
Limit scrolling

* Segments of your page scroll can scroll vertically to reveal content 
(i.e. the left nav bar remains static while central area scrolls through 
content). This will likely have better performance than scrolling the 
entire page down. 

* "Down arrows" to help users be aware that there's content below the 
fold, as well as how to reach it. 

Enlarge options and emphasize the selection

In a living room experience, the remote is a little clunkier than a mouse 
and the user is further away. Help the user by highlighting selections 
and making them big and easy to see. 

* Add a hover state to links and buttons to highlight when the pointer
has hit its target. 

* Make each click target (link, button, and the like) large with ample 
padding for an expanded target area. 

* Elements like close boxes in the corners of pop-ups that are made small 
to be unobtrusive in a 2-foot UI are either impossible to see or very 
difficult to click with a mouse from 10 feet.

* Avoid requiring mouse clicks to close pop-ups. For example, some sites 
designed for the PC will close a pop-up when the user clicks elsewhere on 
the page; in a 10-foot experience this counter-intuitive. Supply an 
explicit means to close the window, and make it accessible by D-pad 
navigation. 

* Don't require the user to click on the primary control to make it 
active. Pages or pop-ups with scrolling elements should either give those 
elements focus or process the D-pad such that the element can be scrolled 
without having focus. Requiring the user to click on the element before 
they can scroll it is obtrusive. 

Explain your navigation system

Navigation through your 10-foot experience will be new to most of your 
users. Providing them with an explanation of how to get around your site 
will ease user frustration. 

Explain: 

* The arrow keys: do they move between pages? open context or 
navigation menus? and so on. 

* The back button: does it move to a previous page? undo an action? close 
a pop-up? 

* Media keys: what does play/pause do? what about skip forward/skip back? 

* Other keys: do you have a key mapped to cancel actions or close pop-ups 
(such as ESC)? 

Consider opening a pop-up on your site home page to offer this navigation 
help so users are given assistance up-front. 

Make text easy on the eyes

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. 

* Limit paragraphs to no more than 90 words. 

* Break text into small chunks that can be read at a glance. 

* Keep line length at about 5-7 words per line. Never go shorter than 3 
or longer than 12. 

* Remember that light text on a dark background is slightly easier to
read on TV (compared to dark text on 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. 

* Add more leading (larger line spacing) for onscreen text than print 
text. 


Designing a homepage goes far beyond the scope of a quick start guide :), 
but still, we can't help but give a few tips. 

Reduce your homepage probably links to tons of cool stuff for desktop
users, now remove what doesn't work for TV. For example, "Create" here
is likely unnecessary for TV. 

Keep it above the fold

Keep it above the fold. Many web sites have banner ads on the top of the 
page. On a TV experience, these ads can consume most of the TV viewer's 
screen, forcing them to scroll down in order to see your content. 

Category page

On category pages, things are a little tricky. Users often want 
selection, but for TV, it's best if this selection remains above the fold 
and the navigation simple. 

Make sure each option is well highlighted. 

When there are more selections than fit above the fold, rather than have 
the user scroll the page down, consider a left to right selection 
mechanism. 

Consider auto-playing any video (and even in full screen). 

Make full-screen option prominent and highlighted by default as the first 
action. 

--

Cheers,
Stephen