Links & More

	Print version

Related Links
	INTERACT 2005 – Communicating Naturally Through Computers?
Background Links
	INTERACT 2005

The Blessings of Large Displays...

By Gerd Waloszek, SAP User Experience, SAP AG – Updated: March 13, 2006

Recently, I bought a huge screen for my computer at home. I am not the only person to have currently made such a purchase. The time seems to have come for large displays – they are appearing everywhere. But how can we make the best use of them? This is still an open issue, and not much research has been done on it so far. At the INTERACT 2005 conference, for example, quite a number of papers were dedicated to large and multiple displays, but this is only the beginning. Research typically follows reality – at least in the world of computing and usability. While the researchers are still pondering what to do with large and multiple displays, Web designers have already jumped on the bandwagon and found uses for large displays.
(See the Addendum for an update of the article)

A Short History of the Web and Computer Screens

Before I tell you how Web designers are utilizing the new found "freedom of space," let us go back a couple of years. Not so long ago, VGA (640*480) was the dominant screen size, and Web pages typically had a one-column layout. Recommendations for the width of Web pages were in the order 480 pixels. On pages with a wider fixed width, the text was truncated anyway when printed. Then Netscape invented frames, and soon most Websites sported a two-column layout. Typically, a navigation bar appeared to the left and the page content was presented in the right frame. Not much later, frames were banned by some Web gurus, and most designers followed the ban. While the basic two-column layout was kept, the page structure was created with layout tables instead of frames.

At the same time, computer screens grew larger and larger: We saw SVGA (800*600) and then XGA (1024*768) become the standard size. Web designers responded to this development by adding a third column to the page layout – a layout that I used to call "triptychon" and that you still find on this site.

www.w3.org/TR/xhtml1 • click image for larger version

www.sapdesignguild.org • click image for larger version

Figure 1: The W3C still offers some "old-style" Web pages (left), while the SAP Design Guild (right) sports a standard three-column layout

The Presence – and a Problem...

So much for the history of the Web and computer screens. Recently, not only LDC screens have replaced most of the tube-based monitors in offices and homes, but screen resolution has increased even further: Current screens offer resolutions of 1280*1024, 1600*1200, 1920*1200, and even more. In addition, the advent of HDTV has brought us wide-screen displays – even on notebooks – so that we can watch our DVD and TV films without black bars. With respect to the recommendations for the page width of Websites, however, not much seems to have changed – there are still a lot of narrow pages on the Web. For a while, Websites were optimized for SVGA (800*600) because laptop computers still had this displays size. Today, most Websites are optimized for XGA, that is, for a width of 1024 pixels, but many pages are still no wider than 800 pixels – at least with respect to the actual content.

So there seems to be a mismatch between page widths and screen sizes: Websites are optimized for a maximum width of about 800 to 1000 pixels, but we use displays that are 1280 or more pixels wide. What a waste of screen real estate!

The Solutions...

But there is no reason to worry about this discrepancy – Web designers are creative people. Psychology of perception taught them that people have problems reading wide text columns. Thus, making columns or the content of Web pages wider does not make much sense. They found other solutions.

The first solution is still confined to the limits of XGA screens. Not long ago, I realized that a couple of sites had added a fourth or fifth column to their page layouts in order to offer more advertising (see figure 2). Thanks to growing physical screen sizes, Websites had gained new "territory," and their owners have made use of it, albeit not so much for the benefit of the visitors to their sites... Sometimes the columns contain several smaller ads. Often, however, the rightmost column contains just one large ad – animated, of course, so that you will definitely become aware of it (as psychology of perception also tells designers).

www.welt.de • click image for larger version		www.zeit.de • click image for larger version
www.times.com • click image for larger version		www.sfgate.com • click image for larger version

Figure 2: Two German und two U.S. newspaper Websites adapted to XGA screen size and featuring an additional column containing an animated ad

But creativity does not stop here. What, if we combine the header region with the space to the right into one large advertisement space? Figure 3 shows an example of this. While the animation still fits into XGA screen size, on larger screens it looks as if the designers had claimed the whole screen space for their ad.

www.spiegel.de at XGA • click image for larger version

www.spiegel.de at 1600*1200 • click image for larger version

Figure 3: Advertising where header and area to the right are combined; it still fits into an XGA screen – shown on an XGA and a large screen

With the many large screens that are populating homes and offices, there is no reason for stopping at a screen width of about 1000 pixels. Just recently, I stumbled across a "venetian blinds" animation on my screen which was clearly wider than an XGA screen (luckily, I was fast enough to press Alt-Print). Obviously, Web designers have found out that there is much potential in the large unused space on the right screen side for advertising (see figure 4) – the more space, the better. Large animations come across particularly effectively when there is lot of room. So watch out for new and exciting user experiences to come, provided that you own a large computer screen.

www.abendblatt.de at 1600*1200 • click image for larger version

Figure 4: The "Hamburger Abendblatt" Website on a large screen – here the animation uses more space than an XGA screen would offer

Please note that animations on Websites are often only presented for one day. So, if you visit the cited sites you may encounter completely different ads or even none at all. When I had my first ideas for this article, the "Der Spiegel" Website sported a wonderful animation with a moving car, which came across effectively on large screens even though it fitted into XGA. When I wrote this article, I found the "jumping jack" animation one day and none the day after. So what you will find depends very much on luck...

Conclusions and A Design Proposal

To sum up, what do users gain by buying large or wide screens? With respect to Websites, users gain more advertising – which was probably not their intention. The only way to avoid some of the advertising is to make the browser window narrower but resizing windows is cumbersome, and the advertising is often inserted into the header (as figure 3 shows).

With so much screen space, we might have several browser windows open in parallel. But resizing and arranging all these windows is even more cumbersome. Which leads me to a design proposal: Some browsers offer "tabbed" browsing for faster switching between Websites. But this does not exploit the power of large displays because we can only see one Website at a time. So, what about "tiled" browsing? With tiled windows, you can have two or more Web pages next to each other, that is, view them in parallel. If you like you can split the windows vertically, too, either at the same height, or at different heights for each column. There are many design options... Hey, browser developers, come on and give us tiled browsing so that users can profit from their new large displays on the Web, too! You will find my prototype as a source of inspiration in figure 5. Regrettably, it still won't solve the problem of how the browser can find out which part of a page is advertising – and hide it – and which is not...

Figure 5: Prototype of a browser with tiled browsing (click image for larger view) on a 1600*1200 screen

Addendum

Comment 1

I received an E-mail from my colleague Carlo Bies telling that the Opera browser has already tiled browsing (press F6, for example). Shame on me and that I stuck to my favorite browsers and did not look around!

Figure 6: The Opera has already tiled browsing (click image for larger view)

So, I have to modify my call to the browser designers: Hey, developers of Internet Explorer, Mozilla/Firefox, and Safari, come on. Follow the example of Opera and give us tiled browsing, too.

Comment 2

My colleague wrote:

Thank You for the article, good food for thought.
First result: I searched on the net and found WinTiles Plus - Automated Windows Organizer.

Figure 7 : Screenshot of WinTiles

Note: WinTiles Plus is shareware.

top

Editorials

Editorials 2010

Editorials 2009

Editorials 2008

Editorials 2007

Editorials 2006

Editorials 2005

Editorials 2004

Editorials 2003

Editorials 2002

Editorials 2001

Editorials 2000