Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Les fondements du design UX : Conception de l'interactivité

Comprendre les réactions aux stimuli visuels

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Étudiez les réactions des utilisateurs aux différents stimuli visuels de couleur, de forme et de mouvement.
10:03

Transcription

Les interfaces que nous allons réaliser vont être encore aujourd'hui essentiellement de nature visuelle. Il est donc très important lorsque nous allons nous atteler à optimiser les interactions de comprendre comment l'utilisateur va percevoir et ressentir ces interfaces, c'est-à-dire à quels stimuli visuels nous pouvons le soumettre. Les stimuli visuels sont de quatre ordres. Premièrement il y a la notion de contraste, puis la notion de couleur, il y a la notion de forme et pour terminer, de mouvement. Voyons comment tout cela fonctionne et les enseignements que nous pouvons en tirer pour optimiser nos interfaces et nos designs d'interaction. Le contraste est essentiellement nécessaire à la lisibilité. Ici, ce texte en noir sur fond blanc apparaît avec une lisibilité maximale. Et puis au fur et à mesure que le fond va se griser, cette lisibilité va se réduire jusqu’à pratiquement disparaître. La lisibilité est donc dépendante du contraste, c'est-à-dire de la différence entre deux couleurs, deux densités. Mais pas uniquement. Nous avons également des contrastes qui peuvent être variés. Nous avons ici des contrastes typographiques, entre un texte petit et grand, gras ou maigre, droit ou italique, noir ou blanc, aligné à droite ou à gauche. Il y a également des contrastes de formes entre un rond et un carré, entre un texte et une image, entre un texte et des icônes. Vous voyez que les contrastes sont extrêmement variés et que l'on va pouvoir en jouant sur les contrastes, non seulement améliorer nos interfaces en les rendant plus lisibles, mais également introduire une notion très importante qui est la notion du rythme. Les couleurs sont également, quelque part, liées au contraste. À partir du moment où on a une interface qui est extrêmement monochrome comme c'est le cas ici, rien ne va ressortir. À l'inverse, si notre mise en page déborde de couleurs dans tous les sens, eh bien, nous n'aurons également rien qui va ressortir. Si nous voulons faire ressortir un élément, il va falloir jouer sur un contraste de couleur. À l'inverse, ici, vous voyez que l'élément que l'on va noter le plus eh bien, c'est celui qui présente la plus faible densité de couleur. Il faut donc avec les couleurs être extrêmement prudent et les utiliser avec modération. Il y a des idées reçues sur les couleurs, nous allons faire le point sur ce que l'on peut faire ou ne pas faire avec les couleurs et aller au-delà de ces idées reçues que vous pouvez, et vous avez bien raison, ne pas partager. La perception des couleurs va dépendre de la culture. En Asie, le blanc est lié à la notion de mort, au Moyen-Orient, le rouge est lié au luxe, alors que ça n'est pas forcément le cas en Occident, en Europe le vert est lié à l'écologie, et puis en France l'absence de couleurs est lié au luxe. Le rapport à la couleur va également dépendre du contexte. Si vous opérez sur le secteur automobile, ce ne sera pas la même chose que sur du e-commerce, ou si vous avez à mettre en avant des idées ou des opinions. Alors, la question que l'on peut se poser c'est pourquoi Facebook est-il bleu et pourquoi cet en-tête que vous voyez actuellement est-il bleu également ? En fait, on a prétendu que Marck Zuckerberg. est deutéranope. Mais en fait, il est peut-être protanope. Qu'est-ce que la deutéranopie et la protanopie ? Tout simplement, c'est le daltonisme. 12 % de la population masculine aujourd'hui a du mal à distinguer les couleurs qui vont aller des tons verts aux tons rouges. Cette caractéristique ne touche pas les femmes, mais 12 % de la population masculine n'est pas un nombre négligeable par rapport à la cible que nous visons. Tout le monde par contre va voir le bleu et c'est la raison pour laquelle de nombreux réseaux sociaux fonctionnent avec des interfaces à dominante bleue. L'appétence pour les couleurs va dépendre du genre. Les femmes vont avoir tendance à aimer plus le bleu, le violet, le vert et vont moins aimer l'orange, le marron et le gris. Les hommes eux vont à l'inverse aimer plus le bleu, le vert, mais également le noir et ils vont moins aimer l'orange, le marron et le violet est une couleur qui ne va pas forcément leur plaire beaucoup. Bien entendu, il ne s'agit ici que de tendances, ne prenez pas ces valeurs au pied de la lettre, vous devrez de toute façon les tester. Lorsque l'on va créer des interfaces, on va toujours créer un test A/B pour cette interface. Vous voyez ici une interface à gauche et à droite où le paramètre qui a changé est un paramètre de couleur. On mesurera les performances de ces deux interfaces et on retiendra celle qui aura généré les meilleurs interactions. Qu'allons-nous pouvoir faire avec les couleurs ? Comment allons-nous pouvoir utiliser les couleurs ? Le rouge est une couleur liée à l'importance, au drame, à la romance, au pouvoir, à la passion, mais également au danger et à la notion d'interdiction. Il va donc falloir être prudent. On a également avec le jaune une couleur qui est liée à l'optimisme, à l'hospitalité, à la créativité et à la paix. Cette couleur, nous allons pouvoir l'utiliser notamment pour des éléments d'interaction qui vont être des alertes, ou des offres spéciales. Le orange est une couleur qui est liée à l'amitié, à la joie, à l'innovation et à l'énergie. Nous allons pouvoir l'utiliser pour des promotions, pour des concours, ou pour des éléments qui vont être liés par exemple à tout ce qui est énergétique comme le sport. Et puis le bleu, nous en avons déjà parlé, représente une certaine force, tranquillité et calme. C'est également une couleur qui est très fraîche. Nous allons donc pouvoir l'utiliser pour tout ce qui va devoir rassurer l'utilisateur. Nous pourrons utiliser du bleu notamment dans les formulaires, les informations personnelles, les pages de contacts. Et puis également si nous avons à gérer un service-après vente où à mettre en avant des informations sur une marque ou des produits. Le vert est une couleur qui est également très fraîche, c'est la couleur du renouveau, c'est une couleur relaxante qui donne confiance, sécurité et qui est aussi liée à l'écologie. Nous allons pouvoir l'utiliser pour des produits naturels, écologiques, mais également pour des produits qui vont proposer des remises ou des avantages spécifiques à nos consommateurs. En ce qui concerne les formes, il y a une prédominance du rectangle sur l'internet qui est liée bien entendue à la gestion des différents éléments et de la structure des écrans. Il va donc falloir au maximum arrondir, si nous le pouvons, les angles, et utiliser tout ce qui va pouvoir mettre en avant, des cercles, des ellipses, comme par exemple pour montrer les vignettes qui représentent des utilisateurs que l'on appelle des avatars. Les formes et les positions dans les images sont également importantes. Il va donc falloir que vous analysiez les images que vous mettez en ligne afin de voir à l'intérieur de ces images quelles sont les formes qui sont présentes. Il va de toute façon toujours falloir effectuer des tests A/B comme pour nos interfaces. Nous sommes ici sur les vignettes qui sont proposées par Netflix et Netflix va tester systématiquement ses vignettes. C'est-à-dire que lorsque vous êtes en train de consulter votre catalogue de films, de séries sur Netflix, vous ne voyez pas la même chose que votre voisin. Et Netflix va gérer et mesurer les performances de ses vignettes. Vous voyez que ici nous avons trois vignettes pour la même série et que nous avons une vignette qui clairement va performer beaucoup mieux que les autres. Qu'est-ce qui est mesurée en terme d'engagement ? Eh bien, le taux de clics, le nombre de visionnages, le nombre de visionnages partiels et la durée du visionnage. On peut travailler avec ce que l'on appelle des heatmap qui sont en fait des cartes de températures qui vont colorier les différentes zones de l'interface avec des couleurs qui seront chaudes ou froides selon qu'elles auront été le plus vues ou le plus cliquées. Il s'agit d'une mesure de l'attraction visuelle et cela fonctionne très bien pour des images, des packagings ou des pages web. On peut prendre un exemple avec le logo d'Instagram qui était un logo très sympathique, mais qui à un moment donné a été changé par les designers d'interaction qui travaillaient sur le sujet et qui ont produit cette icône que vous voyez à droite. Évidemment les utilisateurs ont critiqué cette icône en disant qu'elle était beaucoup moins sympathique que le petit appareil photo, mais en fait les designers ici ont pris en compte un phénomène qui est crucial, qui va être la saillance. Vous êtes dans un environnement concurrentiel, ici, ce logo Instagram se trouve en compagnie de beaucoup d'autres logos et il va donc falloir qu'on puisse le repérer rapidement et qu'on puisse également le mémoriser rapidement. Et c'est ceci qui va déterminer le score de saillance. Pensez donc lorsque vous allez créer des icônes ou quand vous allez faire créer des icônes à mesurer le score de saillance, c'est-à-dire la capacité de l'élément que vous avez fait créer à être repéré et mémorisé. Et puis, le dernier des stimuli visuels que vous allez prendre en compte va être celui des mouvements. Il faut avec les mouvements être extrêmement prudent car ce sont des éléments qui risquent de perturber l'utilisateur. Vous allez donc utiliser les mouvements avec une modération, mais ceux-ci peuvent être intéressants car ils vont permettre de communiquer des informations, des alertes et également de guider les utilisateurs dans l'utilisation de l'interface que vous mettez à leur disposition. Vous voyez que tous ces stimuli visuels sont généralement indépendants des personas, de la cible car ce sont des principes généraux mais vous devrez toujours vérifier par des tests, en particulier des test A/B que ces principes vont bien s'appliquer à la cible que vous visez.

Les fondements du design UX : Conception de l'interactivité

Produisez des interfaces optimisées pour une interaction qui satisfera les utilisateurs avec des parcours plus intuitifs. Optimisez la navigation, le repérage, etc.

2h16 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :7 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !