List View Columns

Example of a list view with column headers (Nautilus).
Sometimes I have to deal with very long filenames and would like a quick way to move out-of-view columns into it. Currently it’s either horizontal scrolling and dragging the column separator back, or making the window wider.

I wondered if a gray background is such an great idea if there are already gray stripes to make following lines easier.

List View A
So here’s a little arrow on the right, meant to move partially or completely out of view columns. Of course doing so would be problematic in this tightly packed example. Just imagine a wider window with a very wide Name column 😉

Instead of marking the sorting column via background colour, only the header part changes colour / contrast. It’s a bit loud for this plain Clearlooks theme, though. Oh, and I’m aware that apple does something like this.

Also note the sorting order symbol: instead of that arrow / triangle that seems to indicate a direction, my symbol is meant to express going from small to large (or the other way).

List View B

The column separators are rather small target areas. So what if the whole columns are used both for selecting the sorting column and resizing? In all but the first and last column, the first half would be tied to the separator on the left, the other half to the right. This might confuse users, but I think it would be worth trying.

List View C
Making the not sorting column headers darker instead.


About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

One Response to List View Columns

  1. James Clarke says:

    There’s an interesting variation on column headers on the Joel On Software jobs board – – unsorted columns get an “unsorted” indicator, which also acts as a visual clue that clicking on the column does something.