Archives des design, design web - Page 5 sur 5

5 janvier 201219 février 2018

Design : une illustration peut-être, une infographie sûrement pas !

D’après la définition de Wikipedia (la définition du Larousse ne s’applique pas), l’infographie de presse « désigne des graphes destinés à mettre en image des informations généralement statistiques au moyen de diagrammes. »

Il s’agit d’un moyen très en vogue sur internet (autant dire que ce n’est pas récent) pour illustrer des informations de toutes sortes : l’usage des téléphones mobiles, les revenus des artistes… voire l’utilisation des infographies elles-mêmes. Je me suis moi-même amusé à retravailler mon CV sous cette forme il y a quelques années.

Lorsqu’elles sont bien conçues, ces infographies permettent de mieux comprendre les données qu’elles mettent en scène. Voici un exemple très simple tiré de la première page du site de Dave Mc Candless, Information is beautiful, dont je parlais dans une note précédente :

Chaque carré est composé d’une couleur (le type de catastrophe, avec un repère en prime) et d’une surface (l’étendue de la catastrophe). L’ensemble est parfaitement compréhensible et permet de comparer les données entre elles. J’ajoute que l’auteur explique sa façon de procéder dans l’article associé et qu’il fournit un lien permettant de consulter les données utilisées.

Ça, c’est une infographie de qualité : facile à appréhender, utile et claire.

Il y a deux jours, je suis tombé sur un article intitulé « 2011 en réseaux », publié sur le site d’ecrans.fr et relayé ici ou là. Je cite la première phrase : « Libération a publié le 30 décembre cette infographie bilan de 2011 sur les réseaux sociaux ». Voici l’infographie en question :

Cette image met en avant un grand nombre de données. Ces données sont présentées de façon presque totalement anarchique : par nombre d’utilisateurs ? Linkedin devrait se trouver entre Twitter et Google+, pas en bas de page. Par genre ? Google+ et Tumblr, qui n’ont rien à voir, sont côte à côte. Quant aux autres chiffres, ils ne sont pas comparables entre eux : 870 millions d’utilisateurs de Facebook (à mon avis il s’agit plutôt du nombre de comptes existants, ce qui n’est pas du tout la même chose lorsque l’on parle de près d’un milliard de profils), 15 millions de titres disponibles sur Spotify, 500% de tweets postés depuis le Japon dans l’heure qui a suivi le séisme…
(Note : je pourrais continuer très longtemps sur ce sujet, mais je préfère raccourcir.)

Pire : l’illustrateur a ajouté un tas d’éléments visuels qui viennent perturber encore plus la lecture. Que font tous ces oiseaux-logos-de-Twitter partout ? Que font tous ces pictos en plein milieu de l’image ? Et pourquoi mettre un # devant « amywhinehouse », alors que le texte associé ne fait pas référence à Twitter mais à Facebook ?

Quant aux sources, une phrase absolument illisible indique… qu’il faudra se débrouiller pour aller les chercher. L’image était destinée à l’édition papier du journal : peut-être que des liens étaient fournis à côté ?

Alors : une infographie, vraiment ? Si je reprends la définition de Wikipedia, ça ne colle pas : il n’y a pas de diagramme sur cette image. Mais au delà de cette définition, le plus gros problème de cette image, c’est qu’elle informe (vraiment) moins bien qu’une simple liste à puces. En d’autres termes, elle n’est pas seulement illisible, elle est aussi superflue !

Je suis très ennuyé de parler de cette manière d’un travail qui a dû demander beaucoup de temps, mais je n’arrive pas à comprendre comment on peut produire une image de ce type. Cela dit je me trompe peut-être : si la demande initiale était « flanquez-moi toute une série de chiffres relatifs aux réseaux sociaux sur une illustration », ça colle. En revanche, si la demande ressemblait à « aidez les lecteurs à mieux cerner la diversité et l’utilisation des réseaux sociaux », il y avait sans doute beaucoup mieux à faire.

Bonus

En retournant sur le site d’ecrans.fr à l’instant, je tombe sur cet article (en page d’accueil) : « le journalisme les doigts dans les données ». On y lit des choses très intéressantes, comme cette phrase : « Pour le moment, faute de moyens et de réelle volonté, ces travaux qui se revendiquent du journalisme de données restent souvent coincés quelque part entre l’infographie et l’animation de chiffres, n’atteignant que rarement le travail de fond désormais courant dans la presse anglo-saxonne. »

