![\"davidcouv](\"https:\/\/cinnk.com\/wp-content\/uploads\/2020\/10\/davidcouv_1.jpg\")
<\/p>\nComment faire \u00e9voluer l\u2019exp\u00e9rience utilisateur d\u2019une application web tout en gardant son attractivit\u00e9 ? Je vous propose d\u2019y r\u00e9pondre au travers de l\u2019analyse du projet que nous avons effectu\u00e9 en 2016 sur le service de monitoring Watchful.li.<\/p>\n
<\/p>\n
\nComment faire \u00e9voluer l\u2019exp\u00e9rience utilisateur d\u2019une application web tout en gardant son attractivit\u00e9 ? Je vous propose d\u2019y r\u00e9pondre au travers de l\u2019analyse du projet que nous avons effectu\u00e9 en 2016 sur le service de monitoring Watchful.li.<\/p>\n
En 2012, nous avons lanc\u00e9 un service de monitoring de sites Joomla! et, depuis 2016, pour WordPress.Cette plateforme a comme objectif d\u2019aider les agences web dans le suivi et la maintenance de leurs sites web. Il permet de v\u00e9rifier l\u2019\u00e9tat de sant\u00e9 des sites, de faire des mises \u00e0 jour et d\u2019\u00eatre alert\u00e9 en cas de probl\u00e8mes. A l\u2019origine, une interface basique a \u00e9t\u00e9 rapidement mise en place afin de pouvoir valider le concept.
\nAu fil du temps, nous avons effectu\u00e9 une mise \u00e0 jour annuelle de l\u2019application, pour r\u00e9pondre \u00e0 son \u00e9volution et aux besoins des utilisateurs.
\nAudit externe
\nEn 2016, nous avons eu la possibilit\u00e9 de r\u00e9aliser un audit et des tests utilisateurs de notre plateforme par Yves Koekkoek, sp\u00e9cialiste UX.De ce rapport, il est ressorti que l\u2019application actuelle donnait une bonne impression, tr\u00e8s professionnelle, mais que l\u2019ajout au fil du temps de fonctionnalit\u00e9s rendait complexe sa gestion et qu\u2019il serait int\u00e9ressant de travailler sur :<\/p>\n
Un rassemblement et une meilleure int\u00e9gration des fonctionnalit\u00e9s ;
\nUne meilleure efficacit\u00e9 des t\u00e2ches effectu\u00e9es par les utilisateurs ;
\nOffrir \u00e0 nos utilisateurs la possibilit\u00e9 de personnaliser leur tableau de bord en fonction de leurs besoins.<\/p>\n
Maquettes fonctionnelles
\nSur cette base, nous avons commenc\u00e9 la r\u00e9flexion avec des maquettes fonctionnelles ou wireframes pour d\u00e9finir les zones sur lesquelles nous allions ensuite travailler visuellement.
\nAvant<\/p>\n
Apr\u00e8s<\/p>\n
Recherches et web design
\nNous avons impl\u00e9ment\u00e9, entre autres, les 8 points suivants :<\/p>\n
R\u00e9duire les zones mortes du haut de l\u2019\u00e9cran pour maximiser l\u2019espace et augmenter l\u2019affichage d\u2019informations sur un premier \u00e9cran ;
\nRemonter les boutons d\u2019action et permettre leur personnalisation simplement et rapidement ;
\nAjouter la possibilit\u00e9 d\u2019effectuer des actions similaires sur plusieurs sites en m\u00eame temps ;
\nPermettre la personnalisation, la r\u00e9organisation et le renommage des colonnes (picto roue et sa lightbox) ;
\nSortir les filtres du haut de l\u2019\u00e9cran et les glisser dans les colonnes et les rendre activables \u00e0 tout moment (picto filtre) ;
\nAffiner l\u2019iconographie en p\u00e9riph\u00e9rie du tableau pour all\u00e9ger l\u2019impression g\u00e9n\u00e9rale (droite + haut) ;
\nNe pas imposer des outils par d\u00e9faut, mais les ranger au bon endroit pour \u00eatre accessible \u00e0 tout moment (filtres, recherche, param\u00e9trages des colonnes, etc.) ;
\nRevoir les couleurs entourant le tableau de bord pour que le regard se focalise mieux sur les informations du tableau.<\/p>\n
Impl\u00e9mentation et retours
\nLes changements techniques ont \u00e9t\u00e9 impl\u00e9ment\u00e9s par \u00e9tapes, tout en se basant sur lesrecommandations visuelles. Ce que nous retenons de ce processus est le fait que les utilisateurs ont sans cesse de nouvelles exigences en mati\u00e8re de rapidit\u00e9, de design et d\u2019ergonomie pour les applications web.
\nLes internautes d\u00e9sirent des exp\u00e9riences d\u2019utilisation toujours plus intuitives et agr\u00e9ables. Le design doit \u00eatre aussi perfectionn\u00e9 que les fonctionnalit\u00e9s, mais le vrai moteur de tout cela c’est notre recherche continuelle de la perfection.
\nEn ce qui concerne l\u2019application Watchful, nous avons donc simplifi\u00e9 la vie de nos utilisateurs, rendu les diff\u00e9rentes op\u00e9rations plus efficaces et permis une recherche plus spontan\u00e9e des informations. L\u2019application \u00e9tant fonctionnelle et utilis\u00e9e par de nombreux utilisateurs avec des habitudes bien ancr\u00e9es, nous avons opt\u00e9 pour une \u00e9volution et non une r\u00e9volution.
\n Pari r\u00e9ussi si on s\u2019en tient aux diff\u00e9rents retours.
\n\u00c0 propos de l’auteur
\nDavid Pizzotti
\nCo-fondateur d\u2019Inetis, un atelier web, et du service de monitoring Watchful.liSes passions sont l\u2019art et le design sous toutes ses formes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Comment faire \u00e9voluer l\u2019exp\u00e9rience utilisateur d\u2019une application web tout en gardant son attractivit\u00e9 ? Je vous propose d\u2019y r\u00e9pondre au travers de l\u2019analyse du projet que nous avons effectu\u00e9 en 2016 sur le service de monitoring Watchful.li.<\/p>\n","protected":false},"author":1,"featured_media":500,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archives"],"yoast_head":"\n