🎅🏾 🙋🏾 🐤 UX-recherche de RBS: notre expérience, nos erreurs et nos découvertes 🌤️ 🛍️ ↖️

Hey. Je suis Denis Elianovsky, Design Director chez JTC et Lead chez Opium Pro. Nous travaillons dans des segments très étroits du marché informatique liés à la finance et au workflow. Vous n'avez certainement pas entendu parler de ces sociétés et aujourd'hui vous n'en savez pas grand-chose, car cet article concerne la recherche UX.

Je conçois depuis 12 ans (8 d'entre eux sont précisément la conception d'interfaces complexes) et je veux dire comment nous avons effectué les tests d'utilisabilité de l'application RBS. Et aussi quelles erreurs ont été commises et qui en ont tiré des conclusions. Dans le processus, je recommande quelques livres. Toutes les photos sont cliquables.

Qu'est-ce que RBS?Cela signifie Remote Banking Service. Ces applications sont également appelées banques en ligne. Vous l'avez sûrement déjà tous sur votre téléphone. Nous sommes ici parmi ceux qui conçoivent et développent de telles applications.

Vous trouverez probablement quelque chose d'utile dans l'article si vous avez déjà entendu parler de la recherche UX et que vous souhaitez tester votre application, mais que vous ne savez pas par où commencer. Si vous avez déjà de l'expérience dans les tests, ce sera ennuyeux et sans intérêt, pardonnez-moi.

Qui est plus pratique pour regarder la vidéo, voici un enregistrement

Quels sont les tests?

Si vous demandez de mettre une description de la recherche UX en 23 mots en utilisant trois virgules, un tiret et un trait d'union, la recherche UX est une action rapide et utile qui peut être effectuée aux premiers stades du développement, et ainsi éviter les erreurs qui pourraient survenir. en production. Mais la sortie d'une application bancaire en production n'est pas seulement un énorme stress, mais aussi un énorme gaspillage d'argent. UX-research vous permet de tester votre application sur de vrais utilisateurs bien avant de commencer à décharger KAMAZ avec de l'argent dans les poches des développeurs et des spécialistes du marketing.

Bien sûr, chaque designer (tout bon designer) teste son application avant sa sortie. Mais généralement, cela se fait «à la maison». Autrement dit, il est testé sur leurs proches et chers, et très rarement, il est en quelque sorte systématisé. Dans cet article, je veux dire que dans les applications grandes et complexes, les tests de conception doivent être réglementés et intégrés dans le processus de conception lui-même.

Premièrement, la recherche peut être quantitative et qualitative. Lorsque nous parlons de recherche quantitative, nous entendons une couverture d'audience: nous nous efforçons d'augmenter le nombre de personnes que nous testons. Lorsque nous parlons de recherche de qualité, nous testons peu de personnes, mais avec chacune d'entre elles, nous menons une interview plus détaillée et approfondissons chaque cas spécifique.

Avion coordonné. Droite - quantitative. Gauche - Qualité

Le même plan de coordonnées. Ci-dessus est le comportement. Bas - Attitude

Plus de recherches peuvent être divisées en comportementales et relationnelles. Lorsque nous effectuons des tests de comportement, nous surveillons ce qu'une personne fait avec notre application. En relationnel, il est important que la personne parle de notre candidature.

Dans cet article, nous nous concentrerons sur les tests d'utilisabilité. Ils concernent les tests de qualité comportementale. Dans ce cas, un petit nombre de personnes sont impliquées dans les tests et, fondamentalement, ce qu'elles font avec l'application est soigneusement étudié.

Le même plan de coordonnées. Marque de cercle en haut à gauche

Le processus de conception est bien reflété dans le calendrier de Damien Newman. Et puisque j'ai dit ci-dessus que la conception et les tests devraient être un tout, le graphique reflète à la fois le processus de création d'une conception et ses tests. Deux conclusions peuvent être tirées de ce graphique. 1) La conception et les tests sont un processus non linéaire. 2) Et c'est aussi un processus itératif. C'est évident à première vue sur le graphique, n'est-ce pas? Qu'est-ce que j'entends par non-linéarité?

Au départ, nous avons tellement de théories différentes que nous voulons tester à travers des prototypes. Et ce n'est que vers la toute fin du processus de conception qu'ils s'installent d'une manière ou d'une autre. De temps en temps, d'itération en itération, les sessions de test se ressemblent et les changements de conception deviennent de moins en moins: ils sont plus profonds, plus élaborés, mais extérieurement, il est plus difficile de les remarquer.

