January 27, 2004
get it, type it
found MSN
the developer in me says-- did they get the placement right? browser bug?
the designer in me says, oh, artsy.
design aside, what do folks think of the prepopulated text field / dropdown in which the first choice is instructions.
these are hugely verboten in all interface guides, and I've got some data that suggest it impairs usage, but...?
hold this spot for me....
Found on Ryze, YASNS.
Poised above the global navigation, this boxis-whois-whichis defies categorization. A placeholder for what? I don't know what they are thinking-- this simply says, ignore this spot, when something does come you will have been trained to ignore it...
January 25, 2004
discussion visualization
From the Dana Centre
"dana4throom takes the comments that have been posted in one of our discussion boards and creates a person icon for each of these comments."
You can click on the user name to find out more about the user or click "more" to read the comment on the discussion boards. It's cute but not very practical unless it does more than than simply create a person icon. For example, it would be very cool if a lot of the people icons grouped together for an active discussion. Even better would be visual feedback that reflected the tone of the discussion. If there were lots of smilies in the comments, the people icons could look like they're laughing. If comments were very long, people icons could be standing on top of a soap box. The possibilities are almost limitless...
zoom out of context
from MapQuest
A common problem with this type of zoom tool is that the individual zoom buttons don't give you any clue about the level of zoom. Victor Lombardi tackled this one a while back and came up with the idea of replacing the inexplicit links with graphical details of each zoom level.
orange pagination
from Orange
Due to the size of the click targets - which could be much larger - it doesn't scale well, but it does a decent job of showing where you are in the article.
argh
found on Portal 2 HP
I'm officially charmed. and unofficially.
More sites should allow themselves the luxury of showing a personality. Especially one that is dependent on community, as is this one.
user ratings
found on Portal 2 HP
Although the type is pretty dang teensy (ow) the rating is clearly laid out and easy to scan. I do prefer products with ratings on different facets of their nature-- three facets strikes the balance between useful information and information overload.
I do wonder if "quality" should be a roll-up rating. And I wonder if the colors have meaning-- they strike me as random.
now that's a printer
found on Herald Net
There's one solution to the mystery printer icon-- make it photorealistic.
nextism
from Webreference
At first I thought this quite wrong-- it's certainly non-standard. But really, take a look. You know where you are, you know how many pages are (generally) and you know where the next and previous page is. One issue is "next" is so often the far right item in other pagination tools, I can see some misclicks occurring. But it's a rather elegant little tool, and considering the audience is web developers, why not?
art and ew
Found on ADAM, the Art, Design, Architecture & Media Information Gateway
Gee I didn't know browsing was iconified by lightning. In my experience, it's not much like lightning... though it's occasionally shocking.
Other icons all strong except the pencil (let's save that for edit or compose, please!)-- the a for about, the heart for friends, and a great map icon.
The white/green background seems like it just confuses matters... visual noise.
more tools
Found on the Tucson Citizen
Interesting for the addition of the "more by this author" and "letter to editor" links.
January 24, 2004
Aspects
found on Orkut
Subtabs are used to show the different aspects of "friends" concept: list of friends, groupings of friends, ratings friends (called karma), and friend finder. It's a very fisher-price design, makign me doubt this is really for business networking, but it's very charming as well, and make rating friends seem like a cuddly huggy thing to do. "i love you too!!!"
the brand is baked into the interface.
Upon Richard's commet, I harvested this, which represents aspects of a profile (social, professional and personal, if you believe the mouseovers).
Which brings me back to an old post on tabs as folders, lenses, filters and what-have-you.
toolset
found on Orkut
These are tool associated with user data. I note the now becoming pervasive hammer for "settings." List, profile and album are all pretty obvious.
Personally, after playing with the feature, I would have used a post-it for scrapbook rather than the classic edit icon. And named it scraps or notes. or stickes, if apple wouldn't sue.
later: okay I take it back-- it seems to be a guestbook. Which makes the naming/icon even worse.
where you at?
 |  |
found on Orkut
Orkut lets you know where you are in your set up process with this little widget, which also lets you navigate around the set up.
Downsides: location-- it's on the far right, a bit far away from the set up if you've got 1024 or up. Feedback/progress really should be visually associated with the form.
Also, if you return to edit a single section, there is no way to say you are finished... no finished button except on the last page, so you have to click next several times to get out.
January 22, 2004
it can count!
From the BBC
Reviews are limited to 400 characters, so someone decided that a JavaScript tool telling you how many characters you typed would be useful. They were right. Unfortunately, they missed an important detail. If you're going to count to 400, make space available for three digits!
<input name="countdown" size="2" value="0" id="countdown" disabled>
And then there's that blasted clear button again. I'll leave the button commentary up to you this time.
January 21, 2004
royal tracking
from Royal Mail (Thanks Kevin Cheng)
It's okay until we get to the drop-downs and buttons. The buttons are lined up with the drop downs as if each of them are related to the drop-down above them. They're not, so they should be set apart some other way. Clear buttons are pointless on forms that haven't been submitted. Remove it. Finally, and this is minor, but being of the Western world, I read left to right. Shouldn't the "Track" button be on the far right as if it's the last thing to do (which it usually is)? At least they made it red.
January 20, 2004
cart
from Beauty Center
interesting variation on shopping cart, with localized label. One problem-- when you add to the "caddy" there is no feedback... you can click on the order button and you would never know something was in your caddy.
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?
January 19, 2004
site navigation/map
hyperbolic tree found on XRCE
As sites have grown larger and more complex, ways to navigate them is changing. The hyperbolic tree shows promise. This one is particularly easy to understand and navigate-- though one is reminded of the importance of intelligent page naming. I can see how a version of this with long meaningless names as is often seen in dynamic sites could be a nightmare.
January 16, 2004
buy buy buy
Points to notice and question:
- "add to cart/bag/basket" clearly dominates "buy now," which, uninterestly enough, is used only on buy.com.
- Some definitely seem more button-like and clickable than others.
- It's interesting to see how they reflect 1) the shopping carts for the same stores and 2) the store brand
- Does a bigger button lead to more sales?
Anything else?
January 14, 2004
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.
Bad billing
from Dreamhost
I'm extremely fond of my ISP, which is composed of friendly helpful and smart folks who perpetuate some of the worst design crimes I've ever seen on a regular basis in their homegrown interfaces. One of these days I'll get ambitious enough to outline the monsters. The one in this post is a misdemeanor, but I thought I'd capture it since it's simple.
Small issue #1: the credit card icons are not functional.
From a technical point of view, it's not necessary to have a user enter the card type; it's implicit in the number of the card. However some businesses ask for it; some do not. Users are asked to do so often enough that they will expect to enter the type of card.
Also, in Dreamhost interfaces, almost everything is functional, so the cards seem like they are the tool for selecting card type. At first I tried to click them, then when I realized they didn't click, I looked for a place to select what kind of card I had to enter. Which didn't exist. A few seconds wasted annoyingly.
Since dreamhost is merely showing what cards they support, a bit of explanatory text-- we accept X,Y, Z-- would go a long way.
Small issue #2: Unlabeled boxes
I entered my name above. then when a started to enter my billing info, I entered the street address in the first line, the city and state in the next. Then I got confused--- what was the third line for? It took me a second to realize they wanted my name in the first line. Why not label each line, to avoid confusion?
Affordances are not enough.
One good thing; they do address the problem I noted in the ryze guestbook writeup with some warning text-- just click this once. Considering that folks would not care to be billed twice, it's good advice.
I still love you Dreamhost, you provide good functionality, you are helpful and stable. Someday I hope you hire an interface designer.
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.
Delete as Hide
From Ryze
On each user's page on Ryze is a guestbook. You can sign other user's guestbooks, and when you do leave a message, that button appears. I've often seen it in context of my own guestbook, and thought it meant hide my entries-- which made some sense, though not all that much. I saw it today on an entry on another user's, and I had just accidentally posted twice (server delays-- I think all form submission should always search for duplicate posts). I hit "hide" and low and behold it actually deleted my post-- the feedback page even said "your guestbook entry has been deleted."
A more desirable design might be two small icons near your entry, or right under it, perhaps an x in a bo and a pencil for delete and edit. Right now the button is big enough to interrupt reading, and badly labeled to appear useless and misleading... the very simple answer would be to relabel it "delete entry."
January 12, 2004
thumbs
from movies.com's Ebert and Roeper Section
Just for inclusiveness, movie ratings sporting the now classic binary thumbs up/thumbs down. A note: three icons of identical visual weight, same style, yet only one is interactive. There are some false affordances here.
Little Man
From SFGate.com
While this is not an interactive widget, I wanted to include it for its unique icongraphy. The little man has been representing ratings in the SF chronicle for many years now, and is much loved by his readers.
I find it interesting that movie ratings seem much more prone to creative representation of their ratings. Everything else gets stars, movies get grades, smashed tomatoes and little men leaping from their seats.
January 10, 2004
give it all to me
from The Gap
I've often wondered why high bandwidth users are forced to page through multiple pages-- Gap must have wondered too, because they give you the option to see everything. good going!
scoping
from Search Engine Watch
Search Engine Watch uses check boxes to allow users to scope their search. While the design is less than elegant, it is visible. Perhaps a cruder design is better in this case, and the text box is such a visual magnet, other elements of the form have to fight a bit to get noticed.
data pleasures
from Netflix
On Netflix top 100 rentals, change is indicated with the green and red up and down arrows. While this is not exactly important information for making a rental choice, it is data Netflix has and curious users can enjoy.
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.
toss a tomato
from Rotten Tomatoes
It's a funny business, rating movies on rotten tomatoes. You have to register and create a journal. When you choose to rate a movie, you are thrown on a page that not only let's you rate, but is clearly designed to vigorously encourage you to write a review-- it's essentially a compose page. it's clear they would prefer you to be an active member of the community, and not a fly-by-night rater.
Your rating is a 1-10 scale, but is then represented iconically as a whole tomato (5-10) or a smashed one (0-4). I think this is cute, but an unfortunate reduction-- why both giving a full ten point scale if you are going to reduce it to a binary on/off? Is a movie rated 6 really as good as a movie rated 9? is a movie rated 0 really as good as a movie rated 4?
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...
discussion tools
From Apple Discussions
These are pretty, Mac inspired icons for common discussion tasks. For the Windows users who may not know their origin:
- Logout icon is the Mac escape icon
- Preferences icon is the same icon used for System Preferences on OS X
- Profile icon is similar to Accounts icon within System Preferences
- Bookmarks icon is a more colorful version of the Safari bookmarks icon
- Check Subscriptions icon doesn't resemble any Mac icon I've seen before
- Help icon is commonly used in Mac dialogs and preference windows
They work well for Mac users but I wonder what Windows users think of them.
search the tomato
found on rotton tomatoes
Cute use of their tomato iconography on the submit button.
unfortunate wrapping of advanced search-- makes it look like there are two links not one. personally, I don't think they need the word "search" as advanced always accompanies a search box.
January 07, 2004
Reeeeeesult Page
from Google
Clever and intuitive, their result page nav allows you to quickly approximate the number of search results by the number of o's in the Google, which also double as click targets for the page number below them.
new rating tool
found on amazon
this new rating tool has two fine qualities. The first is dynamic html used to provide inline rating. By not forcing users to another page, rating is made cost-free, and thus more ratings-- and hopefully more accurate aggregates-- becomes likely.
The second is a simple thing but oft overlooked-- you can decline to rate and simply indicate you aren't interested, or you already own the item.
January 06, 2004
page me
found on IKEA US
A simple clean pagiation tool, with good state feedback. A bit small though (and small targets give me fitts!)
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?
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.
who can you trust?
 |  |
from Yahoo! Movies
Nice juxtaposition of critic and user ratings, with strong call to action. Upon rollover, users are offered the chance to fine tune their grading with pluses and minuses.
human management
from the profile page on Evite
tools associated with a profile on evite. The favorites icon is clearly taken from IE.