Last.fm Tagging

Last.fm provides a simple interface for tagging artists or tracks that mimics the email address entry design pattern provided in applications like Apple Mail and Facebook Messaging. Their redesign (beta site accessed May 2008) cleans up their tagging interface by providing auto-completion, and the ability delete tags by clicking the item in the input.

1. Clicking the More menu displays the Add Tags link. Presumably, there will be more than just an add tags item in the future, otherwise Add Tags should simple be visible without this extra link.
2. The Add Tags dialog displays as an overlay. Typing in the input provides auto-completion from the user's previously used tags and other tags available to the user.
3. Selecting a tag from auto-completion options, entering a comma, or clicking enter displays the tag words in a tag block. The tag text cannot be edited, but it may be removed by using the backspace key or clicking the "x" next to the tag.
4. Confirmation after clicking Save.

http://beta.last.fm/home

Apture Text Editing

The Apture service allows web site publishers to easily find and incorporate multimedia content from the web into their site. Apture requires one line of javascript code to work. The service embeds dynamic links in the page that allow users to preview content from the outside sites in AJAX layers over the page content. Publishers can choose to automatically generate links from certain sites, e.g. YouTube and Wikipedia. They can also create links by selecting text on the page and finding the content they want to embed.

In the example at left, I show the simplest use case, where you want to link a term to its entry in Wikipedia. What I like most about this is how easy it is to add more information to your pages without having to do editing of the original content. I could see this kind of functionality being very useful for altering original content if these kinds of widgets were available within the rich text editors themselves. It's very nicely implemented, and if set to only fire on click (rather than on hover), this is nowhere near as intrusive to me as ad-supported services like Snap.

Content editors who don't want to know anything about HTML need simple interactions like this to make their work quicker and easier. I imagine that this kind of interaction could be scoped within a specific body of content as well, e.g. to easily create links within a wiki. CMS vendors take notice.

1. Invoke the Apture editor by pressing a keyboard shortcut or bookmarklet.
2. Select the text you would like to link and find the media you want to link to.
3. Preview the media, in this case a Wikipedia entry. Then click "Link this item" button.
4. Now when users click the link in your page, they will get an AJAX layer with the entry content.

http://www.apture.com/

Inquisitor Search

Inquisitor calls itself Spotlight for the web. The free search plugin is installed in Safari and provides better search results using Safari's built in search box. When a user enters text into the input, Inquisitor displays a drop down menu with results suggestions and search term auto-completion. The first section of the drop down shows matching results pages in Google, and in the second section shows auto-completion suggestions for other terms that match the entered text. If you edit the search preferences, you may also see links to narrow your search to a particular search engine, e.g. IMDB, Flickr, Google Blogs, etc. You may also set keyboard shortcuts to quickly trigger results from one of the search engines you've added.

http://www.inquisitorx.com/safari/

When is Good

When Is Good is a tool that does one thing—helps a group of people choose the time for their next meeting or event. One person starts by clicking (or clicking and dragging down) all the times that they are available on a calendar grid that shows 2 1/2 weeks of time slots. When Is Good then provides a link to circulate to participants, who see the proposed times and click on when they are free. Whoever started the calendar gets to see the combined results.

http://whenisgood.net/

Brooklyn Museum Click! Rating

The Brooklyn Museum's Click! show is a crowd-curated exhibition that accepted user submissions for photographs that reflect the theme, "The changing face of Brooklyn." Following the submission period, visitors are asked to help curate the photography show by evaluation submissions on their effectiveness at demonstrating the theme. The interface for evaluating photos steps the user through each entry and provides a slider control to rate the photo on a scle from most effective to least effective.

1. Introduction to show and guidelines for evaluation photos.
2. Example photo with evaulation slider and user statistics on right.
3. Photos include artist's title and description.

http://www.brooklynmuseum.org/exhibitions/click/

QUEEKY Ratings

QUEEKY is a drawing community that allows users to draw pictures in their browsers using the site's flash application. Users can rate the drawings using a rating scale ranging from 1 (Hmmm) to 10 (A masterpiece!). Scores on the low side are color coded to a cool violet color and on the high side towards a hotter pink/fuschia.