En appelant le processus itératif, je veux dire que vous ne pouvez pas le tester une fois et vous arrêter là. Les tests doivent être effectués régulièrement. C'est alors que cela prend tout son sens. Surtout si l'on considère que la conception change également de façon spectaculaire au cours du processus.

Comment se préparer à une étude UX?

Usability- . ? , . . , , ( ), User Story Map. User Story Map .
. , . , . , 10–15 , 20 ( : , , ). , 5–7 -. , . , «» «», -, .
. (5–7 ). , . -. , « » .

Je donnerai immédiatement une réponse à la question la plus populaire de nos clients, qui ressemble à ceci: "Vous testez probablement tout par vous-même pour vous assurer que les résultats sont bons?" Non. Non seulement nous n'incluons pas nos résultats dans les tests, nous essayons même de ne pas inclure de personnes ayant des déformations professionnelles dans les tests, c'est-à-dire ceux qui sont professionnellement engagés dans des tests pour de l'argent. Et nous excluons également les concepteurs, programmeurs et autres qui sont également soumis à cette déformation professionnelle.

Répétons ce dont nous avons besoin pour préparer la consolidation.

1. Hypothèse

L'image ci-dessous montre plusieurs options possibles pour visualiser ce processus. L'écran le plus à gauche indique comment créer la User Story Map par des moyens improvisés. Pour ce faire, utilisez simplement des autocollants en papier. En les connectant avec des chaînes, nous montrons des hypothèses sur la façon dont l'utilisateur se promènera dans l'application. La deuxième option est la User Story Map, dessinée dans Miro. En fait, les mêmes morceaux de papier, uniquement transférés sous forme électronique pour plus de commodité. Et le troisième écran est un prototype cliquable dans Figma.

Les outils spécifiques ci-dessus sont indiqués, mais en fait, ils ne sont pas liés, et des hypothèses peuvent être construites selon ce qui vous convient. Par exemple, dans notre équipe, il y a des passionnés qui ont effectué tous les tests sur des morceaux de papier. Ils avaient également un prototype cliquable sur des morceaux de papier - et cela aussi peut être commencé.

2. Rédaction de questions

Questions ouvertes. Génial s'ils se présentent sous forme d'histoires. Autrement dit, si nous supposons qu'une personne doit bloquer la carte pour résoudre son problème, nous ne disons pas «Bloquer la carte» dans notre front , nous lui racontons une histoire. Idéalement, l'histoire devrait plonger une personne en elle-même et l'inciter à réagir avec l'histoire aussi.

Exemple:

3. Rassembler les répondants

Ce programme a été établi par Jacob Nielsen dans les années 1990. Même alors, des études UX ont été menées. La ligne horizontale indique le nombre de personnes que nous testons et la ligne verticale indique le nombre d'erreurs trouvées. Il convient de noter qu'après environ la 5e personne testée, le programme devient plus doux, mais qu'est-ce que cela signifie? Cela signifie qu'au bout de 5 personnes, l'efficacité de la mise sous tension de chaque nouvelle personne test diminue et avec elle, nous trouvons de moins en moins d'erreurs. Jacob Nielsen a fait une telle conclusion, et nous partageons pleinement cette conclusion.

Il est plus efficace de faire de petits échantillons, mais de le faire souvent.

Au début, je voulais conseiller le livre de Jacob, mais en général, il est déjà vieux. Il y a quelque chose de mieux. L'auteur continue de s'engager dans la recherche UX, et voici son site Web, il y a de nombreux articles: nngroup.com

Processus de test

Merde, il est important d' enregistrer tous les tests sur vidéo. La vidéo est l'artefact le plus important des tests. Si vous n'avez pas de vidéo, nous pouvons dire que vous n'avez pas testé.

Le premier. Avant de commencer les tests, puisque nous testons une application mobile, nous donnons le téléphone à une personne. Nous lui demandons de se détendre et d'être sûr d'exprimer tout ce qui se passe. Il est important pour nous de comprendre le cheminement de pensée du sujet.

Deuxièmement, et nous appelons cette règle «5 pourquoi?», dans le processus de passage du script, vous devez provoquer une personne pour expliquer son arrêt ou son doute dans ses actions. Voici de telles questions qui aident beaucoup: "Qu'espériez-vous voir sur cet écran?", "Pourquoi avez-vous cliqué sur ce bouton?". Ce n'est pas toujours exactement pourquoi, mais le désir de poser autant de questions que possible et de plonger dans la tête de la personne autant que possible aide toujours.

Et le troisième. Sur la base des résultats du test, nous demandons: «Pensez-vous que vous avez terminé la tâche? ". De plus, non seulement le répondant répond à cette question, mais aussi la personne qui fait le test. Pourquoi nous faisons cela, je vais le dire ci-dessous.

