Widgetopia

one icon

found on ofoto

It's probably merely my aesthetic sense is overdeveloped, but the single icon up there in the site navigation bar looks odd ot me. I kinda feel it should be all icons, or none.

All would be useful, since this site is made for heavy repeat usage, and icons are known accelerators.

note: rollover is nice-- costs nothing in code to speak of and provides a nice extra feedback mechanism.

untransparency

this is a series of icons on product information, including "see larger image" care instructions and shipping info. As cute as the icons are (the whole site is really quite beautiful) this strikes me as wrong.

Most of this should just be information on the product, and listed openly. Why should I open a pop-up to see care instructions or shipping info? Why not just have it all there on the page, available at a glance?

As for the larger image, this is just placed wrong-- it needs to be near the smaller image, not in a toolbar.

huh?

found on Craft Product

and the winner for most abstract shopping cart iconography goes to... Craft Product!

bizarre.

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.

oh, well, then.

from via michelin
I don't want to be accused of bashing via michelin, which is super useful as I try to plan a trip across the languedoc, but...

huh? This icon is the standard icon for warning. I didn't think road advice was a scary or dangerous pastime.

human warning

from yahoo search

Since I was discussing dialog icon standards, here is a variation from Yahoo! search-- the triangle has been replaced with a word bubble, but the size and color remains. A warmer warning....

(error shown: for a misspelled word)

quite very

found on via michelin

I was quite confused about what makes a good hotel-- mousing over these cute but indecipherable icons, i couldn't tell if "quite comfortable" was better or worse than "very comfortable." But happily I found the key eventually.

I was surprised to see that "quite", which appears to be better than "very", is represented by a smaller icon. But then, it might be the american in me....

I'm suddenly overcome with a longing for stars.

pick between what and what

found on via michelin

first, let me ponder briefly over why folks mess with the standard iconography for error messaging. It's fairly standardized now: the lowest level of danger-- advice-- is a an i, usually in a round shape or a word bubble (least standardized, I'll admit). Second, the warning-- "Hey, you must do something"-- is an exclamation point in a yellow triangle. Third-- you are screwed-- is a white x on a red circle. This icon for "Hey, pick a location" is not noticeable and non-standard (because if you must break the rules, you might as well improve things, right?)

just a quickie-- but it does "pop" better

Also I understand building a site for damn foreigners must be tough--- but the choice between something and something-airport gave me pause. I don't even know exactly where I am going, much less what area. Much less in french (Michelin is a French company, for those of you like me who grew up in one of the middle states and thought it just meant tires, and of course, how could something as essential as a tire be made somewhere not-here -- one is startled when the site is not as americanized as the product. Oh, little ignorant Iowa girl was I. Bic pens was the next big shock.)

Better might be perhaps something along the line of a wizard where you choose country, and if country is not required to disambiguate, then county, then city area.....

parlez vous?

found on via michelin, only on the front page in the upper right, but not on subsequent pages....

This is how you change this site's language. The problems of using flags for language selection has been throughly discussed, and is generally a bad idea -- mostly because countries and languages do not have a 1:1 relationship (i.e. Canada is both French and English, English is both England and Canada and USA).

I'm sorry to see it here. I'm also disappointed to see it only on the front page. Two reasons
1) because of search engines, any page could be an entry page.
2) if a english-as-a-second-languager was reading it and got stuck along the way, witching to his/her native language would be difficult (or appear impossible)

reinventing breadcrumbs

found on World66

This was actually pointed out to me via an email, I think I wouldn't have noticed it otherwise. I'm not a big breadcrumb user. But it is interesting. I'd love to see in the lab how people react to the functionality. One drawback of breadcrumbs is the annoying pogo-sticking you have to go through to find what you are looking for (if you have used Yahoo directory, you know of this I speak).

This widget allows one to go up and over, which I can see being great for power-users. Which means the open question is, is there any cost to the novice and intermediate? My instinct suggests no....

sidebar, anchors, timelines

found on The Oxford English Dictionary site

Catching up on my CHI-WEB reading, I saw this link, which is a marvel of compact functionality and design, of the sort I think Tufte would approve. The narrow right hand band functions as an article overview, a timeline and as a set of anchorlinks to sections of the article. I wish more sites combined form and function to such good effect.

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.