Publier cette phrase quatre jours après avoir publié (relayé) l’infographie ci-dessus ? C’est un choix intéressant.

16 novembre 201119 février 2018

Baromètre Inria : charte graphique, mise en page et résultats (2/2)

Suite et fin de mon exploration du baromètre Inria « Les français et le nouveau monde numérique ».

Première remarque, le site a été modifié depuis ma dernière visite. Le changement le plus visible est l’ajout d’un footer de grande taille commun à toutes les pages du site. Ce nouvel encart reprend le look du footer du site inria.fr.

Je note également qu’un picto a remplacé le texte « <Embed> » (juste au dessus du footer, à côté du texte « Et vos amis ? »). Pas sûr que cela rende ce lien plus explicite.

Plus étrange, le test a lui aussi été revu :
• l’ordre des questions a été modifié ;
• certaines d’entre elles ont été regroupées ;
• conséquence du point précédent, le nombre de questions a été divisé par deux.

Les résultats du test n’étant pas (à ma connaissance) utilisés à des fins statistiques, ces changements n’ont pas grande importance. J’en profite pour signaler un point que j’avais oublié dans la note précédente : il n’est pas possible lors du test de revenir à la question précédente.

Après avoir abordé le test dans la note précédente, je m’intéresse cette fois à la partie « résultats » du site. Je clique donc sur le bouton « les résultats de l’enquête ».

Cette page me permet d’évoquer un point très important dans la création d’un site internet : la création d’une charte graphique.

Une charte graphique (dans ce contexte), c’est un document dans lequel tous les éléments nécessaires à la création et à la mise à jour d’un site sont répertoriés : les polices à utiliser, les couleurs recommandées, les boutons à insérer, etc. On y trouve également – et c’est ce qui m’intéresse ici – leurs usages exclusifs : quand doit-on utiliser telle couleur, à quel moment utiliser la police XYZ, etc.

Sur le site du baromètre, le code graphique « cartouche à coins arrondis » est omniprésent (j’ai compté une vingtaine de cartouches sur la copie d’écran ci-dessus). Le problème, c’est que ce look n’est pas associé à un comportement : parfois il est cliquable, parfois il ne l’est pas. Exemple : le cartouche « Perception » est cliquable, le texte « Changer de thématique » ne l’est pas.

Ce ne serait pas un problème si les codes couleurs utilisés permettaient de s’y retrouver, mais ce n’est pas le cas non plus. Exemples : sur les pages précédentes les boutons de navigation principaux sont gris, ici ils sont rouges (ce qui s’explique, d’ailleurs). Sur les pages précédentes les blocs de texte bleu pétrole n’étaient pas cliquables, ici le cartouche « Perspectives » bleu pétrole l’est. (Le bouton « Les résultats de l’enquête » aussi, sans que l’on sache vraiment pourquoi.)

Il s’agirait d’un souci moindre si les éléments de même type respectaient les mêmes codes… mais là encore, ce n’est pas le cas. Exemple : les menus « Changer de thématique » (au look totalement éloigné de celui d’un menu) et « Affinez les résultats » n’ont pas grand chose en commun.

Ce manque de rigueur dans la présentation générale du site peut perturber l’expérience utilisateur.

Autre remarque, au sujet de la présentation des résultats. Chaque thématique donne accès à de nombreuses données. Plus ce nombre augmente, plus la consultation sera longue : il convient donc d’adapter la mise en page pour faciliter la lecture des données présentées.

Sur la page ci-dessus, la lecture du graphique « en barre » est aisée. J’ajoute qu’en plus d’être (partiellement) visible en rollover, la légende est ici affichée immédiatement.

Sur la page ci-dessus, la consultation des graphiques va prendre beaucoup plus de temps. Comme l’indique la taille de la barre de défilement, la page contient énormément d’informations : 27 ou 28 réponses (je n’ai pas réussi à les compter précisément, c’est révélateur) sont affichées ici. La taille réduite de la fenêtre de lecture n’est pas adaptée à un si grand nombre de données.

