Songza Radial Menus

You rarely see radial menus implemented on the web. Radial menus provide a branching interface from a single starting point. Songza uses this interface convention to provide a very interesting way of selecting from 4 categories of actions that can be performed on a single song: play, share, rate, playlist. These are categories of actions you typically get with audio and video media on web sites. The radial menu allows the designer to keep the display simple, so the user can focus on the lists of titles. What might be an interesting additional thing to do here is provide a double-click event that could trigger play rather than having to view the menu. This is a very simple and elegant implementation, and among the first and best applications of radial menus I've seen on the web.

1. Default page view
2. Click a song link and a radial menu is displayed.
3. Hovering over left side displays "Share" submenu.
4. Hovering over right displays "Rate" submenu.

http://www.songza.com/

Digg Contact

This is perhaps more about information architecture than interface or interaction design. One thing I like about Digg's About section is the transparency of the company that's suggested here. They only provide email addresses for contacting the company, rather than providing a form. They provide 4 types of contact: feedback, abuse, press, and partners, each type of gets sent to an email address. This exposes you, the sender, as it doesn't allow the sending of anonymous email, and gives them a way to respond to you. It also gives a sense that someone will respond, which is not the perception I have when I fill out a form and get an autoresponder. That may provide a false sense of openness, however. With the volume of traffic Digg gets, I wonder if they are able to respond to each piece of communication they receive in a timely fashion. To further emphasize this transparency, Digg exposes who the staff are by providing a list of avatars linking to each person's Digg profile.

Digg provides a form for contacting them regarding bugs, which makes sense because in this case they want more information about the page you're looking at, the browser/OS you're using, etc. That doesn't appear to be done very well, however. Clicking the Report Bug link from the footer could auto-fill the referring URL, and grab the Browser and OS using environmental variables.

1. Main "About" page.
2. Mailto links for contact info and report a bug links in right sidebar.
3. Digg staff.
4. Bug Report form.

http://digg.com/about

Daylife Favoriting

Daylife provides an excellent mechanism for favoriting. The news portal, which is published to demonstrate the company's news delivery product, provides a simple method for saving favorites that uses a star icon. The site classifies articles into topics which are simply terms describing a subject matter, person, or company/organization. Users see star icons when they hover over a link to a topic or a story. Starring the link adds the topic or story to their "starred items" list in their account. The list of starred items is filterable by type, e.g. topics, stories, searches, quotes.

1. News page for "Steve Jobs."
2. Starring topic "Steve Jobs" and adding a note.
3. Starring a story.
4. Starring a search.
5. Viewing all my starred items.
6. Filtering my starred items to Topics only. Other types that can be filtered include: stories, searches, sources, photos, and quotes.

http://www.daylife.com

Gawker Media Video Comments

Gawker Media's weblogs provide a simple method for including YouTube videos in comments. The example shown here is from the Consumerist blog. Users find a video in YouTube, copy and paste the permalink URL into their comment on the blog, and the video is embedded into their published comment. This method of transcluding content is popular in wikis, but the implementation usually involves using a special syntax. Gawker's method of using translating the permalink is dead simple.

1. Typing in to the comment form shows text in page above the form.
2. Pasting the YouTube permalink into the comment form. Video thumbnail appears immediately in page.
3. Clicking the "Watch video" link shows the embedded video player.

http://consumerist.com/356756/new-feature-embed-youtube-in-comments

Newsweek Top 10 Module

Newsweek uses Clearspring's Flash widgets to display top read and emailed stories as a content delivery module in a sidebar. This module is like most top story modules provided on news sites, e.g. NY Times, but the interesting features are the ability to adjust the range of stories by time (notice the nice slider control) and to embed the module as a widget. While this module is implemented as Flash, there is no reason it can't be done as XHTML and Javascript.

1. Top 10 module showing "Most Viewed" and "Past 7 days" time slice selected. Can also view "Most emailed."
2. Time slice (slider control in lower right corner) adjusted to "Past 7 days."
3. Clicking the "Clip this" icon in the upper right displays the Clearspring widget controls to Email and Embed this module in an external site.
4. Clicking the "Preview" link for any story displays a summary of the story in a lightbox.

http://newsweek.com

