I was stymied for several seconds by the interface of this Yahoo! player. I was looking for a share or an embed icon so I could add this video to my blog. I saw an information icon. I saw full screen and volume icons. And I saw an e-mail icon. Let me repeat: I saw an e-mail icon.

So I clicked the e-mail icon …

… and found the embed code.

To be fair, the e-mail icon does reveal that it’s an all-purpose “Share” link if you hover for a second or so. The problem, however, is that the icon Yahoo! is using is a long-established icon for sending e-mail. What’s more, Yahoo! is the only major video site that seems to use an e-mail icon as a synonym for a share icon.

How YouTube does it:

Note the arrow that reveals an iconic representation of their video sharing screen.

How Vimeo does it:

Imagine that! Separate links for sharing and embedding the video.

How DailyMotion does it:

DailyMotion uses a text menu with a “URL & Embed code” link.

I think it’s safe to say that users expect embed features to be labeled ‘Embed’ or ‘Share.’ I think it’s even safer to say that users don’t expect an envelope to mean anything other than e-mail. E-mail is not embed, and Yahoo! should redesign their player interface to distinguish between the two functions.

A transcript isn’t available yet.

• View a working example
• Download the JavaScript

What do you have to do differently to make this work?

The good news is not much . The major difference is the form and added HTML markup.

<form id="customsearch" action="index.html" method="get">
<div id="cssrchdiv">
	<input type="text" name="p" id="term" value="">
	<input type="hidden" name="vs" id="site" value="YOURDOMAINNAME.COM">
</div>
<p>
<button type="submit">Go</button>
</p>
</form>
<!--/search_form -->
<div id="search_results"></div>

In Christian’s example, he set the form’s action to http://search.yahoo.com/search. It works beautifully if you are serving one page of results. But for our purposes, we are going to reload the current search page, parse the query string, and execute the search. That’s also why we need to add a method to the form — “GET” — so that the form’s values get appended to the URL.

I also added a search_results div so that we can inject the results into a containing div (in case you need to integrate it into an existing site design).

The script is released under a BSD license.

And by “building on,” I mean “straight jackin’ it and adding a few more lines of code.”

Imagine my horror, when I went to the delete tags page and found … a pull down menu! (Click to view a larger version of the image).

Yes, that’s right: Delicious uses a pull down menu for its delete tag page. It’s a bad UI choice for a few reasons:

• It hides critical content. You can’t easily see which tags you’d like to delete. You have to scroll through a tiny menu in order to find the tag you want to remove.
• Tags are sorted alphabetically, but not really. Most of your tags are sorted in alphabetical order, except if it’s a ‘for:username’ tag. Those are sorted by user name, rather than by ‘for:’. I was expecting to see my for:allboutgeorge tag grouped with the Fs, not the As.
• Pulldowns = Can only delete one tag at a time. No batch for you! If you want to remove more than one tag — because like me, you are the type to let your bad tags pile up — you have to do it one-by-one. Worse yet, you have to confirm each deletion. That’s entirely too much work.

A better approach

A better approach would be to use a series of checkboxes. This way the user can quickly scan and check which tags s/he wants to remove. Multiple tags can be removed at once, and the user can confirm the deletion in one batch rather than for every tag.

An even better approach

Better still? Use Ajax to provide a one-click tag deletion feature.

In this scenario, tags are displayed in rows of text. To remove, just click the tag. An expanded version could allow you to un-delete by clicking on the tag a second time. At the end, users could save their changes.

If memory serves me correctly, this is precisely how the tag management worked in the previous version of the site.

Even mo’ better still

I think the best approach, however, would be a simple drag-and-drop feature.

Users could mark a tag for deletion by dragging it to the trash. Undo a deletion by dragging it from the trash can to the tag pile. Here too, the user could all of her changes in one batch.

All of these alternatives are relatively easy to implement and provide the user with a faster, easier way to manage their own taxonomies. Delicious’ current tag management interface works just fine for deleting single tags. But if multiple tag removal is your goal — and I suspect that’s the case for most delicious users — the UI is far clunkier than it needs to be.

At the very least, Delicious should offer a batch option — a way to remove multiple tags in one go. Here’s hoping they hear me.

Google Desktop for Mac seems like overkill since Spotlight is pretty robust (in my opinion). But the ability to deploy Google Gadgets in Dashboard? I’m thinking that’s genius.

Previously: Widgets and Gadgets and Modules! Oh my!
Elsewhere: The Year of the Widget? on Newsweek.com