Catégories
Plugin et site web

Comment bénéficier des modèles mentaux dans la conception UX

Les utilisateurs viennent sur votre site Web avec certaines attentes déjà en tête; ils ont déjà vu des milliers d'autres sites Web et c'est tout naturellement qu'ils ont adopté certaines habitudes.

Au lieu d'essayer de modifier ces modèles, il est préférable de les intégrer à votre conception. Pour en savoir plus, examinons de plus près un concept psychologique appelé modèles mentaux.

Que sont les modèles mentaux?

Avant de passer aux exemples, nous allons parcourir la définition très rapidement. Enraciné dans la philosophie et la psychologie, le terme modèle mental est maintenant couramment utilisé pour décrire l'interaction homme-machine. Il décrit comment l'utilisateur a déjà une idée du fonctionnement de quelque chose. En d'autres termes, il s'agit d'une représentation de ce que l'utilisateur sait du site Web avant même de commencer à l'utiliser.

c'est une représentation de ce que l'utilisateur sait du site Web avant même de commencer à l'utiliser

Nielsen Norman Group, un institut de recherche réputé, a examiné le sujet plus en détail. Ils mettent l'accent sur un aspect important de cette définition: un modèle mental n'est pas factuel; c'est uniquement basé sur croyances et prédictions qui proviennent des expériences précédentes de l'utilisateur. À cause de ça, chaque utilisateur a des modèles mentaux différents. Le fond varie d'une personne à l'autre. Bien sûr, c'est souvent similaire, mais jamais exactement pareil.

Maintenant que vous avez une idée de ce qu'est un modèle mental, il est temps de passer au sujet principal: comment ce concept s'applique-t-il à la conception Web?

Comment les modèles mentaux affectent la conception Web

Nous utilisons quotidiennement une large gamme de produits numériques. Sur la base de ces interactions, nos cerveaux ont développé une variété de modèles mentaux pour les interfaces.

Cela est clairement visible dans le cas des enfants qui ont été élevés à l'aide d'écrans tactiles. Vous avez peut-être vu un petit enfant qui parle assez bien avec une tablette et un téléphone portable, mais lorsque vous lui donnez un livre, il essaiera également de glisser. C'est parce qu'ils connaissent déjà un motif et qu'ils l'appliqueront automatiquement à d'autres objets qui se ressemblent ou ont une fonction similaire.

En tant qu’adultes, nous sommes tout aussi enclins à des schémas similaires. Nous vivons avec certaines croyances concernant les pages Web. Certains d'entre eux sont avec nous depuis des années, tels que:

  • Les liens doivent être soulignés ou affichés dans une couleur différente;
  • Le logo de l'entreprise se trouve dans le coin supérieur gauche;
  • Le bouton d'inscription se trouve dans le coin supérieur droit.

Les deux dernières règles sont clairement visibles dans la façon dont les gens lisent les sites Web. Vous avez probablement entendu parler du modèle F, mais pour la plupart des sites Web contenant peu de texte, le modèle Z s'avère plus courant.

L'utilisateur scanne le site Web, à partir du logo, à travers la barre de navigation, jusqu'au CTA. Les visiteurs s'attendent à trouver certains éléments à certains endroits. Tout écart par rapport à cette conception éprouvée et testée peut entraîner une confusion et, éventuellement, une baisse des conversions.

Jetez un œil à ces exemples concrets pour voir comment cela fonctionne:

miro "width =" 1856 "height =" 729 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / miro-300x118.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/miro-768x302.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/miro-1024x402.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<div class=sendgrid "width =" 1856 "height =" 846 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_887_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / sendgrid-300x137.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/sendgrid-768x350.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/sendgrid-1024x467.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<div class=hubspot "width =" 1856 "height =" 1082 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_322_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.png 1856w, https: //www.webdesignerdepot. com / cdn-origin / uploads / 2020/06 / hubspot-1-300x175.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/hubspot-1-768x448.png 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/hubspot-1-1024x597.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Bien que l'emplacement du bouton d'inscription varie légèrement en fonction de la conception, ces pages de destination provenant des meilleures sociétés de logiciels prouvent que le modèle Z est bel et bien vivant. </p>
<p class=

Modèles mentaux et loi de Jakob

Peu importe combien vous aimez votre création, vous devez faire face aux faits: vos utilisateurs passent la majorité de leur temps sur autre sites Internet. C’est l’idée principale de Jakob’s Law, un principe créé par Jakob Nielsen du Nielsen Norman Group.

Bien que cela puisse sembler une limitation au début, cette loi n'est pas une limite à votre créativité. Au lieu d'être une restriction, cela peut faciliter votre travail. La loi de Jakob vous évite de réinventer la roue. Vous pouvez vous en tenir à des solutions reconnues et vous concentrer sur l'optimisation des petits détails qui font la différence. Cela ne semble-t-il pas bon? C'est comme si quelqu'un avait déjà fait les démarches pour vous. Hormis les modèles mentaux, il y a encore beaucoup de travail à faire, de la conception de contenu aux petites touches visuelles.

Modèles mentaux dans le processus de refonte

«Mieux» peut être l'ennemi du «bien». Chaque processus de refonte comporte certains risques. Même si vous faites de votre mieux pour améliorer l'expérience utilisateur, chaque changement signifie que vous contestez les modèles mentaux existants de l'utilisateur.

Vous pouvez bien faire les choses, mais vous pouvez aussi vous tromper terriblement. L'un des exemples les plus importants d'échec de la refonte vient de Snapchat. Comme rapporté par TechCrunch en 2018, ils ont décidé de changer toute la navigation dans l'application:

