Build a pattern library - help your team create better user interfaces! Take the tour or sign up for free.

Drag and Drop Modules

Also known as:

Tags: actions

Drag and drop idiom allows the user to move items from one place to another within a browser page directly without the need of moving into a separate mode to do this.

Drag and Drop Modules allows “modules” to be organized and arranged using drag and drop. The pattern is common in portals such as iGoogle, My Yahoo!, and Pageflakes, which allow users to personalize displayed content.

There are a number of event states (or interesting moments) and actors in a drag & drop sequence. The key interesting moments are initial page rendering, mouse hover over draggable object, drag initiated, drag over valid target, drag over invalid target, drag over original location, drop accepted, drop rejected, and drop back on original location.

The four interface actors are the cursor, a module (or thumbnail representation of same), the original location of the module, and a drop target.

iGoogle is a customizable homepage. It lets the user drag and drop modules around to re-arrange the layout. The page is rendered without any help hints that would tell the user that drag and drop is available. An invitation to drag is shown on hover. When the user moves the mouse over module’s header, the cursor changes to indicate that it is draggable. Also on mouse hover, the move cursor is shown in the module’s toolbar. On mouse down, the drag gets initiated, the module moves few pixels, and a “hole” (with gray dashed outline) is shown in the original location. When the user moves his mouse, a “ghost image”, a slightly transparent version of the module being dragged follows the mouse. While dragging, the “hole” moves. The “hole” is a placeholder target that tells the user where the module will be dropped on mouse release. And as the placeholder target moves, other modules move out of its way. Note that the placeholder moves to a new spot when the midpoint of the dragged module moves over a valid target area. An alternative way to show insertion target would be to keep the page always stable and show a thin insertion bar where the module would be dropped instead of using a “hole” as an insertion target. When the user decides to drop the module to a new spot, the slightly transparent module that is being dragged moves to the new spot, and the hole is removed.
Source: http://www.google.com/ig

iGoogle is a customizable homepage. It lets the user drag and drop modules around to re-arrange the layout.

The page is rendered without any help hints that would tell the user that drag and drop is available. An invitation to drag is shown on hover. When the user moves the mouse over module’s header, the cursor changes to indicate that it is draggable. Also on mouse hover, the move cursor is shown in the module’s toolbar.

On mouse down, the drag gets initiated, the module moves few pixels, and a “hole” (with gray dashed outline) is shown in the original location. When the user moves his mouse, a “ghost image”, a slightly transparent version of the module being dragged follows the mouse.

While dragging, the “hole” moves. The “hole” is a placeholder target that tells the user where the module will be dropped on mouse release. And as the placeholder target moves, other modules move out of its way. Note that the placeholder moves to a new spot when the midpoint of the dragged module moves over a valid target area. An alternative way to show insertion target would be to keep the page always stable and show a thin insertion bar where the module would be dropped instead of using a “hole” as an insertion target.

When the user decides to drop the module to a new spot, the slightly transparent module that is being dragged moves to the new spot, and the hole is removed.

What problem does the pattern solve?

  • You want to avoid forcing the user to go to another page in order to re-arrange the layout.
  • You are designing a web page made up of modules from a variety of sources and offering user personalization (such as iGoogle)

When to use it?

  • You want to avoid forcing the user to go to another page in order to re-arrange the layout.
  • You are designing a web page made up of modules from a variety of sources and offering user personalization (such as iGoogle)

How to use it?

Drag and drop interactions can be very complex. The complexity lies in the number of event states (we call these event states interesting moments) that can be used in a specific drag and drop sequence.

In addition, there are a number of on-screen elements (actors) that can be styled, positioned or animated for each of the given event states.

For dragging and dropping modules the set of interesting moments and actors is smaller. Here are the most pertinent interesting moments for Drag and Drop Modules:

  • Page generation (for what gets shown when the page is first rendered. Before the user starts using the drag and drop functionality, he needs to understand it is available.)
  • Mouse hover (Change cursor to a hand when hovering over an object that is draggable.)
  • Drag initiated (mouse down, mouse moves. Usually the drag threshold is 3pixels.)
  • Drag hovers over a valid target area.
  • Drag hovers over an invalid target area
  • Drag hovers over the original location
  • Drop accepted
  • Drop rejected
  • Drop back on original location

