Scrollbars are the source of all evil

As a graphic designer and a schooled usability designer I find myself so often in the position to defend good design aspects against horrible alternatives. And more often then not I have to quote different usability research done by major companies like Microsoft, Apple, IBM, Logitech, and also new usability trends.

And in the world of usability there are three nightmares. Three banes of desctruction of everything usable, and they are the following:

– the Keyboard

– the Mouse

– the Scrollbar

Now, the first two are not that difficult to imagine, also because of its history.

A keyboard is an input device

t that needs to be able to provide all the letters of the alphabet, all the numbers, often used special characters and basic ways to navigate through a computer. And because the functions of a computer and its operating system increased, we have now additional buttons hooked up to the keyboard. The keyboard is not a logical device, but it’s design is almost necessary. It is difficult to build something that needs to have 101+ keys in one single device. The weird thing is, that the ‘non-computer’ alternative is extremely simple: the pen or pencil. So, you do have the pen-tablets, but since we are dealing with computers here, it takes a lot of work for a computer to flawlessly understand you hand-writing. So keyboard it is. We’ll have to deal with it.

The mouse became the input device that nature itself tested as being a failure as an input device. Corpal Tunnel Syndrome. The reason why the mouse showed up in the first place is because computer were able to create dynamic user interfaces on a screen. So, you could show a button on the screen, but a button invited the behavior to push it. Well, especially back then, you could press your finger to the screen as hard as you wanted, it would not budge. So, we needed a ‘digital’finger. And the mouse it was. Now, Apple was smart, and thought it through; if the mouse mimics your index-finger, you only need one button: the push. If you push a real-life button with two fingers, it still does the one thing it was destined to do. For years and years, Apple kept with this functionality. Too bad they finally gave in and put extra functions into the mouse; including different ways of touching it. The PC/Unix mice were worse, with the 2,3,4,5 buttons to click on, and the combinations. True, you could trigger more functions with it, but it was not getting easier to understand it.

And then, indeed, the way of handling a mouse could be so devastating after longer use, that it did cost companies and insurance companies millions and millions of dollars. Still, the mouse is around. Also here, a pen-tablet does a magnificent trick, representing the surface of the screen, and you can write, move and tap like you would do in real-life too. but people love to stick with their mouse. Why? I really cannot say; unless you play games. A pen is a horrible game interface.

But, finally, there it is. The scrollbar.

This one is the easiest to explain why it is a bad interface element, and it is backed up with so much research that you would think it is an easy thing to convince people of this defective user interface element. But noooooh. Actually, the scrollbar, and scrolling itself, is amazingly difficult to debunk.

The scrollbar, just like the keyboard and the mouse, has been invented because of a problem in technology, or actually, an added bonus to a computer over real life. Because, a computer is only limited to ‘virtual’ space by the storage size and processing power it has. This means, that visually, you can create an image of 1 mile by 1 mile. Still, your screen is not 1 mile by 1 mile. So, now, instead of the good old days when all computer programs were built to run on exactly a certain screen, a screen is more or less a window to a virtual world that lives inside your computer. You do not always see everything.

And like with a real window, where you can pop your head out and look around, scrollbars were introduced to provide you with a way to show content on your screen that is too large to fit on your screen. So, in this scenario, scrollbars still feel correct. Hey, they are a blessing with content that simply is too big. For example, I design a poster, and I have to see parts of it in detail before I send it out to the printer. The poster is simply bigger than the screen, so I need it.

But suddenly, with the coming of the internet, the scrollbars needed to be used for a necessary evil. The loading times. When you designed a web page in ’93 in Mosaic, dragging in your web page on your 2400 baud modem, it could take up minutes to load up a normal page. As an internet developer, one of the requirements were that a page needed to load up within 30 seconds before people would lose interest. So, it was impossible to require people to load up multiple pages if that was absolutely unnecessary.

And there was no javascript around to cut content up within the page, delivering a different kind of interface to go through big parts of content.

So, there was no choice, a long text simply had to be shown in a big page, which automatically received a scrollbar. In that time, it was the bane of design at the academy, because it was ugly, it took up extra space, and it worked horribly. Especially with mice that still included the rolling ball, that was prone to collect dust-bunnies and stopped moving from time to time – hell on earth.

But technology caught up; we have broad-band internet, larger screens and can script any text field to use different ways of navigating. You would think that we all would have caught on… but no.

If you go to an honest designer, someone that is creative, knows the ins and outs of the subject matter, and is highly regarded by other designers, preferably even awarded, and ask him to make a design for an internet page, chances are that you won’t see scrollbars. You will see some beautifully designed ways to navigate through content. Usually page-oriented.

Why?

For hundreds of years, it has been a natural way to ‘flip’ through text. This is not that that is now outdated, it is because of something different. Keep in mind, the ancient Greek, Egyptians and Romans had scrolls too. Long pieces of paper used to write upon.

One of the reasons why pages and books and magazines work as a container of content, just like the Kindle for example does too; a page provides a container for text. A whole page has an emotional volume. When you read a book, how many times don’t you say ‘you want to read one more page’? A page is a good way to bookmark, to refer to, to di-sect large quantities of information. An index in a book works because it simply says; Chapter 5, Page 40. So you know, if you go to page 40, you will be at chapter 5.

A long text in a scrollable text field is not that forgiving. You cannot easily say; I am about 45/98 of the text (because you don’t see line numbers). Or read the index. Because an index needs to be programmed, and with dynamic texts that is practically impossible. If you pull a text of 2,000 lines and want to program links and an index, you will lose extra space for keeping that index in there. But more importantly; if you like scrollbars so much, why do you need an index? Isn’t an index to prevent the use of scrolling originally?

Think about that.

Not only that, scrollbars have the ‘visual feedback’ to have the bar that actually does the scrolling, the handler, increase or decrease in size if the text is longer or shorter. But if you have a long text, it is often impossible to use. Also, it will scroll often too fast through the text, making it more an annoyance than a blessing.

Scrollbars are only a valuable interface system for content that is honestly too large to fit on your screen. Text has the flexibility to fit anywhere. It can be broken up per word if you need to, or it can fill up your whole screen. So there is no need for scroll bars. Just flip through texts.

I have been running different projects without scrolling for multiple years with success and raving reviews with only flipping texts, for entertainment companies, universities and have even been awarded for one of those. In projects together with NYU and also Rutgers we have applied this many times, sometimes we even had to replace scroll functions in older projects for page flippers.

But still, a lot of times, I get the question from some clients simply that they want a scrollbar. There is no reason why, except they see them on other sites too. Argh!

Praise has to be said though, because just before finishing this posting (also with horrible scrollbars, I need to kick some blog-engine-producers around šŸ˜‰ ) I received a near-perfect design from not even a professional designer who got it right on the money, and he absolutely made my day.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s