Scroll On!
My art school teacher and friend, Robert Janz, once complained of a museum where he had seen a Chinese scroll painting mounted in a glass cabinet. Only one small section of the landscape narrative was ever visible to the viewers and the kinetic experience was lost. I was reminded of this when I started to think about the way we scroll our web browsers to see the content ‘below the fold’ of our computer screens and digital handhelds. It seems that we are happy to have the choice to scroll a lot but we don’t want to be forced scroll a little bit! Has the Ancient Chinese way of presenting narrative through the scrolling painting resurfaced in a new digital paradigm?
furthermore...
Are You a Scroll Hater?
A few years back, the scroll bar was an anathema for some. The screen was the space available and the content always had to fit into the space. Authoring tools, such as Hypercard, Macromedia Director, Authorware and Flash, ToolBook and even Powerpoint gave us the 'card' or 'frame' model of information presentation. The CDROM gave us the 'Main Menu' and clickable buttons transferred us to other screens. In the authoring tools these 'screens' are referred to as frames (Director), pages (ToolBook), cards (Hypercard), and slides (Powerpoint). Once the target screen size is set, no information is presented outside those dimensions. More information needs to be delivered on a whole new screen. Of course, some authoring tools allow the presentation within a scrolling text field but if we CDROM designers put content in a text box with a scroll bar, we thought it was 'failure'. We hadn't solved the problem of the content architecture and we were not moving far enough away from word processors!
Along Comes the Web and Web Browsers.
The information on the web can be presented in a Window that can be any size! In fact many early web sites just had lots of scrolling text. Web designers who came from the CDROM school of interface design did their best to only present single 'screenfulls' of information at a time, even resorting to Flash to guarantee this.
Making Up Our Minds for Us
In 1996 Jacob Nielsen wrote: 'Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. All critical content and navigation options should be on the top part of the page.' - see http://www.useit.com/alertbox/9605.html But then in 1997, he added : 'In more recent studies, we have seen that most users have started scrolling when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages.' - seehttp://www.useit.com/alertbox/9712a.html .Then in 2002 Jacob Nielsen said 'Users hate scrolling left to right. Vertical scrolling seems to be okay, maybe because it's much more common. ' --- UseIt web site We don't need Jacob Nielsen to tell us that things have [gradually] changed.
It's OK to scroll!
Now we must go into detail, because it is NOT always OK to Scroll: Worst of all, is when your page scroll just a little bit!
Arithmetic
If we want to excercise some control over whether our pages scroll or not, we need to determine the size (in pixels) of the target browser window. In fact, this is a matter of judgement rather than exact science. In 2003, the majority of web designers and usability gurus are advocating a screen size of 800 x 600 pixels as the minimum for web browsing. If you really want to target owners of older computers like schools, for example, then you might think of the screen as 640 x 480. Take a look at Adrian Rosetti's article here: roselli.org
Back to 800 x 600
If, then, the user has opted to use the FULL screen for their browser, then we can try to approximate the useable space: In Internet Explorer 5 we have a 15 pixel wide scrollbar on the right and a 22 pixel wide 'explorer bar'. The scrollbar will only be there, taking up screen space if you have content 'below the fold' of the screen but you must count it in the math. The horizontal space is very important because we want to AVOID the need for scrolling horizonatally especailly just a little bit! Of course, occasionally there are special uses for horizontal scrolling like timelines, but I stll prefer not!
Back to the calculations: better to be really safe and work well within (800 - 22 - 15 = 763) but you'd better be safe and take off a few more pixels - let's call it 750!
Liquid Designs
Actually, it is possible to give your pages a 'liquid' design and stretch or shrink your pages whatever the users' width BUT if your graphics are wider than 750 pixels, not only will users have to scroll horizontally but the page will be horribly slow at downloading. You need to think about the readability of text as well because line lengths of more than 70 characters are very difficult to read. Nick Finck wrote this article about liquid designs. I must say that I would like to get there one day with this site.
So, to conclude the horizontal scrolling issue
Avoid it! Design for a maximum of 750 pixels wide Don't ever make graphics more than 600 pixels wide, that way they will fit on a 640 x 480 screen AND there is some chance that they won't be too big for download. Don't make text wider than 70 characters. Be liquid if you can
Vertical Scrolling
Good to be liquid, but you can't easily do the same vertically! Someone may like to correct me here! So how much vertical space have we really got? Well if you are happy to let users scroll then you have infinite vertical space! In fact many Windows users may well have a scroll wheel mouse which was introduced by Microsoft in 1996 By the way, there is, I believe, a horizontal scrolling mouse! - check here:
Hardware that Helps
The scroll wheel mouse certainly helps moving up and down through the content. I'm a MAC user predominently and I don't have one of these wheely wonders, although third party scroll mice will work on MACs. It wouldn't surprise me if Apple introduce one soon!
The Web as Journal
As you can see from this page, a typical 'blog' or journal, has to scroll vertically. As the author of this article and web site, I couldn't possibly divide this up into screen sized chumks, with forward and backwards buttons for navigation. What I try to do is to make sure the home page of the site reveals all of it's main message above the 'fold' (a bit of mewspaper reference this - when you first get your copy of the Guardian, what you see above the fold is the main headlines and title of the newspaper. Get the idea?) Nothing important for first time viewers should be off the bottom of the screen; only the continuation of the articles and so on. As you can see from the Guardian Unlimited , this hasn't really worked with their online version because advertising above the title has taken priority, pushing some important items below the fold. However, the designers have ensured that the top story headline and the search facility are in view.
Print Friendly
One marvellous thing about an article that fits on one long scrolling page is that if you wish to print it out then your printer will simple deliver pages as needed. Information spread out over several screens (the card or frame model) will need printing seperately. Annoying, if you want to click print and go get some coffee!
Still Hate Scrolling?
Ok so let's say that you really insist on avoiding the vertical scroll on your pages, then you have two choices: use Flash or fit your content into the available space. More on Flash in a while!
Height of the Window?
Figuring out the actual vertical height inside of the window is almost impossible because different browsers give you the choice of various navigation aids at the top of the screen. As an example my Internet Explorer 5 on MAC takes up 116 pixels at the top of the screen. The status bar at the bottom of the screen takes up 16 pixels. So, if we target a screen of 800 x 600, we have: 600 - 116 -16 = 468. Netscape 7 on the same system uses 120 pixels at the top and 18 pixels for the status bar, so that leaves 462 pixels. All of this presumes that the browser is maximised on the screen. So, if you want to be sure, I would say aim for 450 pixels high. You must err on the side of caution because there is nothing worse than a home page where you have to scroll slightly down to reveal all important navigational stuff.
Flash Makes It Easy!
You have to agree that for those sites where total control of the browser space is essential then Flash will do the trick. Not only can you fix the pixel height and width of the space but you can build 'liquid' designs by allowing scaling of the Flash file.
Special Cases:
SVG - Scaleable Vector Graphics has now become part the recommendations of the World Wide Web Consortium and may offer some other opportunities for this kind of control. Press Release here
PDF - Adobe Acrobat and Portable Document Format
Probably another article in itself but briefly: PDF is, in a way, a combination of 'card' based format and a scrolling format, because the information can be delivered on a sequence of 'pages' which can be larger than the screen. The Adobe Acrobat Reader and, the plug-in for the browser has an integrated scrollbar, so if there is more below the fold, then you can scroll to get to it. The size or proportions of the page are usually defined for print purpose (often vertical book format) and are, therefore presented 'fit to width', with about half of the content below the bottom of the screen. It is possible to create a VERY long page for scrolling or divide the material up into discrete pages. Here is an example of a long page built with Microsoft Excel and Acrobat (PDF 160k). Future articles will focus on Acrobat where I will cover this in more detail.
Concluding
The Web experience includes scrolling, so use it when appropriate. If you have the need for a page that doesn't scroll then you'll need to put the extra crafting in to be sure that it doesn't scroll even just a liitle bit. Because, strange as it may seem, we are happy to have the choice to scroll a lot but we don't want to be forced scroll a little bit!
Posted on 18 Jan around 11pm
Tags: Ideas