Selection

Using a button for selection feedback

A previous post shows how form buttons can be used for in-progress feedback.

Buttons can also be used for selection feedback, as shown in this example from FriendFeed:

Dynamicbutton_blur

This approach can be particularly helpful when users are selecting from a long scrolling list  or over multiple pages.

Selecting Items Across Multiple Pages

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):

Selectall1

Here's how it looks when items are selected across pages:

Selectall2

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.

Selecting items in web mail

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:

Yahoomail2

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):

Livemail

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.

Gmail2

.Mac mail dispenses with the check boxes all together and  relies exclusively on  Shift + Click and Ctrl + Click for selecting multiple messages.

Macmail3

My Photo

About

  • Blink Interactive is a Seattle-based user experience consulting firm. Our design library is an informal collection of design examples with commentary.

Search

Widget

  • Get this widget from Widgetbox