Revue d’utilisabilité et benchmark d’un calculateur de prix

01Contexte

La page où un acheteur chiffre une configuration

Arvan Cloud est un fournisseur iranien de cloud et de CDN. Son site avait un calculateur de prix pour les services qu’Arvan vend : serveurs cloud, forfaits de sécurité, diffusion en direct, vidéo, stockage, DNS et support. Un acheteur choisissait ce qu’il voulait, appuyait sur « Calculer » et obtenait un récapitulatif façon facture, avec un bouton pour s’inscrire et commander.

En janvier 2020, dans le cadre de son travail, Sina a passé en revue cette page. La refonte qui a suivi a été mise en ligne. Cette étude porte sur la revue qui l’a précédée : ce qui est venu en premier, comment chaque problème a été consigné, à quoi la page a été comparée et ce qui a été mesuré. Elle se termine par deux écrans de la refonte. Arvan a mis à jour son site depuis, si bien que le calculateur en ligne aujourd’hui n’est pas celui décrit ici.

02Approche

Cinq jours, trois séances, un tableau

Sina a travaillé en solo, du 19 au 23 janvier 2020, sur un seul tableau Trello. La page a été utilisée comme le ferait un acheteur : remplir chaque section du formulaire, appuyer sur « Calculer », lire la facture et changer une option pour voir ce qui bougeait.

Chaque problème est devenu une carte : un titre court, le plus souvent une étiquette pour son type (utilisabilité, interface ou texte), souvent une capture d’écran et parfois une note sur ce qu’il faut changer. Les listes suivent les parties mêmes du calculateur, comme ses champs de saisie, sa facture et chaque produit, si bien qu’une carte se trouve là où le problème a été repéré.

Trois séances ont consigné 48 des 50 : 22 le 19 janvier, puis 13 le 20 janvier et 13 le 21 janvier. Deux autres ont suivi le 22. Entre les séances, le tableau a accueilli le reste du travail.

La page a été mesurée avant d’être jugée : le test de vitesse a précédé le premier constat.

03Constats

Cinquante problèmes, en huit thèmes

Sur les 50 cartes, 26 portent l’étiquette utilisabilité, 15 l’étiquette interface et 13 l’étiquette texte. Une carte peut en porter plusieurs, et trois n’en portent aucune. Lues ensemble, elles se regroupent en huit thèmes.

À la troisième séance, 11 des 13 notes sont écrites comme un acheteur les dirait.

04Benchmark

Douze autres calculateurs, mesurés de la même façon

Chacun des 12 autres calculateurs de prix cloud a reçu sa propre carte. Les 13 pages, celle d’Arvan comprise, sont passées par GTmetrix puis ont été réunies dans une même feuille de calcul : scores PageSpeed et YSlow, temps de chargement, taille et nombre de requêtes. Les douze étaient Google Cloud, Microsoft Azure, AWS TCO, Open Telekom Cloud, Oracle Cloud, Rackspace, Firebase, Huawei Cloud, NetApp, DigitalOcean, FME Cloud et Selectel.

Mesurée ainsi, la page d’Arvan était la deuxième plus lourde : 2,65 Mo, contre une médiane d’environ 1,2 Mo pour les autres, et seuls les 3,13 Mo d’Oracle la dépassaient. Elle faisait 106 requêtes, contre une médiane de 65, soit le troisième nombre le plus élevé. Son score PageSpeed de 56 était le troisième plus bas, ex æquo, et avec 6,7 secondes elle était la cinquième plus lente à charger. Sur YSlow, elle se situait en milieu de classement.

Chaque page a été testée une seule fois, avec la formule gratuite de GTmetrix, depuis Vancouver, les 19 et 20 janvier 2020, si bien que les chiffres sont un instantané, pas un verdict. Ils suffisaient à situer la page parmi ses pairs.

Au-delà des douze, deux designs venus d’ailleurs ont été gardés comme cartes d’idées : le paiement à l’usage, tiré d’une application de forfaits mobiles, et une disposition en cartes pour les forfaits.

Sur les 12 autres calculateurs, un seul pesait plus lourd que la page d’Arvan.

05Référencement

Un titre de 22 caractères et aucun intertitre

