Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Tables Your Mom Can Sort

08 Sep 2003 by Ryan Singer

Web developers think that linked text in a table header means “sort by this column,” but what are normal folks looking for when they want to sort a table?

Any thoughts, studies or stellar examples?

20 comments so far (Post a Comment)

08 Sep 2003 | the poster formerly known as fajalar said...

We usually use an MCLB for most of our Web apps which carries over the interaction and presentation values of the GUI MCLB.

So there is a column header (which acts somewhat like a button) and a "^" (up or down depending on sort order). When they see this they have no problem understanding the interaction.

I will admit that there doesn't seem to be enough visual stimulus for users of a new system to know they can sort. But once they know... no problem.

Medium intuitiveness, highly learnable.

08 Sep 2003 | paul said...

i agree with fajalar, as long there is both a linked *and* an icon for sorting in ascending or decending, all the studies we've done have shown it's something users either know right off the bat, or learn quickly the first time and never forget.

i think it's fairly intuitive because in most spreadsheets if you click on the column header, it applies whatever it is you're doing the whole column, and most people are familiar with spreadsheets apps at a basic level.

08 Sep 2003 | TCP said...

MCLB?

08 Sep 2003 | Graham Hicks said...

How about the iTunes method? Not only does it have the standard "sort by" headers, but also gives you that search field that lets you limit the things that you are looking at. It's not quite sorting, but I think it serves the same need.

08 Sep 2003 | kev said...

graham: we actually wrote on of those once, that sorted (live!) an iFrame below it. obviously, wew couldn't really utilize that particular widget, as it's a custom apple one, but we copied the functionlity with a pulldown and a text field. i'm not entirely sure how the users reacted to it, if you're interested, i'm sure i can find out (project is out of my hands now).

08 Sep 2003 | Michael Spina said...

I've found in informal usability tests people expect to click on a column header to sort, but that was with people who use Outlook, Excel, etc. on a daily basis. It seems to be a convention in all software.

08 Sep 2003 | the poster formerly known as fajalar said...

MCLB = Multi-Column List Box.

A widget by any other name would smell as sweet.:)

Sorry about the acronyming.

08 Sep 2003 | Mal Ross said...

As everyone else is saying, a click on the column header and an arrow icon to indicate state seem to be enough for most people, given their prior experience of such things.

However, for someone who's not au fait with such things, would the order of the columns themselves not be a more intuitive way to specify sorting? In other words, the table is always sorted by the first column, then by the second, and so on? The user would just drag a column to the left to make it the primary sorting column.

Mind, even if that were the case, I doubt I'd ever implement such a thing. I imagine it would clash with the behaviour of other apps on pretty much any OS - certainly on Wintel systems.

08 Sep 2003 | Gilbert said...

We are using the up arrow for ascending (A-9) and the down arrow for descending (9-A). But I'm thinking of changing my icon to something similar in Microsoft Word or other apps. Instead of the arrow, we're going to use an icon that has the "A" on top of the "Z" with the arrow going down for ascending and then a "Z" on top of the "A" with the arrow going down for descending. What do you guys think?

http://www.mtnviewdentalcare.com/images/sort.gif

09 Sep 2003 | Hagbard Celine said...

Gilbert, personally I like the icon you're considering, but it doesn't account for numeric values. I work with a lot of part, purchase order, and invoice numbers, many of which are partially or wholly numeric. Is A-9/9-A as meaningful as A-Z/Z-A?

09 Sep 2003 | Gilbert said...

That's what the struggle was for me, too. It just wasn't the same meaning when it included numeric values. I'm still not sure about the new icon so that's still in discussion. What do have you used?

09 Sep 2003 | the poster formerly known as fajalar said...

Can't you just code it so that if it is a column sorted by numbers, it displays 0-9?

09 Sep 2003 | Gilbert said...

Sometimes it's mixed. My data on one column may include objects that start with a number or an alphabet.

09 Sep 2003 | the poster formerly known as fajalar said...

Is the limiting column the Shop Code?

09 Sep 2003 | josh said...

I work on a site that is heavily skewed towards older users. As in 50+.

I have seen similar results in that once a user sees the sort icon and tries it they have no trouble with it. The issue I run into is they never see it. They don't know about that kind of functionality, so they aren't looking for it or easily able to pic up on the cues that make sense to so many people.

It is really ugly compared to the elegant column header sort, but they dont have any trouble with a widget above the table that says, "Sort by: [pulldown list of headers]".

09 Sep 2003 | bill said...

these:

http://homepage.mac.com/mraible/demos/sortTable.html

http://www.brainjar.com/dhtml/tablesort/demo.html

10 Sep 2003 | Hagbard Celine said...

Bill, those are great. The simple solution is best, imo. Subtly highlight the header cell to indicate the sort column, slap the arrow on there to indicate ascending or descending, problem solved.

I work primarily on an Intranet site, with a small group of pretty knowledgeable users. They're used to clicking on a column header to sort, so I imagine this solution will work beautifully. Thanks for posting the examples.

10 Sep 2003 | Dave Strus said...

Bill, that client-side example is great! I think that using the TH's background color, in addition to the arrow icon, as a visual clue is more helpful than the icon alone.

19 Nov 2003 | tevys said...

What is the standard for sorting rows AND columns? If the information is numeric. I cant find standard for sorthing both anywhere. So if you click on a column header, it would sort acending to descending, but what if you clicked on a row header and wanted that to sort somehow also?

31 Jan 2005 | compatelius said...

bocigalingus must be something funny.

Comments on this post are closed

 
Back to Top ^