Hacker News Reader

Comment by thunderbong | Hacker News Reader

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

View on HN

Thanks, that's great feedback.

For number 2, that should be possible, since I have the position of each item in the list (and the position of the list itself. Using a <canvas> might be the way to go.

For number 4, my main concern would be that it would feel like "scroll-hijacking". What I did however is prevent the picked item from going beyond the list, in both directions.

Number 5 is a good idea as well, easy to implement.

Another suggestion is showing an empty slot (selected item with less opacity and dotted border?) and displacing/scaling the picked item to show that it's been picked up. I would immediately connect it to picking up a book, CD, etc. from a shelf.

I think you should add some kind of marker to show where the item was picked up from and thus what would happen if the operation was cancelled, and an empty slot is perfect for that.

+1 inspiring and relevant to a project i am working on.

I would suggest having the place button next to/in the item being dragged like Pick. When learning to use this, having it at a distance creates unnecessary cognitive burden.

Also, I would probably make the entire item clickable for pick, if there didn’t have to be a click target on the item for other functionality.

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

Yes! This is very cool. Should be somewhat “locked” into the right area of scroll and picked item should have some height above the others.

I also hate drag and drop.

It'd be good if when you picked something it automatically added the border too - otherwise I think this won't work on short pages?

I have some hesitations though - relying on scroll as the positioning method means that if you don't have a fine-grained scroll method e.g. on desktop, if you have a non-continuous wheel, you'll need to rely on "drag and dropping" the scroll bar, which doesn't really improve things (and has its own issues if your page is very long).

I think I'd prefer something other than scroll-to-position. Like what about making gaps between items with a "drop" button? Or adding up/down arrow buttons to the "picked" element so that fine grained adjustments could be done?

Take inspiration from ghetto sim racing setups (which are also implemented by some middle click scroll versions) and use the mouse cursor y position relative to the picked object as scroll velocity instead of destination position. Change cursor to up/down. Needs some vertical space above the list though.

Reply on news.ycombinator.com