Comment puis-je faire glisser une ligne de tableau sur une page Web?
J'ai un tableau sur une page Web où je dois laisser l'utilisateur réorganiser les lignes. Je pensais laisser l'utilisateur faire glisser les lignes pour les réorganiser. Mais comment pourrais-je faire savoir à l'utilisateur qu'il pourrait le faire? Dois-je faire une cellule vide comme première colonne avec des points ou des lignes verticales comme gmail a pour chaque e-mail dans la boîte de réception? Où puis-je obtenir une image comme ça? Dois-je utiliser une icône "main saisissante" pour le curseur ou un curseur "déplacer"? Dois-je afficher le curseur en survolant la table ou simplement la "zone de saisie"? Dois-je laisser l'utilisateur saisir une partie de la ligne à faire glisser?
37signals ' Basecamp fait un excellent travail avec ceci:
Lorsque vous survolez un élément, des contrôles apparaissent à gauche de l'élément. L'une des commandes est une flèche haut/bas. Lorsque vous survolez ce contrôle, le curseur de la souris se transforme en curseur de déplacement. Maintenir enfoncé le bouton de la souris déplace la position de l'élément saisi sur l'axe vertical correspondant à la position de la souris. En relâchant le bouton de la souris, l'élément est placé dans la position acceptable la plus proche. La position de l'élément déplacé est constamment mise à jour à l'écran pour que vous sachiez où il se trouve.
La fonctionnalité Tâches de Gmail la gère un peu différemment en affichant une surface de glissement vers la gauche lorsque vous survolez un élément. Le survol de la surface de glissement transforme le curseur en une icône de main (pas une icône de saisie, qui est une main fermée). Le comportement supplémentaire est identique à Basecamp.
Pour plus d'informations sur ce modèle, consultez la bibliothèque de modèles de conception Yahoo et reportez-vous à la grille de storyboard des moments intéressants .
Tant que votre mise en page n'est pas surpeuplée, la multiplication des indices aide les utilisateurs à déterminer les fonctionnalités disponibles.
En plus des poignées de glissement, vous souhaiterez peut-être ajouter une légende "Glisser les lignes à réorganiser" vers le haut de votre tableau.