Article original : What I learned from a data-driven design approach
Par Michael Loscalzo
Que se passe-t-il lorsque les notions préconçues laissent place aux leçons tirées des métriques ?
Commençons par la fin...
? Mes métriques de blog indiquent que 60 % des lecteurs ne lisent pas l'article complet. Alors, jetons un coup d'œil extrêmement rapide à ce que j'ai appris d'une refonte de site web basée sur les données !
LEÇON #1
Si présenté correctement, un visiteur passera plus de temps à consulter moins de contenu. Malgré une diminution du nombre de pages et une réduction du nombre de mots par page, j'ai observé une augmentation de la durée moyenne des sessions.
Les changements :
- Les longs blocs de texte ont été réévalués et tronqués en des descriptions plus concises.
- La structure consolidée du site a permis aux visiteurs de trouver rapidement le contenu pertinent.
LEÇON #2
Les modèles de conception fonctionnent ! Il peut être tentant de briser toutes les règles, mais la vérité est que les modèles de conception sont familiers aux visiteurs et utilisent une composition qui tire parti du mouvement naturel des yeux d'un spectateur.
Les changements :
- La page d'accueil révisée présente un modèle en forme de Z (desktop) et priorise le contenu le plus fréquemment consulté. Sur les pages avec de grands blocs de texte, un modèle en forme de F (desktop) a été utilisé.
- La navigation principale a été révisée pour être plus intuitive et adaptée aux mobiles.
LEÇON #3
Supprimez les étapes du parcours utilisateur pour améliorer le taux de conversion. La suppression d'une seule étape dans le parcours utilisateur a entraîné une forte augmentation des conversions.
Les conversions ont été mesurées par le pourcentage de visiteurs ayant soumis un formulaire de questionnaire.
Les changements :
- Moins d'étapes pour qu'un visiteur atteigne le formulaire de questionnaire avec des informations adéquates sur les offres.
- Augmentation de la visibilité du formulaire.
- Au lieu d'un long formulaire (15 questions), le formulaire a été divisé en trois petites parties (5 questions par partie).
Merci d'avoir lu jusqu'ici !
Ci-dessous, j'ai fourni un examen beaucoup plus granulaire des raisons pour lesquelles certains changements ont été apportés et des améliorations résultantes observées dans les indicateurs clés de performance (KPI).
Le client
En 1980, Carol Yilmaz et neuf autres parents ont cherché une éducation appropriée pour leurs enfants surdoués. Ensemble, ils ont fondé la Long Island School for the Gifted (LISG), une école privée mixte de jour.
La déclaration de mission de la LISG :
Fournir une éducation appropriée aux enfants surdoués de la maternelle à la neuvième année, dans un environnement bienveillant où ils seront à la fois intellectuellement stimulés et socialement à l'aise, offrant ainsi à ces enfants l'opportunité de grandir et de se développer à leur potentiel.
Le site web de la LISG cherche à fournir aux étudiants potentiels et à leurs parents des détails sur les offres uniques disponibles à l'école. Une étape préliminaire dans le processus de candidature est le formulaire "Questionnaire d'introduction", qui peut être complété sur le site web. De plus, le site web fournirait des informations précieuses aux étudiants inscrits et à leurs parents.
Site web de la LISG : 2014-2017
Avant 2014, le site web de la LISG était largement statique. Le site web de 2014-2017 présentait un carrousel de photos, un calendrier numérique des événements étudiants et un formulaire de questionnaire d'introduction, qui aiderait les parents potentiels à démarrer le processus de candidature.
Bien que la refonte de 2014-2017 du site web de la LISG ait été une amélioration par rapport à la conception précédente, les métriques collectées indiquaient que des améliorations supplémentaires pouvaient être apportées.
LES OUTILS D'ANALYTIQUE
- Google Analytics : Mesure les données du site web, de l'application, du numérique et hors ligne pour obtenir des informations sur les clients.
- JotForm : est une application en ligne qui permet aux administrateurs de sites web de créer rapidement des formulaires en ligne personnalisés. JotForm offre un outil d'analytique.
LES PRINCIPALES DÉCOUVERTES
- Types d'utilisateurs distincts : Sur la base du trafic du site web et du flux de comportement, il semble y avoir deux types d'utilisateurs distincts avec deux besoins de contenu distincts. Les deux types d'utilisateurs sont les parents/étudiants potentiels et les parents/étudiants inscrits.
- Durée moyenne des sessions : Le visiteur typique ne passe qu'un court moment sur chaque page, ce qui indique que les longs blocs de texte ne sont pas lus.
- Conversion : Environ 0,69 % des visiteurs remplissent le questionnaire d'introduction.
- Augmentation du trafic mobile : Le trafic mobile vers le site web a augmenté de près de 50 % sur une période de trois ans.
Site web de la LISG : refonte de 2017
Après avoir examiné les données de 2014-2017, nous avons commencé le processus de refonte avec des objectifs clairs en tête.
LES OBJECTIFS DE LA REFONTE
- Affiner la structure du site : Consolider le contenu du site et réduire le texte.
- Améliorer l'interface mobile : L'augmentation du trafic mobile a mis en évidence le besoin d'améliorations pour la navigation mobile.
- Utiliser des modèles de conception établis : Les modèles de conception établis sont familiers aux visiteurs et utilisent une composition qui tire parti du mouvement naturel des yeux d'un spectateur.
- Améliorer le parcours utilisateur : Supprimer les obstacles inutiles et permettre aux visiteurs de trouver rapidement et facilement ce qu'ils recherchent.
- Augmenter les conversions : Améliorer la visibilité du formulaire de questionnaire d'introduction et le rendre moins intimidant à remplir.
OBJECTIF #1 : AFFINER LA STRUCTURE DU SITE
Bien que beaucoup du contenu du site web puisse être pertinent pour les étudiants/parents potentiels et inscrits, un effort a été fait pour déterminer quel type d'utilisateur serait principalement intéressé par chaque page. De plus, le contenu a été consolidé ou éliminé lorsque cela était approprié.
Cette approche nous a permis de réduire la taille du site web de quatre pages dans le but de créer une structure de site plus intuitive.
Lorsque nous avons développé la première refonte en 2014, il y avait un désir de partager beaucoup d'informations et de faire paraître le site web robuste. Les longs blocs de texte ont peut-être été décourageants pour les visiteurs qui recherchent et évaluent probablement plusieurs écoles en une seule fois.
OBJECTIF #2 : AMÉLIORER L'INTERFACE MOBILE
La navigation qui apparaissait sur le site web de 2014-2017 est devenue comprimée sur le côté gauche de la fenêtre d'affichage sur mobile. Pire encore, sur plusieurs appareils, certains des boutons ont disparu sous la ligne de flottaison. Ces problèmes ont probablement contribué à une augmentation du taux de rebond sur les smartphones.
OBJECTIF #3 : UTILISER DES MODÈLES DE CONCEPTION ÉTABLIS
L'utilisation des modèles en F et en Z peut aider à créer une hiérarchie visuelle dans la conception web.
"Ce modèle [en forme de Z] fonctionne parce que la plupart des lecteurs occidentaux scanneront votre page de la même manière qu'ils scanneraient un livre — de haut en bas, de gauche à droite."
— Nick Babich, UX Planet
OBJECTIF #4 : AMÉLIORER LE PARCOURS UTILISATEUR
Sur la base des données démographiques et du trafic des pages, nous avons pu conclure que la majorité des visiteurs du site web étaient des étudiants/parents potentiels. Idéalement, un parent potentiel utilise le site web pour en savoir plus sur l'école, déterminer si son enfant est éligible à l'admission, et il peut même commencer le processus de candidature en remplissant le questionnaire d'introduction.
"Les parcours utilisateurs sont le parcours étape par étape qu'un utilisateur suit pour atteindre son objectif. Ce parcours consistera souvent en un certain nombre de pages web et de points de décision qui transportent l'utilisateur d'une étape à une autre... Ce parcours est ensuite redessiné pour former un parcours utilisateur 'idéal' sans frustration."
En utilisant les métriques de flux de comportement, nous avons pu voir qu'il fallait trois interactions avant qu'ils ne remplissent le questionnaire d'introduction. À chaque interaction, il y a une perte de visiteurs.
Dans la version 2014-2017 du site web, les métriques indiquent que seulement environ 5 % des visiteurs atteignent la page des admissions avec suffisamment d'informations sur l'école pour déterminer en toute confiance s'ils voulaient remplir le formulaire de questionnaire d'introduction ou non.
Dans la refonte de 2017, près de 15 % des visiteurs atteignent la page des admissions avec des informations adéquates sur l'école.
OBJECTIF #5 : AUGMENTER LES CONVERSIONS
Sur la base des données de 2014-2017, nous avons émis l'hypothèse que les utilisateurs pouvaient avoir des difficultés à trouver le formulaire de questionnaire d'introduction (il était logé dans un menu accordéon). De plus, le formulaire pouvait sembler intimidant car il était verticalement long.
Un formulaire d'une page avec 15 questions est moins susceptible d'être complété qu'un formulaire de 3 pages avec 5 questions par page.
Le nombre de soumissions de formulaires a augmenté de 129 %. Le taux de conversion est passé de 0,69 % à près de 1,6 %.
Et c'est ainsi que nous avons complété une refonte réussie. Merci d'avoir lu ! Si vous avez aimé cette histoire, vous pouvez Lire plus ou Me suivre sur Twitter.