I think you could play with sticky footers, sticky headers, and some active styling indicators like opacity and background plus highlights to let the user know they are in scroll mode. Really fun idea, love this! Wish Apple Music UI for moving songs on playlists had that. Holding my dumb while dragging is suboptimal comparing to click and scroll.
Show HN: Picknplace.js, an alternative to drag-and-drop
71–80 of 158 posts
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#72OK, so I get that you're trying an alternative on the metaphor that drag and drop uses. The metaphor is "pick up the item, move it, then drop it", but the implementation doesn't work well on mobile, so you made it modal. But for me scrolling feels like "pick up the item, move the rest of the world so the item above the target, then drop it". It feels very strange.
As an refinement, I would keep the modality but add back in the dragging paradigm. Use a typical "move item" scrubber control, but have that control switch the item to a floating modality, and give it "send back" and "drop here" buttons. The user can drag the item, scroll, interact with the page, and the item stays with them to get where they want to go. Here is a crude mockup: https://excalidraw.com/#json=9DwYqkWRhdEgEEqyzY7X8,fCdPzIzTm...
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#73I instinctively tried to tap on the object again to place it, and I think that should be the default.
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#74On mobile this is a strong contender for the worst UX I've ever seen. The whole page moves, so you have to continously scroll back up after placing something. If when in pick mode you would only scroll the list, I would be able to organize it much faster.
> On mobile this is a strong contender for the worst UX I've ever seen.
Pretty hyperbolic. First of all, this is a human and their work you’re talking about. A little respect goes a long way. Secondly, if this is the worst UX you’ve ever seen on mobile, I have to assume you’ve only been using the internet for the past week or so. This experience worked great for me on mobile Safari with no instructions required. You can’t say that for a lot of mobile UX including, I might add, Safari itself.
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#75Brilliant! 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 you scroll)
3. Once an item is picked, the 'Cancel' and 'Place' bar should have a background. Sometimes this overlaps the list and is not clearly visible.
4. It should not be possible to scroll way above or below the list.
5. On 'Cancel' scroll back to the item.
Again, congratulations! It's one thing to think of something, quite another to be able to implement it nicely.
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#76Not trying to diminish the work at all because it works well but I hate this UX pattern. There is likely a reason this hasn't been done. If it wasn't for the pick -> scroll -> place instruction I would have no idea how to use it.
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#77Earlier quoted context omitted.
Yes, it can get tricky if you have to scroll a bunch, e.g. moving a file in a big directory into a subfolder, trying to hit that one pixel where it will scroll up, or using two other fingers to attempt to scroll, while holding the drag finger down...(CLI pros, you win this one). I would like a desktop pick and place that works like drag and drop, you click and then it sticks to the cursor, but you are free to do what…
> while holding the drag finger down I'm not sure if this is common on other desktop operating systems but the 'Drag Lock' feature on macOS allows you to double-tap an item, then drag it without holding the button down to begin a drag. At that point lifting your finger continues the drag until you tap once to release it. I would be amazed at how many people using macOS have never found this option except I'm not sure…
Double tap or double click is to open a file. If you're using it to do anything else, that's so counter intuitive.
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#789/10 for originality. 2/10 for usefulness.
Not bashing, that's how good ideas are found. But not this time IMO :)
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#79Honestly when I see things like this, I feel Ai can steal our coding but it can NEVER still our resoning and creativity. Thanks for sharing!
Re: Show HN: Picknplace.js, an alternative to drag-and-drop
#80This reminds me of a UI pattern I saw in an old iOS comic reader (Comic Zeal) for organizing your comics. You had a horizontal rule that worked as a cursor. You could swipe things to the side (“pick”) to add them to the cursor. You then moved the cursor to the desired location and tapped it to dump the contents (“place”).
My biggest problem with the OP implementation is the “place” button can be far from the “pick” button. Why not just leave it on the moving element - change the label from “pick” to “place” and call it a day.