Mention Call To Action's Success Stories section uses this great phrase to introduce the Proof in the drip pan at the bottom of the page.

"They also started with a free trial." Short and persuasive copy that makes an otherwise common CTA more compelling.

1. Intro text, subdued company logos for the proof (so as not to compete with the CTA), and bold red call to action button to create your first alert and start a free trial.

Cotton Bureau Off-Canvas Checkout

Cotton Bureau uses the off-canvas pattern to slide steps of the checkout flow into the screen from the right, as the product page and previous steps slide off screen to the left.

I like how this implies the forward movement through the checkout process a bit better than the cart workflows that use vertically arranged collapsing panels.

1. Product page.
2. After adding product to cart, the cart panel slides in from right, and product panel slides off canvas to left.
3. Shipping information slides in, pushing content off-canvas left.
4. Review/Billing slides in, pushing content off-canvas left.
5. Steps removed and Confirmation panel appears (with a darker background color).

Beatport Pro Music Store

Beatport's Pro app for the Mac offers a shopping experience that's tailored for the way DJs shop for music. The app lets users analyze their music (tracks, sounds, and playlists) to prepare sets and add music to their playlists. Here are some of the elements of the version 2 interface related to shopping in the app.

Beatport comes close to the experience of shopping in a record store, breaking down music into genres and sub-genres. Beyond that, they provide filters to offer some of the experience you would expect in a boutique shop of having someone select tracks by mood and type of venue/set. Hand picked charts round out the experience of having the in-the-know shop owner as curator to recommend tracks.

The interface for needle-dropping on the track waveforms gives you a decent way to judge a track over the selected preview. They provide a nice small representation of this in the track details inspector and the player at the bottom of the app. The track details show all the metadata I could imagine wanting—BPM, key, duration as well as those genre/mood/venue categorizations—along with purchase buttons. It would be useful if they made the metadata in the details inspector linkable as well.

1. Filtering by mood. Includes an option for exclusions when clicking twice on a button.
2. Adding a BPM range filter.
3. A pre-defined filter based on previously followed artists or labels is provided as a link. This is further filterable by other categories.
4. Search results for an artist, showing track details inspector in the right sidebar, and player at the bottom. Clicking in the highlighted waveform in the player lets you needle-drop to that part of the track.

Basecamp Form Focus

This is a cute interaction for the input focus and data validation on Basecamp's registration form. The smiling character illustration on the left points out which steps are in focus. When an invalid value is entered, the character makes a concerned face and the pointing hand stays fixed on the highlighted input.

The illustrations on the site do a great job of making you feel like this isn't "business as usual," which is the reason for switching to Basecamp. Simple things that make the customer smile probably go a long way in this case.

1. Smiling, pointing dude.
2. Dude is concerned about your invalid form value and stays pointed at that error to remind you to come back.

Geeklist Sign Up Password Strength

Geeklist's sign up form tells you how secure your password is by indicating how long it would take to crack. Sounds much more understandable and convincing than the typical weak/strong message.

1. A really strong password.
2. A dictionary word is weak.
3. Better, but still weak. The messaging may be convincing enough to get users to think about their choice.

YouTube Delete Timer

YouTube puts up 2 speed bumps when you try to delete a video from the video manager. This technique slows down the user about to peform a destructive action, and protects them from inadvertently deleting content.

1. Selecting Delete action shows dialog confirming action.
2. A second confirmation dialog requires confirmation, but the Delete button is disabled until the countdown timer runs out.

La Wine Agency Date Picker

I like the design of the La Wine Agency site. The beautiful large type on the off-white paper reminds me of letterpress cards.

One thing I loved immediately was the age gate, which asks you when you were born so you can get through to shop for wine.

Not only is the big text for the month/day/year picker friendly, but that goofy headlines and "When were you last born?" copy is hilarious, if you catch the joke.

1. La Wine asks for a birth date before allowing you to enter the site.
2. The big text pickers highlight your value, and change the month or number to black when you’ve clicked a value.