Extia - D'abord qui, ensuite quoi !

Le blog
Approfondir la datavisualisation

Partager
actuality.blog.title

​Jeudi 10 décembre, la communauté UX/UI proposait un événement autour de la datavisualisation (ou dataviz).Cette soirée avait pour objectif d'approfondir les notions présentées lors des précédents événements, au travers desquels, Victurnien, Lead de la Comet’, avait expliqué l’importance de bien s’organiser dès le début pour obtenir un Dashboard ou une interface web optimale.

Dans un premier temps, Victurnien a complété ses propos sur l’organisation de l’espace. Il a notamment expliqué qu’il est important de bien réfléchir à l’organisation de l’espace en établissant des colonnes (allant de 4 à 16) pour bien gérer l’espace. Les vues doivent être alignées aux colonnes et toujours occuper des pixels pleins (sinon il y a un effet de flou très désagréable à l’œil).

L’organisation que vous voudrez dépendra aussi du pattern que vous allez choisir : F ou Z. 

Dans tous les cas, les informations les plus importantes doivent être en haut à gauche, lieu où notre attention est maximale. Il faut absolument éviter les patterns en O, qui empêchent l’œil de savoir où commencer et sont en général obtenus en mettant trop d’éléments importants dans le dashboard.

L’organisation doit aussi dépendre de votre but dans le dashboard : stratégique, analytique et opérationnelle.

Une fois les vues mises en place, il est important de bien doubler les marges afin d’aérer au mieux votre produit final. En effet, l’outil doit être compris en 3 secondes lorsqu’on regarde une page.

Dans un second temps, Victurnien a abordé le sujet des problèmes rencontrés par les clients. 

- Les anticipez-vous ? À l’image des sites e-commerces qui vous renvoient là où il y a une info manquante.

- Aidez-vous à les diagnostiquer une fois que le problème est là ? Comme Google Chrome vous informant de votre non-connexion et de ce que vous devez faire pour la récupérer. 

Les temps de chargement doivent eux aussi être pris en compte. Si un temps n’est pas évitable alors mettez une barre de progression. Un moulinet est à privilégier pour un chargement de moins de 3 secondes, au-delà, il est conseillé de mettre une barre classique.

Enfin, la dernière partie était sur l’aspect cognitif qui est très important dans l’UX. En effet, les formes renvoient à une image particulière pour l’esprit humain :

- le rond est plus féminin, vu comme doux, et apaisant (Exemple : Coca Light.),

- le carré est plus masculin, vu comme plus agressif et strict (Exemple : Coca Zéro.).

 Le cerveau retient mieux la première information et la dernière information, mais il retient également mieux ce qui ressort du lot. Ces deux éléments sont très importants à prendre en compte si vous souhaitez orienter le regard de l’utilisateur et son taux de rétention.

Pour améliorer la rétention, il est également nécessaire de « cacher » la complexité. Il faut d’abord montrer une petite partie pour aider à faire un choix, puis révéler petit à petit le reste des choix à faire. Le cas contraire expose l’utilisateur à trop de choix et donc à trop de complexité d’un coup et en général, il ne tardera pas à fuir.

Voici deux exemples sur lesquels les participants ont pu échanger et débattre.

Exemple 1 : Ici,  les 4 premiers dashboards sont de mauvais exemples : les vues ne sont pas alignées et ne sont pas sur un pixel plein. Il y a trop de couleurs qui attirent l’œil, des vues inutiles et très voyantes en plein milieu. Il ne respecte aucun des principes vus auparavant.

Exemple 2 : Ce deuxième exemple est ce qu’il faut suivre : le pixel est plein, les vues sont  alignées, pertinentes et claires, les marges sont doublées, les couleurs sont bien utilisées. De plus, le pattern utilisé ici, est un pattern en F : le plus important, montrer l’état de New York, est bien mis en haut. Le  bonus, “faire un don”, est mis en bas à droite.

Rendez-vous en 2021 pour nos prochains Meetup® Event online. Et d’ici là, n’hésitez pas à nous suivre sur notre page Twitter @CometByExtia et à consulter notre site internet dédié aux Meetup® Event.

WANTED !
1000 2021 Nos offres d'emploi Candidature spontanée Serez-vous le prochain ? Extia recrute talents en