> 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.
On 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.
It's even worse on desktop. You have to scroll the entire screen (with mousewheel or arrow keys) to move the selection. I spent 30 seconds thinking it was bugged because the intuitive solution would be to click once, then simply click where you want to place it, but the "place" button only showed up on the one you already "picked". Fine idea, worst conceivable execution of UX I have ever seen.
Given I need to read the instructions to understand how to use this, It's a no go for me. I clicked it and I thought there was a bug because I could only place on the element I clicked.
I repeatedly clicked pick and place and scratched my head for a minute. Wish there were a cue that I have to scroll.
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 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.
On 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.
It's even worse on desktop. You have to scroll the entire screen (with mousewheel or arrow keys) to move the selection. I spent 30 seconds thinking it was bugged because the intuitive solution would be to click once, then simply click where you want to place it, but the "place" button only showed up on the one you already "picked". Fine idea, worst conceivable execution of UX I have ever seen.
Scroll up to what? The whole list fits on screen for me
Given I need to read the instructions to understand how to use this, It's a no go for me. I clicked it and I thought there was a bug because I could only place on the element I clicked.
wow! I love this solution. I agree on the pain of drag and drop on mobile.
how does it work with more complex layout not just vertical list of items, like those drag-and-drop for visualization UI: https://github.com/Kanaries/graphic-walker
you can see that there are different areas of draggable and droppable, on different directions.
https://github.com/jgthms/picknplace.js/
Linked in page is 404.
Your link is 404 (is that what you meant?)
Their page uses https://jgthms.com/picknplace.js/picknplace.js
Sorry, it's public now.
The keyboard arrows to move works nice, but pressing enter to place appears to cancel it. I'm on firefox 145/mac os 15.6.1 if that matters.
I do not like this. I am still glad you shared it!
Regardless of the technical and UX merit of this project.
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.