Alors que les fournisseurs front-end connaissent et apprécient depuis longtemps
Vitaliy Fridman (co-fondateur de
Smashing Magazine ), ce nom est peut-être beaucoup moins connu des développeurs et testeurs mobiles. Mais Vitaliy, qui a récemment réussi à prendre deux premières places à la fois dans les
meilleurs rapports de HolyJS 2018 Piter, est maintenant arrivé aux conférences mobiles et de test avec le nouveau rapport "Extremes of testing: tricks from the dark coins of mobile interfaces".
Par conséquent, à la veille de
Heisenbug et
Mobius, nous lui avons posé des questions sur les tests UX et les interfaces mobiles: de la façon dont ces tests sont effectués spécifiquement dans Smashing Magazine, et jusqu'aux smartphones.
- La question s'adresse à ceux qui ne sont pas profondément plongés dans les tests UX: comprenons-nous correctement que, même s'il s'agit de tests, s'agit-il d'un domaine plutôt particulier et isolé? Le test unitaire est soit vert soit rouge, et vous avez ici beaucoup de matière."Exactement." Dans les tests que je fais, vous ne pouvez pas dire "vert" ou "rouge". Il y a beaucoup de subjectivité ici: différents utilisateurs viennent avec une certaine quantité de préjugés et avec les compétences acquises sur d'autres sites. Par exemple, une personne peut uniquement accéder au site Web d'échange ou au site d'actualités. La façon dont il voit Internet et les interfaces est très différente de nous et des autres. Par conséquent, dans ce contexte, il est très important d'étudier le public cible d'un site particulier, de voir quels autres sites elle visite, comment elle les utilise, quelles sont ses habitudes.
La chose la plus difficile est celle du subjectif que quelqu'un pourrait aimer, mais pas quelqu'un, sélectionner quelque chose d'objectif dans l'interface afin que l'idée atteigne différents utilisateurs, tout le monde comprend quoi et comment faire. Il faut plutôt chercher non pas ce qui se fait "bien", mais ce qui a une bonne expérience de récupération.
Autrement dit, même si une personne vient avec une expérience utilisateur différente et fait une erreur sur le site, il est nécessaire qu'elle puisse rapidement revenir à un état normal et continuer son chemin où qu'elle aille. C'est la partie la plus importante qui est difficile à fournir complètement avec la couverture du code, par exemple.
Alors maintenant, j'ai des problèmes avec un plan légèrement différent. Je regarde comment vous pouvez modifier de petits détails, par exemple, le texte des erreurs adaptatives. Supposons que si le paiement par carte n'a pas réussi, vous devez non seulement le signaler, mais également dire ce qui s'est exactement passé et comment y remédier.
Ma tâche consiste à examiner tous ces détails, et le test automatique de ces processus est impossible. Besoin de regarder les gens. Par conséquent, je pense que dans une certaine mesure, je suis devenu thérapeute ou psychologue. Je regarde constamment les gens, les observe et tire des conclusions en fonction de la façon dont ils regardent l'écran, où ils cliquent, où ils ne cliquent pas, comment se déplace le curseur de leur doigt ou de leur souris. C'est un côté légèrement différent, plus abstrait, humain.
- Dans les tests "habituels", l'humanité est déjà arrivée à la conclusion que c'est important même sans tests. Et dans le cas des tests UX, où tout est plus abstrait, ils lui font souvent signe de la main et n'y prêtent pas suffisamment attention?- Oui, très souvent. Le problème est que pour moi, l'UX est toujours un grand nombre d'expériences. Il y a une idée - vous devez l'essayer et voir comment cela va changer la conversion ou l'engagement. Souvent, le problème est que nous supposons que vous pouvez changer quelque chose et le mettre immédiatement en lumière. Mais en UX, l'effet est souvent un effet à très long terme.
Si vous raccrochez un pop-up et voyez combien de personnes cliquent dessus, il s'agit d'un effet à court terme, il sera facile à mesurer. Bien sûr, s'il y a de graves erreurs, par exemple lors de l'achat (une personne ne comprend pas ce qui lui est demandé pour finaliser une commande), elle s'en aperçoit rapidement. Mais certaines choses n'apparaissent que longtemps.
Il y a certaines choses concernant, par exemple, les textes où il n'est pas clair ce que signifie une fonctionnalité, un produit ou son objectif: vous devez donner un peu de temps pour voir si les gens utilisent cette fonctionnalité, y retournent ou la jettent, car au début, ils ne comprenaient pas ce qu'elle faisait. Cela peut être mesuré par les taux de clics et les mesures d'engagement, mais le problème peut ne pas être que les gens n'ont pas besoin de cette fonctionnalité, mais qu'il n'est pas clair comment cela aide l'utilisateur ou quand exactement l'utiliser. Par conséquent, la seule chose que nous faisons pour systématiser ce processus est de mener régulièrement un entretien avec au moins six utilisateurs chaque vendredi.
Il existe une version du produit, nous avons un déploiement continu, certaines fonctionnalités - nous cherchons à voir si une personne comprend ce qui se passe dans l'interface. Est-il plus rapide pour lui de passer au paiement de la commande ou aux informations dont il a besoin? Nous examinons la conversion et la façon dont une personne comprend ce qui se passe dans l'interface. Est-il plus rapide pour elle de passer à la caisse vers les informations qu'elle recherche? C'est le seul moyen de réaliser l'automatisation d'une manière ou d'une autre, ce qui est dans les tests classiques.
- Les géants de l'informatique abordent soigneusement les tests UX en utilisant le suivi des yeux et autres Mais les petites entreprises peuvent penser: "Ce Google est prêt à affecter un laboratoire spécial, mais pour nous quelque chose à se mêler des tests UX." Sans grandes ressources, est-il possible d'obtenir des résultats ici?- Bien sûr. Il y a tellement de ressources, y compris gratuites, qui permettent de tester. Le suivi oculaire peut aider, mais dans des situations difficiles. Il peut être utilisé, par exemple, dans le cas des itinéraires, lorsque les gens ne peuvent pas trouver comment se rendre dans certaines salles du musée. Dans ce cas, il est utile de savoir où les gens regardent lorsqu'ils vont au musée, et pourquoi ils ne trouvent pas ce qu'il semble très facile à trouver. Vous pouvez vérifier dans l'interface où les gens regardent, ce à quoi ils prêtent attention et ce qu'ils voient.
Les heatmaps sont une méthode assez simple, il existe de nombreux outils pour les créer. Ils analysent le trafic et génèrent du flux, vous pouvez enregistrer des vidéos pour chaque utilisateur - où il est allé, où était sa souris, où elle s'est déplacée, où il a cliqué, où il est revenu, etc.
D'un autre côté, il existe des outils qui vous permettent d'embaucher des personnes du pool de testeurs qui reçoivent de l'argent pour chaque test et leur confient une tâche - par exemple, le site Web usertesting.com. C'est déjà beaucoup plus cher (49 $ par test vidéo), mais vous pouvez choisir les données démographiques qui vous intéressent, confier une tâche à la personne, et le soi-disant «protocole de réflexion à voix haute» y est utilisé. Cela signifie que lorsqu'une personne se rend sur la page principale de l'interface et passe de l'une à l'autre, accomplissant la tâche, elle doit dire si elle comprend tout, ce qu'elle voit, de quoi parle ce site, ce qu'elle attend quand il clique sur le bouton. Si vous collectez 6-7 de ces vidéos pour les appareils mobiles et 6-7 pour le bureau, vous pouvez voir beaucoup de modèles. De plus, vous devez surveiller attentivement où les gens regardent et comment ils se comportent avec la souris ou le pavé tactile.
Très souvent, il y a des situations où quelqu'un ne comprend pas quelque chose dans l'interface. Les gens aiment les boutons et tous les éléments interactifs. Ils commencent à se déplacer dans leur direction, mais ne cliquez pas dessus, mais tournez la souris autour du bouton. Et alors seulement, ils cliquent. C'est l'un des signes qu'une personne ne comprend pas très bien ce qui se passera si vous appuyez sur un bouton. De telles choses peuvent être facilement trouvées sans appareils très coûteux.
"Dans le cas d'autres types de tests, il y a une idée de la séparation des tâches:" ici, les développeurs eux-mêmes écrivent des tests unitaires pour le code, mais les testeurs manuels le feront. " Et les tests UX - à qui est-il destiné?- Je pense que cela dépend de la structure de l'entreprise. Les entreprises occidentales ont souvent un concepteur UX ou même un testeur d'utilisabilité, il est clair qu'elles le font toute la journée. Mais si l'entreprise est petite, l'autre personne sera responsable. S'il existe un concepteur frontal (qui est plus proche de l'UX que du JavaScript), il en a un. Et toute personne qui s'occupe de prototypes aura la responsabilité de mener de tels tests s'il n'y a pas de testeur d'utilisation séparé.
- Et comment les tests UX sont-ils effectués spécifiquement dans le cas de Smashing Magazine?- Tout est très simple chez nous: dès que de nouvelles idées apparaissent, nous réunissons 5-7 personnes à qui je donne personnellement des missions et mène des entretiens.
La tâche consiste à trouver des informations ou à essayer d'effectuer un paiement. Je regarde comment ils le font, avec leur consentement, j'enregistre le comportement et le visage, et je regarde très, très lentement chaque vidéo. Il me faut une heure et demie pour qu'une vidéo examine en détail comment les gens se déplacent, utilisent la souris, où ils regardent, ce qu'ils remarquent et ce qui ne l'est pas.
Nous générons également automatiquement une carte thermique: là où les gens cliquent, y a-t-il quelque chose qu'ils ne remarquent pas. Sur la base de ces données, nous améliorons l'interface et faisons de même une semaine plus tard. Nous avons une petite entreprise, moins de 20 personnes. Dans les grandes entreprises, il aura à peu près la même apparence, seule la différence sera que plusieurs tests se dérouleront en parallèle à la fois.
Et nous surveillons non seulement ce qui se passe si vous modifiez le bouton, son emplacement ou le texte sur la page. Il existe deux types de tests: d'une part, les tests A / B - boutons et autres petites choses. D'un autre côté, vous pouvez essayer de changer complètement quelque chose, c'est ce qu'on appelle le test A / Z. Par exemple, lorsque nous remplaçons complètement le design et le testons.
Il peut avoir des couleurs, une typographie similaires, mais il sera complètement différent en termes d'organisation des informations, de mise en page, avec une disposition complètement différente de tous les composants. Si vous changez simplement la position du bouton, nous atteindrons très probablement un maximum local, une conversion locale, quel que soit le KPI. Une conception complètement différente peut vous permettre d'éclater et d'atteindre un niveau de conversion complètement différent, ce qui est difficile à faire avec de petites mesures locales.
- Pouvez-vous donner un exemple spécifique lorsque vous avez fait quelque chose pour la première fois dans Smashing Magazine, puis changé de manière significative après le test?- Par exemple, quand ils ont introduit un abonnement payant avec différentes capacités. Nous avions trois plans tarifaires, nous avons longtemps pensé combien de personnes pourraient payer pour chacun d'eux.
Et puis nous avons testé et constaté que pour beaucoup de nos lecteurs, ces plans étaient totalement inadaptés. Ils, en particulier les personnes dans les grandes entreprises, avaient besoin d'un plan annuel: afin de ne pas faire rapport tous les mois, où 7 à 9 $ sont allés. Les gens ne pouvaient pas trouver le plan annuel - bien qu'il soit sur demande, mais ils ne pouvaient tout simplement pas le trouver. En conséquence, nous avons ajouté le bouton correspondant, changé un peu l'interface et les gens ont commencé à le remarquer.
- Passons au sort des interfaces mobiles. Auparavant, on pouvait souvent entendre parler de l'augmentation de la part de l'Internet mobile - et qu'en est-il en 2018, lorsque les ventes de smartphones ont cessé de croître?- En 2018, cela continue. De plus, je dirais que cette année est très importante, car cette année nous avons vu beaucoup de tournants.
Peu importe ce que nous prenons - commerce de détail, consommation de contenu musical et vidéo, même radio - presque partout où nous constatons que le trafic mobile a traversé le trafic des ordinateurs de bureau. Je ne dirais pas que le trafic sur les ordinateurs de bureau diminue de façon spectaculaire, qu'il ne croît tout simplement pas et que le trafic mobile augmente considérablement.
Le trafic mobile arrive en Inde, en Asie, en Afrique et en Amérique du Sud seulement maintenant - il y a une croissance énorme, beaucoup plus élevée que celle que nous avons actuellement en Europe ou en Amérique.
Et à la fin, le trafic mobile est très important, car pour la première fois de tous les temps cette année, la conversion mobile a dépassé le bureau. Depuis de nombreuses années, les spécialistes du marketing disent que cela ne vaut surtout pas la peine d'investir dans le marché mobile, car la conversion y est faible. Cette année, tout a changé - il n'y a plus rien de plus important que le trafic mobile.
Il ne s'agit pas seulement de choses telles que les téléphones, mais aussi de l'Apple Watch, de tout autre gadget, de l'IoT. Les réfrigérateurs connectés à Internet peuvent également afficher certaines informations. Bien sûr, nous parlons également de choses telles que l'interface conversationnelle et les robots de discussion, qui sont principalement optimisés pour une utilisation mobile.
- Il y a même des années, le mobile first (la création d'interfaces principalement pour les appareils mobiles) est devenu le mot à la mode dans l'interface utilisateur - et le «point de basculement» actuel signifie-t-il que pour de nombreuses entreprises, cela devient maintenant la pratique principale du mot à la mode?"Il l'est." Je travaille actuellement avec une entreprise qui a sérieusement réfléchi à la façon dont elle organise l'ensemble de l'entreprise. Initialement, ils ont ignoré le marché mobile, et le bureau existe depuis 15 ans - c'est un grand détaillant de commerce électronique. Et soudain, un marché mobile est apparu.
Bien sûr, ils ont fait de l'optimisation, du responsive design. C'est déjà bien, mais il existe encore des applications Android et iOS. En conséquence, il s'est avéré que la grande majorité des développeurs et des concepteurs travaillaient sur le site de bureau, et un petit groupe travaillait sur le site mobile. Maintenant, ils réfléchissent beaucoup à ce qu'ils doivent changer, car ils remarquent cette tendance.
Le bureau est stable, dans leur cas, il ne se développe pas, mais le marché mobile et le trafic sont en forte croissance. Par conséquent, ils prévoient de changer toute leur architecture afin qu'ils aient tout pour commencer à partir du mobile, certaines fonctionnalités n'atteindront d'abord que les appareils mobiles, puis le bureau.
Ils ont dû beaucoup réfléchir à ce que cela signifie pour l'organisation d'une équipe, car une petite équipe a maintenant une très grande responsabilité. Et ils ont également réfléchi à la manière de passer d'abord au mobile, non seulement en termes d'interfaces, mais aussi de faire une «transformation numérique» de l'ensemble de l'organisation.
Pour eux, comme pour beaucoup, il est plus probable que ce ne soit même pas le mobile, mais le contenu en premier. Il s'agit de savoir comment organiser les informations sur n'importe quel facteur de forme: montres, téléphones, tablettes, etc. Une plus grande attention est accordée à l'organisation, aux filtres, à l'affichage des informations de manière accessible, afin qu'elles ne soient pas trop nombreuses, de sorte qu'il soit pratique pour une personne de les utiliser. Encore une fois, c'est le moment où les tests appropriés deviennent très, très importants.
- Vaut-il la peine de faire des interfaces significativement différentes pour la version mobile du site et du bureau, ou plutôt quelque chose d'adaptatif avec un minimum de changements?- Je pense qu'il y a des situations où il faut être très différent. Par exemple, il y avait un projet IKEA qui vous permet de concevoir la «cuisine de vos rêves». Un tel projet ne peut pas simplement être «transféré» entre le bureau et les appareils mobiles, ils ont des capacités différentes. Sur le bureau, cela ressemble à une application de bureau standard et sur le mobile comme une application AR / VR, où vous pouvez voir l'objet directement devant vous en 3D. Il s'agit d'un scénario complètement différent, tirant parti de l'appareil.
Et pour les sites classiques, je dirais que la chose la plus simple est de créer un site avec un minimum de changements. Bien entendu, cela n’exclut pas l’existence d’applications. De plus, maintenant avec l'aide de PWA (Progressive Web Apps), il est possible de faire du site également une application qui peut être installée au niveau du système. Mais, en général, pour la plupart, il serait plus raisonnable d'avoir un site et une base de code, et de l'utiliser autant que possible sur différents appareils.
- Smashing Magazine est également une application Web progressive, non?- Oui, vous pouvez utiliser le site hors ligne, l'ajouter en tant qu'application, il y a mise en cache. Mais ce n'est rien de spécial. Et il y a des entreprises qui essaient de créer quelque chose comme «e-commerce hors ligne», quand une personne peut faire un achat hors ligne. Ce n'est pas si facile à faire, mais l'idée est bonne, car si vous utilisez PWA, vous aurez de très bonnes performances. Cela signifie que vous pouvez passer rapidement (ou au moins préparer) une commande, sans erreurs et un accès constant au serveur.
Comment pouvons-nous faire cela, par exemple, dans le cas de git, lorsque j'ai écrit une sorte de commit, puis il y a une poussée sur le serveur, mais toutes les modifications se produisent d'abord localement. L'idée est similaire, et je pense que cela pourrait fonctionner assez bien. C'est un grand avantage de PWA.
- Smashing Magazine a des statistiques d'utilisateurs atypiques (par exemple, les partages de navigateur ne sont pas distribués du tout comme sur Internet dans son ensemble), donc je voudrais clarifier: quel est votre ratio de visiteurs mobiles et de bureau?- Il y a trois ans, nous avions 11% du trafic mobile, aujourd'hui environ 22%. Honnêtement, c'est très petit. Le fait est que nous avons de très longs articles. Leur lecture prend de 40 à 50 minutes. Lire tant de choses au téléphone est assez difficile. En moyenne, les sites ont désormais beaucoup plus de trafic mobile, mais en raison de nos fonctionnalités, nous n'avons pas encore atteint ce point.
- Artemy Lebedev a critiqué les interfaces mobiles, affirmant que "plus l'écran est grand, meilleure est l'interface". Avez-vous le sentiment qu'avec la transition vers de petits écrans, il est devenu plus difficile de faire un bon design?- Je pense que faire un beau design, au contraire, est devenu plus pratique. Je suis un grand fan de toutes sortes de restrictions. Chaque projet a besoin d'une sorte de restriction. Lors de l'élaboration d'un concept, nous essayons souvent de nous forcer à penser en dehors des formes habituelles. Nous commençons à concevoir et à concevoir, en nous fixant des limites.
Par exemple, "dans ce projet, nous ne pouvons pas utiliser plus de deux couleurs." Cela ne signifie pas que nous n'utiliserons que deux couleurs, mais cela nous conduira à une solution inhabituelle. Ou nous disons que nous n'utiliserons pas de triangles, de cercles et de carrés. Et que pouvons-nous utiliser en plus de cela? La taille des appareils mobiles est une grande limitation en soi. Et cela nous fait trouver des solutions intéressantes.
Je pense que vous pouvez dessiner une belle interface n'importe où. Bien sûr, des difficultés surviennent à un moment donné. Par exemple, les robots de discussion n'ont pas de composants visuels en termes de couleurs ou de typographie, vous envoyez simplement le texte. Mais il peut aussi y avoir de la beauté.
Plus nous allons dans le sens de l'horloge ou des petits appareils ou de l'interface conversationnelle, plus la visibilité est perdue, il ne reste que l'essence.
Il est important que le site, la société ait son propre noyau, qui restera si vous supprimez toutes les images, les couleurs et la typographie. Cela nous fait réfléchir à ce qui est important et nécessaire pour la marque, et concentrer notre attention sur cela, laisser ce noyau se manifester. Et maintenant, nous nous cachons derrière une bonne typographie et un bon design.- Et laquelle des interfaces, en principe, ne correspond pas au format mobile? Par exemple, des tableaux qui ne tiennent pas normalement à l'écran me viennent à l'esprit. Y a-t-il d'autres pierres d'achoppement?— , , . , , . , . , — , , . , . , , , .
, . , . , , .
— , , , ?— , . IKEA. , WebVR, , - , . , , . , , .
, , , mobile first content first. , desktop last. . , Smashing Magazine . mobile first, 1800 , .
. , . . , mobile first, , . , , mobile , . . mobile first and desktop first.
— «» . «» , . , , UX?— . , . 2% , «» . 98% , .
, . , , . , «» . .
Vitaly prononcera des discours de clôture à Moscou lors de nos deux conférences la semaine prochaine: Heisenbug (qui se tiendra les 6 et 7 décembre) et Mobius (8 et 9 décembre). Dans le premier, en plus de son discours, il y aura beaucoup plus de rapports intéressants sur les tests , et dans le second, sur le développement mobile .
