Comment réaliser un test de responsive design ?
21/03/2016

Tester son design responsive : pourquoi et comment ?

Périphérique, navigateur, profil utilisateur, contexte de navigation… La multitude de cas d’usage d’un site web rend difficile la validation d’un responsive design. Pas simple mais loin d’être impossible si l’on a les bons outils !

Designers, marketers ou webmasters, vous venez de mettre en ligne votre nouveau site responsive mais les performances ne sont pas au rendez-vous ? Vous avez pourtant réalisé des tests unitaires et quelques collègues ou amis ont navigué sur le prototype. Vous avez peut-être même payé la réalisation d’un test utilisateur en laboratoire d’usage rassemblant une dizaine de personnes. Malgré tout, les performances de votre site sont insuffisantes sans que vous ne sachiez pourquoi.

Il est pourtant possible de valider de manière quantitative et qualitative la bonne UX d’un design responsive, à moindres frais et sans allonger la durée de conception d’un design. Cela vous permettra de mettre votre site en ligne sans surprise, avec une bonne performance et en préservant l’image de votre entreprise.

 

Pourquoi faire un test de design responsive ?

Raison 1 : la multiplication des périphériques

La multitude de cas d’usage des pages web complique la phase de testing d’un design responsive. Beaucoup d’acteurs du web mettent encore en production leur page sans certitude sur la qualité de l’expérience utilisateur qu’elle procure sur les différents supports.

En effet, les critères qui multiplient les cas d’usage sont nombreux :

  • les personas (profil, usage, objectifs, etc.),
  • la multitude de périphérique (ordinateur, tablette, mobile),
  • les navigateurs (Chrome, Firefox, Safari etc.),
  • le réseau, etc.

Le responsive design, c’est quoi ?

Le responsive design est une approche de conception qui vise à offrir une expérience utilisateur optimale sur tout type de périphérique, ordinateur, tablette mobile, etc.


Organiser un test qui permette de déceler les problèmes ou de valider l’expérience utilisateur d’un design responsive semble, à tort, compliqué, long et coûteux.

Bien qu’utiles et nécessaires, les tests unitaires et les tests utilisateur réalisés en laboratoire sur des panels restreints, dans des conditions de test particulières et avec un nombre de configurations matérielles limitées montrent de plus en plus leurs limites dans la plupart des cas d’usage lorsqu’il s’agit de s’assurer une bonne performance UX.

Raison 2 : beaucoup plus de consultations sur mobile

Il y a encore quelques années, un site web était conçu pour être consulté d’abord sur ordinateur (desktop) mais pas forcément sur mobile. Beaucoup de sites s’avèrent donc difficiles voire impossibles à utiliser sur mobile.


L’approche « mobile first »

Le "mobile first" est une approche visant à concevoir l’interface pour des utilisations sur mobile en priorité. Cette approche présente une force et une difficulté considérable : celle de ne conserver que les fonctionnalités essentielles et de faire abstraction de tout ce qui n’est pas nécessaire. En effet, la taille restreinte de l’écran, contrainte majeure de conception d’une interface pour périphérique mobile, ne laisse que peu de place pour les interactions. Il est donc nécessaire de savoir faire le tri pour ne conserver que l’essentiel.


Les sites web doivent donc s’adapter à tous ces périphériques (desktop, tablette, smartphone etc..) pour permettre une expérience utilisateur optimale quel que soit le cas d’usage. Ces designs adaptatifs sont appelés "responsive design". Pour certains utilisateurs, les pages sont même très majoritairement consultées via un smartphone et leur interface doit être, dans ce cas, "mobile first". Comment mesurer la perte de performance (vente, inscription, lead etc.), l’insatisfaction générée et comment identifier clairement les problèmes à résoudre ? C’est là tout l’objectif des tests de responsive design dont les fonctions sont de mesurer globalement la performance et d’identifier les problèmes de comportement ou bugs. Depuis 2011, il se vend dans le monde plus de smartphones que d’ordinateurs et 97 % des mobinautes consultent Internet quotidiennement contre 88 % des internautes sur desktop.

 

Les consultations sur mobile, un enjeu majeur pour le responsive design

Les multiples tests utilisateurs réalisés sur les sites de nos clients révèlent que le taux de réussite chute de près de 40 % sur mobile par rapport au PC. En d’autres termes, les utilisateurs d’un site web ont beaucoup plus de difficultés à l’utiliser sur mobile que sur ordinateur. À cela, il faut ajouter le fait que les participants à un test utilisateur tolèrent un peu plus la difficulté qu’en situation réelle.

 

Les 3 difficultés de conception liées au smartphone

Il n’est plus rare désormais de voir des sites aussi performants sur mobile que sur desktop. Peu importe le support, l’interface offre à ses utilisateurs une expérience de même qualité pour les tâches essentielles, si les contraintes du support ont bien été prises en compte, à savoir :

  • Les écrans de smartphone sont 5 fois plus petits que les écrans d’ordinateur. Il faut donc épurer l’interface et ne garder que les informations et interactions essentielles
  • On n’interagit pas avec un smartphone comme avec un écran d’ordinateur. Les clics sont doublés, les scrolls augmentés… La gestuelle est différente et le design doit être conçu pour les deux pratiques.
  • La connexion des mobiles n’est pas toujours constante et le flux d’information doit être réduit le plus possible pour augmenter le confort de navigation.

 

