« Computer Games for Grown Ups (Part 1) | Main | Four Dumb Things I Do Out of Habit (But Plan to Stop) »
Browsing the Vertical Web Through Horizontal Eyes
By Richard Nantel | December 31, 2007
Middle-aged eyesight led me to a computer store in search of a monitor that provides crisper, easier-to-read text. What I found there were shelves stacked with relatively inexpensive, high-resolution, wide-screen monitors ranging in size from 19 to 30 inches. Given our consumer lust for electronics, the affordability of these screens, and our aging population, many people will soon be upgrading their monitors.
What these people will find when they plug in their new wide-screen monitors is that they will be browsing a vertical Web through horizontal eyes. Thanks to the writings of usability gurus such as Jacob Nielsen, almost all Web sites have been designed to eliminate horizontal scrolling. According to Nielsen:
We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling.
Anti-horizontal scrolling dogma has created a vertical Web. Because Nielsen, et. al. approve of vertical scrolling, almost all Web sites use a set page width (often about 800 pixels) but a variable page depth. The result is that the Web looks ridiculous on new wide-screen monitors. For example, here’s my Facebook page using my new 22-inch monitor set to a resolution of 1680 x 1050:
Here’s a screen showing the results of a Google search:
Here’s a page from the BBC News site:
Clearly, these pages are best viewed on a screen oriented in portrait, rather than landscape, format.
The reason computer monitors are overwhelmingly being designed in a wide-screen horizontal format is almost certainly because many of the same hardware companies also produce televisions. The dimensions of modern digital televisions are driven by the aspect ratio of movie screens. So, modern computer monitors are better designed to watch full screen video than to browse the Web.
As high-resolution, wide-screen monitors gain adoption, Web designers need to redesign their sites to better work in these formats. It’s tempting for Web developers to address the screen width problem by making the width of their pages variable. But, this can create significant usability problems. Typographic best practices dictate that a column width of text should contain about 60 characters. Any wider, and the eye has difficulty tracking the line. So, wider columns of text may significantly reduce readability. Here’s an example of what not to do:
A better solution is to design pages so that text columns are constrained to a maximum width but other elements are elastic and able fill the white space. Amazon does this brilliantly. Here’s the same Amazon screen at three different resolutions.
Resolution 1680 x 1050:
Resolution 1024 x 768:
Resolution 800 x 600:
At 800 x 600, some horizontal scrolling is required to see the information at the far right of the page. But, usability doesn’t suffer because this right-hand information is secondary. The core components, the left-hand navigation menu and the important information in the middle of the page, are visible without horizontal scrolling.
All Web and instructional designers should study the Amazon site for a crash course on usability.
Web developers should also investigate design solutions that allow users to move components around on the page. iGoogle, Facebook, and Netvibes are three technology platforms that are built this way. With each platform, users have some control over the order and placement of the information on the screen. Here’s an example of moving content around an iGoogle page:
Until Web designers complete the redesign of their sites to better display on high-resolution monitors, consumers may want to consider monitors that pivot from landscape to portrait mode. Originally, pivoting monitors were expensive and restricted to graphic design and typography applications. Now, inexpensive models are becoming available to consumers. HP makes monitors with this feature, as do others.
Here’s a demo of one of these pivoting monitors:
http://www.youtube.com/watch?v=5jkGIp2uieU
You can also achieve a portrait mode orientation without changing your existing monitor. Portrait Displays Inc. provides Pivot Software, and Ergotron sells mounting hardware, which, together, will convert landscape monitors to vertical format.
Switched to portrait mode, the Web makes visual sense. Here’s my Facebook page again:
And here’s the BBC News home page:
Browsing in portrait mode significantly reduces the need for scrolling. (The BBC News page above requires no scrolling at all.) Consequently, you spend less time moving a mouse pointer around and more time reading what’s displayed.
From now on, I’ll be looking at the vertical Web in portrait mode.
Topics: Design, Hardware, Interface, Monitors, Portrait versus landscape, Typography, Usability, Web |
December 31st, 2007 at 5:52 pm
This argument makes a lot of sense, but the numbers I have read show that the population of people who own high-resolution monitors, or could afford them is quite a small percentage of total web users. This may change a bit as the economics of monitors comes down, but for now I am guessing most users are served well by the current web site designs.
December 31st, 2007 at 7:15 pm
Jake: Thanks for your comment. I was surprised to see how the cost of large, high resolution monitors had dropped when I visited a local electronics store this weekend. The 22-inch monitor I purchased, which pivots from landscape to portrait, cost $325. Similar models that don’t pivot cost about $275. Some 24-inch models were priced under $400.
January 3rd, 2008 at 10:50 am
Richard,
I work at Ergotron. I want to thank you for mentioning and linking to our products. If there is anything we can do for you, let me know.
January 3rd, 2008 at 11:38 am
Steve: People tend to work on computers without ever investigating what might make them more productive.
Switching my monitor from landscape to portrait mode has had a huge impact on my productivity and enjoyment of the Web these last few days. Plus, because I’m scrolling less, there’s less strain on my right hand and wrist.
Looks like your company’s products could be helpful to people with repetitive stress injuries.
January 9th, 2008 at 9:27 am
[...] Browsing the Vertical Web Through Horizontal Eyes [...]
February 19th, 2008 at 9:20 am
Have a new computer, vista home premium 20.1 LG Flatron wide.
When i first started, hated the links, narrow, vertical.
What i did after setting the home page to the size i wanted, left 1 inch on either end to allow view of desktop icons and is set to 100%, click on a page, when it comes up, click on the zoom to 150%, works great., almost same size, can read the print, etc.
One problem i still have is with Pogo games, actual playing area cannot be changed and is very small?
I don’t understand Pogo, on my old unit, win 98se and a 17” ctr monitor, the game playing area was full screen at 800 x 600 and mine is 1680 x 1050?
Any comments on how to fix this, even sent Pogo a screen shot, with no good answer?
Thanks, John
May 29th, 2008 at 12:32 pm
Good article but I don’t really see what you’re talking about with the Amazon example. The main content area seems to be the only one that stretches to use the additional page and rows of text become unreadably long there so they’ve not really solved anything. Not that I blame them for it, it’s a very tough one to crack…
September 8th, 2008 at 3:55 pm
If the web is vertical, why is your browser window horizontal? All your screenshots show a maximized browser window, which I find is very much a Windows mentality. Windows users tend to spend their entire computer time with only one window on their screen, maximized to take up the entire width and height of the monitor. OS X, on the other hand, is designed much more around having multiple windows partially visible at the same time. Windows is capable of this too, but small monitors and the maximize button have trained people to turn “Windows” into just plain “Window”.
If I browsed in full-screen mode, how would I drag text and images I wanted to save to the desktop? How would I drag photos from the desktop into an upload field? How would I drag the url to the desktop to create a link, or drag it to mail to email it … etc, etc.
I think the idea that a wide-screen monitor = wide-screen browser window = wide-screen webpage is faulted. I enjoy having narrow websites so I can use the extra space on my wide screen monitor for other things.
I think sites that have text in multiple columns is the best answer. Truly let the user decide how tall and wide they want their content.