Affordance des éléments ContentEditable (sans changer l'arrière-plan)
Le contexte
Je veux utiliser l'attribut ContentEditable au lieu des entrées classiques.
Cela ressemble à un doublon de Affordance de la fonctionnalité Modifier sur place , mais en fait, je voudrais éviter le changement de couleur de fond comme suggéré par la réponse. De plus, la question liée est datée de 2011 et les pratiques UX évoluent constamment, il y a donc peut-être de nouvelles approches et solutions pour ce sujet.
C'est mon approche actuelle: une couleur différente en plus d'une bordure inférieure.
(désolé pour les français sur ce gif)
Vous pouvez l'essayer avec cette démo: http://jsfiddle.net/Lazgp/6
J'ai choisi le bleu et la bordure en pointillés sans vraiment une bonne raison, juste comme ça.
Question
Avez-vous des retours ou des conseils pour l'améliorer?
Ça a l'air super! Les lignes pointillées et pointillées fonctionnent vraiment très bien pour donner de l'argent. Mais la meilleure chose que vous puissiez faire, pour faire comprendre aux gens qu’elle est en fait modifiable, est de mettre automatiquement le premier champ au point.
Cela donnera à l'utilisateur un retour visuel immédiat et aucune devinette n'est plus nécessaire.
C'est vraiment très inhabituel et a une accessibilité controversée.
Les lignes pointillées et pointillées sont généralement utilisées pour afficher des fenêtres contextuelles avec des informations supplémentaires et elles indiquent simplement à un utilisateur - vous pouvez cliquer sur moi mais pas vous pouvez me modifier.
Je suggérerais d'afficher les entrées pour tous les éléments modifiables après être passé en mode édition. Il a une plus grande accessibilité et les entrées motivent également les utilisateurs à saisir des informations.
L'interaction semble bonne, voici quelques idées qui doivent être testées si possible:
- Pourquoi ne pas proposer votre bouton
Modifersur chaque section comme le fait Wikipedia afin d'améliorer la concentration?
Pour autant que je sache, cette interaction n'existe pas encore sur Wikipédia en anglais
Soyez prudent avec les soulignements en pointillés et les combinaisons bleues, ils pourraient être mal interprétés comme des liens. Votre approche semble bonne, mais vous devez reconnaître qu'elle est assez peu conventionnelle.
En écho à la remarque précédente: lorsque vous survolez/cliquez sur l'une des entrées, cela devrait ressembler davantage à une entrée avec le peu d'aide d'un arrière-plan comme le fait Basecamp. Concentrez-vous et faites un exemple sur la première entrée pour aider à comprendre l'interaction.