La validation du responsive design, une étape devenue indispensable

Nous l’avons vu, beaucoup de sites web étaient à l’origine destinés essentiellement à une navigation sur desktop et n’ont pas été conçus pour être "responsive". Il est désormais nécessaire de les faire évoluer mais la mutation d’un site existant dans un format responsive est complexe. Il est bien souvent préférable de repartir d’une feuille blanche et de concevoir un nouveau design de site qui soit responsive plutôt que de vouloir absolument faire évoluer l’ancien.

Encore faut-il en avoir les moyens ! Là encore, il est nécessaire d’avoir les idées claires sur les défauts de son site et sur le comportement des utilisateurs sur ce dernier avant de se lancer. Un audit via un test utilisateur permet par exemple de prendre conscience de toutes les problématiques. En quelques heures de préparation, pour quelques centaines d’euros, un audit UX permet de savoir si le site existant est modifiable et pour quel budget.

 

Valider l’UX d’un responsive design

L’objectif d’un test de responsive design est de valider l’expérience utilisateur sur tous les supports dont se servent les internautes concernés.

Il est presque impossible pour une entreprise de valider son responsive design dans toutes les configurations de périphériques et situations de navigation sans faire un audit UX quantitatif (support : mobile ou desktop, résolution, moteur de recherche, public cible, etc.). Le niveau de connexion, le profil des utilisateurs (âge, habitudes de consultation, etc.) et l’environnement de consultation présentent une infinité de situations. Il est possible d’identifier les configurations clés mais il est raisonnable de considérer qu’elles sont très nombreuses à être prises en compte.

Exemple : Considérons le cas d’un site Web qui s’adresse à seulement 3 personas différents. Ces derniers consultent le site sur PC, mobile et tablette avec comme navigateurs principaux Chrome et Safari sur mobile et Firefox et Chrome sur PC. On considère qu’aucun autre critère majeur n’intervient dans l’environnement d’usage. Il existe alors 18 configurations de tests. En considérant qu’au minimum 5 testeurs sur chaque configuration sont nécessaires pour déceler les principales anomalies et valider le design, il faut donc faire le test avec 90 participants.

 

Mais comment faire un audit UX quantitatif ?

De manière générale, l’UX web se caractérise par trois composantes :

  • le taux de réussite,
  • la performance de l’interface (efficience),
  • la satisfaction des utilisateurs

Si, sur tous les périphériques, les utilisateurs réussissent à effectuer les tâches de manière efficace (ils atteignent leurs objectifs), efficiente (peu d’interactions, peu d’effort) et que la navigation les satisfait, alors votre responsive design est un succès. Pour une majorité de sites web, la solution optimale pour valider un design est la réalisation d’un test distant quantitatif.

Un tel test peut sembler complexe alors qu’en réalité, un test distant, effectué par exemple avec notre solution Evalyzer, permet d’obtenir une étude complète après 3 à 4h de préparation et autant d’analyse des résultats, le tout pour un budget raisonnable au regard de la densité d’informations obtenues.

 

Préparer un test de validation de responsive design

Les 2 étapes clés d’un test de responsive design sont la préparation du protocole ou cas d’usages (panel, contexte, scénario, questionnaires) et l’analyse des résultats. Préparer un test de ce type est très simple, sous condition de respecter quelques règles. Si vous avez un doute, faites vous accompagner par un expert, ne serait-ce que pour valider votre test avant de le lancer. Ainsi, vous serez autonome pour les tests suivants.

 

LE PANEL : Qui sont vos personas ?

Définir vos personas nécessite d’identifier vos populations cibles et leurs critères (âges, catégories socioprofessionnelles, usages, expérience, etc.)

La taille du panel est un critère fondamental pour tester votre responsive design. En effet, un petit panel va permettre de déceler certains problèmes, mais pas de connaître l’occurrence de chaque problème pour une population réelle. Concrètement, rien ne dit qu’un problème révélé lors d’un test portant sur un petit panel (9 personnes par exemple) par 3 testeurs sur les 9 que vous allez convier à un test présentiel concernera réellement 1/3 de votre population réelle une fois votre site Web en ligne. Il peut aussi bien en toucher 10 % que 70 % ! Faire reposer un choix de design sur l’expérience utilisateur de 10 individus représente une forte prise de risque. Un design doit être validé de manière quantitative - au moins dans un premier temps - pour mesurer sa performance et la satisfaction d’un panel représentatif de ses utilisateurs finaux. Dans un second temps, un test utilisateur plus qualitatif sur un panel restreint peut permettre d’approfondir ces recommandations sur des points plus précis.

Il est donc impératif que les résultats du test que vous mènerez pour X personnes soient reproductibles sur une population équivalente à vos utilisateurs réels . Selon nos clients, les résultats de tests distants pour des sites grand public présentent des données utiles à partir de 30 personnes.

 

