Usability Institue Logo- A bolt that can be fastened with any of 4 tools
PicoSearch
Reducing Training to Its Sensible Minimum: Zero...
Inexpensive, Independent Usability Consulting by Jack Bellis
Home Page- List of All Content Home Page- All content, in date order Resources: page describing tools you can use Morsels: just our short articles and blurbs Just our Before&After Articles Just our Before&After Articles About: details on who I am and what I do Address, phone, number,  and so on
Contact me for a FREE usability review!
 

Waiter, More Technology, Please
Two Javascript Scrolling Solutions That Add Real User Value

It's been a premise of mine that more technology should not be the first line of defense in combatting UI problems. This is my first law of usability:

Bellisís Law: For every computer problem, even many hardware problems,
there is a simple solution to the user interface, often as simple as improved wording.
It is not your fault... the problem is not Ďuser error!'

This rule was formulated in 1997, in my book Computers Stink (rough online conversion) and originally worded as follows: For every computer problem, even hardware problems, there is a corresponding improvement waiting to be done to the design of the software or user interface... At the time it was five years into the development of the WinMac dialog system. Even with only those five years of techniques, users were amply afforded the tools to do great work, and all that was needed was good execution, design, and communication. But with the web, things have started over from a blank slate. As I explain to my bosses, customers, and co-workers, web projects are often frustrating because project teams are put in the unenviable position of having to re-create the last 12 years (1992-2004) of dialog/menu/interaction design ON EVERY PROJECT! It's amazing we succeed at all.

I came across two instances in the last few weeks where UI improvement and technology invariably travel the same street. Both concerned scrolling within web pages.

Freezing Headers in Excel-Like Tables

I've been working for about eight months on a wonderful product that delivers finance people from spreadsheet hell. This is the scenario where growing companies propagate a raft of disconnected Excel spreadsheets that the finance folks ultimately must reconcile and make sense of. In a fully mature model, these sheets wouldn't have been generated in the first place... they would simply be views into a database to which the info was added in the first place. That's what our product, proCube (www.satoriGroupInc.com) does. It provided a database (backend) and spreadsheet (frontends) that eliminate the redundancy and manual processes. As with most companies, we recently created its web frontend. These images happen to show it before the scrolling solution (which adds another set of scroll bars on the grid's layer itself):

Enlarge

A big problem though was that we needed to freeze the column and row headings of spreadsheets that were certainly much bigger than one web window's size. Yes, there are some techniques that would help, such as tooltips/Alt tags with the info, but without frozen headings, it is close to unusable. I won't bore you with the details but a little searching on the web revealed a three-line Javascript fix for this problem that two years ago would have been a showstopper. Now, it's only (probably) applicable to IE but that's the nature of business webapps.

Chances are Microsoft came upon the same issue and built a solution into IE's script/style sheet capabilities. In a nutshell, they let you support formulaic expressions in CSS styles, which then enable the programmer to say that a paragraph should get its screen position dynamically. In our case this lets us put each heading at a numerical position based on the scroll values of the area (layer) that the grid is in.

Many thanks to Brett Merkey for his solution to this problem.

Postscript: frozen headings is actually a special case of a most difficult web-UI-ism that is still being defined: page-wise controls must not require scrolling. This is something that sneakily got built into the WinMac dialog world, where the menus and terminating buttons were always visible, but web page take a lot of thinking and technology to work around this.

More Apparent Intra-Page Linking

Another scrolling issue is that intra-page links—you know, from the top of a long page to spots within it—can actually be confusing when you click them. You don't always realize they've kept you in the same page. Now I've been using an icon to indicate this behavior will occur but that's not a solution, just a Band-Aid®, right?

The solution is to have the system SHOW that its scrolling. Bellis's Unifying Force of Usability: Explicitness... more than anything else, usability is reduced to explicitness. Sure there are many components, but explicitness comes first. If we can see that it's scrolling, voila, there is no confusion.

And that's exactly what Travis Beckham did in his wonderful scroller solution. On his site, click Launch Scroll Window. To see the technique, view the source. I implemented it on my GenericUI page (the first 11 links so far), which is intentionally one long page so that developers can print it at once.

Many thanks to Travis for making his solution available.

Oh, and appropos of nothing, take a look at the most beautiful web site ever...


"My interest in usability arose from the pain and tears of patching the wounds of suffering interface designs with the inadequate bandages of help files and user guides." — Daniel Cohen

© 2002, UsabilityInstitute.com   All Rights Reserved    jackbellis@hotmail.com
Any and all content may be reused without prior consent if you simply acknowledge the source, UsabilityInstitute.com