Boostez votre UX avec ces principes de conception d'interaction réussis

Il y a une ligne fine entre une interaction qui fonctionne et une autre qui est inutilisable. Les principes de conception d'interaction aident à combler le fossé.

Une conception d'interaction bien exécutée joue un rôle énorme dans la mise en œuvre d'une grande UX et est incontestablement l'un des principes fondamentaux des principes de conception UX.

« Inutilisable » signifie « je passe à autre chose », et peu importe à quel point la conception visuelle est « belle » – à quel point cette animation est fantaisiste – gâchez la conception de l'interaction et votre UX est kaput. Faites les choses correctement et vous serez sur la bonne voie vers une bien meilleure UX, même si l'esthétique est insuffisante. Le produit aura de bien meilleures chances de réussir, ce qui contribuera à son tour au résultat net.

La conception d'interaction (IxD) est définie par l'Interaction Design Association (IxDA) comme « la structure et le comportement des systèmes interactifs. Les concepteurs d'interaction s'efforcent de créer des relations significatives entre les personnes et les produits et services qu'ils utilisent, des ordinateurs aux appareils mobiles en passant par les appareils électroménagers et au-delà.

L'expérience est essentielle, car elle détermine à quel point les gens se souviennent affectueusement de leurs interactions. —Don Norman dans La conception des choses de tous les jours.

Suivre les principes de conception d'interaction contribue énormément à une excellente conception d'interaction, qui à son tour contribuera à l'expérience.

Il est possible que tous les appareils et technologies d'aujourd'hui soient remplacés par quelque chose de complètement différent du jour au lendemain, mais en raison de ses principes durables, une excellente conception d'interaction serait toujours réalisable. Ces principes constants concernent ce qui motive les gens, leur comportement et leur façon de penser.

Imaginez si chaque poignée de porte sur chaque porte fonctionnait différemment. Pour l'un, vous devrez d'abord pousser dans la porte puis vers le bas; pour un autre, il faudrait tirer vers le haut au lieu d'appuyer vers le bas, et pour un autre encore, il faudrait remonter deux fois puis redescendre - un désastre total. En fait, l'expression "tourner la poignée de la porte" suppose qu'il n'y a qu'une seule façon de le faire.

Personne n'aime être battu sur la tête par des cris de "suivez les règles", mais une conception d'interaction vraiment excellente repose sur un ensemble de normes, de meilleures pratiques, de conventions et de règles empiriques (heuristiques). Ce n'est pas une science spongieuse, mais ils forment le fondement d'IxD et rendent l'interaction possible avec le moins de friction. Les normes d'interface n'étouffent pas la créativité : ce ne sont pas des règles absolues, mais des directives fondamentales qui aident un concepteur à établir une base de « conception utilisable et familière » à partir de laquelle innover.

Principes de conception d'interaction et meilleures pratiques

La conception d'interaction relève de la discipline de l'interaction homme-machine (HCI), "Un domaine d'étude multidisciplinaire axé sur la conception de la technologie informatique et, en particulier, l'interaction entre les humains (les utilisateurs) et les ordinateurs." - tel que défini par l'interaction Fondation de conception.

Une excellente conception de l'interface utilisateur procure un pur plaisir à l'utilisateur en combinant les principes de base de la conception de l'interface utilisateur avec une conception d'interaction axée sur les objectifs.

• Une conception d'interaction réussie utilise des objectifs simples et clairement définis, un objectif fort et une interface utilisateur intuitive.
• Dans un effort pour garder les interactions simples et faciles, la conception d'interaction axée sur les objectifs ne met rien de plus que le minimum absolu nécessaire devant les utilisateurs pour qu'ils puissent accomplir une tâche.

Plongeons-nous dans certains des principes les plus importants (pas une liste exhaustive en aucun cas):

Découvrabilité

Fondamentalement, si l'utilisateur ne peut pas le trouver, il n'existe pas. Il doit être clair comme une cloche quelles actions sont possibles dans une interface utilisateur en moins d'une microseconde, par exemple, étiqueter les icônes comme une meilleure pratique. Les icônes sans étiquette reviennent à jeter des barrages routiers sur le chemin d'un utilisateur, car il devra s'arrêter pour déchiffrer le sens. Vous interrompez le "flux". Et voici un choc… Ils ne sont pas intéressés à apprendre votre interface utilisateur.

Signifiants