snapchat "width =" 1856 "height =" 859 "srcset =" https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/sn Snapchat.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / snapchat-300x139.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/sn Snapchat-768x355.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/sn Snapchat-1024x474.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>La plupart des utilisateurs étaient ennuyés par la nouvelle architecture de l'information. Les histoires publiques se sont mélangées aux messages privés. De plus, ils n'étaient plus affichés chronologiquement. Cette nouvelle commande a semé la confusion et a provoqué une énorme frustration, ce qui a entraîné 83% des avis négatifs sur l'App Store. Le changement s'est avéré trop radical; cela obligeait les utilisateurs à changer leurs modèles mentaux de façon assez spectaculaire. </p>
<p>Bien qu'elle ne soit pas parfaite, l'ancienne version de l'application répondait aux besoins des utilisateurs. Il était inutile de repenser toute l'expérience juste pour créer quelque chose de nouveau. Cette décision a également eu un impact négatif sur les revenus de Snapchat. Après une période de croissance stable tout au long de 2017, le résultat du premier trimestre 2018 a baissé de 20%. </p>
<p>Il y a un autre côté à l'histoire. Bien que Snapchat n'ait pas réussi à se concentrer sur les modèles mentaux existants, il a fait un travail fantastique en ce qui concerne l'introduction de nouveaux modèles. L'application a été la première à créer l'interface largement connue de Stories:</p>
<div class=image12 "width =" 1856 "height =" 1280 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_143_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.jpg 1856w, https: //www.webdesignerdepot. com / cdn-origin / uploads / 2020/06 / image12-1-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image12-1-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image12-1-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p><em>Interface de Snapchat</em></p>
<p>Celui-ci était simple et intuitif – et c'est pourquoi Instagram et Facebook Messenger l'ont tous deux adapté avec succès:</p>
<div class=image9 "width =" 1856 "height =" 1280 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_220_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.jpg 1856w, https: //www.webdesignerdepot. com / cdn-origin / uploads / 2020/06 / image9-1-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image9-1-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image9-1-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p><em>Copie d'Instagram</em></p>
<div class=image10 "width =" 1856 "height =" 1280 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_984_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.jpg 1856w, https: //www.webdesignerdepot. com / cdn-origin / uploads / 2020/06 / image10-1-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image10-1-768x530.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image10-1-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p><em>Version de Facebook</em></p>
<p>Et donc nous sommes confrontés à la grande question: comment faire les choses correctement?</p>
<p class=

Comment en savoir plus sur les modèles mentaux de vos utilisateurs

Une recherche honnête est la réponse ici. Le tri des cartes est l'une des méthodes les plus populaires. L'idée est simple: les utilisateurs voient une liste d'éléments du site Web et ils sont censés les affecter à différentes catégories. Vous pouvez utiliser différents types de tri de cartes pour votre recherche:

  • Tri des cartes fermées – Vous présentez aux utilisateurs des catégories données qui ont été établies avant l'exercice.
  • Tri des cartes ouvertes – Les participants à la recherche sont censés répartir les éléments en groupes qui se sentent bien. La différence est que les utilisateurs créent eux-mêmes les catégories et leurs noms.
  • Tri hybride des chariots – Dans ce cas, les utilisateurs travaillent avec des catégories prédéfinies, mais ils peuvent également en ajouter d'autres s'ils le jugent nécessaire.
cardsort "width =" 1856 "height =" 1280 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_642_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / cardsort-300x207.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/cardsort-768x530.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/cardsort-1024x706.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Si vous recherchez d'autres méthodes abordables mais efficaces, vous voudrez peut-être essayer les enregistrements de session. Les outils de relecture de session vous permettent de voir comment les visiteurs interagissent avec votre site Web. Vous pouvez voir les mouvements de la souris, les parchemins, les tapotements et les clics, tout comme vous êtes assis à côté de l'utilisateur.</p>
<div class=enregistrements de session "width =" 1856 "height =" 1040 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_424_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.png 1856w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/session-recordings-300x168.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/session-recordings-768x430.png 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/session-recordings-1024x574.png 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Outre les enregistrements de session, vous pouvez également utiliser des cartes thermiques pour voir quelles parties du site Web sont les plus populaires. Comme mentionné ci-dessus, les outils d'analyse suivent les mouvements et les clics de la souris, ce qui permet une illustration assez précise de certains modèles de comportement.</p>
<div class=heatmap "width =" 1856 "height =" 1239 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/06/1592480979_377_Comment-beneficier-des-modeles-mentaux-dans-la-conception-UX.jpg 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / heatmap-300x200.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/heatmap-768x513.jpg 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/heatmap-1024x684.jpg 1024w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p>Enfin, il est toujours préférable de parler à vos utilisateurs. Les enquêtes, les tests d'utilisateurs ou même les groupes de discussion sont autant de mines d'or d'informations précieuses. Bien que cela nécessite plus d'efforts, c'est sûr à long terme. Les utilisateurs sont souvent conscients de leurs propres modèles mentaux et sont plus qu'heureux de parler de leurs besoins et de leurs habitudes. </p>
<p>Pourquoi ne pas profiter de cette opportunité pour faciliter la vie de tous? La recherche de modèles mentaux peut également être une source de perspectives et d'inspiration intéressantes. Je vous encourage fortement à creuser plus profondément!</p>
<p class=

Image sélectionnée via Unsplash.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *