Apprentissage en conception Web: 5 meilleures pratiques

Avez-vous déjà envisagé d'améliorer la capacité d'apprentissage de votre produit ou site Web? C’est peut-être votre première lecture sur le concept d’apprentissage. Créer un site Web apprenable n’est pas une tâche facile, car cela nécessite des expériences et des tests A / B.

L’objectif de Learnability est de concevoir une interface claire que les utilisateurs peuvent rapidement comprendre et comprendre. Dans l'idéal, aucune documentation n'est nécessaire pour informer vos utilisateurs sur la manière d'utiliser votre produit.

Heureusement, de nombreuses techniques existent pour créer une interface apprenable. Cet article présente cinq bonnes pratiques que vous pouvez utiliser pour fournir une interface plus facile à apprendre à vos utilisateurs.

1. cohérence
2. feedback
3. coller aux éléments connus de l'interface utilisateur
4. familiarity
5. storification

Mais d'abord, Expliquons clairement pourquoi l'apprentissage est important.

Pourquoi est-ce que l'apprentissage est important?

Maintenant, pourquoi l'apprentissage est-il important? Il existe plusieurs raisons pour lesquelles vous devriez envisager de fournir une interface utilisateur plus facile à apprendre.

Tout d'abord, les utilisateurs peuvent adopter une nouvelle interface beaucoup plus rapidement. Par conséquent, ils peuvent atteindre leur objectif en utilisant votre outil beaucoup plus rapidement. En d'autres termes, ils peuvent recevoir plus de valeur de votre outil. De plus, il n'y a guère besoin de documentation ou d'un centre d'assistance complet. Votre objectif est de réduire le nombre de demandes d'assistance en fournissant une interface claire.

Ce n'est pas tout! Pensez à l'expérience client. Un utilisateur qui peut apprendre rapidement votre outil aura une meilleure expérience. En fin de compte, l'utilisateur souhaite recevoir de la valeur dans le moins de temps possible. Ils ne veulent pas passer beaucoup de temps à apprendre un nouvel outil.

Enfin, l'apprentissage est important pour votre taux de rétention. Une interface complexe effraiera les utilisateurs. Souvent, ils recherchent des alternatives plus simples qui leur offrent la même valeur.

Maintenant que nous comprenons l’importance de l’apprentissage, explorons cinq meilleures pratiques pour améliorer l’apprentissage.

1. Cohérence

Commençons par discuter de l’importance de la cohérence. Google a cloué la cohérence grâce à sa conception matérielle pour donner à tous ses produits un aspect similaire. Par conséquent, lorsque les utilisateurs basculent entre les produits Google, il est beaucoup plus facile de comprendre le fonctionnement du nouveau produit.

Pourquoi? Les utilisateurs ont déjà vu cette conception et savent comment interagir avec elle. Comparons l'interface de Google Drive et de Gmail. Notez les similitudes dans le positionnement des éléments tels que la barre de recherche, le menu et le bouton d'action.

Par exemple, Google Drive a un gros bouton d'appel à l'action avec le texte «Nouveau» pour créer un nouveau fichier ou dossier. Si l'on compare cela avec Gmail, on retrouve le même bouton d'appel à l'action «Composer» pour créer un nouvel e-mail. Cela permet à un utilisateur novice de Gmail mais qui utilise fréquemment Google Drive de comprendre rapidement l'objectif de ce gros bouton.

En bref, les interfaces cohérentes sont des interfaces prévisibles. Cette prévisibilité conduit à des modèles apprenables. Cela s'applique à tout, des menus de la barre latérale à l'utilisation des icônes, ou même à la couleur des liens.

2. Commentaires

Les commentaires sont l'un de ces mots-clés que vous trouverez dans chaque livre de conception d'interface utilisateur. L'une des formes les plus rudimentaires de rétroaction est la rétroaction par hyperliens.

Un lien hypertexte peut avoir trois états différents. Tout d'abord, un lien hypertexte se trouve dans son état normal. Lorsque l'utilisateur survole le lien hypertexte avec son curseur, la couleur du lien change ou l'utilisateur voit une petite animation de transition. Ce petit moment de retour indique à l'utilisateur que l'élément est cliquable. Une fois que le lien hypertexte a été cliqué, vous verrez son état actif. Encore une fois, il s'agit d'une forme de rétroaction pour indiquer à l'utilisateur que la demande de clic a été reçue et est en cours de traitement.

Les commentaires peuvent être très subtil. Nous appelons cela des micro-interactions. Les micro-interactions peuvent prendre la forme de:

• des animations ou des effets de transition
• des changements de couleur
• une case à cocher

Ces micro-interactions sont cruciales, car un utilisateur a besoin de preuves que ce qu'il a fait a affecté la page. Imaginez que vous cliquez sur un bouton pour soumettre un formulaire et que le bouton ne fournit aucun commentaire. En d'autres termes, la page reste statique. Je parie que vous cliquerez une deuxième fois sur le bouton d'envoi, car vous n'avez reçu aucune preuve de vos actions.

Par conséquent, soyez gentil et fournissez des commentaires à vos utilisateurs. Cela rendra leur expérience beaucoup plus agréable et moins déroutante.

3. Ne réinventez pas la roue

