Show HN: Picknplace.js, an alternative to drag-and-drop (jgthms.com)
I find that the drag and drop experience can quickly become a nightmare, especially on mobile.
To tap, hold, drag, and scroll, all at the same time, is both difficult to achieve, and prone to errors.
I've always had in mind this 2-step approach, where picking an element and placing it were two separate steps.
So I implemented this basic version to showcase my idea.
While it might take more time than a regular drag and drop, the benefit is for people who struggle with holding down the mouse button. With picknplace.js, you only need two clicks and some scrolling.
This solution is meant as an experiment, so I'm open to discussion.
118 comments
[ 4.3 ms ] story [ 116 ms ] threadLinked in page is 404.
Their page uses https://jgthms.com/picknplace.js/picknplace.js
If when in pick mode you would only scroll the list, I would be able to organize it much faster.
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.
There are clearly a bunch of people who haven't used a new interface in perhapse years and are simply obtuse.
It took me less than 5 seconds to start using this one handed while I was pissing at a urinal, I mean that quite literally.
you can see that there are different areas of draggable and droppable, on different directions.
> 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 to mobile as is, and how that created all sorts of nuisances. (https://youtu.be/1fZTOjd_bOQ?t=1565)
If mobile drag&drop was implemented like you are suggesting from the very start, I actually might have preferred that over the situation we now ended up with.
One technical note on your implementation: on certain mobile browsers, there is a glitch where the UI can jump around as the browser dynamically slides top or bottom menu bars in and out.
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.
I have a feeling it makes RSI worse.
It solves the "drag and drop beyond what fits the screen" much better than you can with drag and drop, the awkward auto-scroll-on-nearing-the-edge-thing.
I would say, if you need to reorder many items, it gets a bit disorienting, the whole list moves as it's anchored to the item you are moving. Maybe there is a way to combine drag and drop where this kicks in if you go beyond the bounds of the visible area.
Also don't think this can work well with multiple axis/drop zones.
OR possibly highlighting the spots between rows either with a line, or "place"
i think that's a much more intuitive & reliable ui, and would be an improvement on drag n drop. or a supplement to it
(great idea, though)
Definitely see its potential for mobile pages.
On web it feels unintuitive to scroll. It feels more natural to drag and drop. Guess Trello boards have conditioned us.
But on web this control is way better.
This is much better on mobile and I suspect for accessibility.
- Zoom out after drag start and back in when hovering over items.
- Drag to a staging area/clipboard.