Rather than using alternating row shading (a common technique to help differentiate rows), the Netflx queue highlights a row when you roll your mouse over it. This, combined with the generous amount of white space between rows, makes it easier to read across rows. It also makes for a cleaner, simpler layout compared to using alternating row shading (click to see full-sized image).
If you forget your password on the Fine Cooking web site, you gain access to the site without waiting for your password to be delivered via email.
Step 1:
Step 2:
Step 3: (Note the option here to automatically log the user in.)
Step 4: I'm logged in
This process obviously relies heavily on the security question and may not be as secure as requiring the password recovery via email. But it has the advantage of being quick and easy... in just a few short steps the user has access to the logged-in version of the site.
Every web-based application I've worked on recently requires some degree of paging when the system returns large number of search results. The reason is performance constraints. While some search engines are able to present results using an infinite scroll (see Live image search), most systems seem to bump into performance limits as to how much can be loaded into a page.
Commonly, items that are distributed over a number of pages are subject to a "Select All" command. In this situation, the following question always comes up: Do we just select the items on the current page or do we select all items across all pages?
Gmail has a nice solution to this: give the user a choice.
By default, Gmail just selects the items on the current page. But it gives you a handy link at the top of the list to select across all pages (click to see full-sized image):
Here's how it looks when items are selected across pages:
This approach doesn't completely resolve the question, though, because you must select default behavior here (select single page or select across all pages).
In a study I recently completed, I found that users expected "Select All" to do just that--select all items across all pages. The interface we tested gave users feedback on the number of items selected, but participants still wanted to check at least one other page to confirm that everything was indeed selected. This was a system participants used on a daily basis, and a few stated that they would just do this check the first time, but would subsequently feel comfortable the system had selected absolutely everything.
It's interesting to examine the various approaches web mail applications use for selecting multiple items (messages) in a list.
Yahoo mail provides check boxes but also lets users use Shift + Click and Ctrl + Click--the way you would multiple-select items in a desktop application. Regardless of how the selection is made, the item is both highlighted and its check box is checked:
Windows Live Mail uses the identical approach, except the check boxes for individual messages aren't visible until you roll your mouse over an item (or select it):
Gmail relies on check boxes, but it also provides links that allow you to make selections based on the message state (read, unread, starred, etc). Shift + Click and Ctrl + Click don't work in Gmail, however.
.Mac mail dispenses with the check boxes all together and relies exclusively on Shift + Click and Ctrl + Click for selecting multiple messages.
Epicurious.com reserves a portion of its global navigation bar to highlight seasonal information. Currently, this area displays a "Super Bowl" link (click image to see full size):
Visually, I think this works effectively because of visual weight given to the navigation bar (a deep, rich green) and the "white space" surrounding the seasonal link under Articles & Guides. I personally never fail to notice this link when I visit the site.
Using the link, however, is a bit tricky. It's easy to accidentally roll your mouse over the hot spot for the fly-out navigation instead, which covers up the link. It takes a relatively precise mouse movement to actually click the seasonal link.
The "My eBay" area of eBay uses a system of dynamic side-tabs for navigation to child (subordinate) pages. Here are the tabs in the normal state:
Here is the "Saved Stuff" tab in the rollover state:
Once you click on a tab it stays open; closing the previously-active tab:
I think this is an interesting approach to help de-clutter a left navigation bar, which can sometimes contain an overwhelming number of links. The key, however, would be clear groupings of links--with labels that convey a strong "information scent" of the underlying links.
Where there is a clear primary action (and related secondary actions) using a segmented button lets you present the actions together in a compact manner.
The primary action in the example below (from Microsoft Excel 2007) is Paste:
Clicking the upper segment of the button initiates the primary command.
Clicking the lower segment of the button displays related secondary commands, with the primary command repeated at the top of the list. The primary command is visually emphasized with an icon:
Yahoo Mail uses the same approach with a horizontally-oriented New button. The primary action is creating a new email message.
Secondary actions are creating a new chat and creating a new text message. These are displayed by clicking the right end of the button. The primary action (email message) is emphasized at the top of the list with bold text.
The options for selecting an arrow size in Visio never fail to make me chuckle:
The relative size descriptions are not very precise (though in Visio's defense they do provide a preview of the size once you select an option). It makes me want to see what might lay beyond Jumbo and Colossal... perhaps Ginormous?... or Humongous?
In this situation, it's probably clearer to show the arrow sizes rather than describe them. PowerPoint does this--though it's always struck me odd that it uses a variety of arrow types (rather than a single representative type or the arrow type you've selected.)
Showing relative sizes is one approach. The other approach is let users specify an exact (absolute) size--as with line width in PowerPoint (specified in points).
This approach has the advantage of giving users precise control over the size, but it may be hard to visualize the size you are selecting. (PowerPoint does dynamically change the line width on the page as you make selections in the dialog, but users may not notice this, particularly where the dialog is over the line you are editing.)
Visio provides some "pre-set" line sizes that are shown visually, with the option to set an absolute size via the More Line Weights... option.
MindManager provides no option to enter an absolute line width, but does provide the point size next to each line width option for reference:
In the days when applications were delivered via desktop software and web sites were mostly content, there was a prevailing opinion on frames: while they were appropriate for desktop software they were verboten for web pages. The argument was that framed web pages broke users' mental model of a single page controllable by the browser scroll bar.
Now, with so many applications migrating to the web, frames are increasingly part of the web experience. The most effective implementations use application-like frames minus a browser scroll bar. Yahoo mail is an example of this approach (click to see full-sized image):
Google docs is another example of application-like frames--the interface has a single scrollbar on the right, which controls the text authoring/editing frame.
In contrast, the text authoring/editing experience for Typepad can result in "dueling scrollbars"-- a scrollbar for the text area in addition to the browser scroll bar. This creates unnecessary complexity in the interface...and it's too easy to grab the wrong scroll bar:
Amazon has a treatment of its logo that I haven't seen before. When you roll over the logo, it indicates that it links back to home:
Normal state
Rollover state
This would seem to be helpful, but I wonder if practically it really is. We've found in testing that while some users understand a site logo typically navigates back to home, many users don't make this association (and therefore never think of clicking or rolling their mouse over the logo). So, I suspect this design approach is helpful only as additional feedback for users who are inclined to click the logo to begin with.
