Conception d'interface utilisateur pour commander des articles dans la liste
Quel composant/conception d'interface utiliseriez-vous pour commander des articles dans une liste (un tableau avec des boutons de déplacement vers le haut/vers le bas)?
Le glisser-déposer des éléments est probablement le meilleur pour la plupart des interfaces utilisateur. Malheureusement, il est difficile de rendre cette fonctionnalité détectable. Une zone "grabber" près de chaque élément aide. Une rétroaction visuelle lors du glissement ainsi qu'un défilement automatique lorsqu'un élément est glissé vers un bord sont nécessaires dans une bonne interface de tri par glisser-déposer.
Il est bon de fournir move up et move down boutons, en plus du glisser-déposer. Il n'y a pas d'icône/de style "grabber" universellement et immédiatement reconnu. Pour les interfaces rarement utilisées, le temps passé à utiliser les boutons quelque peu maladroits peut être inférieur au temps nécessaire à l'utilisateur pour découvrir la fonctionnalité de glisser-déposer plus efficace.
De plus, avec le glisser-déposer, de nombreux détails subtils sont frustrants pour l'utilisateur s'ils ne sont pas effectués correctement (par exemple, le défilement automatique). Les boutons sont inefficaces lors d'une utilisation fréquente, mais évidents, simples à utiliser et beaucoup plus faciles à coder.
Le glisser-déposer peut être considéré comme une `` manipulation directe '', où les clics directement sur la liste ont un effet, contre une `` manipulation indirecte '' où vous avez un bouton séparé ou une autre action qui prend effet sur la liste.
Selon ce qui est dans votre liste, les deux peuvent être appropriés.
Quoi que vous fassiez, veuillez garder à l'esprit les conseils avisés de Jakob Nielsen Top 10 Application Design Mistakes :
Les conceptions de glisser-déposer sont souvent les pires contrevenants lorsqu'il n'est pas évident que quelque chose peut être traîné ou où quelque chose peut être déposé. (Ou ce qui se passera si vous faites glisser ou déposez.) En revanche, les cases à cocher simples et les boutons de commande rendent généralement douloureusement évident ce sur quoi vous pouvez cliquer.
Donc, si vous fournissez une capacité de manipulation directe sur une liste, fournissez des indices visuels tels que:
- zone visuelle de "saisie" (série de points ou de lignes) qui suggère la "capacité de saisie"
- changement de curseur
- vos commentaires lorsque vous vous déplacez. Voir cette démo bien que vous remarquiez que mon point (1) n'est pas pris en charge et il n'est donc pas évident que ces listes soient triables.
Je conviens que la manipulation directe des éléments est probablement préférable maintenant.
Malgré les accusations selon lesquelles 37 signaux sont un peu arrogants, leur camp de base est une application éminemment utilisable. Presque toutes les listes de cette application permettent de réorganiser les éléments par glisser-déposer.
Tout d'abord, vous devez cliquer pour passer en mode de réorganisation, via un lien texte dans le coin supérieur. Ensuite, il y a une petite image qui suggère clairement la "capacité de saisie" que vous cliquez et maintenez, puis manipulez pour déplacer l'élément. Voir ci-joint.
Les boutons haut/bas sont OK, mais la tendance est à opérer directement sur les données, c'est-à-dire pouvoir cliquer (ou taper) sur l'élément puis le déplacer. Un exemple frappant est la file d'attente Netflix. Cela peut fonctionner même lorsque vous sélectionnez plusieurs éléments dans la liste.
Ma préférence est d'utiliser le glisser-déposer avec des sélecteurs de glisser clairs qui apparaissent au survol de la souris. Dans notre application, nous utilisons une double flèche haut/bas qui apparaît pour indiquer que l'article peut être réorganisé.
Le simple fait de changer le curseur est suffisant pour une foule de passionnés de technologie, mais pour les applications générales, vous voulez quelque chose de plus évident.