Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

List Reorderer Wireframes

Owned by Daphne Ogle
Last updated: Dec 09, 2008Version comment
2 min read

Discoverability

To help users discover List Reordering

  • an informational message is available
  • hover text is on by default and is customizable
  • the mouse changes to a pointer


 
 

 Mid-drag

  • Indicate drop target with arrow and red line.  These are configurable and can be turned and off.  They are on by default.
  • Mouse becomes a hand while dragging.
  • The object being dragged is viewed as "ghost" avatar.  It should be slightly opaque so the item underneath are in sight.
  • Leave blank space where object was picked up from.
  • If number ordering is on, the number changes as the avatar is dragged to indicate the potential location (so there are 2 items with the same number).  Once the object is dropped, all other numbers update themselves.

 

     

Dropped

 To help user follow moved object:

  • Add a slight opaque highlight to item being moved.
  • Once dropped, slowly fade out the highlight over 2 seconds.

Number Reorder

For longer lists, it is easier for users to reorder using numbers.  Provide a configuration add-on to the component to allow users to change the order of a list via numbering.

  • Display current order to users in text entry fields for each item.
  • Allow user to change order by entering a new number.  On save (clicking out of field or enter), the item moves to its new location and all other numbers are updated respectively.

 

Undo

  • Make "undo last move" and "undo all moves" available after user has reordered.
  • "Undo last move" undoes one move.  It will then be disabled until the next move.
  • "Undo all moves" undoes all moves in this session.