Bonnes pratiques UI/UX

Créer des tableaux de bord avec shinydashboard

Png Kee Seng

Researcher

Quelques principes

  1. Clarifier l'objectif du tableau de bord
  2. Choisir des visualisations adaptées
  3. Utiliser les couleurs de façon efficace/intuitive
  4. Tronquer les grandes valeurs
  5. Éviter trop d'éléments interactifs
  6. Concevoir le tableau de bord en dernier
  • Ces points s'appliquent à tout tableau de bord
  • Liste non exhaustive
  • Des pistes, pas des vérités universelles
Créer des tableaux de bord avec shinydashboard

1. Clarifier l'objectif du tableau de bord

  • Pour qui est le tableau de bord ?
  • De quoi ont-ils besoin ?
  • Mieux cerner les besoins améliore l'expérience utilisateur $^1$
  • Scénario : construire un tableau de bord pour Sally
  • Objectif : rendre compte des performances de son portefeuille
1 François, Mathilde, et al. « Automotive HMI design and participatory user involvement: review and perspectives. » Ergonomics 60.4 (2017): 541-552
Créer des tableaux de bord avec shinydashboard

2. Choisir des visualisations adaptées

  • Concerne chaque visualisation mais s'applique aussi au tableau de bord
  • Un tableau de bord rassemble plusieurs visualisations
  • Quelles infos seront utiles à Sally ?
  • Toujours un compromis entre précision et clarté
  • « The truthful art », par Alberto Cairo $^1$

Types de graphiques à utiliser, selon Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Créer des tableaux de bord avec shinydashboard

3. Utiliser les couleurs de façon efficace/intuitive

  • Par convention, certaines couleurs véhiculent des sens différents
  • Exemples
    • Le rouge signale généralement un avertissement ou une alerte
    • Le vert indique souvent un message de succès
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Couleur inadaptée pour un message de succès.

Créer des tableaux de bord avec shinydashboard

3. Utiliser les couleurs de façon efficace/intuitive

  • Par convention, certaines couleurs véhiculent des sens différents
  • Exemples
    • Le rouge signale un avertissement ou une alerte ; les utilisateurs s'y attendent
    • Le vert, à l'inverse, indique en général un message de succès
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Couleur inadaptée pour un message de succès.

Couleur adaptée pour un message de succès.

Créer des tableaux de bord avec shinydashboard

4. Tronquer les grandes valeurs

  • Les nombres peuvent s'afficher dans un shinydashboard
  • Il faut sacrifier un peu de précision pour la clarté
    • Mieux vaut arrondir les grandes valeurs
round(2.324815454862,2)

[1] 2.32

Valeurs non tronquées

Valeurs tronquées

Créer des tableaux de bord avec shinydashboard

5. Éviter trop d'éléments interactifs

  • Veiller au nombre d'éléments interactifs
  • Trop d'éléments peuvent dérouter certains utilisateurs
  • Plus n'est pas toujours mieux

Trop de stimulation n'est pas souhaitable.

1 Image par Freepik
Créer des tableaux de bord avec shinydashboard

6. Concevoir le tableau de bord en dernier

  • Ne vous précipitez pas pour concevoir le tableau de bord
    • Y compris le wireframe, le design esthétique, etc.
  • Déterminer d'abord l'objectif
    • Cela aide à choisir des visualisations adaptées
Créer des tableaux de bord avec shinydashboard

6. Concevoir le tableau de bord en dernier

  • Ne vous précipitez pas pour concevoir le tableau de bord
    • Y compris le wireframe, le design esthétique, etc.
  • Déterminer d'abord l'objectif
    • Cela aide à choisir des visualisations adaptées

« Objectif : construire un tableau de bord pour Sally. »

  • Elle peut vouloir voir les performances de son portefeuille
  • Elle peut aussi suivre la performance de chaque action
  • Nous pouvons maintenant décider de leur placement
Créer des tableaux de bord avec shinydashboard

Passons à la pratique !

Créer des tableaux de bord avec shinydashboard

Preparing Video For Download...