Los Angeles Times Ecrans minis, contextes d’utilisation difficile à prédire... Sur mobile, la visualisation de données n’est jamais simple. Elle est d’ailleurs souvent ratée.
Le Nieman Lab a creusé le sujet avec les équipes graphiques du Los Angeles Times, du Berliner Morgenpost, du Center for Public Integrity, du Wall Street Journal, de la NPR et de Bloomberg. A la clé, une série de mises en garde et, surtout, de très bons conseils.
Principal écueil : essayer de faire entrer au chausse-pied des projets initialement pensés pour desktops. Ça ne marche pas. Les graphiques deviennent trop chargés, les cartes impossibles à naviguer, les tableaux ratatinés, etc.
D’abord, parce que les écrans de nos mobiles sont… plus petits.
Ensuite, parce que les interactions sont différentes. Les designers s’étranglent notamment sur l’affichage d’information au survol de la souris, intéressant à exploiter sur un écran d'ordinateur, mais qui n’existe pas sur mobile !
De l’avis général, il faut donc penser les projets en mobile first, si possible en tirant parti des fonctionnalités intégrées : géolocalisation ou caméra par exemple.
L’article détaille, entre autres, un projet du Los Angeles Times sur l’état des canalisations d’eau de la ville californienne. Grâce à la géolocalisation, la carte montre d’abord à l’utilisateur les fuites près de chez lui : un plan serré plutôt qu’un plan large pour démarrer l’histoire.
Autre bon point, l’exploration se fait grâce à des filtres placés en haut de l’écran, plus ergonomiques sur mobile que les zooms et déplacements directement sur la carte.
D’une manière générale, les équipes insistent sur la nécessité de simplifier les projets.
- En découpant au maximum les informations révélées par les données (cartes et graphiques doivent être “anglés”).
- En privilégiant les visualisations les plus simples (un bon vieux diagramme fait souvent l’affaire)
- En optant pour les médias les moins gourmands en bande passante (des GIFs plutôt que des vidéos)
- En limitant les interactions fastidieuses (menus déroulants, infobulles)
- En puisant, pour les projets ambitieux, dans les librairies javascript (d3.js, chart.js) et les frameworks responsives (Bootstrap, Foundation).
Les liens :