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

Drag and Drop Invitation

When we discussed drag and drop in Chapter 2 we stressed the challenge of getting the interaction right. There are more than a dozen interesting moments of interaction in any drag and drop interaction (see Figure 2-2). Many of these moments are opportunities to provide Drag and Drop Invitations.

The Events

In Chapter 2, we listed 15 different events that are available to the designer to cue the user during a drag and drop interaction. Here are the 15 drag and drop events we listed in that chapter:

  • Page Load

  • Mouse Hover

  • Mouse Down

  • Drag Initiated

  • Drag Leaves Original Location

  • Drag Re-Enters Original Location

  • Drag Enters Valid Target

  • Drag Exits Valid Target

  • Drag Enters Specific Invalid Target

  • Drag Is Over No Specific Target

  • Drag Hovers Over Valid Target

  • Drag Hovers Over Invalid Target

  • Drop Accepted

  • Drop Rejected

  • Drop on Parent Container

As with any complex interaction, it is key to guide the user through each step. Given this many interactions, it's important to show invitations at key moments.

While at Yahoo!, I (Bill) worked on the Yahoo! for Teachers product. A key feature is the Yahoo! Gobbler™, which allows teachers to grab text clippings, images, and links from pages around the Web and "gobble" them back to their classroom projects (Figure 10-10).

image with no caption
Yahoo! for Teachers Gobbler uses several invitations during a drag and drop interaction

Figure 10-10. Yahoo! for Teachers ...

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