topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • Tuesday March 19, 2024, 3:20 am
  • Proudly celebrating 15+ years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

Author Topic: The evil of the horizontal scrollbar - and what we can do about it  (Read 28760 times)

tranglos

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 1,081
    • View Profile
    • Donate to Member
I've wanted to post this for a long time...

Whether you care or not, every day you use the computer you are probably interacting with an element of the Windows user interface called "listview". It's the interface to Windows Explorer, for one thing. It's also what drives your desktop. It's the My Computer window, it's the Control Panel, and it's part of interminable other staples of the operating system.

Microsoft made it a fancy and powerful gadget. Starting with XP, it draws a stylish semi-transparent selection rectangle when you sweep the mouse over items. It does incremental search: start typing a filename, and the selection will jump to the first matching item. It lets you edit the text of an item. It has a virtual mode that lets programmers display many thousands of items really fast. It shows icons of different sizes. When you switch from the Icons view to Details or Thumbnails in Windows Explorer, it's still the same listview control, working in one of its many display modes. The latest versions can also display headings to group items into related sections.

The Details mode is particularly handy - the one that shows information such as size and last-modified date for files, neatly arranged in columns. When you click on the column headers in the Details view, the listview sorts items; another click reverses the sort. You can drag columns to rearrange them. This is perhaps the best part of the listview - and the worst, which is what this post is about.

The listview is a standard Windows control - that means programmers have always been able to use it to build their own applications. And because it's so fancy and so powerful, they indeed have. Programmers use listview because it's readily available with its many features, while creating a like element from scratch means a months of tedious work, if not years, if you're a lone developer.

And that's the problem. The Details mode has one shortcoming: it can only accommodate a single line of text. Lines do not wrap. That becomes a problem whenever any of the columns needs to display more text than fits in the width of the window. It's a tiny step from this neat display:
explorer1.png

...to this, now not so useful any more:

explorer2.png

Yes, you can widen the window - but only to the size of your monitor, and besides, you don't always want a window to extend the whole width of the screen.

And yes, you can double-click the edge of a column header, and it will extend enough to accommodate the longest filename. Or you can resize columns manually. But have you tried to read a filename that spans the width of your widescreen monitor? Or read while scrolling horizontally?

I don't know about anyone else - maybe it's just me. But once I have to scroll horizontally to read something, I give up. I hate it. It's just not right. While vertical scrolling feels natural, horizontal scrolling does not; it becomes hard to track the position with my eyes and follow the line of text. Not only that, but to read the next item you first have to scroll back to the left. Let's just say when I see a horizontal scrollbar, I speak words of unkindness.

For all that, listview still wouldn't be half bad if it were only used for listing files. After all, do we really read filenames that closely? But the listview is ubiquitous. It's everywhere. One thing to note is that I do not intend to harp on any particular program here. I'll be using some screenshots to illustrate things, but please don't take that as criticism of the specific programs - just anonymous examples of how the listview proliferates.

Here's one that will be recognized by many DC-ers:

linkman1.gif

I may not read filenames as a pastime, but sometimes I would like to scan the titles, descriptions and keywords I've entered into my bookmark manager (the screenshot is of Linkman). Note the position of the horizontal scrollbar: there's a lot of information you aren't seeing. And if you scroll to the right, you won't see the leftmost part. And note also that few websites have titles as short as those used to make this particular screenshot. More often you'd only see the first three words of a much longer title. Meanwhile, other items, like tags and rating, are hidden.

And no matter how much you widen the window and resize the columns, sooner or later you'll have to scroll to the right, because a typical view in a bookmark manager looks more like this:

visiturl.gif
(This one taken from my own VisitURL. Silly me, I put the URL column first, which adds to the aggravation!)

One more example of what I think is abuse of listview - or abuse of the horizontal scrollbar. This is a task view from (my favorite) Calendarscope:

calendarscope1.gif

There are eight (8) more columns hidden behind the horizontal scrollbar here. And again, while not all those columns may contain lifesaving information, they are there and I'd like to see them... sometimes. Call it idle curiosity.

By contrast, here's where I think listview has been used properly. It doesn't appear as though you'd ever need to scroll or even resize the columns (there are only two):