Très liée à la découvrabilité, l'utilisation efficace des signifiants garantit que les affordances - la possibilité d'une action sur un objet - sont clairement indiquées dans l'interface utilisateur. Les signifiants fournissent des indices forts comme des signaux ou des panneaux de signalisation. Indiquant une interaction disponible, ils font clignoter des lumières vertes à l'utilisateur en criant: "Me voici, vous pouvez appuyer (cliquer, glisser, etc.) sur moi!" Une affordance peut exister dans l'interface utilisateur, mais peut rester cachée car s'il lui manque un signifiant, elle reste invisible. Un exemple pourrait être une "interaction gestuelle cachée" qui ne se révèle que si l'utilisateur balaye accidentellement vers la gauche ou vers la droite (pour supprimer quelque chose, par exemple).

Les affordances définissent les actions possibles. Les signifiants précisent comment les gens découvrent ces possibilités : les signifiants sont des signes, des signaux perceptibles de ce qui peut être fait. Les signifiants sont bien plus importants pour les concepteurs que les affordances. —Don Norman (Normand, 2013)

Retour d'information

Après les signifiants, la deuxième communication la plus importante pour l'utilisateur est le feedback. Le feedback signifie : une information explicite sur l'impact de l'action . Cela signifie également une visibilité constante de l'état du système, c'est-à-dire que le système doit s'assurer que :

• Les utilisateurs sont tenus informés de ce qui se passe.
• Il existe des informations continues sur les résultats de leurs actions et l'état actuel du produit (système).
• Il n'y a aucune confusion dans l'esprit d'un utilisateur quant à l'état du produit, c'est-à-dire le traitement, le chargement, la recherche, le téléchargement, etc., ou tout autre changement d'état.
• Après l'exécution d'une action, il est facile de déterminer le nouvel état.

Modèles conceptuels et modèles mentaux

Une excellente conception d'interaction présente toutes les informations dont un utilisateur a besoin pour créer un bon modèle conceptuel du système, conduisant ainsi à sa compréhension et à un sentiment de contrôle. Un modèle conceptuel améliore à la fois la découvrabilité et l'évaluation des résultats lors de l'utilisation du système.

Les modèles mentaux - ou cartes cognitives - sont les images dans l'esprit d'un utilisateur qui informent ses attentes d'une certaine interaction et comment quelque chose fonctionne dans le monde réel. Les cartes cognitives sont des représentations internes de notre environnement physique, notamment associées à des relations spatiales. En utilisant efficacement le modèle mental de l'utilisateur, les concepteurs d'interactions peuvent créer des systèmes qui "semblent" intuitifs.

Le concepteur invente un modèle conceptuel - le modèle de conception, et c'est ainsi que le concepteur entend que l'appareil ou le logiciel fonctionne. La seule façon de communiquer ce modèle aux utilisateurs est de l'implémenter via une interface utilisateur. Les utilisateurs interagissent ensuite avec le modèle conceptuel et créent leur propre modèle mental du fonctionnement de quelque chose.

Les concepteurs ne peuvent pas dire aux utilisateurs comment ils voulaient qu'une application fonctionne. Ils doivent concevoir une interface utilisateur de manière appropriée afin de communiquer clairement son objectif. En d'autres termes, rendez l'interface facile à comprendre et à utiliser. Une mauvaise conception de l'interaction risque de créer le mauvais modèle mental pour l'utilisateur. Cela conduit à la confusion et à l'erreur de l'utilisateur car il essaie d'utiliser l'application d'une manière que le concepteur n'avait pas prévue.

Mappages

La cartographie est la relation entre les contrôles et leur effet dans le monde. Le principe de rétroaction est un proche cousin de la cartographie, car les deux principes fonctionnent ensemble pour créer une expérience transparente. Presque tous les artefacts nécessitent une sorte de mappage entre les commandes et les effets - dans le cas de la conception d'interface, il s'agit de la relation entre une commande et sa fonction résultante.

La cartographie naturelle - tirant parti des analogies physiques et des normes culturelles - conduit à une compréhension immédiate. Par exemple, un concepteur peut utiliser l'analogie spatiale dans l'interface utilisateur :

• Pour augmenter une valeur avec un composant de curseur, faites glisser un curseur vers la droite,
• Pour le diminuer, balayez vers la gauche.

Certaines cartographies naturelles sont biologiques, comme dans la norme universelle selon laquelle un niveau croissant représente plus, un niveau décroissant, moins.

Contraintes

Le concept de conception des contraintes est un moyen de déterminer comment restreindre le type d'interaction de l'utilisateur qui peut avoir lieu à un moment donné. Les contraintes de conception d'interaction permettent une interaction efficace en fournissant des « rails de guidage » aux utilisateurs, presque comme une main guidant les interactions qui peuvent se produire.