LE CONTEXTE D’USAGE

Sur quels périphériques, avec quelle connexion, quel navigateur, etc. sera consulté votre site ? Il est important de définir le contexte de navigation. La plupart des tests utilisateur sont uniquement contraints par le type de périphérique ou par le navigateur.

 

LE SCÉNARIO : Quelles sont les tâches à réaliser par les testeurs ?

Il est possible que les tâches à réaliser ou les questions posées soient différentes selon les personas. Le scénario se composera de tâches bien définies. Pour chaque profil, il faut donc identifier les tâches essentielles de votre responsive design. Certaines auront un objectif précis avec un taux de réussite mesurable, d’autres seront dites de "navigation libre".

Selon le site à tester, il n’est pas toujours possible de fixer un objectif précis. Il s’agit dans ce cas d’une tâche de navigation durant laquelle le testeur sera invité à visiter un site et s’intéresser à son contenu ou à interagir avec l’interface. Dans le cadre des tests menés par nos clients, 3 tâches sur 4 ont un objectif précis. Il est donc possible de leur associer un taux de réussite et donc de mesurer précisément la performance du site pour ces tâches.

Le taux de réussite n’est pour autant pas le seul critère de performance. En effet, si 95 % de vos internautes réussissent une tâche mais que la navigation est laborieuse, inefficace, ou qu’elle ne les satisfait pas, alors l’UX n’est pas bonne. Il faut donc également mesurer l’efficience du site ainsi que le niveau de satisfaction. Cette dernière se mesure au travers de sondages ou questionnaires posés après l’exécution des tâches.

Exemple : Pour le site corporate d’un éditeur de logiciels d’entreprise, l’une des tâches essentielles sera de demander un contact commercial ou, plus généralement, de générer un lead. Pour un site d’e-commerce, il s’agira de trouver un produit donné et de l’ajouter au panier. Ces tâches doivent donc avoir un objectif bien précis : réserver 2 places pour le concert de Céline Dion, trouver l’article qui traite de la Coupe du Monde 2018…

Les tâches peuvent être aussi de type « navigation libre » : naviguer sur le site et consulter les contenus, avec à l’issue du test un questionnaire auquel il faudra répondre.

 

LES QUESTIONNAIRES (satisfaction et retours d’expérience)

Le sondage à chaud après une tâche est primordial pour capter le retour d’expérience des utilisateurs. Même si l’outil de test distant utilisé permet de mesurer les interactions de l'utilisateur et de rejouer sa session, l’étude des retours d’expériences est tout de même particulièrement efficace. Les champs ouverts permettent de capter ce retour d’expérience.

Le piège du déclaratif lors des tests responsive design

Il est toujours prudent de nuancer le déclaratif et de tenir compte du contexte lors de tests. Néanmoins, terminer chaque tâche en demandant aux testeurs s’ils pensent avoir réussi permet de comparer la réussite réelle à la réussite déclarée, ce qui peut être très instructif en phase d’analyse. Sur l’ensemble des tests réalisés par nos clients, près d’un utilisateur sur 5 déclarant, en toute bonne foi, avoir réussi une tâche a en fait échoué. Autrement dit, les interfaces web testées laissent penser à 20 % de leurs utilisateurs qu’ils réussissent alors que c’est faux. Il n’est ainsi pas rare d’observer des taux d’échecs énormes de l’ordre de 90 % sur certains sites populaires alors que les utilisateurs pensent avoir réussi.

L’expérience peut être satisfaisante sur le moment pour l’entreprise ayant réalisé le test, mais les conséquences peuvent être désastreuses par la suite pour l’image du site web. Moins fréquemment, certains testeurs abandonnent alors qu’ils ont réussi la tâche.

Exemple : Avec la tâche « Trouvez les conditions d’annulation de vol » : les testeurs passent sur la page, trop chargée, détaillant ces conditions sans les voir et abandonnent après une navigation infructueuse. Les faux abandons sont souvent révélateurs de tunnels trop courts ou de contenus peu clairs.


Le SUS (System Usability Scale) permet de mesurer et d’évaluer la satisfaction selon la norme de conception centrée utilisateur (ISO 9241-210). Grâce à ses mesures, la satisfaction n’est plus une donnée floue et mouvante mais une donnée mesurable et fiable.


 

 

Pourquoi ne pas systématiquement tester ses versions de design ?

 


Quelques chiffres

Les tests distants et quantitatifs révèlent que :

  • 30 % des problèmes révélés par le Test d’un Responsive Design sont des bugs de l’interface.
  • 70 % des malfaçons dans le design

 

Beaucoup préfèrent, pour des raisons subjectives, mettre en production un design que l’on sait d’avance défectueux. Timing, manque de budget ou de savoir-faire sont les raisons les plus couramment évoquées. Comme nous l’avons vu, un test quantitatif ne demande pourtant que quelques heures pour être exploité. Il mobilise un budget très raisonnable et ne nécessite pas de compétences particulières si l’on dispose des bons outils.