blink design library

Avoiding duplicated links

The global navigation on Amazon.com normally shows a "Cart" button including the number of items contained in the Cart (click to see full-sized image):

 

However, when a user is viewing their cart, the button (kind of) goes away:

The button is still there, but the label is gone.

This is an interesting solution to a common design problem, which is handling global links that are redundent or potentially confusing in a specific context. The goal here is to direct the user to the cart-related links in the main content area of the page. I've not seen this done before, but it seems like a reasonable solution.

PIN entry supports muscle memory

Over time, entering a series of numbers into a keypad can become imbedded in muscle memory. That is, you stop thinking about each number individually and instead rely on the memorized physical sequence of pressing the buttons.

The Wells Fargo web site supports this phenomenon by allowing users to enter their PIN on a virtual keypad:

There is a difference here of course: rather than using fingers to type, you are using a mouse. So it's not a direct translation of the physical experience.  Over time, do people  have difficulty remembering the numbers and instead just remember the movements? I would guess this is what lead Wells Fargo to add the keyboard to their web site--and that displaying the layout is enough of a physical reminder to help people enter their PIN correctly.

iPhone-like Time Picker

The  Plaxo calender has an iPhone-like time picker that allows users to select a date without scrolling:

Compare the above with the time picker in the Outlook calendar, which presents a long, scrolling list of times in half-hour increments:

The scrolling time selection requires much more interaction on the part of the user if they are entering a time that isn't immediately displayed (default time is the current time).

Major League Dynamic Column Display

Major league baseball gives users the option to easily select/de-select the columns in its team rankings (click to see full-sized image):

There are a maximum number of columns that can be displayed, with an indicator that shows how many more columns you can add.

The Captcha Conundrum

Who hasn't encountered frustration using Captchas?

Designed to defeat automated software attacks, Captchas can also defeat humans as we struggle to decipher the distorted text (the distortion prevents OCR software from correctly reading the text). 

The example above is from the New York Times. Other, simpler Captchas can be found on lower-traffic sites. Simpler approaches, however, are more easily defeated. For example, it wouldn't take much software logic to defeat the Captcha on UIE's site (type "uie"):

Slightly more complex is this image-based Captcha:

 
Again, on this relatively low-traffic site this approach is likely effective at preventing attacks--but it is not impervious to image-recognition software.

A more  sophisticated image-based Captcha,  developed at Penn State, obscures the image, retaining key details so humans can recognize it but software can't:

The researchers developed this system in response to ease with which many distorted-text Captchas can be broken by more sophisticated means. While they admit their image-based system is not foolproof, the image distortions, which are made on-the-fly, have proven difficult to crack in their testing.

It's notable, however, that ReCaptcha (shown in the first example) has a dual purpose. Its Captcha function is a part of book digitizing efforts. From Wikipedia:

Scanned text is subjected to analysis by two different optical recognition programs; in cases where the programs disagree, the questionable word is converted into a CAPTCHA. The word is displayed along with a control word already known. The system assumes that if the human types the control word correctly, the questionable word is also correct. The identification performed by each OCR program is given a value of 0.5 points, and each interpretation by a human is given a full point. Once a given identification hits 2.5 votes, the word is considered called. Those words that are consistently given a single identity by human judges are recycled as control words.

ReCaptcha is one of the most widely-used Captcha systems, deployed by Facebook, Twitter, Craigslist, and many others.

Ultra-light Online Purchase

Tumblr uses a small dynamic overlay for purchasing blog themes:

 

This lightweight approach seems ideal for purchasing single items that don't need to be shipped.

iPhone-style toggle switch

The iPhone toggle switch provides a particularly clear indication of on/off states:

RightSignature uses a similar control in its web application:

This is a great example of adapting successful elements of a mobile experience for the web.

Video Help Content - Discoverable but not Obtrusive

A study we did for a client a while back involved a system that made extensive use of video to introduce people to the service. The reaction from participants was completely polarized - they either loved and were enraptured by the videos or quickly lost patience and stopped watching (the videos, by the way, were professionally-produced and extremely well-done.) The participants who stopped watching wanted to dive in and figure things out on their own (see paradox of the active user).

Huddle doesn't build the initial page views around introductory video - instead it shows a closed video area, which the user may open (click to see full-sized version).

Video hidden

Video displayed

This approach seems to have a good balance between discoverability and not getting in the way of those folks ready to dive in.

Auto-play Slide Shows

An auto-play slide show on the home page is a way to catch users' attention--particularly where compelling images can draw users into the site's content. There are many examples of these on the web, with various slide-control interfaces.

The two examples below use a number to identify each slide. They have an explicit means a pausing the slide show, giving users the ability to control the display (click to see full-sized image):

From: The Gates Foundation

From: Fine Cooking

Alternatively, these slide shows may use an implicit means of pausing the display. In the example below, there is no pause/play control, but clicking one of the round buttons (one for each slide) stops the auto-play.

From: Epicurious

For users,  no control over the auto-play can be frustrating. In the example below, users may navigate to a specific tab, but the slides continue to auto-play regardless of what actions the user takes. On the plus side, the tab interface lets users see the title of each slide.

From: Cook's Illustrated

Here's another example of the tabbed slide show, with the addition of a very clear pause button:

From: Martha Stewart

The tabbed approach works when slides can be easily named with one or two words. In the example below, the user sees slide thumbnails when the page first loads and when they roll over the pause button:

From: Seattle Mariners

Subnavigation Drawer

The NPR site has a useful way of presenting subnavigation: on click, a drawer opens under the global navigation bar, displaying a set of grouped links (click to see full-sized image).

To close the drawer, you either click again on the current option (for example "programs") or click any of the other top-level options.

This approach is well-suited presenting a large number of options, where a simple drop-down menu (displayed on rollover) isn't practical.