May 26, 2004
teensy
found on Common Craft
Dude, these are some teensy icons. Some have lost coherence and have become smooshy mud, some have visual coherence, but are not communicating meaning. In fact, I'd say only community and 'me' have a fairly decent 1:1 between image and meaning.
For example: lightbulb is a standard representation for "ideas" yet here it represents "Technology in Plain English." "Related Miscellany" is represented by what looks like a tiny flowchart? Uncertain what the weblog symbol is: I'm guessing a printer or a plate of cheese. I'm hoping for cheese, as I do not think there are enough cheeselogs out there.
Sorry if this is a bit snippy, but this is a case where icons add nothing but noise, IMO.
(p.s. sorry for the lack of activity, i'm spending buckets of time in Drupal. also may explain usability snippiness. Drupal: powerful but befuddling. oh, but so powerful.)
April 27, 2004
clap clap clap
 |  |
Found on functioning form
Must be experienced to be appreciated. I've never seen this widget before. When you view an image, you get the image plus this odd little widget that clings to your pointer like mud to your shoe.
I'm not sure what the point is except design exuberance-- it gets in the way, it's distracting, and instead one could more easily make a return link under the image, one could link the image back, one could do a number of things that would be more usable. But this is a personal site, and on a personal site experimentation should be applauded.
April 10, 2004
fly-out and away
from Sur La Table
Usability issues with fly-out menus aside, I found Sur la Table's implementation intriguing. Looking at this screenshot, you'd think the lack of visual connection would be a problem. But in reality, the act of aiming and there response of appearing is enough to make a connection between menu and submenu.
There are a number of problems, mostly fitts law related (targets too small, distance too great), but this did work better than I would have guessed. Plus if you do click before the menu appears, you land on a good navigation page.
useless fun fact: the author of the uie article now works for Yahoo!
April 03, 2004
hide and show
 |  |
I've been meaning to talk about this one for awhile: the hide/show navigation widget. A while back I was using a Mac (an usual situation for me, as I believe in solidarity with my end users, including being hung with them, but that's an argument for another day) and I noticed a nice vertical tab to hide/show bookmarks, history, etc. I thought this a very slick bit of interface, and wondered why it's not used on the PC. Some time later, I noticed it on Sitepoint.
What are the problems sitepoint is solving with this widget? Potentially giving users more screen real estate to read articles on. Getting rid of visual noise during the reading period.
What are the losses? Well, the most obvious is that the default is hidden, and it's quite possible the user would not find the toggle at all.
Still, it's intriguing and I can see it begin even more useful to handle tertiary functionality like wishlist management inline with a product, saved/clipped items and mailing tools.
March 12, 2004
expando
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.
March 07, 2004
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....
March 06, 2004
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.
February 13, 2004
you are here
found on bbci
Since we are talking wayfinding.... BBCi uses a more traditional indicator to let browsers know where they are: a simple triangle. The past unfolds as a sort of stacked breadcrumb above the item, the future as a indented list below, siblings surround the chosen item. No visual distinction is given between siblings and parents. Is this a problem?
I suspect it isn't. I doubt users trying to decide where to find out how to use zucchinis (a perpetual august problem) won't vacillate over clicking "recipes" and "food" any more than they will "recipes" and "in season."
(courgettes are called zucchinis in america, btw, for the brits in the audience)
systems
from Sci_Fi.com
A few interesting things happening here. First, the navigation is far more explicit than usual-- they clearly state that news is archived by category (necessary? probably not).
Each subcategory has an icon. The helps the navigation pop a bit more, though most of the icons are unclear and could not stand alone -- film and rumors in particular looks mysterious and munged. But even if they are unnecessary, there is little doubt they provide an anchor, as well as a kind of Key to the icons used on the rest of the page.
In typical web wayfinding, a navigation item is highlighted to show state. on SciFi.com, the site area and the article is marked with one of the icons to indicate topic/location.
Is it effective? Well, I'll admit I've never seen a system like this in the lab. But my gut tells me it takes a bit more conscious decoding than most users will do in a task-state of mind. The sci-if channel may work slightly better with viewers of that channel, since it is (presumably) embedded in their mind. But it seems unlikely a reader of an article on film will do more than hop over the icon as they digest the contents of the article.
January 08, 2004
more mail organization
From Hotmail.
Another variation on the decorated folder: Back of the envelope (literally) means incoming. Front of the envelope means outgoing. Interesting but arbitrary. Junk and Trash icons play off the recycle bin icon in Windows, but don't have the folder behind them like the other icons here (this might not be a bad thing). Two points here. 1) They're not really the same thing, so they could probably use different icons. 2) Why are they so far apart if they do sort of the same thing? Again we find the pencil draft icon, this time with its friend, paper.
Overall, just okay and the text/icon size could be increased a bit.
Oh and can you guess what the << thing does up top? I couldn't. It minimizes the folder pane down to a >>, giving you a larger message area.
mail organization
from Yahoo! Mail
Interesting variation on the decorated folder. Uparrow means outgoing, down arrow means incomming. Bulk is way mysterious to too small to really be legible. Draft is using classic messaging, though the pencil is way too small to be understood easily. Trash is a bit small, but pretty clear.
January 06, 2004
page flicker
from IMDB
What an ill conceived tool. What's wrong with pagination? Why invent a flicker? Why not connect the navigation to the page (the flicker sits on the top of the ad-filled right hand column). Why not put all the info on one page, a la amazon?
December 19, 2003
facetnav
from Red Enevelope
Like many shopping sites, red envelope offers navigation in a faceted classification scheme. I particually enjoy the quirky collection of personalities showcased beneath lifestyle. It helps give redenvelope a characteristic voice, and helps shape their brand, as well as giving gift hunters something more rich to work with than birthday, for her.
BTW, great present site-- i think it's rescued my relationship with my grandparents...
December 16, 2003
timelines
from the met's Timeline of Art History
Here is a time when time is the right metaphor for navigation, i suspect. Art changes radically over periods, and is often defined by a century. Check it out....
December 15, 2003
useless?
Found on blogs everywhere, this particular one on http://blogs.law.harvard.edu/lydon/2003/11/24#a433
I'm not sure why calendar navigation come standard in the MT template, but categorization navigation doesn't. Is a calendar really the best way to move through entries? Topics for sites like this one seems more useful, while simple big next buttons seem good for most diary sites. Except for an advent calendar, what power does a given day provide? If there is a special day, like a birthday or Sept 11th or what have you, a special link can be privided... but the calendar has no meaning, bad affordances (fitt's law anyone?) but looks nifty I suppose.