Nous passons maintenant directement à nos tests.Le tableau montre à quoi pourraient ressembler les résultats sommaires de la recherche. Ce sont les vrais résultats de notre premier test. À gauche, une liste de questions et d'histoires, suivie de colonnes pour chacun des répondants. Si cela coûte 1, cela signifie que le sujet et le testeur ont considéré que la tâche était terminée. Si 0,5 - cela signifie que quelqu'un seul croit que la tâche n'est pas terminée. Si 0 - les deux conviennent que la tâche n'est pas terminée. À partir de ces données, nous pouvons comprendre quels scénarios nous avons sont forts, lesquels sont faibles. D'après les données du tableau, nous pouvons conclure que, par exemple, nous réussissons bien à verrouiller la carte, tout le monde a fait face. Et avec le transfert d'argent - pas très bon, c'est sur cela que nous devons travailler.

Nous avons testé notre application mobile RBS pour les particuliers. Au total, au moment de la rédaction de ce rapport, deux itérations de tests ont réussi, dans chacune desquelles 6 personnes ont été testées. Seulement 7 femmes, 5 hommes âgés de 20 à 50 ans. Au départ, nous n'avons pas essayé de faire un très large choix de métiers, mais il s'est avéré assez diversifié: enseignants, médecins, administrateurs de restaurants, etc. En raison de la demande de notre client, lors de la deuxième session, plus de personnes âgées de 40 ans et plus ont été incluses dans l'échantillon. Et c'est dans ce public que le plus d'erreurs ont été identifiées. Le plus souvent, ils ont trébuché quelque part, se sont arrêtés quelque part et ils ont dû poser le plus de questions.

Résultats de test

Les résultats du test du point de vue du "coped / failed": il s'est avéré que le testé a fait face à 93% des tâches. De plus, ils pensaient eux-mêmes n'avoir réussi que 83%. Cette différence de 10% - ces moments où une personne est allée selon le scénario souhaité, notre testeur voit qu'il a fait face à la tâche, mais le répondant n'est pas sûr des résultats. Et ce sont aussi des problèmes sur lesquels il faut travailler. Après tout, nous comprenons que dans de tels moments, l'application ne donne pas à la personne la rétroaction souhaitée et cela doit être corrigé. En moyenne, une session a duré 12 minutes. Un bon résultat, compte tenu du fait que nous nous sommes concentrés sur 10-15 minutes. Vous trouverez ci-dessous la conception de l'application utilisée lors de la première itération des tests. Permettez-moi d'expliquer ce que nous avons décidé de changer en fonction des résultats des tests.

Je vais le dire au nom de l'utilisateur qui a enfoncé un doigt dans cette application.

Supposons que je doive payer pour un téléphone portable. Il devrait probablement y avoir un bouton «payer» quelque part. Je ne trouve pas le bouton et je pars le chercher dans le menu burger dans le coin supérieur gauche.

Quel est le problème? Il y a deux boutons «payer» sur l'écran, personne n'en a remarqué aucun. C'était dans 3 cas sur 6.

Un autre problème. La section analytique, que nous avons trouvée très utile, malheureusement, les utilisateurs ne l'ont pas trouvée en tant que telle. Il n'a fait qu'embrouiller les gens.

En général, si vous regardez globalement, alors cet écran est surchargé, il est difficile pour l'utilisateur de trier dans sa tête quoi et où il se trouve dessus.

Le deuxième écran est l'écran de paiement / transfert: lors des tests, nous avons constaté que les gens souhaitaient voir leurs paiements réguliers et les recherchaient sur l'écran de paiement. Dans la première version du dessin, ils étaient sur le bord et partiellement cachés par un rouleau horizontal. Eh bien, en principe, ils étaient dans un onglet séparé, ce qui rendait également difficile de les trouver. Le troisième écran est un écran avec des produits bancaires:

Toutes les personnes que nous avons testées (ok, presque toutes) ont noté que cet écran était utile. Ils savaient où l'appeler, ils l'ont souvent utilisé. Ici, nous nous sommes créé un problème en appelant cet écran dans le menu supérieur gauche du burger. Dans la vidéo, nous avons remarqué que lorsqu'une personne essaie d'appuyer sur ce bouton, beaucoup interceptent le téléphone, ce qui n'est pas pratique pour tout le monde.

Maintenant, les téléphones sont devenus gros, ils peuvent tomber et nous avons décidé que c'était un problème pour nous, nous allons travailler avec. Au fait, devinez pourquoi l'auteur de l'article marche avec un téléphone cassé?

Les images suivantes montrent la conception considérablement modifiée de la deuxième itération.

