A propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle est spécialisée dans l'artisanat marketing, web…
Plus à propos
Suzanne
Scacca

Il n'y a pas une tonne de mystère en ce qui concerne ce qui fait un design attrayant et moderne ces jours-ci. Cependant, ce qui n’est pas toujours clair, c’est l’aspect convivial. En d'autres termes, les voies que vous avez conçues pour les utilisateurs sont-elles suffisamment intuitives? La vérité est que ce n'est vraiment qu'un jeu de devinettes, sauf si vous commencez à obtenir les commentaires des utilisateurs dès le début. Heureusement, Indigo.Design a une solution de test d'utilisabilité pour nous aider.

La convivialité est essentielle pour le succès d'un site Web, mais il peut être difficile de le déterminer dans les premières étapes de conception et de développement sans un peu d'aide.

Ce n'est pas comme si la recherche et la préparation que vous effectuez pour un nouveau site ne vous donneront pas un aperçu de la façon de créer quelque chose de beau et de fonctionnel. Et avoir un système de conception solide et un transfert concepteur-développeur vous aidera certainement à apporter un contrôle de qualité et une cohérence à votre site.

Mais ce n’est pas toujours suffisant.

Bien que vous puissiez faire des hypothèses fondées sur des recherches sur la façon dont les visiteurs réagiront à votre site Web ou à votre application, tout cela reste théorique jusqu'à ce que vous le mettiez entre les mains de vrais utilisateurs.

Aujourd'hui, je veux regarder le processus des tests d'utilisabilité: ce que c'est, quand vous devez l'utiliser et comment générer des informations basées sur les données tout en développant votre site Web en utilisant Indigo.Design.

Qu'est-ce que les tests d'utilisabilité?

Les tests d'utilisabilité sont une méthode utilisée pour évaluer à quel point il est facile de se déplacer sur un site Web ou une application et d'effectuer des tâches spécifiques.

Il met l'accent sur ce que les gens font plutôt que de recueillir des opinions sur la façon dont ils aiment la conception. En d'autres termes, les tests d'utilisabilité vous permettent de recueillir des commentaires sur le comportement pour vous assurer que le site fait réellement ce qu'il est censé faire.

Pour effectuer un test d'utilisabilité, vous devez mettre votre site ou application entre les mains des utilisateurs cibles. Les données collectées à partir de ces tests vous aideront ensuite à remodeler le site en quelque chose qui est rationalisé et mieux adapté au parcours préféré de vos utilisateurs.

Test d'utilisabilité modéré vs non modéré

Il y a deux façons d'aborder cela:

ModéréNon modéré
Type de testEn tête-à-têteAutoguidé
Le processusLe modérateur engage les utilisateurs pendant qu'ils parcourent la sessionLes utilisateurs suivent les instructions et l'outil d'analyse mappe leur session
Taille du groupe de testPetitPetit à grand
Cas d'utilisationDomaines hautement spécialisés (par exemple médecins, comptables)Public géographiquement dispersé
Étape de développement WebPrototypage et au-delàPrototypage et au-delà

Ce n'est pas grave s'il n'est pas possible ou faisable d'exécuter des tests modérés sur votre site Web ou votre application. Avec Indigo.Design, vous pouvez effectuer l'un ou l'autre type de test pour recueillir sans douleur des données précises et quantifiables de vos utilisateurs et éliminer les conjectures de la conception.

Les tests d'utilisabilité vous permettent de recueillir des commentaires sur le comportement pour vous assurer que le site fait réellement ce qu'il est censé faire.

Tests d'utilisabilité avec Indigo.Design

Vous pouvez commencer à effectuer des tests d'utilisabilité dès la phase de prototypage. Et, vraiment, les produits viables minimaux sont les meilleurs types de sites Web et d'applications à tester, car il est moins coûteux d'itérer pendant que vous êtes encore en développement. De plus, les commentaires des utilisateurs à ce stade précoce vous éviteront de perdre du temps à créer des fonctionnalités ou du contenu dont les utilisateurs ne veulent pas ou n'ont pas besoin.

