top | item 30042155

(no title)

DGCA | 4 years ago

I worked at an ed-tech startup that allowed teachers to use our bank of questions to create assignments for their students. We found that drag and drop came with a few issues, such has having to implement keyboard accessibility separately from the drag and drop mechanism, moving things when the number of items is big, and some general confusion around certain UX.

The solution we ended up with, which is similar to the OP, is what we affectionately called Pick n Plop. I.e. you select an item, the UI tells you where it can go, and you click again to place it. You get keyboard accessibility for free since it's just buttons.

Demo right here (sorry for the terrible quality): https://giphy.com/gifs/9KgZorKdwdsaolomxS/fullscreen

discuss

order

panic|4 years ago

I always liked how Hearthstone (the digital card game) combines this style of interaction with traditional drag-and-drop. If you click and drag a card, you drop it by releasing the mouse button as you traditionally would. But if you click the card without dragging, the card is picked up and remains held until you drop it by clicking again. You can choose which interaction you want in the moment, and the combination feels quite natural.

DarylZero|4 years ago

Every chess program I can remember is also like that (xboard, lichess, chess.com).

sleightofmind|4 years ago

The gnome aisleriot collection of solitaire games has something similar. Select menu item Control, then Click To Move. It's not quite as visual as what you describe, though. Once you get used to it, conventional drag and drop is a pain.

Another solitaire game did it even better -- more visually -- PySol maybe?

Although I am not a programmer, I "wrote" a program to allow rebar detailers to create bar lists and cut lists for bills of material for rebar fabricators. For moving whole line items, I required the user to:

* Highlight some portion of each of the lines to be moved. * Click a target line. * Enter A or B to move the selected line items above or below the target line. This allowed me to paste above the topmost line.

Now admittedly, while this is a bit clunky and woefully unconventional, I did this because I didn't want to stop and learn the drag and drop protocol for Tkinter -- again, I'm not a programmer. But there was also concern on my part that eventual users could misplace some line item in the middle of a big group of lines inadvertently, and not be able to easily reconstruct what had just happened.

Conventional drag and drop is seemingly designed to increase fatigue and error, and diminish patience.

I just wanted to make something I could use and perhaps polish it later for use by others. I scratched my immediate itch, and the secondary itch hasn't flared up for quite some time.

francoismassot|4 years ago

Yes indeed, love that too, "Click and Drop" is nice.

francoismassot|4 years ago

Not bad but I feel like a hover on the item would be nicer than having to click on the button. I guess the button is only for reordering right?

DGCA|4 years ago

Yeah, the blue button in each question item is only for reordering. You can move questions without clicking on them first, btw; not sure if my demo communicated that.

I.e. If you click the question item (but not the blue button), the question is visible on the right. If you click the blue button in the list, the question goes into reorder mode. Those two things are separate from each other, so you can reorder a question that's not currently active.

ratg13|4 years ago

I think a lot of heavily used UI tends toward this.

Like drivers license test kiosks and playing solitaire on life fitness machines.

pygy_|4 years ago

> Pick and Plop

^^^ this is genius