Comme vous pouvez le voir, l'écran est devenu beaucoup plus facile. Maintenant, lorsque nous avons demandé aux utilisateurs de nous dire ce qu'ils voyaient, ils nous l'ont dit de la même manière que nous l'avions imaginé. La section d'analyse a été supprimée sous un bouton supplémentaire, elle ne charge plus d'espace. Sur l'écran de paiement, les paiements réguliers sont effectués de manière à être visibles. Mais les gens sont toujours coincés ici, ce qui implique que nous allons certainement l'améliorer et le faciliter. Le troisième écran est un écran avec une liste de produits bancaires dont dispose une personne. Et ici, nous y avons accédé depuis le bas du téléphone au lieu de l'appeler depuis le menu supérieur gauche du burger.

Les mêmes trois nouveaux téléphones. Le troisième écran est mis en surbrillance.

Maintenant, cet objet est situé directement sous le doigt de l'utilisateur, et il n'a pas besoin de l'atteindre, il suffit de glisser vers le haut ou de cliquer dessus pour ouvrir la liste des produits.

Quelques observations et conclusions supplémentaires que nous avons faites lors des tests. Qui saurait qu'il y a des gauchers et des gens dans le monde qui ont simplement l'habitude de tenir le téléphone dans leur main gauche. Et ils ont leurs propres caractéristiques d'utilisation. Si une personne ordinaire intercepte le téléphone, le gaucher n'intercepte pas pour appuyer sur le bouton de menu du burger. Nous avons pris note que les gauchers utilisent simplement les appareils différemment, et nous continuerons de tester et de découvrir si nous pouvons améliorer l'expérience pour eux. Il y a encore des personnes malvoyantes.

Graphique à barres. 3 barres: 10%, 13%, 50%

Tout le monde le sait et tout le monde l'oublie (je veux dire les designers). Comment puis-je aider les personnes malvoyantes? Tout d'abord, vous pouvez augmenter les objets dans la conception. Deuxièmement, vous pouvez augmenter le contraste dans la conception. Et il y a un autre point moins évident: vous pouvez séparer les informations, augmenter la distance entre les blocs, ce qui aidera également les gens à mieux lire les interfaces.

Selon les estimations les plus conservatrices de Wikipédia, nous avons 10% de gauchers et 13% de malvoyants. Selon les impudiques - les gauchers se situent autour de 15% et les malvoyants - 30%.

Et certaines filles ont de longs ongles.Ces filles utilisent également le téléphone différemment. Il leur est difficile d'appuyer sur quelque chose dans le coin inférieur droit, car au lieu de presser du bout du doigt, ils se reposent avec un ongle, et donc ils doivent également intercepter en quelque sorte. Il n'y a pas de statistiques officielles ici, mais je peux supposer que de temps en temps jusqu'à 50% de la population adulte de la planète peut être dans cette situation.

En plus des tests d'utilisabilité mis en évidence ci-dessus, il existe de nombreuses façons de tester l'UX. Parmi eux:

Suivi de l'oeil
Tests A / B
Sondages en ligne
Entretiens approfondis

Sur le tout premier plan de coordonnées, il y a des cercles avec les méthodes de test mentionnées ci-dessus

Plus nous passons de temps à tester, plus nous comprenons clairement que les tests UX sont très proches d'une science telle que la psychologie cognitive. Et surtout à un concept tel que «distorsion cognitive».

Pour ceux qui veulent approfondir cela, je conseille le livre de Daniel Caniman «Penser, vite et lentement» (Réfléchissez lentement, décidez rapidement). Elle ne vous dira rien sur les tests, mais cela fournira un bon terrain de réflexion, montrant comment les mêmes personnes peuvent répondre à différentes questions de la même manière.

Cet article vous a-t-il aidé à vous rapprocher de commencer à tester les interfaces vous-même? Qu'est-ce qui s'est avéré utile (si quelque chose s'avérait encore) et qu'est-ce qui est inapproprié?

Merci à tous ceux qui ont aidé à mener l'étude et à préparer le rapport.

Recherche UX:
équipe JTC - analyse commerciale, conception, recherche UX
Denis Krasilnikov - conception
Anton Kazakov - recherche UX
Ekaterina Kashkovskaya - recherche UX
Dmitry Dobrodeyev - recherche UX
Irina Ponomareva - tournage et montage

Préparation du rapport:
équipe JTC - génération de reportages
Maxim Blokhin - design par
Irina Ponomareva - tournage et montage
Nadezhda Molodtsova - tournage
Tatyana Kitaeva - montage

UX-recherche de RBS: notre expérience, nos erreurs et nos découvertes