La présentation de ces résultats n’est pas mauvaise, mais elle aurait pu être bien meilleure : plus ludique, plus interactive, plus lisible… En tant qu’amateur de visualisation de données, cette mise en page me déçoit. J’invite les gens intéressés par le sujet à jeter un œil aux travaux de Dave Mc Candless (ses livres sont disponibles sur Amazon). Dans un domaine plus proche du baromètre Inria, l’enquête Sexperience 1000 (SFW) propose une expérience bien plus amusante.

Pour finir, j’avoue qu’une chose m’a particulièrement ennuyé. Sur le site du baromètre, il est possible de « faire le test » et de « découvrir les résultats de l’enquête ». Or les résultats ne correspondent pas exactement aux questions du test ! Si je prends la première page des résultats par exemple, il est question de TNT, de robots domestiques, de cinéma en 3D… Autant de points qui ne sont pas abordés dans le test.

Quel est donc l’intérêt de faire un test et de découvrir les résultats des autres utilisateurs… à des questions différentes ?

9 septembre 201119 février 2018

Un peu de design web : l’art de mettre en valeur son produit

J’ai lu avec intérêt l’interview publiée sur capitaine-commerce (décidément) des créateurs de madein33.com, ainsi que la première note qui avait été consacrée à ce site.

Madein33.com propose aux particuliers et aux professionnels des coffrets cadeaux dont les produits sont issus du terroir girondin. Cette spécificité géographique distingue le site des leaders du marché que sont smartbox et wonderbox par exemple.

On retrouve cette volonté d’exclusivité dans le design du site, visuellement très éloigné des concurrents précédemment cités.

En terme d’expérience utilisateur, de nombreux points me semblent à revoir. En vrac : l’excès de contenu, le manque d’organisation des messages, les encarts sociaux un peu partout, le panier peu visible, les champs texte en jaune sur fond jaune, le bouton « power » pour créer un compte (?)… Je pense que plusieurs choses pourraient être améliorées, mais ce n’est pas cet aspect qui a motivé ce billet.

Les commentaires de l’article montrent que le look du site a plu aux lecteurs, c’est un point très important. Personnellement, je suis assez réservé.

Le site déborde de codes graphiques. Quelques illustrations (des ballons, des rubans utilisés pour un peu n’importe quoi, des nœuds, un coffret, des cadeaux), plusieurs éléments d’interface (le fond matière, les pictos du panier, du compte client et des réseaux sociaux – 4 pour Facebook !), une police non-système très grasse… On dirait un exercice de Photoshop pour webdesigner ! Pris indépendamment ces éléments ne posent pas de problème, mais mis tous ensemble ils dégradent la lisibilité du site.

Ce manque de lisibilité nuit énormément à la visibilité du produit. Le petit carrousel, au centre de la page, semble perdu au milieu d’une masse jaune/verte. Les visuels affichés étant relativement chargés (difficile de faire rentrer plusieurs produits sur une seule photo), ils ne ressortent plus du tout. L’interface du site devrait mettre en valeur le produit, pas l’écraser !

Démonstration :

Bien sûr les sites n’ont rien à voir, bien sûr le site de Steinway n’est pas exempt de défauts, mais une fois encore ce n’est pas ce qui m’intéresse. Ce qui m’intéresse, c’est la mise en valeur du produit.

Sur le site de Steinway, le carrousel en met plein la vue. De nombreuses astuces permettent aux pianos de « jaillir » de l’écran : la taille de l’image bien sûr, mais aussi le bandeau d’arrière-plan galbé, le motif et la luminosité dudit bandeau, le contraste entre les couleurs du piano et celles du site, les extrémités supérieures et inférieures de l’instrument qui empiètent légèrement sur le header et le menu du dessous… Tous ces trucs de designer mettent le produit en avant.

Autre exemple :

Bien sûr les sites n’ont rien à voir, bien sûr le site de Früute n’est pas exempt de défauts… Je me répète. Ici aussi, le carrousel en met plein la vue. La recette est en partie la même : visuels produits de grande taille et de bonne qualité + interface légère et franchement en retrait.

J’aurais aimé trouver ce genre de mise en valeur sur madein33.com, plutôt qu’une interface chargée et des produits peu visibles.