noyainrain / listling

Web app to make and edit lists collaboratively.
https://listling.org/
GNU Affero General Public License v3.0
34 stars 8 forks source link

Improve haptics of moving and checking items #70

Open dnnr opened 4 years ago

dnnr commented 4 years ago

I made two observations that have led me to corresponding suggestions for improving the handling of items. This is a single issue because they are not entirely independent of each other.

  1. When moving (dragging) items around, the effect of reordering is not easily perceived because the visual change is instant. This is especially problematic if neighboring items are similar in content and/or structure. Having the item follow the pointer (drag&drop style) and animating its insertion would help here.
  2. In a to-do/shopping list, the move handle and checkbox are pretty close to each other. On touch interfaces, checking an item can accidentally lead to moving it instead, and vice versa. Maybe the threshold for moving needs to be tuned. However, I'm afraid that the item UI can only afford a total of three active areas (left, right, and everything inbetween), so maybe a more fundamental change is needed here. For instance, I'm quite happy with how Out of Milk does it: checkbox on the left, drag handle on the right, press title to edit.
noyainrain commented 4 years ago

Thanks for your feedback! :blush:

  1. You're right, the current dragging behavior is not optimal and having the item follow the pointer would improve it significantly. (I've created a corresponding issue for micro: noyainrain/micro#100).

  2. I had a quick look at how other apps (Wunderlist, Keep) handle this and they accomodate multiple active areas next to each other. Thus, it seems to me that we have a spacing issue and the grip and check elements may need some more breathing room. I think we can experiment here when implementing 1.