Drag and Drop Order UX Pattern

This has been covered pretty extensively, but I often find myself wanting to have some stuff compiled for easy access.

Drag and drop patterns are different depending on what you are doing, but I generally put them into two camps.

Grid drag-drop

The two most obvious examples are a spreadsheet and a Tree. GMail uses this method for some situations as well. The reordering has the following characteristics.

  • The original row stays put but is highlighted in some way
  • The drop target is indicated by a single stroke (vertical or horizontal depending on row or column dragging.)
  • No 3D effect or animation
Reorder column in Google Sheet

Another example of this is a tree.

Reorder in a tree

You should use this style of dragging and dropping when your content is in a structure that 3D would be confusing. This is especially true in a table. Removing a row or a column would be potentially strange.

Content drag-drop

This alternative is more immersive and is used for moving cards and other kinds of content. It has the following characteristics:

  • The original item is removed from the stack completely
  • The dragged item is moved towards the user in the z-dimension
  • As the user drags, it moved content out of the way and makes room for the new content.
  • Animation is not always used, but enhanced the effect.

The gold standard of this is Trello. When introduced, this was a breath of fresh air. The little tilt of the item was perfect and made the entire reorder operation feel comfortable, obvious, and clear.

Trello – The gold standard. Notice to tilt.

My favoite JavaScript example is Beautiful Reorder Demo using React Motion

React Motion

The animation is gorgeous and makes me happy just playing with it. It is the example I use when I want to introduce sorting of complex content into any application.

Some people may see the animation as a waste of engineering resources, but I think that the UX benefits far outweigh the cost. UX is a huge advantage if you put in the little details like this. It will increase task completion, loyalty, and brand identity. Don’t skimp on the UX! (Says the UX guy!)

The cursor

In both techniques, you should change the cursor when you hover something sortable. The hand open/close is best. I used this in Marketo in 2007. Worked great! I stole it from the Netflix queue UI.

Use the hand cursor

Research

Did I miss anything?


Whatya think?