Apple Site Search

Apple provides an excellent site search design, which includes an AJAX auto-completion drop down menu showing categorized matches against your query, and thumbnail images of matching items. The categories carry over in the search results page, which displays your results in collapsible sets, much as you would see with the Mac OS Spotlight search. Some result sets are even rendered as a carousel (look at iTunes results).

1. Auto-completion drop down shown for query on "iph."
2. Search shown in page context.
3. Search results sets.
4. Doing a search for "virus" displays a nice little easter egg. (Thanks, Mark, for the tip)

Down for everyone or just me? Submission Form

This is a dead simple service to check server status. It consists of 1 input to enter a domain name, and a link to submit. If the server is up, and you still can't get to it, then you know connection problems you are experiencing are due to issues at your end.

1. Enter domain and click link to submit.
2. Result and link to try another site.

Capzles Captcha

Capzles, a photo management and sharing services uses animated text in a Flash captcha to trick the robots. This is the most sophisticated attempt I've seen to make captchas unreadable. It still can't beat the spam sweatshops, but it seems to me like a very good option for defeating OCR.

ibeatyou rating

ibeatyou is a video portal that allows people to create challenges to compete on anything. Users either upload a video, record from webcam, or import from YouTube.

The rating system is a whimsical little widget for allowing a score from 1 to 5. The vote is indicated by a little blue man holding up a scrore card. They also provide a qualitative award, allowing users to give an award to the entry and name it anything they like.

1. Video page with player on left, and other challenges to the right of player (typical playlist format).
2. Entry info. Rating is indicated on hover as person icon with score card held over head. After rating is applied, user's score in the user point system is indicated.
3. Clicking the "award it" button allows users type an award name.
4. Award saved to right sidebar adjacent to comments.

Publicis & Hal Riney Webcam Gesture Navigation

The Publicis and Hal Riney site attempts to innovate navigation by replacing mouse input by detecting gestures the user makes against their webcam. Once the Flash file embeds your webcam video into the lower right corner of the page, a body outline is superimposed, and hot spots in the North-South-East-West quandrants are ghosted on the screen to show where you should hold or swipe your hand to navigate. Unfortunately the video ended up eating up resources on my machine to the point that the load times were painfully slow.

This site reminds me, in a way, of the Don't Click It site, which was a proof of concept for using mouse gestures rather than requiring the user click on links. It also reminds me of the Eye Toy game for the PS2, and the ToySight game for the Mac. There are several of these camera-based TV games available.

From personal experience, I can say that I found the EyeToy game interaction fun for several minutes while passing through a game store, but the experience with the ToySight game on the Mac is absolutely frustrating and pointless. This is the same feeling I get after playing with the Publicis and Hal Riney site. Using webcam gestures for the purpose of playing a game is quite different from swiping your arm around in order to navigate an information space. Additionally, besides the 4 directions provided for navigation, there is only one gesture used to select/click content on the page--the space bar. Don't Click It succeeds, at least, in that the gestures of a mouse are small. Having to pick up my arm to simply paginate seems a bit much.

Using the webcam gestures for interaction on their web site seems very misplaced. If the purpose is to demonstrate the idea, I'd think a separate demo for that specific purpose might be great. The visual design, on the other hand, is beautiful.

1. Splash screen asks user to select mouse or webcam for user input.
2. Webcam input shows your body placed in center with N-S-E-W hot spots for navigation. Space bar is used to provide click input.
3. Hot spots used for pagination (prev-next).

Searchme Visual Search

Searchme provides a search interface that provides screenshots of search results. The user interface is a flash application that mimics Apple's new coverflow display in the Leopard finder. The search options provide category filters, and relevant categories are displayed once you've typed search terms that match a category. The example here shows categories that are relevant to the search for "new york city."

Search results provide more information about the site when the user hovers over the screenshot. Optionally you may click the control below the screenshot stage to pull up text results. You may scroll the screenshots to the right to view more, and after a full right scroll, more results are added to the window, although sadly, the scroll length is not visually represented in the scrollbar.

The service is presently in beta, so the quality of results may not be up to par with search engines you're accustomed to using. It's a glossy for search. I think it would be nice to see if they could do a version of this using only JavaScript and AJAX as well. Performance is really quite good so far.

1. Default search form.
2. After typing search terms, matching categories appear.
3. Default results screen, showing "Search All" results.
4. Filtered results after selecting one category, "Restaurants."
5. Displaying the text search results panel.
6. Scrolling through to view results.
7. Changing settings to use "daytime" theme.

IHT Top Stories Module

The International Herald Tribune site has, in my opinion, been the site that set the bar for clean, minimalist newspaper web sites since John Weir worked on the design circa 2000/2001. The evolution of the site has continued to stick to Weir's minimalist visual style, although his innovative DHTML column and clipping behaviors are gone.

The top stories content module is an interface element that is a common feature in news sites. IHT implemented their module in as minimally as possible, providing 3 time slices beneath the header and a link to the RSS feed. Contrast this with the top stories module provided by Newsweek. I'm including this in the gallery because I think it demonstrates the type of simple presentation where the interface chrome gets out of the way so that users can get to what they need with no fuss.

1. Most emailed articles module. Tabs as inline links to select time slice.
2. Module seen in right sidebar of an article page.

hulu Carousel

Hulu provides an interesting carousel for the promotion of content on their home page. They use a large stage that spans the entire width of the browser window and shows one promoted piece of content at a time. Left/Right arrows allow the user to page through the promos, and a representation of the promos as mini-screens (small multiples) at the bottom of the stage allows the user to see what number they're looking at, among the total promos. Clicking one of the small rectangles allows the user to jump to that promo. If the user doesn't click on the stage after they arrive to the home page, the carousel automatically scrolls through to the following promos, one at a time, slideshow style.

1. Home page with carousel.
2. Selecting next promo.
3. Clicking icons to jump to promo.