6 ms·

Click and Swap, our alternative to Drag and Drop

106 points by francoismassot 5y ago

wildrhythms 5y ago
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.
- franky47 5y ago
  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 https://www.npmjs.com/package/react-grid-layout
- inopinatus 5y ago
  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.
  - deleted 5y ago
    [deleted]
  - egypturnash 5y ago
    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?
francoismassot 5y ago
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.
- lawkwok 5y ago
  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.
DGCA 5y 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 https://giphy.com/gifs/9KgZorKdwdsaolomxS/fullscreen
- francoismassot 5y 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 5y 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.
- panic 5y 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.
  - 5y ago
TheRealNGenius 5y ago
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.
- scary-size 5y ago
  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.
aaron695 5y ago
goodlinks 5y ago
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).
- Mindless2112 5y ago
  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.
  - wruza 5y ago
    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.
- silon42 5y 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".
  - dotancohen 5y ago
    > It's (or was) terrible in windows when you accidentaly in "Program Files". I think that you accidentally a word.
twobitshifter 5y ago
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.
jon_richards 5y ago
I feel like this discussion can’t be complete without dragon drop: https://mrcoles.com/dragondrop/ https://mrcoles.com/dragondrop/
- lolinder 5y ago
  Ironically, on my browser (Firefox Android), the dragons just teleport as soon as I tap them.
  - skinkestek 5y ago
    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.)
- kingcharles 5y ago
  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.
eternityforest 5y ago
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.
oncode 5y ago
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?
Flimm 5y ago
Drag and Drop is fiddly on touch screens and even on touchpads.
conradludgate 5y ago
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
- conradludgate 5y ago
  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

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.

franky47 5y ago
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 https://www.npmjs.com/package/react-grid-layout
inopinatus 5y ago
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.
- deleted 5y ago
  [deleted]
- egypturnash 5y ago
  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?

francoismassot 5y ago

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.

lawkwok 5y ago
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.

DGCA 5y 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 https://giphy.com/gifs/9KgZorKdwdsaolomxS/fullscreen

francoismassot 5y 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 5y 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.
panic 5y 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.
- 5y ago

TheRealNGenius 5y ago

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.

scary-size 5y ago
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.

aaron695 5y ago

goodlinks 5y ago

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).

Mindless2112 5y ago
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.
- wruza 5y ago
  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.
silon42 5y 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".
- dotancohen 5y ago
  > It's (or was) terrible in windows when you accidentaly in "Program Files". I think that you accidentally a word.

twobitshifter 5y ago

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.

jon_richards 5y ago

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

lolinder 5y ago
Ironically, on my browser (Firefox Android), the dragons just teleport as soon as I tap them.
- skinkestek 5y ago
  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.)
kingcharles 5y ago
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.

eternityforest 5y ago

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.

oncode 5y ago

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?

Flimm 5y ago

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

conradludgate 5y ago

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

conradludgate 5y ago
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