1. Low rating
2. High rating
3. Full page

http://www.queeky.com/

Google Sites Rich Text Editor

Google Sites, the new wiki application that is now part of Google Apps is a content management tool based on the JotSpot service acquired by Google. Sites retains the excellent rich text editor tools that JotSpot had.

The formatting bar allows users to do the simple things you would expect from a word processor, such as making font changes and adding styles such as headings to text, insert lists, links, images, and table of contents. There are very well executed tools for laying out the page in 2 columns and inserting tables. It also allows you to do more sophisticated things you can't do with a word processor, including inserting Google Docs Documents and Spreadsheets, Presentations, Picasa Slideshows, YouTube video, and Gadgets which execute bits of code to do things like insert lists of content from your wiki into the page. Advanced insert tools like this have been commonly offered in more sophisticated CMS, blog, and wiki software that are largely used in the enterprise CMS space.

The Sites rich text editor feels like a very clean, and fast alternative to some of the more bloated WYSIWYG tools offered as plug ins for CMS. Many of the formatting tools I've encountered go the simplest route of using markup shortcuts and special syntax, which works well but requires a learning curve. Or they go the other route, which is to mimic Microsoft Word and include everything you might possibly want to use, and sometimes also give you the messy HTML to boot. This editor feels like it's somewhere in between, in that sweet spot where users are given just enough to get the job done, and even more under the hood when they need the power tools. It's fast, efficient, and intuitive.

1. The text formatting toolbar.
2. Creating a link to a named page on the wiki.
3. Creating a link to an external URL
4. The insert menu.
5. Inserting an image by uploading a file or referencing an external URL.
6. Inserting a Google Docs Spreadsheet by pasting public URL.
7. The inserted spreadsheet selected in the editor with links to bring back property inspector and handles to resize.
8. Inserting a "Gadget" to display a block recent todos created on this wiki.
9. Editor showing 2 column layout and styles applied to text. Inserted image selected.
10. Insert table menu.
11. Editor showing inserted table. Table is selected and shows resize handles.
12. Published page with all edits applied.

http://sites.google.com/

Google Sites Theme Editor

Google released the technology acquired by JotSpot as the new Sites tool in the Google Apps suite. The Sites tools provides the interface you see here for modifying the appearance of your site, using pre-defined themes as a starting place, allowing you to modify the layout of content modules in the left column, and the colors used in the layout.

1. Selecting a theme.
2. Modifying page elements.
3. Configuring a module.
4. Setting colors.
5. Setting background images.
6. The modified site appearance.

http://sites.google.com/

Pattern Tap Tag Filtering

Pattern Tap, an interface and visual design gallery, provides a UI for filtering using tags. Best case scenario would get rid of the filter button and also updates the set of available tags to indicate those that can be combined with the current selection (e.g. dim or hide tags that can't be combined with my selection "black AND white" AND simiple." Often times in interfaces that provide filtering based on all available tags or index terms, if the filtering UI doesn't update to reflect those terms that may successfully combined, the user is led down a path to an empty set. del.icio.us is one example I can point to that prevents this error. I really like the execution of this interface on Pattern Tap, but would love it if that added logic were there.

1. The tag filtering interface with no selections.
2. Clicking + icon adds the tag.
3. Several more tags added. Clicking a selected tag removes it. A filter button submits the selections.

http://patterntap.com/

Indeed Faceted Navigation

Job search engine Indeed offers faceted search filtering in their results. Facets include useful filtering criteria such as job title, salary range estimate, company, location, and job type. Filters beneath any facet may be selected at any point while viewing the results, and removed in an ad-hoc manner regardless of the order selected. Users may also remove all filtering to return to original results.

1. Search interface.
2. Search results with filters on left column which can be hidden/collapsed.
3. After selecting a filter under salary. Filter may be removed by clicking "undo" next to term.
4. After adding filters from Employer/Recruiter and Job Type facets. Multiple filters may be removed by selecting "undo all."
5. After adding location.

http://www.indeed.com/