hckrnws

This actually caused a constant switching of attention on mobile. Each time an element is picked up I'll have to look at the bottom toolbar, then the floating element in the center, then back to the bottom to place it, so on and so forth. And the list in the demo is not that long yet.

------

Will this work on lists that sre short? It seems that it relies on overflow to move the element

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

Nice. I actually did something similar 25 years ago, I called by think "pick-and-put".

At that time I switched from MS-DOS environment to Windows 98. And as I was trying new UI features, I found drag-and-drop incredibly annoying. Especially if you do it between different windows, it requires a lot of movements, etc.

I had an idea that going further into skeuomorphism can make things better, so I started experimenting with 3D UI, particularly, a file manager with 3D UI. And as an alternative to drag-and-drop I designed pick-and-put.

It's actually very simple: right mouse button picks up an object and you get a symbol of that object next to the cursor. Then a click onto empty space puts it there. Or you can click a copy button which would copy it, etc.

I think it could work really well if we got a convention that some mouse button always picks an object. But we don't.

I don't think there's a way to make it works in the same way on desktop and mobile in a way which would be good. On desktop you have a mouse pointer, and you can easily represent point of insertion.

For mobile you came up with this scroll trick, but I think many people would find it unintuitive and annoying - especially on desktop.

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.

Perhaps a combination of the two? Maybe standard drag-and-drop works as usual, but if you drag the item to some deadzone (like the side of the screen?), it will stick and you're free to scroll to where you want to put it.

Scroll up to what? The whole list fits on screen for me

Surely you're being hyperbolic. I've seen some atrocious UX before. Maybe what you mean is it's a good idea but the scrolling part should be list-based instead of page-based.

No because what if the list is half cut off by the page but you want to go to the bottom? If it doesn’t scroll the page it’s even worse. If it does scroll the page it’s not great. It’s just bad design. Also not intuitive. I didn’t read the directions and it took me a couple seconds to get what was going on.

It's interesting. I was expecting the bar to follow the cursor as you move it and clicking a second time would place it wherever it was.

But, that's on desktop. The scrolling works a lot better on mobile.

Does not work with an indexed scrollwheel -- one click of the scroll wheel moves like 4 lines in your list, which seems to break the assumptions of your code. I get very strange behaviors, e.g. "pick" Five, scroll up and down, see swapping of Ten and Six during scroll. Then "place" results in Five being in the same place as before but Nine and Ten are swapped. Similar when using arrow keys.

These feel like fixable things.

The ones that are moving the wrong item to the wrong place are fixable, but there will always be a problem when scrolling is quantized if there is a possibility that any item in the list is shorter than the scroll quantum.

i was expecting when i click pick, that a "place" button would appear on each other item, or i could click on a row

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

That's a great idea actually. I'd have to find a way to highlight the possible landing spots.

(i do like innovating on this btw)

here's a basic CSS starting point

    :has(.pnp-picked) .pnp-item:not(.pnp-picked):not(:last-child)::after {
        content: "[place]";
    }

As a ux designer, I like this, especially as it solves the problem of dragging mobile elements below the fold or off the visible screen view.

One suggestion I'd love to try out- let the user select multiple elements at once, and reorder the selected elements in the hovering state using conventional drag and drop mechanics. This might add complexity or might be a much more convenient way to deal with lists!

Or, dragging the element selected should allow a user to manually ‘place’ the item on screen.

I wouldn’t use this on desktop, though! Mice typically allow you to scroll and drag pretty easily.

That's neat. Not sure if I would deploy it, as it will be hard to explain/teach people how to use it (as I see in other comments already), but I do see the value in it.

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.

I wonder if a stack metaphor would work for that. So that N items are no bigger than 2 items.

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 just tried it? And it did something that seemed weird but reasonable.

The amount of time it took me to figure out how to use this I am embarrassed to say was too long.

Yeah me too. It was only on third try that I realized I shouldn't move the cursor but just scroll :D

How move an item from the top to the bottom? Do you need to add 100% padding to the top and bottom of every list? Most lists can't be scrolled far enough to get the screen coordinates of the top to the bottom.

It seems like it only works on pages that scroll, which is not good. I deleted the <header> and <footer> elements on the page, and was unable to anything but "cancel" after clicking "pick". Also did not work setting max-height on the <main> element and overflow-y:scroll, even though I could scroll the items did not scroll with it. It is an experiment and probably doesn't have every implementation detail covered yet.

I could see this being really useful for editing lists that are longer than the page. The example that immediately comes to mind is reordering a playlist on YouTube Music, which currently requires dragging to near the screen edge and trying to convince the list to scroll while you still hold on to the item you're trying to move.

It’s good, I like it. I think that it might become easier to use if:

- The whole item is clickable for the pick

- Picked state is indicated clearly, possibly by hovering the item

- You click on the item itself to place, or possibly anywhere on the screen

Came to say that it badly needs better state communication.

What I’d do is to add a drop shadow and increase scale by 1-3%, with a clean, snappy animation between placed and picked up. I might also add a “gripping hand” graphic with a cursor-like appearance to picked up items and show a “scroll to move” instruction next to the hand graphic if the user hasn’t done anything for a couple of seconds.

Very cool concept. Several people have made good suggestions on improving the UX. If I were implementing I’d probably try to support a stack of picked items so I could grab several and move them all at once.

Neat concept, but why scroll the entire page? It just ends up being distracting and confusing. Once you hit "pick" the scroll action should affect just the list and nothing else.

Interesting concept. Not sure if I like it more than drag and drop though, but I do love explorations like this. Reminds me of the old days when Flash devs would build some truly crazy stuff.

Potential bug: The first time I tried it on my iPad, it didn’t place the item, but it did on subsequent uses.

Interesting concept but kind of unintuitive to figure out without reading about it first. Maybe you can tweak it?

wow! I love this solution. I agree on the pain of drag and drop on mobile.

This doesn’t appear to always work? Sometimes the placed item gets sent back to the original position even though it’s clearly being placed in a new spot (at least from what I can see visually). The UX idea is nice.

I repeatedly clicked pick and place and scratched my head for a minute. Wish there were a cue that I have to scroll.

Ideas for usability: -Add a background behind the buttons when you have picked. -When having picked, display above the buttons a helper text like "Now scroll to change position".

CSS outline would be a good visual indicator here as it won’t modify the page layout.

Came here to write the same. Give it some visual state of “pickedness“ (e.g. by displaying this state as elevated).

But in any case, great stuff!

Really nice, I found it highly intuitive on first use. Only thing I might suggest is making it more obvious what the "handle" button is that initiates the pick.

Oh, lovely. Let's play with this problem. Variations to consider:

- Zoom out after drag start and back in when hovering over items.

- Drag to a staging area/clipboard.

Interesting.

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.

It’s been a long time since I’ve said “woah” out loud to something that wasn’t a science video.

This is much better on mobile and I suspect for accessibility.

Ditch the scroll.

Pick: all previous "Pick" buttons become "Place". You choose one.

Done. Simple, explicit, intuitive.

For mobile, this seems like a good, maybe even better solution than the status Quo. Maybe not so much for desktop.

is the whole page supposed to scroll when you scroll after picking?

Viewing this on my phone and tapping the colored does nothing at all. Are they supposed to do something?

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.

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.

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.

Took me about a minute to figure out how it works.

Doesn't work on my phone or I just didn't get it at all.

I don’t love it but really cool as something to test a new way.

a bit confusing, but lovely original idea, well made demo too

thanks for sharing

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.

Yes, the users must be wrong.

I do not like this. I am still glad you shared it!