Les contraintes de conception garantissent que seuls des éléments spécifiques sont activés, voire visibles, afin de guider l'utilisateur vers certaines interactions. Il considère la taille, l'échelle, la proportion, l'accent et l'état, et comment ceux-ci, travaillant ensemble en harmonie, aident à créer une hiérarchie et par conséquent influencent l'utilisateur. Les contraintes mises en place correctement contribuent également à réduire le risque d'erreur de l'utilisateur.

Le contraire de la contrainte est lorsque chaque option est offerte à l'utilisateur, ce qui rend difficile pour lui de décider quoi faire ensuite. C'est le principe du choix . Plus il y a d'options, plus il est difficile de choisir l'une d'entre elles - nous sommes submergés par toutes les possibilités.

Une excellente conception d'interaction ne met pas toutes les options disponibles sur l'interface, mais la limite à ce qui est le plus important à un moment donné.

Cohérence, normes et heuristique

Ceux-ci sont tous liés - frères aux modèles (ci-dessous), si vous voulez. Pour éviter les erreurs de l'utilisateur et faciliter l'apprentissage d'une application, il est essentiel qu'un modèle d'interaction soit cohérent. La cohérence améliore l'expérience utilisateur, la convivialité générale et l'efficacité avec laquelle les utilisateurs peuvent utiliser les produits numériques.

La cohérence signifie utiliser des éléments similaires pour accomplir des tâches similaires et avoir des fonctions et des comportements similaires partout. Une interface cohérente est une interface qui suit des règles, telles que l'utilisation de la même opération pour faire quelque chose.

Les produits qui s'efforcent d'être hautement utilisables suivent des conventions, des normes, des meilleures pratiques et des heuristiques d'utilisabilité bien établies (règles générales, pas de directives d'utilisabilité spécifiques).

Se conformer à une convention par exemple, peut être dans la façon dont une page est mise en page. Les internautes passent 69 % de leur temps à consulter la moitié gauche de la page et 30 % à consulter la moitié droite. Par conséquent, un site a plus de chances d'être rentable s'il suit une disposition conventionnelle.

Une norme pourrait être un fil d'Ariane (un dispositif d'orientation et de navigation immédiatement reconnaissable), ou un menu de navigation global en haut de la page comme sur le site BCC.

Modèles et capacité d'apprentissage

Avec quelle facilité un nouvel utilisateur peut-il apprendre à naviguer dans une interface ? Personne ne veut apprendre une nouvelle façon de faire les choses à moins que cela n'apporte un avantage significatif par rapport à ce qui l'a précédé. Pourtant, nous sommes constamment inondés d'interactions non testées et non conventionnelles.

Les composants ou modèles communs offrent une facilité d'apprentissage instantanée. Une fois que vous aurez appris à vous servir d'une cuillère, vous saurez toujours vous en servir. Pareil pour faire du vélo, patiner… la même construction s'applique aux composants de l'interface utilisateur que nous utilisons tous les jours : boutons, champs de texte, menus déroulants, cases à cocher, boutons radio, roulettes, curseurs, icônes, accordéons, champs de recherche, etc.

Les meilleures conceptions d'interaction n'essaient pas de réinventer la roue, mais d'utiliser efficacement et efficacement les modèles d'une nouvelle manière.

Les modèles encouragent non seulement l'apprentissage, mais assurent également la cohérence (un autre principe, discuté ci-dessus) et l'alignent sur les attentes de l'utilisateur quant à la façon dont les choses devraient fonctionner.

Hiérarchie visuelle et emphase

Lors de leur interaction avec un site ou une application, les internautes recherchent les informations les plus pertinentes pour leur recherche. La hiérarchie visuelle concerne l'agencement des éléments d'une manière qui implique une importance. La hiérarchie visuelle dans le design influence l'ordre dans lequel l'œil humain perçoit ce qu'il voit. Tout n'a pas le même « poids » ; l'ordre est créé par le contraste visuel entre les objets dans un champ de perception. Le contraste visuel (accentuation) peut être obtenu par la taille, la proximité, la couleur, l'opacité et le contraste tonal réel entre les éléments.

Ne sous-estimez pas la puissance de la hiérarchie visuelle. Il a été très efficacement utilisé dans toutes sortes de conceptions depuis des éons, dans l'architecture et le design industriel ainsi que dans la conception d'impression. Découvrez quelques superbes designs d'affiches. En utilisant bien cette technique dans la conception d'interaction, les bonnes choses semblent apparaître au bon moment de la bonne manière.

