Fermer

mars 17, 2020

Comment les tests d'utilisabilité d'Indigo.Design éliminent les suppositions de la conception Web


À 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…
En savoir plus sur
Suzanne
Scacca

Il n'y a pas une tonne de mystère en ce qui concerne ce qui fait un design attrayant et moderne de nos jours. 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 s'y retrouver 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 faites pour un nouveau site ne vous donneront pas un aperçu sur la façon de construire quelque chose qui est à la fois beau et fonctionnel. Et ayant un système de conception solide comme le roc et le transfert concepteur-développeur vous aidera certainement à apporter un contrôle de qualité et de la cohérence à votre site.

Cependant, ce n'est pas toujours suffisant. [19659005] 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 examiner le processus de test 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 votre 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ée contre non modérée

Il y a deux façons d'aborder cela: [19659015] Modéré

Non modéré Type de test Individuel Autoguidé Le processus Le modérateur engage les utilisateurs lorsqu'ils parcourent la session Les utilisateurs suivent les instructions et l'outil d'analyse mappe leur session Taille du groupe de test Petit Petit à grand Cas d'utilisation Domaines hautement spécialisés (par exemple médecins, comptables) Public géographiquement dispersé Web stade de développement Prototypage et versions ultérieures Prototypage et versions ultérieures

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 n'importe quel 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 comportementaux pour vous assurer que le site fait réellement ce qu'il est.

Tests d'utilisabilité avec Indigo.Design

Vous pouvez commencer à effectuer des tests d'utilisabilité dès la phase de prototypage. Et, vraiment, les produits minimums viables 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 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 les vrais utilisateurs peuvent utiliser votre site Web ou application avec succès.

N'oubliez pas que vous devez apporter un prototype fonctionnel à la table. Cela signifie:

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

Une fois que vous avez atteint votre produit, vous pouvez commencer les tests d'utilisabilité:

1. Ajoutez votre prototype à Indigo.Design

L'ajout de prototypes à Indigo.Design est facile. 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 plug-in 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 beaucoup de temps.

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

 Indigo.Design edit 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 de l'intérieur le cloud Indigo.Design et modifiez vos interactions là-bas:

 Édition de prototypes Indigo.Design et configuration des interactions
Les utilisateurs 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 soin de cela maintenant. Créez le hotspot sur l'interface de gauche, puis faites-le glisser sur la carte correspondante de droite pour créer une interaction.

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

À partir du même tableau de bord où les prototypes sont téléchargés, vous commencerez votre premier test d'utilisabilité.

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 une nouvelle utilisation tester 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 à commencer le test à cet endroit:

 Indigo.Design Tableau de bord des tests d'utilisabilité
Indigo.Design Tableau de bord «Tests d'utilisabilité» 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 irez éventuellement pour gérer vos tests d'utilisabilité et pour revoir les résultats de vos tests aussi. [19659005] Une fois votre nouveau test d'utilisabilité lancé, voici ce que vous verrez en premier:

 Test d'utilisabilité Indigo.Design: créer une tâche
Un test d'utilisabilité 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 quelles «tâches» vous voulez 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é Indigo.Design. (Source de l'image: Indigo.Design ) ( Grand aperçu )

Pour créer le «chemin de réussite attendu» vous devez interagir avec votre prototype exactement comme vous attendez et souhaitez que vos utilisateurs utilisent 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 du chemin de succès attendu dans le test d'utilisabilité [19659074] Présentation rapide de la configuration d'une nouvelle tâche et chemin de réussite dans Indigo.Design. (Source de l'image: <a href= Indigo.Design )

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

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

3. Mettez les touches de finition à l'épreuve

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 approximatif 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 soient pas distraits par la conception.

Ne vous inquiétez pas pour votre les utilisateurs égarent 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é.

Allez dans 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 place 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 de 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 continuer, je souhaite appeler rapidement votre attention sur la bascule «Critères de réussite» en haut de cette section:

 Paramètres de test d'utilisabilité Indigo.Design - critères de réussite
Les paramètres de test d'utilisabilité 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 cela basculez le réglage 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'utilisation 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 verrez ceci:

 Lien vers le test d'utilisation Indigo.Design
Lorsque vous êtes prêt à démarrer votre test d'utilisation, cliquez sur " Commencez les tests "et obtenez votre lien. (Source de l'image: Indigo.Design ) ( Grand aperçu )

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

Si ce sont des utilisateurs de Chrome, ils " ll vous sera demandé d'installer une extension de navigateur qui enregistre leur écran, leur microphone et leur caméra.

L'utilisateur passera ensuite à l'intérieur du test:

 Exemple de test d'utilisation Indigo.Design
Un exemple d'un utilisateur parcourant un test d'utilisation 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. Examinez 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. (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

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

 Résultats du test d'utilisabilité Indigo.Design
Résultats du test d'utilisabilité Indigo.Design 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 les étapes que vous avez définies pour la tâche.
  • Tâche accomplie: Le nombre d'utilisateurs qui a 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 d'autres chemins de réussite.
  • Moy. temps sur la tâche: Le temps qu'il a fallu aux utilisateurs pour accomplir 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 bien réglé.

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 de réussite
Indigo.Design fournit aux utilisateurs de voir ce qui s'est passé le long des parcours 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.

Ceci est beaucoup plus efficace que le test de la carte thermique qui ne nous donne vraiment qu'une idée générale de la concentration des utilisateurs. Cela nous montre clairement qu'il y a quelque chose qui ne va pas dans la mise en page de la page ou peut-être que le contenu lui-même est mal étiqueté et déroutant.

Regardons un peu 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 les interactions inattendues,
  • Les carrés oranges signifient que le participant a demandé de l'aide. chemin de réussite 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 qui ont pris le chemin de succès alternatif dans un test d'utilisabilité. (Source de l'image: Indigo.Design ) ( Grand aperçu )

    Lorsque nous accordons 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. [19659005] 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 le chemin du succès, il pourrait être utile de remodeler entièrement le chemin. Si l'itinéraire alternatif est plus logique et plus efficace, il serait logique de se débarrasser du chemin le moins parcouru.

     Chemin échoué dans le test d'utilisabilité
    Données sur le nombre d'utilisateurs qui n'ont 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 en cours de route. 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 à l'extrême, mais il est bon d'avoir une idée des types d'interactions qui ne fonctionnent tout simplement pas.

    Par exemple, disons que l'un des boutons nécessite un clic droit au lieu de un clic régulier. 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 à ce sujet, mais vos utilisateurs le pourraient.

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

    Regardez un peu plus loin

    Je sais que les nombres et les étapes de la voie 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 par navigateur, vous

    Sinon, vous pouvez toujours utiliser le lien "Afficher le chemin" pour regarder les étapes réelles qu'ils ont prises (si ce ne sont pas les étapes attendues du cercle bleu).

     Options d'examen des tests d'utilisabilité d'Indigo.Design
    Indigo.Design permet aux utilisateurs de garder un œil sur ce que les sujets du 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 et Relecture vidéo pour regarder des tests pas à pas
    Les utilisateurs d'Indigo.Design peuvent visualiser chaque étape effectuée par leurs sujets de test en affichant 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 toutes les parties 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 de réussite alternatifs ou ceux qui ont échoué vous ont conduit utilisateurs, vous pouvez éliminer plus rapidement les problèmes dans votre conception 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.

    Récapitulation

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

    C'est ce qui est si bien avec la solution que nous venons d'examiner. 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.

     Éditorial Smashing (ra, il)




Source link