Click and Swap, our alternative to Drag and Drop | Hacker News Reader

Click and Swap, our alternative to Drag and Drop

engineering.contentsquare.com

106 pointsfrancoismassot33 comments

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

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?

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.

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.

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

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

Also, most strategy games use left button select, right button go-to, which is ~sort of similar.

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.

> Pick and Plop

^^^ this is genius

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

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

I used a software that required you to drag the mouse to draw lines to connect components and I remember several other users getting pain in their wrists from the repeated dragging action with the mouse. The act of pressing the button and dragging seems to be much less ergonomic than moving the mouse alone. So I now think that two separate clicks should be preferred.

I feel like this discussion can’t be complete without dragon drop: https://mrcoles.com/dragondrop/

Ironically, on my browser (Firefox Android), the dragons just teleport as soon as I tap them.

Same on iPhone, although that seems to be mentioned on the page.

(For completeness: yes both Firefox and Safari, but that is to be expected as every other browser on iOS is just a skin, but you never know if a website looks up the user agent.)

LOL. As soon as I clicked on the dragon an extremely loud sound effect launched and my girlfriend said "I thought you were working" and I told her I was working on some "dragon drop" code, but she didn't buy it.

Every time I think about this problem (whether it's clicking-drag to re-order, or click-and-swap as described here) I always wonder if there's some smart "box packing" algorithm that will just distribute the elements with some "suggestions" (x,y) about where they should fit and let the algorithm place everything.

I've used react-grid-layout for a client last month and it seems to work like that: the (x,y) coordinates are only guidelines and the layout engine will try and do its best to solve for size and position constraints.

https://www.npmjs.com/package/react-grid-layout

The moment you release this you’ll get a feature request to pin items in place, and after releasing that everyone will pin everything rather than varying the constraints at their natural conceptual level, and this is how clever software degrades into crap.

I’ve seen this happen with a diverse range of systems, from firewall policy to music notation to workforce management.

Ensuring the algorithmic level continues to be more attractive than the explicit override remains one of the hardest problems of UX affordances. Step 1 is obtaining a deep affinity with domain-expert users, we must make it easy for the cynical to trust our algorithmic automation.

Is this how clever software degrades into crap, or is this how users work around "clever" software that isn't actually all that clever and constantly gets things wrong and moves stuff around just often enough to drive your spatial memory crazy?

I would love to see a demo to feel the UX. I'm not fond of drag and drop and really want to test the click and swap.

I too would like a demo. The more I watch less technical or impaired users use computers, the less I take for granted what is “obvious” or “fool-proof”. Dragging and dropping is not intuitive for everyone and is hard if someone doesn’t have good motor control or even if their mousepad is too small.

Another example would be the App Store’s “GET” (download button). My dad was tripped up because he didn’t recognize the icon denoting you already downloaded the app, but that it is not currently on your device (it’s a cloud icon with an arrow in it that is pointing down). It doesn’t help that the cloud icon is just an outline and loses all affordances that it is a button other than the colour blue.

Fwiw I hate drag and drop on left click, I wish it was on right click (or even better required a key press at the same time).

Its way to easy to accidentally do. I am often left with not know what happened and having to ctrl-z in my desktop environment.. something which is equally scary (something somewhere was undone).

Assuming you're on Windows 10, you can add the "Undo" button to the quick access toolbar in the upper left corner of File Explorer. Then you can hover over the button to see what it's going to undo.

It usually says “undo move file” or something like that, which may be the file you accidentally moved just now or a source file you moved intentionally two hours ago.

One thing that OS/2 did right IMO, using right mouse button for drag/drop.

It's (or was) terrible in windows when you accidentaly in "Program Files".

> It's (or was) terrible in windows when you accidentaly in "Program Files".

I think that you accidentally a word.

I have found that drag and drop is an awful UX pattern in recent years.

Via a physical mouse, it's fine. But trackpads are such a common set up these days and you cannot reliably drag and drop, especially since sometimes you need to lift a finger to drag further. The only solution I can think of would be to have a key that initiates a drag and you can hold the key while to continue the drag - but there's currently no standardisation in this pattern

The key difference between trackpads and mice that cause thus is that on a mouse a click and move are different physical actions, but on a trackpad the click and move are both uses of a single finger and cannot be invoked exclusively

Cool to see what looks like diagrams made in Excalidraw. Never thought I'd see a professional use case for messy diagrams, but I really enjoyed the look and feel of those diagram. It felt refreshing compared to the usual diagrams that I see which often lack artistic merit.

I‘m using excalidraw often at work. It really helps you to keep things simple. Prevents you from cramming several level of details into one diagram.

A lot of GUI paradigms can benefit from being a little less similar to their physical counterparts.

Especially visual programming. Probably would be way more successful if they would abandon the free "Put nodes anywhere and connect them" model for a lists-and -trees kind of model.

How is the grid-wrapper element able to reposition the grid-item elements on a state change? Probably not the render function, since there will be only a slot element inside grid-wrapper? Does it set the position after the render with setting inline css?

Drag and Drop is fiddly on touch screens and even on touchpads.

Reply on news.ycombinator.com