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!

The Spread of Weighted Lists

02 Dec 2004 by Matthew Linderman

All items in a list are not created equally. That’s the idea behind weighted lists that, via font size, emphasize popular items and minimize unpopular ones. This list of cities at Craigslist, this list of tags at Flickr (excerpt shown at left), and this list of goals at 43things are a few examples.

The cool thing is that by merely altering font sizes, these lists suddenly gain a dimension; You can still find items alphabetically but you can also use visual weight to find the most requested items. My guess is we’ll be seeing a lot more of these weighted lists.

18 comments so far (Post a Comment)

02 Dec 2004 | tim said...

Hi,

it really seems to take off at this moment. I discussed that allready with a friend (who is using it on http://www.we-make-money-not-art.com/) and I implemented it, too, a couple of months ago in my del.icio.us - clone (http://www.porn-a-licious.com/ maybe NSFW!).

The next thing might be to cluster categories/tags/targets or however you call them to let them appear in treemaps (examples at http://www.win.tue.nl/sequoiaview/ and http://www.marumushi.com/apps/newsmap/newsmap.cfm) to group keywords belonging together.

02 Dec 2004 | Chris Vincent said...

Those are nice, but I think I would prefer weight to be designated by something like color. The uniform height makes it easier to read, and the darkness of the color could instead show the weight. Somewhat like http://del.icio.us/, where the more people who bookmarked a given URL, the darker the red of the indicator. Take that and apply it to a list.

02 Dec 2004 | steve minutillo said...

I believe this type of display was invented by Jim Flanagan. At least his site is where I first saw it, and immediately copied it for my own site. He had it back in 2002.

02 Dec 2004 | Brad Hurley said...

You don't think they look kinda messy? The changing font sizes make me think of old-fashioned ransom notes, pasted together from random newspaper headline clippings.

02 Dec 2004 | lisa said...

reminds me of learning principles of typography in my second year of design school

02 Dec 2004 | Pete Prodoehl said...

I too copied Jim Flanagan's idea for my browser zeitgeist in HTML/CSS, but then choose a simpler list for my browser zeitgeist in SVC. (The first one re-arranges on every reload, the second does not.)

03 Dec 2004 | Peter Steinberg said...

Personally, I think the weighted list at 43Things doesn't work anymore.

While it was fun to look at at first, now some items are so outsized compared to others that they're inevitably noticed far more often than other smaller items... and then therefore *selected* more often as well... which in turn makes them even bigger. It's essentially a positive feedback loop that's busted it for me.

03 Dec 2004 | Michael Williams said...

Of course, unless this is done very cleverly, it doesn't gracefully degrade in browsers that don't accurately support the method of styling you've chosen (be it CSS or FONT FACE=""). Depending on the real-world use, this may not be an issue. However, keeping all the semantics in the HTML is always a worthwhile aspiration.

03 Dec 2004 | Jim Flanagan said...

I based the zeitgeist weighted list style on a links page cgi I wrote in 1997 which would re-generate on every load. The links varied in color and size, and the size represented "hey look at me this time" randomness.

In the zeitgeist, the size represents the number of inbound referrer searches using a given term. As a heavy duty Flickr user, and a regular SvN reader, I noticed both the Flickr and 43things usages. I hadn't seen the craigslist usage until now. Groovy!

03 Dec 2004 | JF said...

Hey Jim, we'll be using the weighted list concept in our upcoming Writeboard product. We'll be using it a little differently than the cited examples, but it will be based on your initial concept nonetheless.

03 Dec 2004 | Dustin said...

I can remember my first visits to craigslist to check out the web design and info section it was very helpful having the cities large for quick finding...

but keep in mind, i think you're just as well off as long as you have them in alpha order or maybe even have a client side order switch...like sorting by city, vocation, or date.

04 Dec 2004 | Jim Flanagan said...

Sweet. Can't wait to see it in action.

04 Dec 2004 | Adam Kalsey said...

Interested in what a weighted list could tell me about myself, I created one for my blog. The weighted list of my blog keywords gives a quick overview of what subjects I've discussed most over the last year or so.

04 Dec 2004 | johno said...

While it was fun to look at at first, now some items are so outsized compared to others that they're inevitably noticed far more often than other smaller items... and then therefore *selected* more often as well... which in turn makes them even bigger. It's essentially a positive feedback loop that's busted it for me.

Exactly. This also applies to all "Most popular articles/sites/whatever" statistics when using only some "counter increment of page view" method.

06 Dec 2004 | Gonzalo said...

I think there is a lot of potential in these lists (Maps), there is a lot of information you can abstract into a sequence of characters. How about a whole language?

Here is something I did some time ago. Based on the same principle but extending the layers of data applied to the type.

http://www.artificialtourism.com/dataCloud/

07 Dec 2004 | John said...

Here's an example of weighted lists:
http://www.n-gage.com/worms/wwp.html

08 Dec 2004 | daniel said...

another example of weighted list on my site, pictured here also http://flickr.com/photos/kewlio/2031238/

based on font color

22 Dec 2004 | Matt said...

Here's a plug-in that will automatically display a weighted list of categories in WordPress.

Comments on this post are closed

 
Back to Top ^