Comment faire évoluer l’expérience utilisateur d’une application web tout en gardant son attractivité ? Je vous propose d’y répondre au travers de l’analyse du projet que nous avons effectué en 2016 sur le service de monitoring Watchful.li.

En 2012, nous avons lancé un service de monitoring de sites Joomla! et, depuis 2016, pour WordPress.
Cette plateforme a comme objectif d’aider les agences web dans le suivi et la maintenance de leurs sites web. Il permet de vérifier l’état de santé des sites, de faire des mises à jour et d’être alerté en cas de problèmes. A l’origine, une interface basique a été rapidement mise en place afin de pouvoir valider le concept.

Au fil du temps, nous avons effectué une mise à jour annuelle de l’application, pour répondre à son évolution et aux besoins des utilisateurs.

Audit externe

En 2016, nous avons eu la possibilité de réaliser un audit et des tests utilisateurs de notre plateforme par Yves Koekkoek, spécialiste UX.
De ce rapport, il est ressorti que l’application actuelle donnait une bonne impression, très professionnelle, mais que l’ajout au fil du temps de fonctionnalités rendait complexe sa gestion et qu’il serait intéressant de travailler sur :

• Un rassemblement et une meilleure intégration des fonctionnalités ;
• Une meilleure efficacité des tâches effectuées par les utilisateurs ;
• Offrir à nos utilisateurs la possibilité de personnaliser leur tableau de bord en fonction de leurs besoins.

Maquettes fonctionnelles

Sur cette base, nous avons commencé la réflexion avec des maquettes fonctionnelles ou wireframes pour définir les zones sur lesquelles nous allions ensuite travailler visuellement.

Avant

Après

Recherches et web design

Nous avons implémenté, entre autres, les 8 points suivants :

1. Réduire les zones mortes du haut de l’écran pour maximiser l’espace et augmenter l’affichage d’informations sur un premier écran ;
2. Remonter les boutons d’action et permettre leur personnalisation simplement et rapidement ;
3. Ajouter la possibilité d’effectuer des actions similaires sur plusieurs sites en même temps ;
4. Permettre la personnalisation, la réorganisation et le renommage des colonnes (picto roue et sa lightbox) ;
5. Sortir les filtres du haut de l’écran et les glisser dans les colonnes et les rendre activables à tout moment (picto filtre) ;
6. Affiner l’iconographie en périphérie du tableau pour alléger l’impression générale (droite + haut) ;
7. Ne pas imposer des outils par défaut, mais les ranger au bon endroit pour être accessible à tout moment (filtres, recherche, paramétrages des colonnes, etc.) ;
8. Revoir les couleurs entourant le tableau de bord pour que le regard se focalise mieux sur les informations du tableau.

Implémentation et retours

Les changements techniques ont été implémentés par étapes, tout en se basant sur les
recommandations visuelles. Ce que nous retenons de ce processus est le fait que les utilisateurs ont sans cesse de nouvelles exigences en matière de rapidité, de design et d’ergonomie pour les applications web.

Les internautes désirent des expériences d’utilisation toujours plus intuitives et agréables. Le design doit être aussi perfectionné que les fonctionnalités, mais le vrai moteur de tout cela c'est notre recherche continuelle de la perfection.

En ce qui concerne l’application Watchful, nous avons donc simplifié la vie de nos utilisateurs, rendu les différentes opérations plus efficaces et permis une recherche plus spontanée des informations. L’application étant fonctionnelle et utilisée par de nombreux utilisateurs avec des habitudes bien ancrées, nous avons opté pour une évolution et non une révolution.

Pari réussi si on s’en tient aux différents retours.

À propos de l'auteur

David Pizzotti

Co-fondateur d’Inetis, un atelier web, et du service de monitoring Watchful.li
Ses passions sont l’art et le design sous toutes ses formes.