Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Picknplace.js, an alternative to drag-and-drop

jgthms.com

Post reply on HN
Print view View original

131–140 of 158 posts

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#131

Post by chuckadams »

jotaen wrote: post #109
killerstorm wrote: post #60

Earlier quoted context omitted.

> On desktop (using a mouse or trackpad), drag and drop actually works quite well. Strong disagree here. It is intuitive, it is easy to demonstrate. But it's not really convenient, especially on a trackpad. I have enough mouse agility to play RTS games but not to do a reliable drag-and-drop, especially in a complicated case - across windows, with scroll, etc.

On macOS, I find “3 finger drag” very convenient to use, and for me it works a lot better than “press and hold”. ( https://support.apple.com/en-us/102341 ) It even allows you to briefly lift your fingers to reposition them on the trackpad without stopping the drag action.

Found the well-hidden setting (you'd think "Trackpad" would be an obvious place for it), enabled it, and wasn't exactly jazzed: if I lift my fingers for more than half a second (say, to cmd-tab with the same hand), it releases. And you can't have both three-finger-drag and drag lock enabled, so drag lock it remains for me.

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#132

Post by csomar »

jotaen wrote: post #13

This looks like an interesting concept! > I find that the drag and drop experience can quickly become a nightmare, especially on mobile. To me, drag and drop is only a nightmare on mobile. On desktop (using a mouse or trackpad), drag and drop actually works quite well. Your design experiment reminds me of a recent talk of Scott Jenson, where he talked about how we just took over established UX patterns from desktop t…

> On desktop (using a mouse or trackpad), drag and drop actually works quite well.

I have a feeling it makes RSI worse.

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#133

Post by nailer »

Placing doesn’t work on an iPhone. Tapping the element after I have scrolled doesn’t work and there is no UI that tells me how to place.

Update: there is some UI hidden inside the page text that includes a button to place. Add a background to this area and people will be able to see it. Or let me tap the element.

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#134

Post by oakwhiz »

To me the problem with drag and drop is not only that it has to be a single continuous motion, but that nothing else interrupts you at an inconvenient time while you are doing it. The consequences of an incorrect drag and drop can be confusing. This "pick and place" UI is more precise and less error prone but a lot less convenient. Maybe there is a middle ground.

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#135

Post by ericskiff »

Awesome to see real UX experimentation, and this elicited a strong response from me at first "oh I haaaaate that".

On further reflection, this is very interesting and I understand where the drag and drop interaction breaks down on long lists. Some additional UI affordances to communicate what's happening may make it intuitive and clear.

Things I'd want to experiment with if I was implementing this:

* A "wheel" effect where the items in the list grow slightly as they near the chosen item which stays locked in the interface at the center, popping into place at at each 'click'. Somewhat like the Price Is Right wheel flipper

* Making the interaction entirely scroll based once I click. Setting the item in place can be done by any other click or keypress, and cancelled with the escape hotkey. My interaction is pick, scroll, click (without having to aim back at the thing I just placed by scrolling)

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#136

Post by halapro »

Love it but no one would understand this. I bet most people would just be "stuck" in the "picked" state and not know how to exit it, with an item covering the screen.

Something similar but less obtrusive would be to show "drop here" buttons after you "pick" an item. No sticky element on screen, clear followup action that doesn't require exact scrolling position.

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#139

Post by elgertam »

It's interesting and you should keep iterating. My critiques: it requires a scroll container with sufficient margin to move the top and bottom elements (or I guess left and right) past center; the "place" button is quite unintuitive and should be placed nearer to the pick-n-place container, or even on the selected element itself; and the position of the selected element isn't quite right, though this seems more like a bug.

Keep iterating! Drag-n-drop is good on desktop, but I disprefer it for mobile.

Re: Show HN: Picknplace.js, an alternative to drag-and-drop

#140

Post by RHSeeger »

thunderbong wrote: post #75

Brilliant! Its been a while since I've seen a brand new UX patten. As some others have mentioned, the picked state needs to be a bit more clear. Some suggestions - 1. As a border around 'Pick' to indicate it as an action 2. Once an item is picked, add a mask on the whole page, with only the picked item in front of the mask. (This is going to be a bit challenging, I'm guessing, to show the gaps between the items as yo…

To add some things...

When you have scrolling set to more than one line at a time, the item movement skips down multiple spots at a time. For example, when I click pick and scroll down once, it jumps down two spots (One moves to between Three and Four).

When I clicked Pick, it wasn't obvious to me what I was doing next. At first, I scrolled and didn't even notice it moved. I think the post I'm replying to includes changes that would remove that issue, so I'm mostly just re-iterating the idea that it needs more obvious clues as to what's going on.

Very cool, though

Post reply on HN