godlistview.gif
(Found on Google Images - I don't know what application this is).

Listview is everywhere:  see for yourself. Or click on that green uTorrent icon in your system tray and count the columns you're not seeing.

So today... I'm staging a walkout. A strike. A protest on the virtual hi-tech highway. Heck, a whole e-riot! Please do not abuse the listview. Please, developers, reduce the amount of horizontal scrolling you are subjecting users to. Please don't hide potentially important information behind the edge of my screen. If you let users type more than two or three words into an edit box, listview is not the proper control to display those words. If you have more than two or three columns hat can contain a stretch of text, listview is not the proper control to present those columns. There are better ways.

Ah, alternatives. Let them speak for themselves:

livewriter.png

Microsoft LiveWriter (via Google Images). It still looks as though it has more columns than can fit, but note that when you select an item, you can see all of its data without scrolling. And you can edit all fields, too! Is it really easier to do so in Ajax than in C++? (Heh, could be!)

NET3.5ListView.png

Nice! Google images again - this was described as ".Net 3.5 listview". Looks like MS can get it right on the desktop too, then! But have you ever actually seen it used?

Or how about this familiar view? Not editable, granted, but there's room for buttons, checkboxes and what not:

firefox-extensions.png

By far my favorite implementation is this solution from Copernic (the Internet search edition, screenshot a few years old now):

Copernic_1.gif

Look ma, no scrolling! Just wrap the text. Clean, beautiful, highly readable, and will accommodate any amount of data you care to put in there. You can even grow the font size without any text spilling over the edge. I so love this!


Another one Google Images threw up, I don't even know if this is Windows...
slides-style.gif
... but it's exactly what I'm after.

The problem with the listview is - it does so much and is so good, many developers are quite happy to have it for free, and many don't look beyond. I know I didn't.

What do you think? Can we banish the listview, with the endless scrolling and hiding of information? And will mouser kick me out for these outpourings of verbosity and bandwidth-eating screenshots?

« Last Edit: April 27, 2009, 08:45 PM by tranglos »

rgdot

  • Supporting Member
  • Joined in 2009
  • **
  • Posts: 2,192
    • View Profile
    • Donate to Member
My first thought when seeing the topic was web pages with horizontal scroll bars, possibly even worse than listview in a sense. I vote to banish and I agree, a good presentation with details is that Copernic screenshot in my opinion.

mouser

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 40,896
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
great post.

as a coder i've struggled with how to handle many-column displays and avoid horizontal scrollbars, which i agree are evil and ugly.

one thing you haven't touched on however, which seriously complicates things, is the difficulty of presenting a table where all columns can be sorted, and presenting this in a usable elegant way when you have a multi-row setup, as shown in your alternatives.  notice how most of them have no obvious way to sort and show sort order.
« Last Edit: April 27, 2009, 09:01 PM by mouser »

tranglos

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 1,081
    • View Profile
    • Donate to Member
...one more thing.

I've tried to develop a custom control in Delphi that would approximate the Copernic view above, or the "slides" in the last screenshot. I got as far as this:

flexiview.png

This is a sample listing of files under c:\Windows, with random icons. Note that this isn't meant just for file listings - you can arrange the cells however you want and display any data.

Unfortunately, my component-writing skills aren't up to par, and this is far from ready for public consumption. The sizes of the "cels" are set at compile time - they don't expand to fit the window and cannot be sized manually at runtime. All items have the same height, so long text will wrap, but you have to allow enough room vertically in advance, otherwise the bottom part of the text will be obscured by the cells beneath it. There's no multiselection, and the visuals are rough-cut. And no editing of items (though the little checkboxes are clickable).

That said, if any Delphi coders at DC are interested and better skilled at writing components than myself, perhaps we could work to improve this thing. I've fished for interest on the CodeGear's "third party components" newsgroup, but found no takers.


tranglos

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 1,081
    • View Profile
    • Donate to Member
one thing you haven't touched on however, which seriously complicates things, is the difficulty of presenting a table where all columns can be sorted, and presenting this in a usable elegant way when you have a multi-row setup, as shown in your alternatives.  notice how most of them have no obvious way to sort and show sort order.

That's very true. Short answer - you could keep the listview and the clickable columns, if only the text items would wrap, as they do in grids (Excel, etc). Although even with wrapping, at some point the sheer number of columns would bring back the scrollbar.

Ultimately it's about a trade-off: what's more important? Clicking a column is a great idiom for sorting, but it comes at a price. So let's turn the trade-off around: make sorting a little harder, but viewing easier. For example, the view could sort by clicking on an item: if you click a name, it sorts by name; click on filesize, sort by that, etc. You could show order too, by drawing those triangles next to items - though that might look crowded. Or, you could still display the clickable headers, though they would no longer align with the items, so that's imperfect, too.

I don't have Copernic installed, so I can't check, but I'm sure you can sort the list of results there as well. It's just not as obvious as clicking a column.




mouser

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 40,896
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
So let's turn the trade-off around: make sorting a little harder, but viewing easier.
i think i would agree with that approach as well.

tranglos

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 1,081
    • View Profile
    • Donate to Member
Or, in a really advanced setup, you would be able to put the structure in an "edit" mode, similar to the designers in Delphi or Visual Studio. You'd be able to rearrange the cells by dragging and resizing, and that edit mode would also include controls for sorting.

And on the easy side, there's always right-clicking :)

tomos

  • Charter Member
  • Joined in 2006
  • ***
  • Posts: 11,958
    • View Profile
    • Donate to Member
Very interesting thread!

sticking with the traditional list view:
IQ/SQLNotes has an interface where you can lock any number of columns (from the left side) and then you can scroll horizontally using Control Key and mouse wheel - obviously a great improvement on struggling with the horizontal scrollbar

so you might have this info visible in current window (with the first column locked):-

| ITEM | START DATE | TAG | DURATION | URL | VOL..
scrolling gives [edit] - shows the columns from further right - URL being the "overlapping" column in the two examples [/edit]
| ITEM |URL | VOLUME | LOCATION | ID | WHATEVER
-
obvious advantage being that when I scroll I can see to which ITEM the LOCATION details refer to.
But also I really love the Control Key + Mouse Wheel for horizontal scrolling - it makes it so eeeasy :)
Tom
« Last Edit: April 28, 2009, 03:22 AM by tomos »

