Date: 2008-11-02 11:52:02 Created: null
I have spent most (or did I? It sure feels like I did, but maybe it was just the most fun part ...) of my working day creating a list sortable by drag and drop for a web-based project at work. What dawned on us (after the initial surprise that things pretty much started working right away and that we didn't run into any snags) was how few ways to indicate dragability there are which feel intuitive. Indicating that something in an interface can be dragged around doesn't seem too common, and lists which you can reorder by dragging even less so. We came up with two sources of inspiration where the ability is actually indicated.
The first one was the indicator symbol on mobile OS X for reordering lists. I tried throwing it onto our draggable elements but it didn't look too in place on a web page.
The second one was a bit more general, and it was the fact that toolbars and window corners you can grab onto often seem to have a pattern resembling a somewhat rough or uneven surface. This feels like it's more for elements you either resize or can pull free of a container, but I still think we'll give it a try and see if it makes things look more natural.
Another area we thought a bit about was if we could make the list feel better by making it stand out more from the surrounding page. It seems to me like it ought to seem more natural if the elements felt a bit more physical. I kind of like a few of the tests we did in this direction, but it's a real challenge to do this and also manage to keep the list in harmony with the rest of the page/site.
In the end a professional designer will probably have a go at this, but it's still great fun to try and think about the problem. Has anyone seen a site using a drag-sortable list which both fit in with the site, looked good and felt intuitive to use?