Selecting elements and then acting on those selected elements is very common pattern in web interfaces. There are four basic ways to select elements:

• Toggle Selection: checkbox or checkbox-like selection.
• Dedicated Selection: selected elements are show in an area dedicated for the selection.
• Direct Selection: desktop operating system-like selection of visible elements.
• Hybrid Selection: combination of toggle, dedicated and/or direct selection.

Make selection visually explicit. Highlight the whole selected elements doing any kind of selection. Table layout should highlight the whole row and direct selection should highlight whole intractable are around the selected element.

Offer a "select all" action. If offering a "select all" action, consider providing additional action to select all elements across all pages.

Show number of elements selected. The number should be visible at all times or near the action buttons. Reduces amount of errors, especially if on some browser sizes all elements are not visible.

Visually disable actions that are not available for the selected set. E.g. nothing is selected, dim out the delete action button. Optionally include a tooltip informing why the action is disabled.

Use toggle selection for selecting elements in a row. Toggle selection is common when elements are shown in a table layout. Actions should only apply to the selected items on the visible page.

Use dedicated selection if allow selection across page boundaries. Accumulate the selected items from each page into a separate area. This makes the selection explicit even when moving from page to page.

Use direct selection when selectable elements can also be dragged. Users all used to desktop style interactions so you should leverage that. Clicking empty space should deselect all direct selections. Dragging over multiple elements should select them all.

You should generally avoid double-click in web applications. However, when web application looks and behaves like desktop applications, double-click can be appropriate. But also provide an "open" action button.

Always implement keybindings with direct selection. Shift to extend selection and Ctrl/Cmd for discontinuous selection.

Sources

• Designing Web Interfaces, Bill Scott, Theresa Neil