On a page with content modules, the following user interface elements (actors) may participate during each interesting moment.

  • Cursor
  • Module or thumbnail representation of module
  • Original location of module being dragged
  • Drop target (or insertion bar showing where module will be dropped)

Interesting Moments Storyboard Grid

At each interesting moment in the drag and drop interaction, an actor gets involved. This grid captures each of these interactions that occur while re-arranging page modules during a drag and drop sequence.

Interesting Moments Storyboard Grid

Download a copy of Bill Scott’s Drag and Drop Storyboard Template. The file is a .xls file.

The drag and drop solution is described below in detail. Note that drag and drop solution varies slightly in different web sites, and thus the one described here is not the only way to implement it.

Page Generation

  • Since the idiom of drag and drop is not yet common in web pages, it is difficult to understand when an object is draggable and droppable. One solution is to provide an initial help hint that clues the user that modules may be re-arranged by drag and drop. This hint should go away after the user has used the feature a few times or after a set number of logins.

Mouse Hover

  • Cursor Change. Change the mouse cursor to indicate that the item is draggable.
  • Optionally: Provide a tooltip when the mouse hovers over the draggable region of a draggable object. Tooltip informs the user that they can drag and drop the module. (see “Hover Invitation”) In testing, user’s did not seen to need this additional feedback. The cursor change provided on hover was sufficient.

Drag Initiated (and Tracking)

  • Drag Module
    • Module moves to match mouse movement (starts tracking with the mouse location).
    • Opacity is reduced slightly to allow modules and page elements underneath to show through. Reduced opacity is maintained throughout drag experience. Module floats above the other page elements.
  • Original Area. Since module is moved, a “hole” appears at the module’s original location.

Drag over Valid Target Area

  • Drop Target Area. A thin insertion bar is shown where the module would be dropped (between two other modules).

Drag over Invalid Target Area

  • Cursor Badge. An “Invalid Badge” is floated beside the cursor to indicate that dropping here will be rejected.
  • Drop Target (Insertion Bar). None.

Drag over Original Area (the “hole”)

  • Cursor. Move cursor.
  • Dragged Module. Consistent with dragging (reduced opacity, etc.)
  • Drop Target (Insertion Bar). None.

Drop Accepted

  • Cursor. Returns to normal cursor
  • Drop Target. Insertion bar is removed
  • An animation sequence occurs to put the module into the new location
    • Drop Target.
      • Insertion bar is removed.
    • Hole opens for new area.
  • Dragged Module.
    • Dragged Module animates into the new area (as it opens)
    • Opacity animates to normal
  • Original Area.
    • Area closes up with animated transition to smooth out layout changes (See Self-Healing Transition in Yahoo!'s library)
      • Causes the other modules to close in around the original hole

Drop Rejected

  • Cursor. Returns to normal.
  • Dragged Module.
    • Animates back to original position (“the hole”) — zoom back.
    • Opacity increases to full opacity.
  • Original Area. Is not filled with the module back in original position

Drop on Original Area

  • Cursor. Return to normal.
  • Dragged Module.
    • Animates back to original position (“the hole”) — zoom back.
    • Opacity increases to full opacity.

Why to use it?

  • Drag & Drop idiom makes the interface more direct and interactive.
    • It allow the user to re-arrange the layout of modules directly in context. The user doesn’t need to switch to an edit mode.
    • The feature for moving the modules is just one click away, making it easy and fast to use.
    • The user can see the new layout immediately.

Accessibility

  • Drag and drop is not fully accessible. One way to support accessibility is to provide an alternate way to re-arrange your content modules. On My Yahoo! you can select a “Change Layout” feature which takes the user to another page allowing them a way to re-order the content modules in lists.
  • Module order may not matter as much to a non-sighted user. If the content modules have been created with good structural HTML markup they should be able to move from module to module quickly. However, they may still want to change the order of the content modules allowing them to access the most important modules first.
  • When highlighting drag and drop source and destinations, pick colors carefully avoiding strange color combinations and/or lack of contrast. Good contrasting color combinations can help those with limited sight to find targets much easier. Possibly allow users to configure their own selection of colors for future use.

Sources

Drag and Drop Modules in Open Design Patterns

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (1 example)

Comments

  • Figure.10 (www) Dec. 22, 2010 08:21

    Wordpress uses these on both their .com and .org versions.