Plutôt que de réinventer la roue, utilisez des solutions de conception déjà existantes pour ajouter de la familiarité à votre conception. Par exemple, le menu hamburger est l'une des meilleures solutions pour masquer un menu sur un appareil mobile. Cependant, il n'est pas nécessaire de concevoir une alternative aux menus de hamburgers, car chacun sait comment ils fonctionnent et quel est leur objectif.

Jetons un coup d’œil au dessin de Rifayet Uday (photo ci-dessous). Bien que les différents modèles de hamburgers soient esthétiquement beaux et n’ajoutent pas beaucoup de variation au design original, il est toujours préférable de s’en tenir à la conception originale du menu de hamburgers. Vous voulez éviter de confondre vos utilisateurs.

Par conséquent, respectez les meilleures pratiques de l'industrie. La même chose s'applique aux mises en page de sites Web. Tenez-vous en à ce qui fonctionne et à ce qui a été utilisé encore et encore. Par exemple, un panier se trouve en haut à droite de votre site Web. Ne soyez pas funky et placez votre panier en bas à gauche. Cela ne fera que semer la confusion chez les utilisateurs.

Il est important de comprendre que lorsque les utilisateurs ne comprennent pas la conception de votre interface, ils abandonnent souvent votre site Web ou recherchent un autre site Web qui leur offre une meilleure expérience utilisateur.

4. Familiarité

La familiarité permet à un utilisateur d'apprendre plus rapidement de nouvelles interfaces en se basant sur ses connaissances antérieures. En d'autres termes, la familiarité utilise des modèles mentaux. Un utilisateur peut transférer son modèle mental d'un produit vers un nouveau produit. Cela signifie qu’ils peuvent utiliser la connaissance préexistante d’interfaces similaires pour adopter une nouvelle interface plus rapidement.

Un modèle mental représente le processus de réflexion d’une personne sur la façon dont quelque chose fonctionne. Les modèles mentaux sont basés sur des faits incomplets, des expériences passées et même des perceptions intuitives. Ils aident à façonner les actions et les comportements, à influencer ce à quoi les gens prêtent attention dans des situations complexes et à définir comment les gens abordent et résolvent de nouveaux problèmes ou interfaces. – Susan Carey, 1986 article de la revue « Cognitive science and science education »

De plus, la familiarité crée de la fiabilité et aide les utilisateurs à se sentir en confiance lorsqu'ils explorent et utilisent une interface inconnue. Par exemple, si vous appliquez le langage Material Design de Google à votre site Web, les utilisateurs peuvent reconnaître les éléments et savoir comment interagir avec eux. Par conséquent, ils n'ont pas peur de cliquer sur un bouton particulier car ils savent à quoi s'attendre. La fiabilité est la clé pour qu'un utilisateur supprime toute peur d'explorer un nouvel outil.

Astuce: utilisez un ensemble d'icônes commun tel que Font Awesome pour ajouter de la familiarité à votre interface.

5. Storification

Parfois, vous souhaitez lancer un tout nouveau produit qui nécessite une interface utilisateur perturbatrice. Ici, nous ne pouvons pas nous fier uniquement aux conseils précédents pour accélérer le processus d'apprentissage.

Dans ce cas, vous pouvez accélérer le processus grâce à la narration. La narration vous permet de rendre les informations que vous partagez plus faciles à comprendre mais aussi à mémoriser. De préférence, vous devriez utiliser la narration visuelle plutôt que la narration textuelle. Les utilisateurs ne veulent pas lire de gros morceaux de texte pour en savoir plus sur une interface.

Qu'est-ce qui fonctionne le mieux ici? Concevez une histoire visuelle interactive qui guide l'utilisateur à travers tous les éléments importants de votre interface. Essayez de garder votre histoire courte et concentrez-vous uniquement sur les éléments débutants dont l'utilisateur a besoin pour commencer. Il n'est pas nécessaire d'expliquer les cas d'utilisation avancés. Ces types de sujets peuvent être traités dans des guides supplémentaires. Nous ne voulons pas submerger l'utilisateur de nouvelles informations, car cela a des effets opposés sur le processus d'apprentissage. Conclusion: apprentissage et reconnaissance de formes

De nombreux conseils existent pour améliorer l'apprentissage de votre interface utilisateur. Cependant, il est important de savoir que toutes les bonnes pratiques ci-dessus reposent sur la reconnaissance de formes. Par conséquent, essayez de concevoir des interfaces dans lesquelles vous exploitez les connaissances antérieures des utilisateurs afin qu'ils puissent détecter des modèles dans votre interface. Permettre aux utilisateurs de détecter ces modèles les aide à apprendre rapidement une interface inconnue.

J'espère que vous avez appris qu'il y a une valeur réelle à tirer de la mise en œuvre de l'apprentissage. Personnellement, l'aspect le plus important de l'attention portée à l'apprentissage est l'amélioration de l'expérience utilisateur. Les produits sont aujourd'hui développés en pensant à l'utilisateur. Alors, pourquoi développeriez-vous un produit qui ne prend pas en compte le facteur d’apprentissage de votre interface? Vous pouvez avoir un produit étonnant mais une interface utilisateur complexe.

Par conséquent, investissez du temps dans l'amélioration de l'apprentissage de votre interface utilisateur. Vous pourriez être surpris par les effets positifs sur l'expérience utilisateur.