Scroll bars
March 7, 2004 | Jorge Fino
18 Comment(s)
So which is it? Scroll or NEXT and PREVIOUS buttons? The scroll has become ubiquitous, and users have grown accustomed to its function. As a result, its become increasingly difficult to justify anything else besides a scroll to a client.
A hammer might seem better than a rock at first glance.
In web design where this is a constant issue, there are times when scrolling seems a bit ridiculous for the information being displayed.
The scroll bar should not be discarded for next and previous buttons. Instead, the designer and content creator need to decide when the content on a scrolling page has reached some natural point to insert a next page link. Scroll and page navigation used together can make life easier for your users.
Using next and previous navigation will break up your content in logical ways. For example, how many times have we heard “Oh click this link and scroll about three quarters the way down, youll have to look for it. It’s a long page.”
Next and previous button usage will make it easier for folks to share information with each other by being able to target page urls, and send page number references to one another. However, discarding the scroll bar leaves us with a user average of 420 pixels vertical space for each section.(800×600 screen with OS controls, browser controls and status bar) If you divided content so granularly it would just be frustrating.
This has become an issue with the proliferation of web technology. From college applications on the web, the photo kiosk at the drug store, to tax returns online, we’re being slammed by massive forms with terrible interface design. Four pages of written forms can become a nightmare vertical tower of required and not required form fields for the user to sort out. Next previous buttons placed logically in the set while offering to save the information in fields already filled out is the current solution. But like I said, some scrolling is a good thing. While we don’t want 5000 pixel high pages, we don’t want 30 next buttons either.
If your having difficulties with your client, I would suggest bringing an Information Architect on board to give input. If that’s not an option, do some research, cite Nielsen, Tufte and make examples the client can use. Nothing arms an argument like good information.
Yes, scroll bars have definitely proliferated ever since the Internet became popular
and more directly, when Microsoft Word included the function “File > Save for Web.” The
popularity of Flash has only added to this behavior with the notoriously tiny “50×75 pixel-
sized” scrolling text boxes—its ridiculous! Doesn’t anyone recall B.I. (Before Internet),
when interactive CD-ROMs existed? Do any of you recall how often we saw the use of
scroll bars then? To my recollection, very few…most used pagination (Forward, Next,
Previous, Back, etc.).
So why have we abandoned pagination and gone with the scroll? Pagination is a
simple method which allows easy determination of where the reader “is” in relation to the
scope of the content (“page 2 of 7” for example)—a scroll bar attempts the same in the
way it extends its height to demonstrate the length of the content. Though pagination
does one better. There is a reference system in place (page numbering) that allows the
reader to track their progress and refer to certain areas of the content by simply
memorizing or noting one simple number. A scroll bar can’t tell you where that really
interesting paragraph you read is located in relation to large amounts of data (maybe in
small amounts)—one must resort to visually seeking/scanning all the content (again) in
order to retrieve the same information.
To your point, Jeffrey, the short scroll with section break-ups seem to aid the
horrendous scroll situation. Some websites (the now defunct http://www.webmonkey.com for example) have seemingly begun
to understand the issue and have broken up the content into sections in this way—scroll a
little (not as much as those long scrolls from the late 90s), and click NEXT to go to the
next page/section to continue reading the content. I’m not certain this is a solution, or
simply a temporary workaround, if that. Because now, not only are you asking the user to
affirm they would like to read more by clicking on a link (which can be considered as some
sort of “effort”), you’re now asking them to do even more work by including a scroll bar—
they need to use the scroll in order to read all the content on the current page. I’m not
sure if there’s any documented research on whether or not click-dragging is considered to
require more user effort than a single click (I would assume so). That would be interesting
to know…anyone? Of course, the scrolling has since become so out-of-control that we’ve
developed a new function on our pointing devices to alleviate us from the long scroll—the
scroll wheel.
And still, nothing beats a page number as a reference tool, especially when all the
data is presented at once (not hidden, as a scroll would do). Once the reader recalls the
page number they memorized/noted, he or she can easily scan the page since all the
content is viewable and can more easily recall where that interesting paragraph was
located (visually) in relation to the rest of the content or by quickly scanning. Doing this
with a scroll bar is especially more difficult since the content is mostly hidden and also
because browsers allow one to adjust the width of the window displaying the content and
ultimately the content readjusts itself as well—ruining any visual association that the
reader may have gained.
I understand the low resolution inhibits the NEXT and PREVIOUS function a bit. I agree
that 420 pixels doesn’t do much justice and isn’t an efficient amount of real estate to
present tons of information. Though most stats I’ve looked into lately seem to show a
majority (slightly over 50%, though it varies) of users are now on 1024 resolution. But does
this mean that printed books that are small in size fail as a means of presenting
information? Does its portability outweigh its practicality?
Check out the Herald Tribune’s (http://www.iht.com)
website and click on an article to see how their content reflows dynamically. It’s a beautiful
thing. And the pagination is dynamic as well. It just seems so effortless and natural to me.
The scroll bar isn’t necessary, though the option is available. Very well done, IMHO.
“So why have we abandoned pagination and gone with the scroll?”
Variable resolution displays would be the primary reason that we’ve abandoned pagination. Remember how the CD-Roms of yesteryear all required “256 colors at 800×600 resolution” or somesuch? Everything was graphical at a fixed resolution, and pretty much worked on exactly one type of system. On the web, you don’t have that.
Personally, I like having data in long pages with scroll bars, for a variety of reasons. One of them is that, with present computer technology, it takes a non-negligible amount of time for the next page to render, even on my 2.4GHz office machine on a university-grade internet connection. The rendering time involved when I hit PgDn on the same page is completely negligible even on my 200MHz home machine on dialup.
More significantly, if I have a long page of text with scroll bars, I can generally treat it almost as a single piece. The text continues from one view to the next, so that even if I hit PgDn I can very quickly find my place without thinking about things. (I suspect this also ties into the fact that my “high-speed” reading style involves skipping back to the previous paragraph fairly frequently; if I have to go to the next page, I can’t do that, and so I get mentally lost much more easily.) Beyond that, if I’m using the mouse wheel or arrow keys (or holding the button down and not watching) so that the page moves a line at a time, I don’t even have to find my place because it doesn’t get lost; I can read pretty much continuously. I can even skim things, reliably, at about a pageful every 2-4 seconds because I can look at one place and move the words past without spending time finding where to look on every new page.
All of this I find very valuable.
And, to be more direct, yes, I’m completely disagreeing with you with regards to whether scroll bars or sets of pages with next/previous buttons allow one to find something in a large pile of information quickly. I think you’re making a bad comparison; the issue is that you can put on one long page with scroll bars what requires a large number of pages without them, and so you without them you don’t get “all the information presented at once”; you have to page through all the pages. You also don’t get to jump to one of them, unless you’ve got a table of contents — which, given html targets, is just as implementable on a long page with scroll bars; you can select what you think is about the right place from the table of contents (just as you’d do with a series of pages), and the page will jump to that section and you can quickly scroll from there to find the particular detail.
As for the research about click-drag vs. click — that’s the wrong comparison, I believe. For multiple pages while skimming for something, you’ve got arrow keys or one click, hold, and slowly drag while reading (that is, zero need to look away from the text, no concentration break) compared to finding a button and clicking it. Scroll bars win. Or, if you prefer clicking, you’ve got the PgDn key, or the down-arrow key on the scroll bar. Scroll bars tie or win (keys easier than mouse-clicks, can be done without looking). For me, the fact that scrolling can be done easily with a variety of input devices makes it definitely more useful.
It would seem the current paradigm of scrolling and navigation, as inadequate as some may find it to be, is completely dependent on the use of the page, the content within it, and how that content is to be shared among viewers.
We have not yet mentioned Named Anchors, which allows the use of next and previous buttons in conjunction with a scroll bar. Named Anchors also allow for section sharing via the url inclusion of the anchor reference. There are also dhtml solutions with similar results.
For example, this forum’s scrolling is fine. However I wish this forum used Named Anchors on each post. a link might then be provided just under each horizontal rule to copy to the clip board, thereby giving users a way to bookmark especially good answers on the board and share them with others. This would also be helpful in cross referencing posts in different threads.
A named Anchor to auto scroll to a particular post on page on load might look something like #00011k and be inserted at the end of the url as, edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001Ib&topic_id=1#00011k
The post naming convention is in place for the email contact form. Utilizing this unique identifier string, it wouldn’t be very difficult to add Named Anchors.
So anyhow, my point is, even if scrolling is used as it is here, there are solutions available. Either way it seems odd to debate the issue when decisions are going to depend on the content.
I find it somewhat entertaining that I was arguing rather strongly against having online information presented with “last/next” buttons rather than scroll bars, and then very shortly thereafter I came across a website with some exceptionally nice examples of documents with single-screen pages and buttons for navigation between pages.
The website is http://www.pragma-ade.com/, and it has a vast number of very nicely done PDF files. (Unfortunately, many of them are unfinished content-wise, and the hyperlinks in the overview ones don’t work if you download a local copy, unless you download a local copy of what they’re linking to.) http://www.pragma-ade.com/collect/present/pre-tour.pdf in particular seems to have a good navigation system worked out, with a small (clickable) graphic along the bottom edge of the page indicating the current location in the document.
Pagination is bad.
The only use I see pagination put to these days is to serve more ads than would be acceptable on a single page.
Brad Hill wrote
The assumptions about page size can never fully accomodate all the variation in form-factors, screen resolutions and font sizes.
Pagination does help with navigation, however. I find it very hard to find my way around a long “flat” document via scroll bars. I often print out longer documents to read them vs. scrolling on the screen.
I despise paginated documents on the web. HTML has a variety of functions for navigating
long stretches of text and these are very bit as straightforward to implement as
pagination. The ability to text-search, the ability to SAVE the text on my hard disk for later
reference, and the lack of waiting for the net page of text to load (or previous page, when
referring back) all argue against pagination. Pages are for books made of paper.
I stumbled across this and wanted to contribute this: PAGES BLOW. SCROLL BARS WIN.
It is very difficult to make useful references in academic writing without pagination.
Contrast the “grabber hand” — in which users move their hands (i.e., hands on mouse) in
the same direction as they want to move the text on the screen… with scrolling, and scroll
bars in particular — in which users move their hands down in order to move the text on
screen up.
I think scrolling is backwards, and only continued use has made it familiar. Is there any
research on this? As if we wore those upside-down goggles all the time. Eventually we’d
get used to them.
This person —
http://homepage.mac.com/asagoo/tofu/
— has written a horizontal scrolling reader that, in my view, increases readability of long
texts on screen.
To reference long screen texts, numbered paragraphs might be as good as numbered
pages.
It’s simple: give the user a choice…pages or scrolling. I prefer scrolling, that’s why they call it a “browser”…so you can browse. Human beings are scanners and browsers. Us computer geeks sit in front of computers so much and want everything organized just so that we forget the value of scanning and browsing and using our eyes and mind to find information versus relying on links and google type searches.
Imagine a newspaper or magazine where each page is cut out and put in a file folder in a file cabinet. This is pagination without scrolling or browsing. Those who prefer a seperate page with no scrolling would tell you to “just look under the alphabetic letter of the topic you are interested in”. This would drive people insane…they would stop reading newspapers and magazines.
Also, a proper index page would be like the index of a book, all the important topics and terms would be there. Too many sites have an “index” page that is actually an abbreviated table of contents and no site index. In my opinion people get lost because of a lack of information up front versus too much information. People also get lost going from page to page to page to page then forget where they started or were.
Look at trends in retail; people utilize stores that have everything they want in one trip. They don’t go to the butcher, the produce stand, the baker, the dairy…they go to the grocery store and browse the aisles! Yes…it bugs me to fight the crowd and sometimes get lost in the aisles at WalMart…but it is what works for most people. Think about it.
The 35th edition of Gray’s Anatomy was the most sweeping change of the venerable text in the last century. Over half the 1471 pages were newly written and almost a third of the illustrations (there are over 1000) were new. After several decades of not really keeping up with advances in printing, the new edition was specifically intended to be visually attractive and visually informative. Their design is the basis of the current 39th edition, published in 2005. They directed their writers to abandon any pretense of omniscience, to instead cite sources and point out areas of uncertainty. This was all done at the instigation of the new editors, Peter Williams and Roger Warwick. Prior to his assignment as editor, Williams had worked on previous editions as an indexer.1
1 Richardson R. A Historical Introduction to Gray’s Anatomy. Gray’s Anatomy, 39th ed. pp xvii-xx. Elsevier: 2005.
Preferring pagination or scrolling seems to depend on one’s learning / information processing style. And am doing a PHD thesis (in educational sciences) on that.
Very few study has been done so far (in educational sciences as far as I’ve seen). The results of one study were:
people having “analytic” (other termes for that are serialist or sequential) learning style learn better with long pages (scrolling), “global” (or “holist”) people learn better with short pages… I will see in my thesis…..
Also Web navigation behaviour of people is related with his/her info proc style….
Filiz.
I just got an email with a built-in pdf file which had a horizontal scroll bar at the bottom of
the page that enabled scrolling the pages vertically. It worked superbly and naturally, to my
surprise.
Well, we naturally turn the pages left to right with our hands, while “scrolling” down with our eyes, so this “bizarre” coordination kind of makes sense, in hindsight.
I wonder if it can be found somewhere else in the internet, or was your document tailor made, Pr Tufte?
Does anyone know how to make InDesign create PDFs with that function? Making a horizontal scroll bar move pages vertically? Please be so kind as to post it here.
The iPad has re-introduced a similar argument. One that started when we transitioned from CD-ROM interfaces (or
even HyperCard based interfaces: https://www.flickr.com/photos/formforce/4662660914/) to the web, and now from
the web to the tablet. Though magazine apps on the iPad seem to be introducing a hybrid approach, and I’m not
convinced they’re entirely intuitive.
“iPad: Scroll or Card?” by Oliver Reichenstein of Information Architects does a fair assessment on which to choose while
giving insight as to why one model serves a better purpose than the other.
http://www.informationarchitects.jp/en/ipad-scroll-or-card/