Les grands concepteurs d'interaction utilisent le pouvoir de l'emphase pour réussir à réaliser des conceptions d'interfaces "légères et moyennes" qui semblent fonctionner comme par magie.

Loi de Fitts

Croyez-le ou non, cette loi provient des premières études portant sur le mouvement des muscles humains et le ciblage des performances des opérateurs de télégraphe et de la ligne de production, et a ensuite été adaptée à l'interaction homme-ordinateur (HCI). Il dit essentiellement : "Le temps nécessaire pour acquérir une cible est fonction de la distance et de la taille de la cible."

En termes plus simples, il s'agit de la distance et de la taille d'une cible, et de sa proximité par rapport à d'autres cibles. Des mouvements de souris ou des tapotements plus courts sont préférables - il est toujours plus rapide de cliquer ou de balayer une cible si elle est plus proche de votre position de départ. Les tâches associées doivent également être proches les unes des autres afin que les utilisateurs n'aient pas à parcourir l'écran pour interagir avec l'interface utilisateur.

La loi de Fitts peut prédire avec précision le temps qu'il faut pour se déplacer vers et sélectionner une cible. Une cible peut être un bouton, une liste déroulante ou tout autre élément interactif sur un écran. S'il est trop éloigné, trop petit ou si les éléments cliquables sont trop proches les uns des autres, l'efficacité et la convivialité de l'interface utilisateur sont considérablement réduites.

Diagramme de Gutenberg, dispositions en Z et en F

Ces modèles sont applicables dans différentes situations en fonction du contenu et sont principalement utilisés par le public occidental. Le diagramme de Gutenberg décrit un modèle général que les yeux parcourent lorsqu'ils regardent des informations homogènes et uniformément réparties, principalement des sites contenant beaucoup de texte, tels que des blogs ou des sites d'actualités. Le diagramme de Gutenberg suggère que les zones de jachère fortes et faibles se situent en dehors du chemin de gravité de lecture et reçoivent une attention minimale à moins d'être soulignées visuellement d'une manière ou d'une autre.

Le motif Z suit la forme de la lettre Z. Dans certains cas, ce motif est également appelé motif Zig-Zag. La principale différence avec le diagramme de Gutenberg est que le motif en Z suggère que les spectateurs traverseront les deux zones en friche. Sinon, ils commencent et finissent toujours aux mêmes endroits et passent toujours par le milieu. Comme avec Gutenberg, un concepteur placerait les informations les plus importantes le long du chemin du motif en Z.

F signifie rapide et fait référence à la façon dont les utilisateurs lisent le contenu. Le motif F a été popularisé par une étude de suivi oculaire de NNGroup qui a enregistré plus de 200 utilisateurs lisant du contenu sur le Web. Il a constaté que les modèles de numérisation des utilisateurs étaient assez cohérents sur de nombreux types de sites différents.

Pourquoi est-ce important? Sur un site de commerce électronique par exemple, pour optimiser la numérisation, vous souhaiterez peut-être organiser le contenu le plus important d'une manière qui suit le modèle F.

Reconnaissance plutôt que rappel

La reconnaissance fait référence à notre capacité à « reconnaître » un événement ou une information comme étant familier, tandis que le rappel est beaucoup plus un « fardeau cognitif » qui consiste à extraire des détails connexes de la mémoire. Montrer aux utilisateurs des éléments qu'ils peuvent reconnaître améliore la convivialité par rapport à la nécessité de rappeler des éléments à partir de zéro.

Par exemple, l'utilisation d'icônes dans une interface utilisateur est puissante car elle permet la reconnaissance instantanée d'un symbole. Notre cerveau traite (reconnaît) les symboles environ 1000 fois plus vite que la lecture de texte. Si un concepteur affiche une icône de signe d'avertissement standard dans une boîte de dialogue, cela oblige immédiatement l'utilisateur à se concentrer et à prêter attention car l'action suivante peut être destructrice. Mais si une icône est conçue de manière à obliger les utilisateurs à se rappeler et à déchiffrer le sens - une main levée par exemple au lieu de l'icône d'avertissement - cela diminue l'efficacité et la convivialité de l'interface utilisateur.

Design esthétique et minimaliste

Il faut comprendre profondément l'essence d'un produit afin de pouvoir se débarrasser des pièces qui ne sont pas essentielles. —Jonathan Ive.

C'est l'un des principes les plus difficiles parce que c'est difficile. La tendance est aux concepteurs et aux chefs de produit d'ajouter toutes les options disponibles sous le soleil et de laisser l'utilisateur décider du chemin qu'il souhaite emprunter. C'est vraiment l'approche paresseuse et conduit à des produits pleins d'encombrement non essentiel.

