Quicken Product Comparison Table and Wizard

When a software company's product family grows, it can be quite difficult for customers to figure out which product is right for their needs. Quicken is one of those examples where the number of products is overwhelming. They try to help customers with a product comparison table provides a basic checkbox chart of all product feature categories, with product names and prices along the top of the table, and rows of feature categories, with checkboxes to indicate which products match which features. Each feature category can be expanded to show more detail about features within corresponding categories. For prospective customers who don't want to make sense of the text heavy table, a simple wizard provides a questionnaire that asks what the customer's needs are, and displays the product that best meets their needs.

1. Comparison table showing all Quicken products and the feature categories offered.
2. Users may expand feature categories to get more detailed information about what feature coverage is offered. Users may also expand or collapse all features.
3. A wizard questionnaire aims to make product selection simpler by asking what the customer's needs are.
4. A solution is displayed after checking all of the customer's requirements.

http://quicken.intuit.com/compare_products.jsp

Target Drop Down Menus

Target's global navigation features wide, multi-column drop-down menus that stretch to the full width of the page layout. The columns in the drop down show hierarchical lists of product/section contents using font weight and indentation, and additionally allow the company to promote special events.

1. Drop down for the "Women" section shows a multi-column hierarchical list of all product sub-categories.
2. The "See All" menu item allows the site to show other product categories that aren't being featured.

http://www.target.com/ref=nav_2_t_logo

Twitter Confirmations

Twitter provides a subtle, unobtrusive notification messages, e.g. when a direct message is sent. The confirmation appears as a layer with a white background over the top of the page, covering the page header, and unfortunately, not providing a more obvious "Close" link to dismiss the message. The message can be easily dismissed by clicking anywhere in the div, but that's not readily apparent.

1. Direct message interface.
2. Confirmation that direct message has been sent appears as layer over the top of the page.

http://twitter.com/home

Apple Support Email Button

The Apple Support site features a very simple "email this page" button in the upper right of the screen along with other tools like print and call support. The email widget starts out as an envelope icon. When clicked, the icon slides to the left and an input appears with a "To" label and a "Send" button. The user simply enters the recipients address and presses send. An AJAX progress spinner appears briefly, then a confirmation message, and the form collapses back to the icon. Can't get much simpler than that.

1. Page tools showing mail icon in the right.
2. Clicking the icon reveals simple email form.
3. Clicking send displays AJAX progress spinner, then confirmation. A few seconds afterward, the form collapses.
4. Email received.

http://www.apple.com/support/

Shelfari Hybrid Buttons, Revised

We covered Shelfari's hybrid button in their list views of bookshelf items. That example showed a single push button with an attached icon for drop down menu. The single button allowed for the use of a default behavior, while the drop down arrow allowed for the display of other options for the item. The drop down menu allowed users to make multiple selections, i.e. using checkbox behaviors, rather than just select one value in the drop down list.

Timothy Gray reported that they did some usability testing on the feature and made some improvements to try to help users with what was perceived to be "overloaded." To this end, they've separated the default button, which now shows an "Add" or "Edit" state, depending on whether the item is in your shelf. Clicking Add toggles the button to Edit. Clicking Edit now displays options in a dialog with pagination and tabs to step through the options.

The old drop down feature of the hybrid button is now placed in a separate drop down button. I'm still not sure why there's a need for checkboxes here. Radios for single selection might be even simpler. Am guessing they're trying to address an edge case where someone has read and is now re-reading? I wonder if they can simplify that. I do like the little chicklet button bar at the bottom.

1. List of items with Edit/Add buttons shown for each item.
2. Clicking Edit displays a dialog with user's options for editing that item in their "shelf."
3. Some items, like date in this screen, display more options. The options in this area were a little confusing to me, and I seem to have broken the add/delete behavior there.
4. Tabbed panels break up and step the user through the editing options.
5. The Add/Edit and Drop Down buttons shown here within a tab of the dialog.
6. The drop down menu with "quick edit" options. Still checkboxes rather than radios.

http://www.shelfari.com/

iTunes Ratings

The iTunes Store allows customers to rate items and displays the average rating and total ratings below the product image. They use a disclosure arrow to allow customers to view a breakdown of ratings by number of stars.

1. Customers' average rating, and form select to add your own rating.
2. Expanded ratings break down after clicking the disclosure triangle.

http://www.apple.com/itunes/

Aardvark Registration

The registration process on Aardvark provides a modal dialog that uses some nice content previews, content filtering, and progressive disclosure to guide the new user through the form.

1. Clicking sign up button from an invitation opens modal dialog with basic information form. A preview area updates your info as you fill out the form.
2. The birthday input filters and corrects date format. City/State shows suggestions. (The one in yellow is a browser auto-completion.)
3. A conditional select is shown for neighborhoods matching my city.
4. Following entry of email/password, additional fields are disclosed in the dialog.
5. Confirmation dialog is displayed.

http://vark.com/

Netflix Undo

Netflix offers an undo function in their Queue that allows users to undo a remove action. Users click an X icon to remove a movie from their queue, and the row is grayed out, showing an undo text link replacing the remove icon. The row persists until the user moves to a different page, so several removed rows may be visible if the user does repeated removes in one session. Upon return visits to the queue, the removed movies will be gone.

Prior to adding this function, clicking the remove control would simply remove the list from your queue, so if the user made a mistake, they would have to navigate back to the removed movie to add it back. The undo allows users to recover from mis-clicks or if they change their mind about watching that movie they just axed.

1. Section of a movie Queue.
2. Hovering over a movie row.
3. If the user clicks the X icon, the movie is removed, but the user may undo their action.

http://www.netflix.com/MemberHome