June 01, 2004
Can't take it anymore
This site is shut down, and I'm launching earlier than expected http://www.widgetopia.net. the design isn't quite there, and I'm still hitting bugs, but I think you are willing to stick it out (I hope) because the spammers have got me down. MT blacklist can barely keep up. the new site is on drupal, which requires registration, and it was a move I had planned anyway to take advantage of community tools such as moderation. So here we go: the king is dead... long live the king!
May 31, 2004
user's call
from Alex King's site
These are simple enough that I think you can guess what they do. I'm not sure the left/right column placer is required, but kinda nice if you have strong feelings about such matters. The font size changer is very nice indeed.
(and for those who are following, drupal explosions continue. drupal doesn't allow multi-delete, and i had a bad import where the comments were all on the wrong entries. so i deleted my mysql database and recreated it. things are not pretty right now.)
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.)
May 12, 2004
A guide to services
found Google's guide to their services
Widgetopia reader Dunstan points out a page of Google's, highlighting their services. The page design itself is a odd choice-- it seems like a name/short description version would be easier to understand, faster to use and faster loading. But the icons are unquestionably charming, though of varying levels of effectiveness. A Linux penguin isn't exactly the logical choice for special searches, but the translate icon is the very model of eloquence.
fishy
found on Beetlebrow
I suppose if you did have a fish machine, the second to last icon would be the right symbol for it. This makes all the icons, while not always traditional, intuitable: from the left, home, mail, copyright, fish machine, search.
They do break a rule that makes me crazy-- though they all look essentially alike, they all behave differently: while home is not bad, as the addition of the arrow to icon suggests a modified behavior, email opens your native email program, copyright has no click action, but shows the copyright on rollover, and the last two open dhtml widgets in the upper right hand corner. To standardize it would be simple: just make all the buttons (except home) open in the widget area. Set expectations: meet expectations.
(I'm still puzzling over the fish machine, which appears to be a slot machine of sorts. or is it merely a red herring....)
thanks, angie, for the pointer to this quirky and elegant set of site tools.
May 06, 2004
agreable
Found on Banlieusardises
A simple and agreable navigation schema: secondary areas as links above, key areas in a demi-tab arrangement, and a breadcrumb just in case. Translation button probably would have been better off as text than a squished image, but it's visible and located well. and omnipresent.
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.
May 03, 2004
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.
April 30, 2004
300 Widgets From 1800 Sites
From 300 Images From 1800 Sites
Yes, you read that correctly. Just found, via paranoidfish's links blog, is this wonderful collection of icons used for arrows, posts, comments, mail, bullets, printing and shopping carts - 300 images in all. A great resource for the widget inclined.
April 27, 2004
baby montioring
found on Trixie update
banal or sublime? hard to say, but interesting infographics none the less. I rather like the quanitiative approach to child-rearing.
shout to adam for the pointer
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.
bucket o' fonts
found on Chank
Chank, designer of so many wonderful fonts including Taco Bell's, uses a bucket rather than a shopping cart. I'm sure this would take a knock from jakob for its inconstancy with shopping standards, but it is so consistent to the charming chank voice and attitude I'm gonna say its a fine fine thing.
April 22, 2004
Adobe InDesign's Arrow Glut
Some everyday desktop applications have better UI's than others, but we cotinue to use them because they are a standard or are the only tool for the task. Over time we learn the meaning of arcane iconography and make other affordances. Iconographic UI elements can be difficult to learn at first, but with a small enough learning curve they can make things much more efficient. For example, what everyday graphics person doesn't know what the magnifying glass icon do?
I have been using Adobe InDesign CS long enough to understand how to manage the new panel behavior and be mostly intuitive with it. However, I continue to make mistakes or scratch my head a lot when accessing the array of arrow icons at the bottom of the workspace.
Look in the screenshot above (click on it to see it at full size). At the bottom of the app's window are a dozen arrows. Starting from the right hand side and moving to the left, the ones on the far right are for navigating within the window. The set of 5 arrows in the middle are for navigating between pages in the document. Then there is an arrow for setting zoom. At the far left are a pair of arrows that I'm afraid to even try.
Even though I now understand the function of the page navigation arrows there are so many choices close together. I have to stop and think which arrow to click on and inevitable click the wrong one. Just the manual dexterity required is bad enough, but visually discerning 5 tiny icons really takes effort no matter how many times use them.
Yes, arrows are a standard iconic device, and are often a good one. Everything in moderation, please! Software manufacturers are so concerned with offering easy access to so many redundant features, they severely compromise usability and efficiency.
April 21, 2004
place
found on earthlink, seen on the homepage
and on a leaf page.
This navigation bar combines global with local, which is typically a fine proposition. however, today seems to be my day to be puzzled.
Question: why not make the "on state" tab the same color as the page, allowing a clear connection (I've seen in usability this makes the tab stand out and helps with wayfinding.) the leakey blue is weak. perhaps with a stronger sense of state, they wouldn't have to use the huge header to let users know where they are.
I'm bewildered by the changing state of the hierarchy-- is high speed in store or in home? Why is "member center" orange? what the heck is "switch"?
Go back to the drawing board, earthlink. and this time hire an IA.
mysterious or not?
found on AutoWeb
I'm probably the only person who gets make/model continuously mixed up. But i'll guess that "express inquiry; means little ot all. Plus the lack of submit button and here we are: puzzled.
April 16, 2004
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.
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 07, 2004
editing many
 editing tool open to multiple images |  first chance to rotate as uploading |
 second chance to rotate... this time you can rotate several images by choosing the top of the photo, then hitting a rotate button |
One critical advantage snapfish offers is the ability to manipulate multiple photos at once. From rotating to captioning, this is a wonderful feature, especially for low bandwidth users.
I also appreciate they allow one to rotate at the upload stage, when the process is in java and doesn't cost a click. (a user wouldn't know that it was java and not html, but they might notice how fast an easy it was...)
editing images for everybody
found on ofoto
Here editing is a mode you enter, and once entered, you can page through your pictures, editing along. This is very useful if one needs to turn multiple images.
The icons are straightforward (a magic wand for something I still can't quite figure out seems strangely fine in both yahoo and ofoto's case, though of course it doesn't jive with the adobe convention)
The save is insufficiently called out-- I turned all my album images only to return to the index and realize they weren't turned at all.
Undo is nicely available in both the start over and single fix mode.
Unusual tools like filters and borders are tucked away which doesn't hurt, though yahoo having them open seems acceptable as well. I miss the lighter/darker/high contrast/low contrast Yahoo offers. (but one can live very well without it)
edit photos
from Yahoo Photos
from left to right
Open question: all of these buttons look alike, yet the activities range from instantly changing your picture to opening new tools. Is this an issue?
Undo is a bit dismaying: one can only start over, one can't undo a single action. So if one is down a repair path and makes a misstep, you have to return to ground zero.
The exception is effects and borders, which have their own undo. Oh, and autofix, whatever the mysterious rules are around that.
Despite these issues, it's fairly easy to get to and use (though why it's labeled enhance image instead of edit image is a mystery to me). Which is why I asked about mixing mode buttons and action buttons, which i would guess would be bad for setting expectations in the user.
April 03, 2004
see it
found on zappos
Zappos as a site is a bit of a mess, but the multi-view function could not be more perfect. Usefulness, on state, expectations, clarity of icons, labels: 5 out of 5.
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.
April 02, 2004
guess
found on Yahoo! Korea
How good are these icons? Guess what they stand for (no cheating, Korean readers...)
why not
found on Simplebits
Cute little intuitable icons for a essentially useless but playful function: changing the color of the site. no harm, no foul.
submit, and...
found on optionslink, part of etrade
A bit of design look over function happening here, in my mind: the submit buttons look like icons, the help icon a bit too much like the submit buttons to form a roundy-look. That said, it's a good grouping: search, quote look-up and help, along with log-out.
The way log-out is treated is particularly interesting-- in some sites log-out is a trivial activity, but on a financial trading site, it's critical that one sign out when leaving a computer. This log-out treatment has a good presence. Which raises the question, should the global help have the same prominence? But then I'll be draw into a meditation on contextual help vs. global help, and that's a whole other topic...