Le design visuel affecte-t-il vraiment l'UX?
Je suis vraiment préoccupé par les effets de la conception visuelle sur l'expérience utilisateur, mais comme cela peut sembler trop large, permettez-moi de clarifier un peu.
Ma déclaration est que, si l'utilisateur peut trouver les informations dont il a besoin, grâce à une conception réfléchie des informations, il sera satisfait, malgré la qualité de la conception visuelle. Je veux dire que nous continuons à utiliser une interface même si la conception visuelle n'est pas aussi bien pensée tant que nous sommes satisfaits de sa fonctionnalité. Cependant, l'inverse est rarement le cas.
Donc, pour affiner ma question. Le (bon ou mauvais) design visuel affecte-t-il vraiment l'UX quand d'autres considérations de conception ont été pensées?
- Avez-vous des études de cas ou des recherches qui pourraient soutenir cela?
- Avez-vous une expérience personnelle à l'appui de cela?
"Pourquoi nous aimons (ou détestons) les choses de tous les jours" de Don Norman s'ouvre sur un compte rendu d'une étude célèbre à ce sujet, menée par N. Tractinsky en 1999. Il a testé quatre modèles différents d'un guichet automatique, où chacun pouvait avoir du bon ou du mauvais. ergonomie et bonne ou mauvaise esthétique (une conception de recherche 2x2). Il a rapporté que
le degré d'esthétique du système a affecté les perceptions post-utilisation de l'esthétique et de l'utilisabilité, tandis que le degré d'utilité réelle n'a pas eu un tel effet.
Le papier original est disponible ici: Ce qui est beau est utilisable .
Cela a ensuite été reproduit et développé par Tractinsky et ses collègues, son site Web propose un bref examen des différentes études .
Oui, la conception visuelle affecte l'expérience utilisateur
Voici un repas courant avec une seule différence visuelle. Il suffit de conduire une expérience utilisateur radicalement différente:
Il existe une littérature plus formelle sur ce sujet, mais comme d'autres ont déjà fourni des citations, j'ajouterai une autre illustration simple. Les deux formes suivantes sont presque identiques, sauf pour la conception visuelle:
Le formulaire de gauche est généralement plus lisible que le formulaire de droite:
- Le texte a une couleur cohérente (noir)
- Le rapport de contraste entre le texte et l'arrière-plan est plus élevé (la distance vectorielle dans l'espace colorimétrique entre le noir et le violet est plus élevée qu'entre le gris clair et le blanc)
- Les champs du formulaire sont délimités avec plus de contraste
- Les étiquettes centrées fournissent une indication claire du flux de travail
Pourtant, la plupart des utilisateurs rapporteront une meilleure expérience utilisateur avec le formulaire à droite, car il a une meilleure conception visuelle :
- Il a mieux alignement de la grille (les étiquettes sont alignées à gauche avec les champs)
- Il a une meilleure cohérence de mise en page (les champs et les boutons sont de la même taille)
- Il a une palette de couleurs plus calme avec moins couleurs surprenantes/conflictuelles
- Il a une apparence plus familière sous forme
Vous pouvez commencer par lire entrée d'interaction-design.org, par Noam Tractinsky, sur l'esthétique visuelle . N'oubliez pas de lire également commentaires de Jeffrey Bardzell sur l'entrée .
Ensuite, vous pouvez consulter le séminal de Tractinsky Ce qui est beau est utilisable :
Une analyse multivariée de la covariance a révélé que le degré d'esthétique du système affectait les perceptions post-utilisation de l'esthétique et de l'utilisabilité, alors que le degré d'utilité réelle n'avait pas un tel effet.
et La beauté est-elle vraiment utilisable? Vers la compréhension de la relation entre l'utilisabilité, l'esthétique et l'affect dans HCI par Tuch, Roth, Hornbæk, Opwis et Bargas-Avila:
Les résultats montrent que l'esthétique n'affecte pas l'utilisabilité perçue. En revanche, l'utilisabilité a un effet sur l'esthétique perçue après utilisation. Nos résultats montrent que la notion de "ce qui est beau est utilisable", qui suppose que l'esthétique améliore la perception de l'utilisabilité peut être inversée dans certaines conditions (ici: une forte manipulation de l'utilisabilité combinée à une manipulation esthétique de moyenne à grande).
Que le concepteur pense que l'utilisabilité en elle-même est suffisante pour une bonne expérience utilisateur ou qu'une bonne expérience utilisateur est une somme de plusieurs aspects, y compris l'aspect, la sensation et la fonctionnalité, je le pense toujours en termes d'échelle Nielsen-Norman.
Je suis d'accord avec la plupart des points soulevés jusqu'à présent, je vais donc simplement en ajouter un qui n'a pas encore été abordé.
L'une des choses souvent négligées dans la conception visuelle est son impact sur la confiance de l'utilisateur. Si vous êtes déjà allé sur un site Web de petite entreprise qui a été construit en utilisant l'un des nombreux. basés sur des modèles, des sites Web d'hébergement bon marché, vous comprendrez ce que je veux dire. . . les pages sont généralement complètement fonctionnelles et vous pouvez faire ce que vous devez faire, mais subconsciemment, il y a souvent un sentiment de "Est-ce que leur produit/service sera de la même qualité que leur site web? Puis-je même espère que j'obtiendrai ce que j'ai acheté?
Juste ou injuste, la qualité et les efforts consacrés à la construction d'un site Web ou d'une application pour le rendre beau et performant (en plus d'être fonctionnel), ont un impact sur la façon dont l'utilisateur perçoit les opinions générales du propriétaire sur/l'approche de la qualité. Le souci du détail et le fait de ne pas fournir un bon UX impliquent que le propriétaire de l'entreprise/application prêtera attention aux détails et à l'expérience globale de la transaction, de la livraison, du produit, du service, etc.
Je connais des personnes qui ne soumettront pas de données personnelles (pour les achats, l'inscription, etc.) via un site Web si elles ne pensent pas qu'elles semblent professionnelles. . . ils chercheront un fournisseur alternatif.
Il y a eu des études scientifiques dans l'aviation, qui montrent que l'esthétique visuelle des tableaux de bord de contrôle dans le cockpit de l'avion affecte l'efficacité des opérations de vol.
Un design visuellement attrayant affecte donc la convivialité. Mais ce qui était intéressant, c'est que lorsque le système était trop beau pour les opérateurs, ils le percevaient comme trop intelligent et idéal, donc l'efficacité diminuait (à cause de la perte de contrôle sur le système).
Pour en savoir plus, consultez le livre "Aviation Human Factors, 2nd edition", Chapter 16, "Flight Deck Aesthetics and Pilot Performance"
L'utilisateur est à l'aise ou autrement dans un laps de temps très court - la façon dont l'utilisateur perçoit est très importante. De plus, l'utilisateur se forge une opinion basée sur des expériences précédentes (c'est l'une des raisons pour lesquelles une partie de la conception doit suivre l'histoire) et lorsque des déclencheurs mixtes à droite placés aux bons points (c'est là que les trackers oculaires aident un peu) facilitent l'expérience utilisateur. Donc, oui, la conception visuelle est importante.
Seul peut répondre le point 2):
Après 5 ans de conception d'interface utilisateur mobile, je peux vous dire fonction> conception. Les petits écrans demandent des informations détaillées là où moins est plus. Cependant, les couleurs (design visuel) peuvent optimiser l'UX.
Un de mes projets était une application mobile pour les agriculteurs (ils n'avaient jamais utilisé de smartphone auparavant). Avec les bonnes couleurs (rouge pour annuler/vert pour ok, etc.), ils ont réussi à comprendre ce qui se passerait après avoir appuyé sur un bouton. Les icônes aident également au lieu d'utiliser du texte. Alors oui, la conception visuelle peut optimiser l'UX lors d'une utilisation valide.
je l'ai souligné dans un commentaire, mais il y a aussi un élément de "réponse"…
Logique floue
Les études sur la façon dont la conception "visuelle" affecte l'expérience utilisateur sont difficiles à cerner. Même la grande écriture de Don Norman sur le sujet a un élément de mystère ou d’art. Vous ne trouverez rien qui dise,
"C'était non conç et c'était conç et voici les résultats."
Ce n’est pas possible, non? Quelque part, c'était conç, même si ce n'était qu'un tas de champs assemblés selon les caprices d'un ingénieur. Pouvez-vous appeler cela non visuel? Bien sûr que non. C’est un continuum flou de mauvais à bon, qui est intrinsèquement une question de préférence personnelle et culturelle.
Mesure floue
Alors, comment mesurez-vous quelque chose avec des bords flous? À strictement parler, vous ne pouvez pas le faire avec un certain degré de précision. Vous comptez donc sur votre cerveau pour combler les lacunes et interpréter les réponses humaines aux différentes solutions - des solutions visuelles qui sont composées de diverses sous-disciplines du design.
Beaucoup de bonnes discussions ici déjà, mais je pensais simplement ajouter une référence car l'OP semble vouloir des études de cas pour soutenir l'interface UI et UX.
J'y fais référence de temps en temps lorsque je pense à l'esthétique du design et je l'ai vu en action. Les utilisateurs (moi y compris) semblent ne pas être aussi agités par les petits désagréments UX qu'ils (moi y compris) sont impressionnés par l'esthétique du design.
https://www.nngroup.com/articles/aesthetic-usability-effect/
L’effet d’utilisabilité esthétique fait référence à la tendance des utilisateurs à percevoir les produits attrayants comme plus utilisables. Les gens ont tendance à croire que les choses qui paraissent mieux fonctionneront mieux - même si elles ne sont pas réellement plus efficaces ou efficientes.
Je vais utiliser un exemple simple pour montrer comment la conception visuelle peut avoir un impact sur l'expérience utilisateur, en particulier la convivialité. La science derrière cela a à voir avec la façon dont vous conduisez l'œil de l'utilisateur final sur la page. L'une des meilleures choses que vous pouvez faire avec des sites ou des applications qui affichent de grandes quantités de données est d'utiliser principes Gestalt pour créer des groupes de données. Fait correctement, le cerveau ne percevra plus les informations comme un ensemble de données volumineux, mais comme des blocs de données beaucoup plus faciles à traiter.
Il est assez facile de créer 2-3 gros morceaux auxquels l'utilisateur peut rebondir tout en ignorant les autres. Un exemple de ceci pourrait être un site avec un en-tête, une navigation à gauche et une zone de contenu. L'utilisateur peut très rapidement rebondir sur le contenu s'il est sûr de l'emplacement actuel sur le site, mais que se passe-t-il lorsque le contenu doit être décomposé en plusieurs morceaux.
À ce stade, nous atteignons un point où nous imbriquons des morceaux à l'intérieur d'autres morceaux. Si nous utilisons simplement un espace blanc, nous pourrions nous retrouver avec trop d'espace blanc et cela ne fonctionnera pas. Si nous utilisons des bordures, nous finirons avec une page visuellement bruyante qui détruira presque tout le travail acharné que nous essayons de faire pour rendre la tâche de recherche visuelle plus facile pour l'utilisateur. Votre cerveau traitera le bruit visuel, que vous assistiez directement à l'information ou non. Moins d'effort cérébral = performances supérieures, il est donc toujours bon de réduire le bruit.
Donc, si nous avons déterminé nos morceaux, que faisons-nous pour résoudre le problème? La profondeur et la couleur ajoutent des dimensions supplémentaires qui peuvent créer des groupes Gestalt aussi efficacement que les bordures et les espaces blancs sans tout le désordre. En utilisant une couleur d'arrière-plan différente sur un certain groupe ou en déclenchant une couleur de texte en fonction de l'état des éléments, tout à coup tous les morceaux que nous voulons représenter sont présents. L'œil de l'utilisateur peut librement rebondir en fonction de son intention personnelle, et les éléments qui ne l'intéressent pas sont plus faciles à ignorer. "Je suis intéressé par tous les éléments de la liste active dans ma file d'attente" - ils sont de couleur verte, "J'ai besoin de trouver un certain élément dans cette liste" - tous les arrière-plans des titres de liste sont en bleu clair.
La partie "art" entre en jeu lorsque vous choisissez où et quel type de couleur ou de profondeur vous souhaitez appliquer où. L'application correcte provient principalement de l'expérience actuelle, car la plupart de ces éléments ne sont pas documentés (pour autant que je sache). Cependant, le langage de conception des matériaux de Google explique bien comment ils appliquent le design visuel et pourquoi. Je le recommande si vous êtes intéressé par ce sujet. Cependant, et en toute honnêteté, la conception visuelle est vraiment le produit de la recherche et de l'ingénierie. La science provient de la neuroscience, de la psychologie cognitive, de la psychologie expérimentale, etc. La recherche provient de la recherche d'utilisateurs finaux, d'activités telles que la création de personnalités, l'analyse des tâches et les tests A/B. L'ingénierie provient de l'application des précédentes aux interfaces utilisateur.
Après plusieurs années, j'ai constaté que toutes les parties de l'expérience utilisateur, y compris la conception visuelle, ont très peu à voir avec les préférences personnelles. La conception doit se présenter en fonction de vos recherches et de votre compréhension du domaine, comme tout autre domaine.