Flash NPA – Les archives en ligne

Paris.fr : le site qui ose

Les dispositifs numériques sont de formidables vecteurs pour les municipalités tant pour leur communication vers des administrés toujours plus en quête d’informations et d’actualités sur leur commune que pour créer de la « préférence de marque » et renforcer l’attractivité des territoires. En proposant un nouveau site Paris.fr, enfin compatible mobile, la Ville de Paris vient conforter sa première place en termes d’efficacité digitale (Etude La Factory NPA sur les 50 plus grandes villes de France). Par-delà le développement responsive, le nouveau site de la Ville est remarquable à bien des égards.

Conception : un site « user centric »

D’après Aurélien Deffay, Responsable de la Communication Numérique de la Ville de Paris, l’équipe de Paris Numérique a été guidée par une idée simple tout au long du processus : faire « un site qui améliore la vie des Parisiens ».paris_numérique

Tour l’enjeu était alors de mieux comprendre les attentes des visiteurs vis-à-vis du site.  Pour ce faire, Paris Numérique a utilisé les retours et conversations quotidiennes de son équipe de « relation aux Parisens » (voir encadré), des analyses de trafic, un benchmark sur 27 villes dans le monde, et a surtout intégré des Parisiens à toutes les étapes du processus de refonte.

Les sites de ville et d’agglomération contiennent généralement une masse importante d’informations allant du très pratique au très « communicant ». Bien souvent les visiteurs viennent sur le site avec une question extrèmement précise et espèrent une réponse rapide. Paris.fr décide donc d’innover en mettant largement en avant un moteur de recherche sur sa homepage, s’inspirant des nouveaux standards développés par les sites à forts contenus, notamment les sites de réservations d’hôtels, à l’instar du nouveau site  accorhotels.com[1].

paris_numérique_recherche

De même, un énorme travail de simplification a été réalisé permettant de proposer une arborescence plus claire (3 niveaux vs 8) et un nombre de pages resserré (300 pages contre 4000 auparavant). Ce travail de rationalisation, notamment le recensement des pages, a été entrepris à la main « pour être sûr de ne rien oublier » d’après les équipes de Paris Numérique.

Ergonomie : guider, orienter, proposer

paris_services

Système de jauge pour visualiser l’avancement dans la lecture d’un article

Sur l’ensemble du site, on retrouve ce souhait de faciliter au maximum la navigation mais aussi de travailler les propositions et les mises en avant afin de répondre à tous les types de visiteurs (recherche de réponse ou simple navigation). L’actualité reste ainsi sur la homepage mais se retrouve releguée en-dessous de la ligne de flottaison tandis que des vignettes viennent nous suggérer des recherches dès le premier écran. Ces vignettes permettent de mettre en avant non seulement les mots les plus recherchés, mais aussi des sujets choisis par les équipes éditoriales.

A l’identique, le site est un condensé de bonnes pratiques, dont tout l’enjeu a été de les faire « fonctionner graphiquement » : module sur une grille, aide à la lecture, navigation intuitive, scroll, etc.

Design : clarté et modernité au service du fonctionnel

Du côté du design aussi, le site propose les toutes dernières tendances et innovations, notamment avec un re-styling « flat design ». Mais surtout, les designers semblent s’être attachés à servir l’objectif de clarté et de facilité d’utilisation. Cette approche est notamment remarquable dans la table des « services et infos pratiques », où le design cherche avant tout à clarifier le cheminement et faciliter les choix.

A l’identique, les différents médias, notamment la vidéo, sont intégrés de manière naturelle au site et un effort particulier sur la lisibilité a été effectué : contraste des couleurs, travail sur les transparences des fonds sur les photos.

paris_grille

La Grille « services et infos pratiques »

Réalisation : valorisation de l’écosystème d’innovation parisien

Pour réaliser le site, en plus de l’intégration des Parisiens et de rencontres avec des professionnels (blogueurs, ergonomes, designer…), la Ville de Paris s’est entourée d’entreprises innovantes de la capitale, afin que le site bénéficie non seulement du meilleur de la technologie et du design, mais soit aussi une vitrine des savoir-faire de la Ville. Ainsi, après appels d’offre, ont participé à la refonte :  Spintank (Ergonomie, Design), Etamin Studio (Front Dev), Algolia (Moteur de recherche), In Tact (Back Log), Wasabi (Analyse trafic), iProspect (Référencement), KeyMetrics (Suivi performances serveurs) et Synacktiv (Sécurité).

A noter, toujours dans l’intégration de la culture web au cœur du projet, le nouveau logo se base sur une typographie libre de droits. De plus, le développement du site se base sur deux framework open source angular JS et Node JS.

Enfin, les équipes ont aussi remis en question leurs propres méthodes de travail pour adopter des méthodologies « Agile ».

4 enseignements pour un projet de refonte de site

Intégrer l’utilisateur au cœur du projet, si possible en faisant réagir des panels d’utilisateurs à toutes les étapes du projet, et en utilisant les nombreuses données disponibles : des contacts services clients jusqu’aux données de trafic.paris_chiffres

Soigner particulièrement la phase de conception durant laquelle se joue la réussite ou non de la refonte. La conception, par son côté plus théorique, est trop souvent écourtée pour entrer en création et développement.

Mettre le design au service de l’ergonomie : un design ne pourra jamais rattraper un site mal p01ensé ou dont les objectifs ont été mal définis.

Préférer une refonte globale à des « rafraîchissements ». Les technologies et pratiques évoluent vite, il est préférable de miser sur une refonte à partir d’une « feuille blanche » que d’effectuer des mises à niveau partielles qui entraînent trop souvent un cercle vicieux d’évolutions permanentes.

 

[1] : Cf. Flash NPA 760 du 17/06/2015 : « ACCOR devient ACCOR HOTELS et accélère sa mue digitale ».