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 principes 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 ?
  • Que doivent-ils savoir ?
  • Mieux cerner les besoins améliore l'expérience utilisateur $^1$
  • Scénario : Concevoir un tableau de bord pour Sally
  • But : rendre compte du rendement 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, et le tableau de bord aussi
  • Un tableau de bord regroupe plusieurs visualisations
  • Quelle info sera utile à Sally ?
  • Toujours un compromis entre précision et clarté
  • « The truthful art », d'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

  • Certaines couleurs ont des sens conventionnels différents
  • Exemples
    • Le rouge indique habituellement un avertissement ou une alerte
    • Le vert indique généralement un succès
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Couleur inappropriée pour un message de réussite.

Créer des tableaux de bord avec shinydashboard

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

  • Certaines couleurs ont des sens conventionnels différents
  • Exemples
    • Le rouge indique habituellement un avertissement ou une alerte, et les utilisateurs s'y attendent
    • Le vert, à l'inverse, indique généralement un succès
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Couleur inappropriée pour un message de réussite.

Couleur appropriée pour un message de réussite.

Créer des tableaux de bord avec shinydashboard

4. Tronquer les grandes valeurs

  • On peut afficher des nombres dans un shinydashboard
  • Il faut parfois sacrifier un peu de précision pour la clarté
    • Il vaut mieux arrondir les grands nombres
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

  • Soyez attentif au nombre d'éléments interactifs
  • Trop d'éléments peuvent déstabiliser 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 dans la conception du tableau de bord
    • Y compris le schéma filaire, le design visuel, etc.
  • Définir d'abord l'objectif
    • Cela aide à choisir les bonnes visualisations
Créer des tableaux de bord avec shinydashboard

6. Concevoir le tableau de bord en dernier

  • Ne vous précipitez pas dans la conception du tableau de bord
    • Y compris le schéma filaire, le design visuel, etc.
  • Définir d'abord l'objectif
    • Cela aide à choisir les bonnes visualisations

« But : concevoir un tableau de bord pour Sally. »

  • Elle peut vouloir voir le rendement de son portefeuille
  • Elle peut aussi vouloir suivre le rendement de chaque titre
  • On peut maintenant décider de leur emplacement
Créer des tableaux de bord avec shinydashboard

Passons à la pratique !

Créer des tableaux de bord avec shinydashboard

Preparing Video For Download...