Pour être clair, nous ne parlons pas de solliciter les opinions des parties prenantes. Ce que nous devons savoir, c'est si oui ou non utilisateurs réels peut utiliser votre site Web ou votre application avec succès.

Gardez juste à l'esprit que vous devez apporter un prototype réalisable à la table. Cela signifie:

  • Un prototype suffisamment riche pour prendre en charge les tâches de convivialité que vous allez tester.
  • Une solution de fidélité moyenne qui établit le bon équilibre entre la coquille vide d'un site Web et le prêt-à-lancer. Ce n'est peut-être pas joli, mais cela doit être interactif.

Une fois que vous avez obtenu votre produit à ce stade, vous pouvez commencer les tests d'utilisabilité:

1. Ajoutez votre prototype à Indigo.Design

Ajouter des prototypes à Indigo.Design est simple. Vous avez deux options:

Tableau de bord Indigo.Design avec prototypes et tests d'utilisabilité
Le tableau de bord Indigo.Design «Mes projets» où les prototypes sont téléchargés et les tests d'utilisabilité effectués. (Source de l'image: Indigo.Design) (Grand aperçu)

La première option consiste à télécharger un prototype depuis votre ordinateur. Les formats de fichiers suivants sont acceptés:

La deuxième option consiste à ajouter le plugin Indigo.Design à Sketch et à synchroniser vos prototypes avec le cloud. Si vous allez utiliser cet outil pour simplifier le transfert, ce plugin vous fera gagner un temps considérable.

Une fois votre prototype chargé, survolez-le et cliquez sur «Modifier le prototype».

Indigo.Design modifier le bouton prototype
Les utilisateurs d'Indigo.Design peuvent modifier des prototypes en un seul clic. (Source de l'image: Indigo.Design) (Grand aperçu)

Si vous n'avez pas encore confirmé que toutes les interactions sont correctement configurées dans Sketch, vous pouvez le faire à partir du cloud Indigo.Design et y modifier vos interactions:

Edition du prototype Indigo.Design et configuration de l'interaction
Les utilisateurs d'Indigo.Design peuvent vérifier que leurs prototypes de fidélité moyenne sont interactifs avant les tests d'utilisabilité. (Source de l'image: Indigo.Design) (Grand aperçu)

Si les interactions ne sont pas correctement configurées, prenez-en soin maintenant. Créez le hotspot sur l'interface à gauche, puis faites-le glisser sur la carte correspondante à droite pour créer une interaction.

2. Créez un nouveau test d'utilisabilité

À partir du même tableau de bord sur lequel les prototypes sont téléchargés, vous commencerez votre premier test d'utilisabilité. Vous pouvez le faire à partir de l'un des deux endroits.

Vous pouvez survoler le prototype que vous souhaitez tester et en créer un nouveau:

Indigo.Design nouveau bouton de test d'utilisation
Les utilisateurs d'Indigo.Design peuvent commencer un nouveau test d'utilisabilité pour les prototypes téléchargés. (Source de l'image: Indigo.Design) (Grand aperçu)

L'autre option consiste à accéder à l'onglet Tests d'utilisabilité et à y commencer le test:

Tableau de bord des tests d'utilisation Indigo.Design
Tableau de bord «Tests d'utilisabilité» d'Indigo.Design, où les tests d'utilisabilité sont créés et gérés. (Source de l'image: Indigo.Design) (Grand aperçu)

C'est là que vous finirez par aller pour gérer vos tests de convivialité et pour revoir également les résultats de vos tests.

Une fois votre nouveau test d'utilisabilité lancé, voici ce que vous verrez en premier:

Test d'utilisation Indigo.Design: créer une tâche
Un test d'utilisation Indigo.Design. La première étape consiste à créer une tâche. (Source de l'image: Indigo.Design) (Grand aperçu)

Essentiellement, ce que vous devez faire avec cet outil est:

Déterminez les «tâches» que vous souhaitez tester. Ces étapes devraient être importantes pour que vos utilisateurs atteignent les objectifs souhaités (les leurs et les vôtres).

