Concevoir un glisser-déposer triable qui peut trier son propre contenu et copier ses enfants dans un autre triable
J'ai ce problème qui me dérange depuis un moment.
J'ai une interface contenant 2 triables ou plus dans une application web (les triables sont des contrôles où vous pouvez réorganiser le contenu enfant). Exemple: http://yuilibrary.com/yui/docs/sortable/simple-sortable.html
Ma maquette ressemble à ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Les triables menus se comportent comme tout triable standard.
Le problème vient du Pages triable. Pour ce tri, vous pouvez réorganiser le contenu. Normalement, le comportement attendu serait de cliquer sur un élément et de le maintenir enfoncé, de le supprimer de l'emplacement d'origine et d'afficher un espace réservé pour le nouvel emplacement dans lequel l'élément doit être inséré.
Cependant, dans mon cas, ce triable a également un deuxième objectif. Si vous faites glisser un élément de Pages vers l'un des Menus, une copie de cet élément est effectuée à la place. Normalement, si l'on devait faire cela, l'élément d'origine dans le triable pages serait laissé seul et une copie serait faite et collée au curseur ou au doigt.
Étant donné que mon Pages triable doit permettre ces 2 comportements, je ne sais pas comment je devrais rendre ces fonctionnalités apparentes:
- Vous pouvez réorganiser les pages à l'intérieur du
pagestriable. - Vous pouvez faire glisser une copie d'une page à l'intérieur du
pagestriable vers un menu triable.
J'ai envisagé de styliser les éléments à l'intérieur des pages comme ceci:
Cependant, cela peut être un peu déroutant:
- Que se passe-t-il si quelqu'un clique sur la zone en pointillé pour la faire glisser dans un menu triable et devient confus lorsque l'élément est verrouillé sur les pages triables?
- Que se passe-t-il si l'utilisateur clique sur la partie non pointillée et souhaite réorganiser la page, mais constate qu'une copie est effectuée et qu'il n'est pas en mesure de réorganiser?
- Le fait qu'il n'y ait aucune indication visuelle que cliquer sur la partie non pointée crée une copie est également un inconvénient.
Existe-t-il des modèles/exemples dans la nature de la manière dont ce type d'interaction triable peut être réalisé de manière conviviale et facilement détectable?
Si possible, j'ajouterais une explication courte mais concise en haut de la page expliquant le processus.
De plus, ou au lieu de cela, cela dépend de vous, j'autoriserais un déplacement libre de l'objet, mais si la souris traverse la ligne verticale séparant les deux zones, je ferais apparaître un message indiquant à l'utilisateur qu'une copie est en cours de génération et que l'original restera en place. Ce message doit être dans la zone vide à droite, afin qu'il n'affecte pas l'action de glissement.
En outre, vous pouvez utiliser ce qui semble être une barre d'état au bas de votre conception pour y afficher des messages et combiner les touches avec l'action de glissement. Par exemple, ctrl + glisser crée une copie et cela est expliqué en bas lorsque le curseur survole l'élément qui peut être déplacé ou copié.
Vous pouvez utiliser le système de combinaison de glisser et d'appuyer sur les touches même si vous n'utilisez pas la barre d'état, affichez simplement le message dans l'une des zones vides mais faites-le remarquer.
Le glisser-déposer présente un problème de convivialité où il s'agit d'une fonctionnalité non évidente (comment les utilisateurs supposent savoir que vous pouvez faire glisser des éléments?), D'autant plus si la cible de dépôt n'est pas la même que la source.
La principale solution pour cela est d'inclure des "aides" - afficher des étiquettes révélant ce qui peut être glissé et où. Dans votre cas, vous pouvez ajouter sous le titre des menus "déposer des pages ici pour ajouter un lien vers une page".
En outre, envisagez au début du glisser pour animer la cible de dépôt. Par exemple, en animant leurs bordures avec un effet de lueur.