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...
|