UX design principes
13 juillet 2021

UX Design : 10 principes et lois à connaître

Partager l'article

L’UX design est à la croisée de multiples disciplines : se basant sur la psychologie cognitive, jouant avec les neurosciences, elle permet de concevoir des interfaces intuitives en plaçant l’utilisateur au centre régit par certaines règles.

Simplifier les interfaces en misant sur l’ergonomie et en étant focalisé sur l’utilisateur pour lui donner une expérience agréable, faciliter la navigation et le guider… C’est là tout l’avantage de l’UX design. Capitalisant sur les études en sciences cognitives, comportementales en passant par l’ergonomie et le marketing, l’UX permet, notamment, de concevoir des interfaces graphiques Web afin de capter l’attention de l’internaute pour qu’il aille plus loin dans sa navigation sur le site et passe à l’action : prise de contact, achat d’un produit / service… Car force est de constater que l’internaute ne consacre pas plus de 8 secondes sur un site, une tendance qui diminue d’année en année (elle était de 12 secondes en 2000).

Focaliser l’attention de l’utilisateur avec la loi de Fitts

Le psychologue Paul Fitts énonce en 1954 un principe clé : le temps nécessaire pour atteindre une cible dépend de la distance qui la sépare, mais qu’il est inversement proportionnel à sa taille. Une loi qui peut facilement s’appliquer à l’UI et l’UX design. Concrètement, elle permet de focaliser l’attention en rendant un élément plus grand, qui dispose d’un contenu animé afin d’attiser le regard. C’est particulièrement vrai lorsqu’il s’agit de mettre un contenu en avant telle qu’une offre tarifaire « recommandée » parmi d’autres offres, d’avoir un call to action dans le menu pour rediriger l’utilisateur vers un service spécifique…

Miser sur la simplicité pour réduire le temps de décision

En 1952, une équipe de psychologues américano-britanniques dirigée par William Edmund Hick et Ray Hyman étudie la relation entre le nombre de stimuli présents et le temps de réaction d’un individu à un stimulus donné. Résultats ? Ils s’aperçoivent que le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix. Ce qui se traduit dans le design d’une interface complexe par limiter les choix tout en les rendant les plus clairs possible.

Cette loi peut être complétée par celle de Parkinson. L’historien britannique Cyril Northcote Parkinson constate que les employés adaptent leur temps à la réalisation d’une tâche, les collaborateurs tendant à optimiser leur qualité de travail pour atteindre leur but ce qui se traduit par un accroissement des efforts et du temps. Avec ce principe, il est possible de concevoir des interfaces complexes en prenant en compte les interactions de l’utilisateur afin de s’assurer qu’il prend bien tout le temps qu’il faut pour parcourir le site, par des phases de tests, d’A/B testing, etc.

Soigner la ligne éditoriale en hiérarchisant l’information

Les éléments présentés en premier sont plus facilement mémorisés sur le long terme tandis que ceux vus en dernier le seront à court terme. C’est ce qu’on appelle le Serial position effect, un terme inventé par Herman Ebbinghaus. C’est pour cette raison que les sites sont présentés d’une certaine manière, avec souvent l’offre de service en premier lieu et l’offre tarifaire en bas de page, les deux éléments ayant un impact significatif plus que le contenu situé au milieu des deux. Sur l’application Pinterest, le flux d’information est présenté en premier et en dernier, les éléments de navigation et de profil, des fonctionnalités essentielles, l’une captant le regard, les autres permettant de gérer son compte et de recherche de nouvelles sources d’inspiration.

Connaître les habitudes des visiteurs

Pourquoi tous les sites et applis, dans leur interface utilisateur, finissent par se ressembler ? Cela est induit notamment par la loi de Jakob se rapportant à son fondateur Jakob Neilson. Elle repose sur des modèles d’interactions familiers avec l’utilisateur. En clair, un internaute connaissant déjà une interface similaire se focalisera plus facilement sur son contenu.

Ce principe est encore plus puissant si on le complète avec la connaissance des besoins primaires des utilisateurs. Répondre à des demandes essentielles – amour, faim, sécurité, sentiment d’appartenance, etc. – permet de susciter l’adhésion des personnes visitant le site. C’est un concept particulièrement utilisé dans les médias et la publicité. Posséder une belle voiture est souvent associée à une belle femme, le raccourci neurocognitif étant, si vous avez une belle voiture, vous avez l’amour d’une belle femme. Outre l’aspect sexiste, ce procédé est encore très répandu dans les publicités automobiles. Le marketing autour de certains parfums mise sur la séduction, les effluves de tel ou tel parfum attirera l’être aimé.

Regrouper les éléments similaires

C’est l’un des corollaires à la hiérarchisation de l’information. Les informations similaires regroupées au même endroit sont plus impactantes que disséminées au fil de l’eau sur une page. Issue de la théorie de Gestalt, cette loi de proximité permet de mieux organiser le contenu et aide les utilisateurs non seulement à les comprendre facilement, mais aussi à créer des relations entre elles. Un principe largement utilisé sur les plateformes de streaming ou encore dans le e-commerce par le biais des recommandations.

L’ergonomie de la complexité mise à l’épreuve de la loi de Tesler

