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.
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.
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.
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.
In most elevators around the world, there are buttons to keep the doors open and also to get them to close. I've only seen symbols on them. Once, however, in the US, one gentleman got in, and instead of pressing the close button, pressed on the open button. So the doors, which were just going to close, opened again.
He complained - Why do they have these symbols, why can't they they just write Open and Close?
I've wondered about this every since - is it an American thing to have an expectation to have text everywhere? I have never heard anyone complain about those symbols before or since!
Call me crazy, but those icons are not different enough to be quickly readable. If the open and close icons on the elevator were distinct from one another words wouldn't be necessary, but the exact same icons rotated 180 degrees are indeciperable at a glance.
It takes noticeable processing time to know which is which. Especially with a button that you need to hit as quickly as possible to hold the door for someone, those icons should be widely different from one another. I can't count the number of times I've meant to hit the open button to hold the elevator for someone only to accidentally hit the close button just in time to make eye contact with the person we've left behind.
The open button looks like closed doors and the close button looks like open doors. I have to look at the symbols carefully and interpret the arrows every time. Or tell myself that the buttons do the opposite of what they look like at a glance. "open" and "close" would be easier.
reply