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.
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.
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.
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.
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.
reminds me of learning principles of typography in my second year of design school
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.)
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.
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.
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!
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.
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.
Sweet. Can't wait to see it in action.
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.
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.
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/
Here's an example of weighted lists:
http://www.n-gage.com/worms/wwp.html
another example of weighted list on my site, pictured here also http://flickr.com/photos/kewlio/2031238/
based on font color
Here's a plug-in that will automatically display a weighted list of categories in WordPress.