i'minlikewithyou Comments

i'minlikewithyou's full Flash interface pushes the boundaries of what can be done with user interfaces in terms of social interaction. The comment feature on the site's news articles and videos allows users to place comments (including a drawing) over the media. In the case of video, the comments appear briefly on top of the video at the points where people have placed them.

Because of the volume of commenting on these videos, tons of comments will roll by in a frenzied flash, so it's hard to read them all. Slow motion would work well here, but you may pause or click a bubble to read it. Luckily you can also turn off comments by clicking the bubble icon in the control bar.

This is a novel UI for this kind of community, but might be very interesting in controlled environments, and even useful as is flickr's "Add Note" feature for photographs. iminlikewithyou makes small things like this fun.

1. Clicked the "Add comment" button below photo for a news article. Dragged marker to place comment over camera.
2. Attaching a drawing to a comment.
3. Posting comment.
4. Posted comment bubble shown over photo.
5. Clicked on top of video player to add a video comment.
6. Comment bubble appears in place over the video alongside other user comments.

http://iminlikewithyou.com/#/video/36

Howcast Video Player

Howcast is a web video site founded by veterans of Google and YouTube, to "bring together the personality of user-generated content with the quality of a professional video studio." The videos produced by the site bring a higher standard of quality than Google and YouTube, and offer interesting features such as chapter markers and time-marked notes called "steps" in Howcast parlance. The content is targetted at information seekers of how to, tutorial, and DIY instructional video.

1. Video page (minus global and local navigation).
2. Video player.
3. Step marker in timeline and step tab below player.
4. Popup window that appears when "View All Steps" or "Print Steps is clicked.
5. Feedback form appears when "Post Feedback" button is clicked. Allows categorization of feedback by type.
6. Full screen video player. Steps, when displayed, are docked to the right.
7. About panel with author info, video metadata, voting, and sharing options. Link sharing panel appears by default.
8. Bookmark sharing panel.
9. Email sharing panel.

http://www.howcast.com/videos/1101-How-To-Pretend-Youre-a-Real-New-Yorker

Drupal Captcha

Drupal's captcha module offers some creative alternatives to the typical distorted text of image captchas. These are a few of the examples that are much more readable, and arguably less frustrating.

1. ASCII art captcha
2. Math captcha
3. Text captcha
4. Lost character captcha
5. Phrase captcha
6. Riddler captcha

http://drupal.org

MotionBox Video Player Clipping

Motionbox provides a nice interface for creating clips of videos they host. Along with Hulu, Motionbox is among the first to introduce the idea of clipping portions of web video. However, Motionbox outshines Hulu in terms of usability. Clipping is a simple operation that mimics the video selection paradigm users have become comfortable with on video editing software. And unlike Hulu, Motionbox provides instant feedback about where the start and end markers lie, by moving the video playhead with the position of the markers as you adjust the clip size. The filmstrip and the click and drag behavior for arbitrary clip selection also give the user the feedback and control that they're probably expecting for this type of feature.

1. Video player with filmstrip of thumbnails shown below playhead.
2. Clicking "Select Clip" drops clip markers to the left and right of the playhead position and displays emailing/linking/preview options. Playhead snaps to whatever marker is in focus when adjusting clip length. User may also click and drag arbitrarily to select a clip area.
3. Clicking the "Link to Clip" button copies a link to the video with start and end markers as part of the query string.
4. The permalink for the shared link to the clip loads the full video, but only plays the clip segment selected in the prior steps.

http://askeric.motionbox.com/2008/01/episode_10_top_5_uploading_tip.html

Radar Comments

Radar's comment feature allows users to post a public comment on a person's photo, or post a special comment called a whisper that only the owner will see. The owner may click the small X icons next to the comments to delete. The whisper feature is a nice idea, and the execution is dead simple. Allowing comments when viewing a set of photos in list view is very thoughtful and feels right, since these are small-sized cell phone pictures. It may not be necessary to view the full photos at all. The idea here seems more like microblogging the thumbnail sized cell phone snapshots, and micro commenting feels very appropriate.

1. Comments form with comment/whisper buttons below input.
2. Comments form shown adjacent to full photo.
3. Comments form shown expanded below a photo in list view.

http://radar.net