Parallèle à la loi de Hick-Hyman, Larry Tesler, ex-ingénieur chez Xerox, énonce une loi de conservation de la complexité. Celle-ci indique que, quel que soit le système, il y a un certain degré de complexité qui ne peut être réduite. Si le système est d’apparence simple pour l’utilisateur (comme le moteur de recherche Google), il y a un haut degré de complexité pour ceux qui le gèrent derrière. La complexité est alors transférée ailleurs soit à un autre endroit, soit de manière cachée (fonctionnalité sous-jacente). Ainsi dans la conception d’application ou de site, les développeurs vont simplifier au mieux l’usage du site pour l’utilisateur final, pas forcément pour celui qui l’administre en back-office qui devra remplir parfois différents champs.

Mettre en avant les informations pertinentes

Afin d’avoir un contenu impactant, l’effet Von Restroff, du nom du psychiatre et pédiatre allemand, est particulièrement efficace. Celui-ci précise que parmi des éléments similaires, celui disposant d’un élément distinctif clairement identifiable est plus facilement retenu en mémoire. C’est le cas dans les offres tarifaires lorsque la mention de type « recommandé » apparaît, le tout souligné par la mise en avant du bloc, mais pas que ! Il n’y a pas que l’effet visuel qui importe, dans une suite de mots se rapportant tous à une même catégorie, le terme qui sort du lot sera perçu instinctivement et mémorisé. Exemple : baignoire, shampoing, douche, dauphin, serviette, gant… Le mot « dauphin » sera perçu rapidement, car il diffère largement de ce champ lexical.

L’incomplétion : fragmenter l’information

Les études menées par le psychologue cognitif américain George Miller mettent en évidence que la mémoire à court à terme n’est capable de retenir que sept informations en moyenne. Cette limitation peut se contourner par la décomposition des informations afin de la rendre plus simple à assimiler en les rassemblant par groupe de 5 à 9 éléments. Cette fragmentation de l’information permet aux utilisateurs d’effectuer plus rapidement des choix en réduisant leur nombre diminuant le temps de traitement de l’information et la prise de décision.

Gamifier

C’est l’une des tendances de ces dernières années. Intéresser l’internaute en lui proposant une interface ludique qui lui permet d’effectuer les tâches de manière amusante par le biais d’interactions fluides et divertissantes apporte non seulement une expérience utilisateur enrichissante, mais aussi une plus grande mémorisation. Généralement, on apprend mieux en s’amusant ce qui permet d’assimiler des notions parfois complexes. C’est par exemple le cas avec l’application Flexbox Froggy d’apprentissage du code CSS, notamment les Flexbox en faisant bouger une grenouille vers un nénuphar par l’écriture de code.

Flexbox Froggy application code CSS
L'application en ligne gratuite, Flexbox Froggy, permet d'apprendre les Flexbox tout en s'amusant.

Itérer avec l’utilisateur tout au long du processus

Enfin, le dernier principe et pas des moindres, réside dans le dialogue permanent entre le concepteur de l’interface et les utilisateurs. À chaque étape clé du process d’élaboration, l’UI/UX designer doit être en capacité de mesurer l’impact de son interface pour voir si elle correspond à la demande des utilisateurs tant au niveau de l’ergonomie que des fonctionnalités attendues. Mieux ! Un système de tests continus doit être mis en place afin de procéder à des changements pour l’adapter à la manière dont les utilisateurs se l’approprient. Cela passe par la mise en place de solutions d’A/B testing notamment, une technique de web-marketing expérimentée par Google consistant à réaliser plusieurs variantes d’une même page afin de déterminer la version qui donne les meilleurs résultats auprès des utilisateurs. Il existe plusieurs outils permettant de réaliser ces opérations, dont celle de Google, Google Optimize ou encore AB Tasty. Nous aurons l’occasion de revenir sur ce sujet prochainement.

 

Nos dernières formations WebDesign

  • Atelier Figma - Design d'application
    Découvrir
    A l'issue de cette formation vous serez en mesure de designer et vos propres interfaces, créer des composants réutilisables, créer des styles de couleurs et de texte, créer des prototypes, et utiliser les ressources de la communauté Figma. Vous serez autonome dans la création de vos projets d'interfaces sur Figma !
    3h08 42 vidéos 5 / 5
  • Apprendre Adobe XD - Les fondamentaux
    Découvrir
    Maîtriser Adobe XD pour le design et le prototypage d'interfaces intéractives.
    3h42 56 vidéos 5 / 5
  • Apprendre les tendances graphiques en Webdesign
    Découvrir
    Apprendre et comprendre les principales tendances graphiques en Webdesign
    1h55 21 vidéos 4 / 5
  • Atelier Sketch 3
    Découvrir
    Atelier de création d'une maquette web avec le logiciel Sketch 3
    1h48 13 vidéos
  • Apprendre Sketch 3
    Découvrir
    Débuter sur Sketch 3, l'outil de dessin vectoriel
    0h53 18 vidéos
  • Apprendre le Responsive Design
    Découvrir
    Apprendre à réaliser un site Responsive
    4h28 35 vidéos
Partager l'article