Les interfaces doivent être débarrassées des éléments inutiles et du contenu qui ne prend pas en charge les objectifs et les tâches de l'utilisateur. Les concepteurs doivent non seulement concevoir des interfaces utilisateur esthétiques, mais également donner la priorité aux informations d'un écran à l'autre dans le flux d'utilisateurs. En utilisant la hiérarchie visuelle et la magie de l'emphase, seules les informations essentielles et minimales nécessaires à l'utilisateur pour accomplir une tâche doivent être présentées.

Michel-Ange a dit de son travail: "J'ai vu l'ange dans le marbre et j'ai sculpté jusqu'à ce que je le libère."

Concevoir une interaction minimaliste, esthétique et simple nécessite que le designer comprenne ce qui se passe précisément au moment où les gens vont utiliser le produit, et se débarrasse de tout ce qui n'est pas nécessaire. Effectuer des recherches et des tests approfondis sur les utilisateurs pour comprendre comment les utilisateurs utiliseront le produit est généralement la meilleure approche.

Prévention des erreurs

Les utilisateurs sont souvent distraits lors de l'exécution d'une tâche, il est donc essentiel d'éviter les erreurs inconscientes en mettant l'accent visuel, en offrant des suggestions et en utilisant des contraintes soigneusement conçues. Une forme de protection contre les erreurs, également connue sous le nom de Poka-Yoke, fait référence à la mise en œuvre de mécanismes de sécurité pour empêcher un processus de produire des erreurs.

L'un des meilleurs moyens d'éviter les erreurs est de concevoir un meilleur modèle mental. De nombreuses erreurs d'utilisation se produisent lorsque le modèle du concepteur et l'interprétation du fonctionnement du système ne correspondent pas au modèle mental de l'utilisateur.

Les conventions de conception standard sont utiles (l'un des principes mentionnés ci-dessus) car elles aident les utilisateurs à comprendre les actions qu'ils peuvent entreprendre. Les utilisateurs qui interagissent avec votre site Web ou votre application ont utilisé des milliers d'autres sites et applications, et s'attendent à ce que les éléments interactifs communs se présentent et fonctionnent d'une certaine manière. Des situations propices aux erreurs peuvent survenir lorsque votre produit s'écarte de ces conventions.

Avertir avant que des erreurs ne soient commises et confirmer avant des actions destructrices. Encore mieux que des messages d'erreur bien implémentés, il y a une conception soignée qui empêche un problème de se produire en premier lieu. Essayez d'éliminer les circonstances propices aux erreurs et continuez à les vérifier.

L'avenir de la conception interactive

De nouveaux appareils, environnements et interfaces continueront d'évoluer avec de nouvelles possibilités d'interaction. Les contrôleurs de jeux vidéo évoluent constamment et offrent un large éventail de commandes d'entrée, ainsi qu'un retour haptique. Les interfaces gestuelles passeront des écrans tactiles prenant en charge les gestes 2D et 3D, par exemple, les gestes sur les appareils iOS et Android, à l'utilisation des gestes de la main dans les espaces 3D pour interagir avec les espaces de réalité virtuelle, les consoles de jeu et les appareils IoT qui nous permettent de contrôler notre environnement. .

Comme dans le cas du projet Soli de Google, nous pouvons dire sayonara à la souris, aux trackpads et aux joysticks, et passer à des interactions gestuelles plus naturelles en utilisant notre main et nos doigts pour contrôler les appareils. Dans certains cas, dans les interfaces utilisateur conversationnelles par exemple, les méthodes de saisie peuvent changer du clavier à la voix. Néanmoins, le principe de rétroaction immédiate et continue sous une forme ou une autre (voix, haptique et visuelle) sera toujours nécessaire.

Les principes fondamentaux de conception d'interaction joueront toujours un rôle central dans la conception des futurs systèmes et il est important que les concepteurs UX/UI les gardent à l'esprit. Ce ne sont pas des règles strictes et rapides, mais elles permettront d'obtenir des produits et services meilleurs et plus attrayants. Tout comme les films à succès utilisent des techniques de narration anciennes qui suivent une structure éprouvée et éprouvée, il existe des principes de conception d'interaction qui existent pour une bonne raison. Les suivre profitera à tout concepteur de produit en améliorant la convivialité et en favorisant une adoption plus large de leurs produits.

Pour en savoir plus sur le blog Toptal Design :

• Principes de conception : introduction à la hiérarchie
• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
• Explorer les principes de conception de la Gestalt
• Le guide complet de l'architecture de l'information