Par exemple, comme il s'agit d'une application de gestion financière, je m'attends à ce que les utilisateurs l'utilisent principalement pour créer de nouveaux budgets pour eux-mêmes. C'est donc la première tâche que je veux tester:

Nouvelle tâche «Créer un nouveau budget» pour le test d'utilisabilité
Ajout d'une nouvelle tâche au test d'utilisabilité d'Indigo.Design. (Source de l'image: Indigo.Design) (Grand aperçu)

Pour créer le «chemin du succès attendu», vous devez interagir avec votre prototype exactement comme vous vous y attendez et que vos utilisateurs souhaitent utiliser sur le produit en direct.

Voici un exemple de ce à quoi pourrait ressembler le chemin "créer un nouveau budget" et comment le construire:

Création d'un chemin de réussite attendu dans le test d'utilisabilité
Présentation rapide de la configuration d'une nouvelle tâche et d'un chemin de réussite dans Indigo.Design. (Source de l'image: Indigo.Design)

Parcourez votre site Web ou votre application sur la partie droite de l'écran.

Lorsque vous avez terminé, confirmez votre travail à gauche avant de passer à la création d'autres tâches à inclure dans le test.

3. Mettez la touche finale à votre test

La création de tâches à elle seule ne suffira pas à recueillir le type de données que vous souhaitez auprès de vos utilisateurs.

Par exemple, s'il s'agit d'un MVP, vous voudrez peut-être expliquer que l'expérience peut sembler un peu rude ou fournir des informations sur la solution elle-même (pourquoi vous l'avez construite, ce que vous cherchez à en faire) afin qu'ils ne vous laissez pas distraire par le design.

Ne vous inquiétez pas du fait que vos utilisateurs aient égaré ces informations dans leur invitation par e-mail. Il y a un endroit pour inclure ces notes dans le contexte de votre test d'utilisabilité.

Accédez à l'onglet «Paramètres de test»:

Test d'utilisabilité - Message de bienvenue, message de remerciement
Les tests d'utilisabilité dans Indigo.Design sont fournis avec de l'espace pour ajouter un message de bienvenue et de remerciement. (Source de l'image: Indigo.Design) (Grand aperçu)

Sous "Messagerie pour montrer aux participants", cela vous donne la possibilité d'inclure un message de bienvenue avec votre test. Cela peut être une déclaration de bienvenue générale ou vous pouvez fournir plus de contexte sur les tâches si vous le jugez nécessaire.

La déclaration de remerciement est également utile car elle fournit une fin de test. Vous pouvez soit les remercier pour leur temps, soit leur fournir les prochaines étapes ou des informations sur ce à quoi vous attendre du produit (il y a peut-être d'autres tests d'utilisabilité à venir).

Avant de poursuivre, je voudrais rapidement attirer votre attention sur la bascule «Critères de réussite» en haut de cette section:

Paramètres de test d'utilisation Indigo.Design - critères de réussite
Les paramètres de test d'utilisation Indigo.Design permettent aux utilisateurs de définir des critères de réussite stricts. (Source de l'image: Indigo.Design) (Grand aperçu)

Lorsqu'il est activé, ce paramètre ne permet que deux résultats:

Je dirais que vous devriez laisser cette bascule réglée sur «Off» si vous voulez que cet outil vous aide à détecter des chemins alternatifs. Je vais vous montrer ce que cela signifie dans un petit peu.

Pour l'instant, il est temps de saisir votre lien de test d'utilisabilité et de commencer à le partager avec vos participants. Lorsque vous cliquez sur le bouton "Démarrer le test" dans le coin supérieur droit de votre écran, vous voyez ceci:

Lien de test d'utilisabilité Indigo.Design
Lorsque vous êtes prêt à commencer votre test d’utilisabilité, cliquez sur «Démarrer le test» et obtenez votre lien. (Source de l'image: Indigo.Design) (Grand aperçu)

Copiez ce lien et commencez à le partager avec vos participants.

S'ils sont des utilisateurs de Chrome, il leur sera demandé d'installer une extension de navigateur qui enregistre leur écran, leur microphone et leur caméra. Ils peuvent activer ou désactiver n'importe lequel d'entre eux.

L'utilisateur entrera alors dans le test:

Exemple de test d'utilisation Indigo.Design
Un exemple d'un utilisateur parcourant un test d'utilisabilité Indigo.Design. (Source de l'image: Indigo.Design)

Une fois que vous avez collecté toutes les données dont vous avez besoin, cliquez sur le bouton "Arrêter le test" dans le coin supérieur droit de l'écran et commencez à examiner les résultats.

4. Passez en revue vos résultats de test d'utilisabilité

Vos résultats de test se trouvent toujours sous votre tableau de bord Tests d'utilisabilité dans Indigo.Design.

Présentation du test d'utilisation Indigo.Design
Un aperçu des résultats d'un test d'utilisabilité alors qu'il est encore en cours. (Source de l'image: Indigo.Design) (Grand aperçu)

Si vous vous connectez à la plateforme, vous trouverez un aperçu de tous vos résultats de test, passés et présents.

Vous pouvez obtenir un aperçu plus approfondi de vos résultats en ouvrant le test:

Résultats des tests d'utilisation Indigo.Design
Indigo.Design résultats des tests d'utilisabilité par tâche. (Source de l'image: Indigo.Design) (Grand aperçu)

Sur la gauche, vous verrez vos résultats de test par tâche. Ils sont divisés en:

  • Taux de réussite: Pourcentage d'utilisateurs qui ont suivi exactement les étapes que vous avez définies pour la tâche.
  • Tâche accomplie: Nombre d'utilisateurs ayant terminé la tâche. Si vous n'avez pas activé les "Critères de réussite", ce résultat affichera tous les utilisateurs qui ont suivi le chemin de succès attendu ainsi que les chemins de réussite alternatifs.
  • Moy. temps sur la tâche: Temps nécessaire aux utilisateurs pour exécuter la tâche.

De ce seul fait, vous pouvez en dire un peu plus sur le chemin que vous avez tracé devant vos utilisateurs et à quel point il est adapté à leur état d’esprit et à leurs besoins.

Cependant, le côté droit de l'écran nous permet de mieux voir où les choses ont mal tourné et pourquoi:

Résultats des tests Indigo.Design - chemin du succès
Indigo.Design permet aux utilisateurs de voir ce qui s'est passé le long des chemins de leurs sujets de test. (Source de l'image: Indigo.Design) (Grand aperçu)

La partie supérieure de l'écran nous montre les étapes originales que nous avons définies. Partout où il y a une marque rouge et un nombre en rouge, c'est là que nos sujets de test ont dévié de ce chemin.

C'est beaucoup plus efficace que les tests de cartes thermiques qui ne nous donnent vraiment qu'une idée générale de l'orientation des utilisateurs. Cela nous montre clairement qu'il y a quelque chose de mal dans la mise en page de la page ou peut-être que le contenu lui-même est mal étiqueté et déroutant.

Regardons de plus près en bas de l'écran et les données de chemin avec lesquelles nous devons jouer:

  • Les cercles bleus signifient les interactions attendues,
  • Les diamants rouges signifient des interactions inattendues,
  • Les carrés oranges indiquent que le participant a demandé de l'aide.
Chemin de réussite attendu dans le test d'utilisabilité
Données sur le nombre d'utilisateurs ayant suivi la voie du succès escompté dans un test d'utilisabilité. (Source de l'image: Indigo.Design) (Grand aperçu)

Cela nous montre à quoi ressemblait le chemin du succès attendu et combien de temps il a fallu pour terminer en moyenne.

Vous pouvez cliquer sur les statistiques de «Alt. Success Path »et« Failed Path »pour voir comment les choses se sont passées pour vos autres participants:

Chemin de réussite alternatif dans le test d'utilisabilité
Données sur le nombre d'utilisateurs ayant choisi l'autre chemin de réussite dans un test d'utilisabilité. (Source de l'image: Indigo.Design) (Grand aperçu)

Lorsque nous laissons une marge de manœuvre en termes de critères de réussite, nous avons la chance de voir les autres voies de réussite.

Ceci est utile pour plusieurs raisons. Premièrement, s'il y a suffisamment d'utilisateurs qui ont emprunté le même chemin et qu'il y en avait plus que ceux sur la voie du succès, il pourrait être utile de remodeler entièrement la voie. Si l'itinéraire alternatif est plus logique et efficace, il serait logique de se débarrasser du chemin le moins fréquenté.

Chemin d'échec dans le test d'utilisabilité
Données sur le nombre d'utilisateurs n'ayant pas réussi à terminer une tâche dans le test d'utilisabilité. (Source de l'image: Indigo.Design) (Grand aperçu)

