I'm developing a drag-and-drop reordering interface for books on shelves.
(You can try it live if you're on the latest WebKit.)
When you drag a book over a shelf, it accommodates space for it by shifting nearby books to the right.
Accordingly, when a shelf loses hover, the previously accommodated free space collapses.
.
If this doesn't make sense to you, please see it in action, for a drag is worth a thousand of words.
To my taste, this looks pretty sweet, except for the case when the shelf is already packed.
In our example, a shelf can contain no more than five books.
So what should happen when you hover over a shelf that has exactly five books?
I was thinking hard on this, and I'm not sure I found a satisfactory answer yet, hence this question.
I'm considering several options which I will briefly explain below.
All of them have their pros and cons, and I'm open to community's opinion on which one is better and whether there are some solutions I haven't thought of in the first place.
Okay, so that's what I came up with so far.
We can “overflow” the shelf immediately by moving rightmost book to the next shelf.
This solution is pretty straightforward.
We need some space, we ain't got any—let's free some by moving the last element to the next shelf.
Now we do have some!
This is the way the demo operates now.
Unfortunately, this solution has two major drawbacks that render it unusable in practice:
- It messes up user's order of books before an action is even completed.
- If the next shelf is also packed, it will have to overflow as well, and so on.
This leads to cascades of overflowing shelves if dragging over an almost packed bookcase.
This will most definitely suck.
I guess the takeaway lesson here is don't ruin user's order of books unless absolutely required, and never do it before the drag is over.
So we come to the solution #2.
We can clump the books together to free some space.
We can't avoid overflowing altogether unless we forbid dropping on packed shelves at all.
Nevertheless, we are free to only overflow after drop, and keep the layout unchanged while dragging.
This will balance overflow's negative impact on user's order of books with user's conscious decision to change it by placing a book in the middle of a packed shelf.
All in all, this solution seems better than the first one but poses several other problems:
- How do you beautifully clump the books together?
- How do you let the user know that the overflow is going to happen after drop?
Coverflow-like clumping seems to suggest that books will stay clumped but this isn't the case.
There are also other options I haven't really thought through—for example, we may decide to allow more than five books on the shelf by emulating spines. This is precisely the way real books and shelves solve this problem.
We may enter “spine mode” once the shelf is packed.
However, this could make UI unnecessary more complicated.
To wrap up the post, I'm looking for answers to these very specific questions:
- Which do you think is a better solution in terms of UX?
- What other solutions to the problem described can you think of?
- Has a similar problem been solved before by someone? How?