Réorganisation par glisser-déposer avec de gros articles
J'essaie d'implémenter une fonctionnalité de glisser-déposer pour réorganiser les éléments. Les éléments sont de taille (hauteur) variable et, dans certains cas extrêmes, plus hauts que l'écran.
La méthode simple illustrée ci-dessous ne fonctionnerait pas car nous ne serions pas en mesure de voir les autres éléments si l'élément déplacé est volumineux.
Une solution possible consiste à avoir un bouton de glissement vers le haut de chaque élément, et lorsque l'utilisateur maintient le bouton enfoncé pour commencer à faire glisser, l'élément se comprime en un élément sur une seule ligne. Mais je préfère ne pas avoir de bouton de glissement et laisser l'utilisateur commencer le glissement en maintenant n'importe où sur l'élément.
car nous ne pourrions pas voir les autres éléments
Ce ne serait pas un bon UX.
Donnez à vos utilisateurs une vue d'ensemble. Utilisez une représentation symbolique des éléments: titres des éléments, images des éléments.
L'idée de réduire l'élément glissé et de le représenter en quelque sorte dans une petite forme pendant le glissement est bonne. Mais qu'en est-il des autres gros éléments, éventuellement adjacents à l'élément glissé?
Une approche différente consiste à offrir une fonctionnalité de "réorganisation" explicite, puis à réduire tous les éléments dans leur petite forme unifiée, avant de les laisser glisser.
Aller avec votre idée - puisque les éléments peuvent être plus grands que l'écran, je suppose que la liste peut défiler? Vous devez fournir un moyen de dépasser les plus grands (ou d'atteindre une cible sous le pli). Sa bonne mise en œuvre n'est pas simple.
- Vous devez faire défiler la liste lors du glissement et le curseur est proche des bords. La vitesse de défilement doit varier en fonction de la distance du bord (plus proche = plus haut).
- Vous devez avoir une animation précise pour réduire les éléments, les déplacer, déplacer d'autres éléments lorsque vous réduisez ou faites glisser et autorisez un espace cible, etc. Tout cela devrait sembler naturel.
- Enfin, vous devez demander si vos utilisateurs supposeront qu'ils peuvent faire glisser des éléments dans une telle liste (ce n'est peut-être pas une fonction standard/familière). Un moyen d'augmenter l'accessibilité est d'avoir une icône de poignée de glissement sur chaque élément - similaire au bouton que vous avez mentionné, je pense, mais peut-être plus élégant.
Il serait préférable d'inclure des poignées de déplacement pour indiquer qu'un élément peut être déplacé, à moins que l'interface utilisateur ne soit familière à votre utilisateur et qu'il sache tous qu'il peut s'attendre à pouvoir déplacer un élément. L'exception est si l'élément a une autre interaction de clic possible, alors la poignée de glissement devient vraiment utile (pensez à jouer de la musique, à une playlist spotify, etc.)
Quant à la réduction de la taille de l'objet sur le glisser, cela ressemble à une idée qui fonctionnerait, ci-dessous est un exemple de cela implémenté dans Google Drive.
Pourriez-vous fournir un peu plus de contexte au problème que vous essayez de résoudre? Il y a toutes sortes de problèmes d'accessibilité que le glisser-déposer introduit et le problème et le type d'utilisateurs détermineraient la solution à utiliser.
Lorsque l'élément actuel est trop grand, le fait de permettre aux utilisateurs de voir une partie des "autres contenus" les aidera peut-être à comprendre qu'il y a un espace où ils peuvent faire glisser et déposer l'élément actuel.
De plus, peut-être, permettre à l'écran de défiler automatiquement lorsque les utilisateurs font glisser l'élément à proximité des bords de l'écran sera une bonne interaction?
Jetez un œil à la vue mobile de todoist ou des applications similaires contenant de nombreuses listes, ils ont peut-être trié ce problème de manière intelligente qui peut vous inspirer ou vous mettre dans la bonne direction :)