Widgetopia

minimalizism

found on the Wall Street Journal online

The bare minimum: print and email. Print is more abstract than ever.

at the foot of the article, we see the tools repeated. Oddly email is not included. This makes no sense to me-- when are you most likely to share an article: before you've read it or after you've judged its value?

Order reprints is in the right location, though the icon seems to be just for the sake of being an icon (the merc does a better job by using a icon that reminds you why you need to get permission).

Print has been retitled and more clearly explains what the button will do. I've often wondered about the "print" label. I have seen a printbutton occasionally trigger a print action, and been utterly unready for it. The New Yorker, below, also goes for the clearer label.

dance this

from The New Yorker

The quirkily sinuous and nearly abstract "print me" is worth noting. Icons feel like The New Yorker... black, white and red feels very print. Too bad about the muddy gradiant, but I supose it's what gives the "print me" its wiggle.

cabinet

Found on nonprofit by design

Interesting for the use of a file cabinet for archives (I've seen this often before, but only captured it now) and for the little flourish on the email to a friend.

guess

found on Yahoo! Korea

How good are these icons? Guess what they stand for (no cheating, Korean readers...)

no page

from New York Times (free registration required)

Quite a lot of the usual-- clear email icon, mysterious printer icon, shot-in-the-dark popular icon, nice permissions icon and-- wait, what is this? Single page format? Wonderful!

I do wish this was sitting in-line with the pagination a la The Gap, because that is where it would be most helpful for those users who don't want to page through.
(btw, the pagination is an embarrassing mess-- take a look. I suspect its a coding issue, but still.)
see larger image

But giving the choice of pages/no pages to the user is not a bad step forward. It gets to the search benefits of pagination, as brilliantly outlined by Avi Rappoport, but also allows for those who prefer to scroll.

expando

see larger version

from business week magazine

At Yahoo!, a designer I work with calls everything that opens up on mouseover "expando" which makes these expando tabs, and the previous breadcrumb entry, expando-breadcrumbs.

First, let me say as tabs go, these are pretty good ones. They have a nice tab shape, the separate types of content, and important-yet-oft-overlooked, the on-state is the same color and connected ot the modified item, connecting the tab to the thing classified.

Now on to expando: saves space. doesn't work on everyone's computer (because it requires javascript), but clicking the tab brings you to the top level category, and the sub-items in the expando are repeated on the left (though that design is rather week) so like the expando-breadcrumbs I'd cry no harm, no foul.

small extra note: article tools are handled very subtly (caught as a bonus in their screenshot) and arrows pointing to text links.

interpret

found on hbrweb.org, the online companion to harvard business review.

In a magazine, there are a number of conventions, including pullquotes and sidebars. But online, a number of issues including unknown monitor width and weaker type control make things like sidebars trickier to know how to deal with. When they offer a article online, HBR pulls sidebars out and puts them on to unique pages, called out here as "in this article."

To make sure you do see the sidebar in relation to the appropriate part of the article, they add a second link inline. However, expectations are not clearly set-- what is this? Even knowing the magazine as well as I do, I had to pause and puzzle-- related article? Whatnot? What is the inducement to leave the safety foe one's spot in the article you are reading to wander off for more information. I wonder if a dHTML expando module would work, or a pop-up or even trying to design an actual sidebar....

use me

found on San Jose Mercury News a.k.a. "the Merc"

nice set of standard article tools. nice to see a slight variation, how to use the article going forward: copyright and reprint data.

catalogging

found on McMaster

Mcmaster.com is a catalog of hundred of pages of stuff. hoses, wrenches, screws, struts-- you name it. it is widgetopia. and each catalog page has a nice little set of article tools.

because there are so many pages, it makes some sense to allow users to leap forward via a type-able pagination. Also, it offers a subpagination to allow users to know how many pages on a give subject they can look through. this subpagination is hidable to allow more room for seeing product. it's simple and slick-- works well.

Also of some interest is how they handle the catalog page tools-- each one opens on the same page. Admittedly page options is not an intuitive way to get pdf, and its binary nature suggest a on/off setting rather than opening a separate panel (for example page type: pdf | html ) but it is great to be able to say, email the page, with out leaving your hard sought catalog item.

(note the standard word-balloon for feedback)

now that's a printer

found on Herald Net

There's one solution to the mystery printer icon-- make it photorealistic.

more tools

Found on the Tucson Citizen

Interesting for the addition of the "more by this author" and "letter to editor" links.

NY Times

from New York Times

interesting and useful addition of reprints and permissions. But something in my gut tells me that option belongs at the bottom of the page, not here?

rate it now

from sitepoint

As a contrast to Marketingprofs.com, Sitepoint offers a simple rating widget at the bottom of each article page. It takes about two seconds to rate and there is no reason not to. one oddity-- the cumulative rating isn't displayed anywhere.

Bookmarking launches the browser's bookmark function (which brings up the nonissue of the fact that IE calls it "favorites", but almost every user who knows about bookmarks calls it "bookmarks"). Everything else is pretty standard. I do like the fact that there is a formal way to contact the author that doesn't reveal the author's email to every tom dick and harry.

feedback

Found on Marketingprofs.com

The feedback box's appearance is triggered by a mouseover.

Considering Fitts Law issues, and the discover-ability of rollovers, and the abundance of real estate at the bottom of the page, and the less-than 100% support for the dhtml required to make this work, and the likelihood it could be buggy or might become outdated with future browser releases I don't get it. All the advantages are in showing this form as a normal form, and all the disadvantages are in doing as they have. It's not a horrible widget, but it's unnecessarily complex.

contact us

from BBCi

very smart-- rather than just an icon linking to a form that allows you to email to a pal, they embed the form at the bottom of the page. Real estate is much cheaper at the bottom of a page, it is the natural location for doing the next thing, and presenting the form there captures the user's enthusiasm before they can move on to the next article.

audio article tools

from BBCi Radio

interesting variation of the classic article tools, customized for radio. Listen is obvious, webcam lets you watch in the radio booth-- kinda nifty-- and contact us is also obvious, though I'm starting to worry the envelope is being worked as hard and as unevenly as tabs...

email anything

from Yahoo! Travel

found at the end of the page on Yahoo! travel, you have to wonder if this might do well on the end of every page of a site.

human management

from the profile page on Evite

tools associated with a profile on evite. The favorites icon is clearly taken from IE.

mail to

from abc news

I'm getting a lot of these. Here we see the double enevelope again. I think icons in "negative" lose a lot of their readability, especially the flying one. The printer is about par in mysteriousness with other printer icons... that nut has definately not been cracked.

email what?

found on UE comics

This reveals an interesting design problem: how to differentiate between receive by email and email this to a friend.

cooltools

found on MarketingProfs

cool, visible and intuitable. (thought the print icon is the icon usually used for "new" or "edit")

email this

found on yahoo movies, and pretty straightforward it is. A thought: is site iconography the right place to express brand?

email me

found on IMDB
works for me.

permalink

Since I'm on blog conventions:

found on Dollar Short

found on kottke

The permanlink convention has not yet stablized-- it's typically the date, sometimes the title, sometimes a hashmark and sometimes these cute little square icons. Be interesting to see what wins.

footnotes

Found on forester
This icon launches a small pop-up.

Why? What's wrong with a simple footnote with an anchor? I find it very disruptive as I'm trying to read.

articles on CNN

found on cnn. These article tools are all a bit abstract, icon-wise, though the label disambiguates them neatly.

However, I know what "email", "save" and "send" means--- but what about more popular? "Rate", I'd understand but it feels like a bit of navigation was tossed in to make this layout evenly.

It's like the sesame street song-- one of these things is not like the other...

font controls

found on milk your dot com, this is simple and easy to understand, assuming you know what a font is.

article tools take two

These tools are used on the Sacramento Bee. They do have nice tooltips, but they are not only mysterious, but include non-article functions such as sign up for newsletter and make sacbee my homepage. A toolbar should be a toolbar, and hold functionality that affects tehthing the toolbar is acting on.. in this case the article.

The font size tool is slightly more intuitive than the IHT one. Anyone want to guess what that fourth icon is?

cool and crisp-- but visible?

Undenieably good looking, but a bit mysterious-- that printer could be just about anything. Good thing they are labeled. The font size tool unfortunately looks like a rating system.