Gothi[c]

  • DC Server Admin
  • Charter Honorary Member
  • Joined in 2006
  • ***
  • Posts: 873
    • View Profile
    • linkerror
    • Donate to Member
How about making viewing easier, but still allow for sorting.

Keep what you have, but add buttons on top for 'sort by'...

I don't see why you would all of a sudden have to lose your sorting ability using this UI approach...

And yes, great post :)
« Last Edit: April 28, 2009, 03:31 AM by Gothi[c] »

RNiK

  • Participant
  • Joined in 2008
  • *
  • Posts: 5
    • View Profile
    • Donate to Member
Great post!  8)

I've always hated horizontal scrollbar, specially when listview is abused. >:(

hgondalf

  • Participant
  • Joined in 2010
  • *
  • default avatar
  • Posts: 15
    • View Profile
    • Donate to Member
Why couldn’t the list view look like a spreadsheet, where one cell may span many lines?  That way it would still sort properly, but the view would still look and act more or less like the standard list view. There could be options to turn on and off grid lines, as well as whether to show multiple-line entries or truncate them.


tranglos

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 1,081
    • View Profile
    • Donate to Member
Why couldn’t the list view look like a spreadsheet, where one cell may span many lines?  That way it would still sort properly, but the view would still look and act more or less like the standard list view. There could be options to turn on and off grid lines, as well as whether to show multiple-line entries or truncate them.

If I understand your suggestion, that would still require horizontal scrolling, since in a spreadsheet-type view, each "record" is still contained within a single row.

Merging cells is not really a problem, most grid components can do that. What I wanted to avoid was horizontal scrolling (or worse, obscuring data that doesn't fit in the viewport horizontally). In order to get that, we have to do away with the limitation of one row per record, as seen in the screenshots of the controls I posted.


cmpm

  • Charter Member
  • Joined in 2006
  • ***
  • default avatar
  • Posts: 2,026
    • View Profile
    • Donate to Member
Does this help?

http://msdn.microsof...oxbase.wordwrap.aspx

Or how could this be done or implemented system wide?
I don't know.....