Catégories
Astuces et Design

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érimentations et des tests A / B.

L’objectif de la capacité d’apprentissage est de concevoir une interface claire que les utilisateurs peuvent rapidement saisir 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. retour d'information
  3. s'en tenir aux éléments connus de l'interface utilisateur
  4. familiarité
  5. stockage

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

Apprentissage dans la conception Web

Pourquoi l'apprentissage est-il 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 compte 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 bonnes pratiques pour améliorer l'apprentissage.

1. Cohérence

Tout d'abord, parlons 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.

Éléments dans Google Drive

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.

L'interface Gmail

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 retour d'information pour indiquer à l'utilisateur que la demande de clic a été reçue et est en cours de traitement.

Trois états de bouton différents: normal, survolé et actif

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

  • animations ou effets de transition
  • changements de couleur
  • une case à cocher est cochée

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 appuierez 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 tellement 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 design de Rifayet Uday (illustré 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.

États du menu des hamburgers par Rifayet Uday

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 dérouter 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 de nouvelles interfaces plus rapidement en fonction de 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 les connaissances préexistantes 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, article de 1986 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 essentielle 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.

Icônes impressionnantes de polices familières

5. Stockage

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.

Remarque: vous pouvez en savoir plus sur les histoires et la narration dans la conception.

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 avoir 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.

Laisser un commentaire

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