La page a aussi été vérifiée pour savoir comment les moteurs de recherche la liraient. Une extension SEO de navigateur a signalé un titre de 22 caractères et une description de 53, sans mots-clés ni balise canonique. La page avait un seul H1, le mot « calculateur », et six balises H6 qui étaient en réalité des éléments de menu ; elle n’avait aucun H2 à H5. Elle contenait 56 images et 144 liens.

Un audit du site a ajouté deux points moins importants : un certificat proche de l’expiration, et une page avec une redirection temporaire.

06Refonte

La refonte, en deux écrans

La refonte qui a suivi la revue a été mise en ligne. Sina en conserve deux écrans, montrés ci-dessous. C’est tout ce que cette étude a de la refonte ; ce chapitre ne dit donc que ce que ces deux écrans montrent.

Sous une rangée de tuiles, une pour chacun des neuf services, la page compte deux cartes côte à côte. L’une contient les réglages du service choisi, ici le stockage cloud : sa région, sa taille, ses requêtes et son trafic sortant, avec un bouton qui l’ajoute à la facture. L’autre est la facture elle-même.

Tant que rien n’est ajouté, la facture indique qu’elle est vide et ce qu’il faut faire d’abord : personnaliser un service et l’ajouter. Une fois les services ajoutés, chacun devient une ligne de la facture qu’on peut replier ou retirer, et sa tuile porte un point jaune.

Sur l’ancienne page, la facture venait en dernier, après « Calculer ». Dans la refonte, elle est à l’écran avant tout ajout.

07Mon rôle

La part de Sina

En janvier 2020, Sina a passé en revue le calculateur en solo, comme designer produit chez Arvan Cloud. Les notes consignent l’usage de la page par une seule personne ; aucun test avec d’autres personnes ne fait partie de cette étude.

Responsable

La revue : chaque séance, constat et étiquette
La comparaison avec 12 autres calculateurs cloud
Les mesures de vitesse et la feuille de calcul où elles ont été reportées
La vérification du SEO
Les deux cartes d’idées
Les deux écrans de la refonte montrés ici

Coresponsable

—

Collaboration

—

08Résultats

Ce que la revue a produit

Une revue et les éléments qui la documentent, pas un résultat. La refonte qui a suivi a été mise en ligne et deux de ses écrans sont montrés, mais les éléments ne contiennent aucun chiffre sur ce qu’elle a changé.

problèmes consignés: 50; Sur cinq jours et trois séances, presque tous étiquetés utilisabilité, interface ou texte; Livrable · Tableau de la revue, 19–23 janv. 2020
pages mesurées: 13; Le calculateur d’Arvan et 12 autres, chacun testé une seule fois avec GTmetrix; Livrable · Feuille de calcul de vitesse, 19–20 janv. 2020
thèmes: 8; Mots, commandes, unités, facture, champs de saisie, ordre du formulaire, erreurs et calculs laissés à l’acheteur; Livrable · Regroupés à partir du tableau
idées gardées: 2; Le paiement à l’usage, et une disposition en cartes pour les forfaits; Livrable · Cartes d’idées, 21–22 janv. 2020

Ce qui a été livré

Un tableau de 50 constats, étiquetés et classés par partie du calculateur
Une feuille de calcul des chiffres de vitesse de 13 pages

09Ce que j’ai appris

Ce que je changerais

01
Observer quelqu’un d’autre l’utiliser
Les notes consignent l’usage de la page par une seule personne, et onze d’entre elles parlent comme le ferait un acheteur. Cela permet de trouver des problèmes, mais pas de dire lesquels bloquent un acheteur ni à quelle fréquence. Quelques séances avec de vrais acheteurs les auraient hiérarchisés.
02
Hiérarchiser les problèmes dès qu’ils sont consignés
Les 50 cartes ont le même poids : le tableau a des étiquettes pour le type de problème, mais rien sur l’importance d’un problème, sur son responsable ou sur son échéance. Une marque de gravité posée dès qu’un problème est consigné aurait laissé une liste prête à être traitée.
03
Lancer chaque test de vitesse plus d’une fois
Un seul test GTmetrix par page, un seul jour et depuis un seul endroit, ne donne qu’un instantané. Plusieurs tests à différents moments montreraient une fourchette, et les écarts entre les pages reposeraient sur des bases plus solides.

Langue