Différents modèles de conception pour la même action dans la même application
Je travaille sur une grande application d'éditeur de site Web, et pour obtenir les "meilleurs" designs initiaux, j'ai des versions légèrement différentes des modèles d'interface utilisateur en fonction du contexte dans lequel ils sont utilisés ("les meilleurs" en ce qui nous concerne). peut faire avec aucune donnée de test utilisateur pour le moment). Je sais que cela ne correspond pas nécessairement à l'utilisabilité en ce qui concerne la cohérence des modèles, donc je l'utilise avec parcimonie.
Par exemple, sur la page Contactez-nous, l'utilisateur a la possibilité d'ajouter un nouveau formulaire avec des champs de formulaire uniques ou de modifier le formulaire actuel inclus avec le modèle de son choix. Afin d'ajouter un nouveau formulaire, l'utilisateur sélectionne le type de formulaire dans une liste déroulante, puis clique sur le bouton "AJOUTER" pour créer le nouveau formulaire. En plus de pouvoir modifier les champs dans ce nouveau formulaire, l'utilisateur peut ajouter des champs en utilisant la même fonctionnalité déroulante + AJOUTER dans le formulaire lui-même. Toutes les interactions ont lieu dans la barre latérale, mais le site Web est mis à jour en temps réel vers la droite. Il y a plus d'options/actions pour ce composant, mais par souci de concision, je l'ai réduit aux détails nécessaires.
Ma question est la suivante: est-il plus important d'avoir une cohérence ou une clarté visuelle? L'interface utilisateur cohérente mais répétitive dans des contextes légèrement différents est-elle mieux ou devrait-elle être modifiée pour refléter le contexte?
Pour moi, il semble que bien que l'ajout de formulaires et de champs se fasse avec la même interaction/action, les champs sont une unité plus petite que les formulaires, donc un argument pourrait être fait pour changer le modèle subtilement pour refléter ce contexte d'unité plus petite. Yae ou Nae?
Dans la pièce jointe, je montre que les modèles d'interface utilisateur ne sont pas les mêmes, mais la question reste la même.
Cohérence + hiérarchie = mo betta
Il n'y a rien de mal à la cohérence entre les contrôles. Je pense que le problème que vous ressentez est la hiérarchie. Dans votre exemple, l'ajout d'un champ (l'élément de bas niveau) est plus important que l'ajout d'un formulaire (l'élément de haut niveau). Les contrôles sont identiques, mais le contraste du sol est plus important dans le module d'édition de formulaire.
Avec quelques ajustements mineurs, je pense que vous constaterez que la cohérence n'est pas du tout un problème. Dans cet exemple, l'en-tête sur "ajouter un formulaire" est plus fort et son bouton a un contraste plus important. L'ajout d'un champ n'obtient que du texte d'espace réservé et le bouton est stylisé pour être subordonné à l'action principale.
J'ai également regroupé les contrôles de modification de champ dans une seule icône "Paramètres" et les ai cachés jusqu'à ce que vous survoliez pour nettoyer l'espace et renforcer l'ordre des choses.
Caveat
Il y a quelques décisions là-dedans que d'autres UXers sont sûrs de contester, mais je pense que cette solution fonctionnerait bien dans un environnement de bureau. Sur un appareil tactile, j'irais de l'avant et exposerais les contrôles d'édition sur tous les champs. Et je serais probablement en désaccord sur d'autres objections ;-)
L'interface utilisateur que vous avez présentée n'est pas cohérente non plus. Il a une cohérence visuelle. Mais l'interaction n'est pas cohérente.
Lorsqu'un utilisateur ajoute un formulaire, celui-ci est ajouté sous la liste déroulante, mais lorsqu'un nouveau champ est ajouté, cela se fait au-dessus. Cela affecte également la cohérence. L'utilisateur doit s'habituer à l'un de ces modèles (en ajoutant au-dessus ou au-dessous). Sinon, cela pourrait entraîner une charge cognitive car l'utilisateur doit être conscient à chaque fois qu'il ajoute quelque chose.
Voici ma suggestion qui supprime cette incohérence. J'ai également présenté un moyen d'ajouter un sens de la hiérarchie au formulaire et aux champs.
- Les formulaires ici ont un fond gris avec un bouton rectangulaire plein pour l'action.
- Les champs ont un fond blanc avec une icône d'action.
De cette façon, vous maintenez le modèle et en même temps, vous évitez la confusion
Quelques bonnes réponses ici. Puisque c'est pour le web, j'essayerais d'utiliser la puissance du médium pour définir des interactions significatives. Ci-joint un exemple. Remarquez comment les champs d'édition/suppression apparaissent en survol, et l'ajout d'un nouveau champ sert/indique une manière claire et rapide d'ajouter un nouveau champ. (Remarque - Il est supposé que le formulaire aura globalement le type de fonctionnalité Enregistrer, Annuler).
La réponse idéale est de "tester les deux" et de voir ce qui fonctionne le mieux pour vos utilisateurs.
Sans test, si vous devez faire un choix, la clarté toujours l'emporte sur la cohérence.
En me concentrant sur votre réponse spécifique, je suggérerais un modèle UX différent pour ajouter des champs pour le rendre encore plus différent de l'ajout d'un formulaire. Par exemple, éliminer complètement la liste déroulante et la remplacer par un bouton "Modifier" qui affiche tous les champs disponibles que vous pouvez faire glisser dans le formulaire.