Deuxièmement, le chemin de réussite alternatif avec le chemin échoué nous montre où la friction se produit le long du chemin. Cela nous permet de voir où sont réellement les points de rupture de nos utilisateurs. Non pas que nous voulions jamais pousser nos utilisateurs au bord du gouffre, mais il est bon d'avoir une idée des types d'interactions qui ne fonctionnent tout simplement pas.

Par exemple, supposons que l'un des boutons nécessite un clic droit au lieu d'un clic normal. Je sais que c'est quelque chose que j'ai rencontré dans certains outils et cela me rend fou parce que c'est presque toujours inattendu et contre-intuitif. Je n'abandonnerais pas l'expérience dessus, mais vos utilisateurs le pourraient.

Ainsi, en comparant le chemin de réussite alternatif avec le chemin échoué, vous pouvez comprendre ce que sont ces types de rupture de marché beaucoup plus facilement.

Regardez un peu plus loin

Je sais que les nombres et les étapes du parcours sont vraiment importants à regarder, mais n'oubliez pas d'étudier les autres informations laissées par vos participants.

Par exemple, si vos utilisateurs ont activé l'enregistrement sur navigateur, vous pouvez «Lire la vidéo» et les regarder réellement le parcourir.

Si ce n'est pas le cas, vous pouvez toujours utiliser le lien "Afficher le chemin" pour voir les étapes réelles qu'ils ont suivies (si ce n'était pas les étapes du cercle bleu attendues).

Options d'examen des tests d'utilisabilité Indigo.Design
Indigo.Design permet aux utilisateurs de garder un œil sur ce que les sujets de test ont fait ou n'ont pas fait pour terminer une tâche. (Source de l'image: Indigo.Design) (Grand aperçu)

