O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hybrid Selection

Mixing Toggle Selection and Object Selection in the same interface can lead to a confusing interface. Referring back to Yahoo! Bookmarks, you'll see an odd situation arise during drag and drop (Figure 3-14).

image with no caption
In Yahoo! Bookmarks, one item is selected, but two items can be dragged by dragging on the unselected item

Figure 3-14. In Yahoo! Bookmarks, one item is selected, but two items can be dragged by dragging on the unselected item

Considerations

There are a few important issues to consider when using Hybrid Selection.

Confusing two models

In the left panel of Figure 3-14, one bookmark element is selected (notice the checkbox Toggle Selection). The second bookmark element ("Dr. Dobb's") is unselected (the checkbox is clear). In the right panel of Figure 3-14, clicking and dragging on the unselected bookmark element initiates a drag. The drag includes both the selected element and the unselected element. Since only one is shown as selected, this creates a confusing situation.

This occurs because three things are happening in the same space:

  • Toggle Selection is used for selecting bookmarks for editing, deleting, etc.

  • Object Selection is used for initiating a drag drop.

  • Mouse click is used to open the bookmark on a separate page.

The problem is that more than one interaction idiom is applied to the same place on the same page. In this case, if you happen to try to drag, but instead click, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required