Voici ce que vous verrez pour chacun de vos sujets de test:

Indigo.Design Click Path and Video Replay pour regarder des tests pas à pas
Les utilisateurs d'Indigo.Design peuvent visualiser chaque étape de leurs sujets de test en consultant le «Chemin du clic» ou en regardant la «Relecture vidéo». (Source de l'image: Indigo.Design) (Grand aperçu)

Cette vue particulière pourrait vous être plus utile que la vidéo, car vous pouvez suivre les clics réels sur chaque page statique. Non seulement vous voyez chaque partie du site Web où ils ont cliqué, mais vous voyez également dans quel ordre ils ont fait ces clics.

Et comme je l'ai déjà dit, si vous pouvez identifier les tendances dans lesquelles ces chemins alternatifs de réussite ou d'échec ont amené vos utilisateurs, vous pouvez éliminer plus rapidement les problèmes dans votre conception de sites Web. Ce n'est que lorsque ces clics sont omniprésents ou que les utilisateurs abandonnent l'exécution de l'une des tâches que vous rencontrez un problème réel.

Emballer

L'utilisation d'un système de conception n'implique pas automatiquement une bonne convivialité. Vous devez être en mesure de concevoir plus que des interfaces utilisateur toujours belles.

C’est ce qui est si bien dans la solution que nous venons d’étudier. Avec les tests de convivialité intégrés à Indigo.Design, l'accent n'est pas seulement mis sur la livraison de sites Web parfaits pour les pixels. Que vous envisagiez de faire des tests d’utilisation modérés ou non modérés, vous disposez désormais d’un outil qui peut cartographier avec précision les parcours de vos utilisateurs et les difficultés qu’ils rencontreraient autrement.

Smashing Editorial(rail)