DIGITAL FUEL CAPITAL, une société d'investissement spécialisée dans l'e-commerce, a développé en interne un outil de Business Intelligence (BI). Cet outil est conçu pour fournir aux entreprises leaders de l'industrie une analyse approfondie de leurs performances, les aidant à identifier de nouvelles opportunités de croissance et d'optimisation.

Cette initiative reflète l'engagement de l'entreprise à fournir non seulement un soutien financier, mais aussi des ressources stratégiques et opérationnelles pour aider ses partenaires à exceller dans leur niche.

L'équipe souhaitait industrialiser cet outil pour ses partenaires, mais un élément clé manquait encore : un design qui pourrait engager les utilisateurs et les encourager à partager leur expérience. De plus, il était crucial de créer un tableau de bord qui s'alignait parfaitement avec l'identité visuelle de l'entreprise.

Dans cette étude de cas, nous examinerons de près comment APPLITICS a réussi à atteindre deux objectifs clés :

• 
  Assurer une industrialisation transparente
• 
  Transformer les utilisateurs en ambassadeurs de l'outil

Notre équipe s'est concentrée sur la création d'une interface utilisateur intuitive et moderne qui améliorerait considérablement l'expérience utilisateur. Le processus de refonte a impliqué une recherche utilisateur approfondie, des améliorations de conception itératives et une attention particulière aux normes d'accessibilité et de convivialité.

Objectif : Optimiser la rétention des utilisateurs et l'adoption de l'outil lors du déploiement à grande échelle

Secteur : Services financiers / Business Intelligence

Client : Digital Fuel Capital

L'interface de l'application, initialement développée par Jeffrey Coughlin, a été conçue en utilisant Shinydashboard et comprenait principalement :

• 
  Une barre latérale avec des onglets et des sous-onglets
• 
  Un panneau latéral dédié aux filtres
• 
  Une série de graphiques se mettant à jour dynamiquement en fonction des filtres sélectionnés.

Cependant, l'interface utilisateur, avec sa mise en page classique Shinydashboard , n'était pas encore adaptée à une utilisation à grande échelle.

En arrière-plan, des modèles analytiques avancés fonctionnaient, calculant des indicateurs clés de performance et générant des rapports détaillés sur les données des boutiques en ligne sélectionnées.

Jeff était confronté à deux défis principaux:

Pour sécuriser une application web Shiny, plusieurs technologies viennent à l'esprit. Notamment :

• 
  Shinymanager : un package R développé par Datastorm. En plus de fournir une couche d'authentification, il offre un panneau d'administration pour suivre l'utilisation de l'application par chaque utilisateur, ce qui peut être très utile dans certains cas.
• 
  Shinyauth : un autre package R connu pour sa flexibilité dans la création de systèmes de connexion basés sur des bases de données d'utilisateurs personnalisées, ainsi qu'un système simple de gestion des utilisateurs et des rôles.
• 
  Shinyproxy : une solution de déploiement de base. En utilisant Docker, chaque application est isolée dans son propre conteneur, ce qui améliore la sécurité et simplifie la gestion des ressources.

Il est évident que toutes les technologies mènent à des résultats similaires.

Avec Jeff, nous n'avons pas hésité longtemps avant de faire notre choix. Nous avons opté pour auth0 car l'équipe DFC le connaissait déjà.

L'implémentation du package d'authentification est assez simple. Il existe plusieurs ressources en ligne efficaces disponibles. Ce guide de curso-r est pratique.

Une fois le package auth0 implémenté et les utilisateurs créés, l'étape suivante était de lier chaque utilisateur à son propre répertoire de données. Pour cela, il suffit d'utiliser la variable de session : session$userData$auth0_info Une fois authentifié, cette variable contient diverses informations sur l'utilisateur.

Voici un exemple simple qui illustre ce cas d'usage :

library(shiny)

ui <- fluidPage()

server <- function(input, output, session) {
  # Initialize user-specific reactive data
  user_data <- reactiveValues()
  
  # Retrieve the user name from the session variable
  # session$userData$auth0_info
  observe({
    auth_info <- session$userData$auth0_info
    if (!is.null(auth_info)) {
      user_data$username <- auth_info$nickname
      # Define the user's data folder
      user_data$data_folder <- file.path("data", user_data$username)
    }
    print(user_data$folder) # displays "data/username_1"
  })
}

auth0::shinyAppAuth0(ui, server)

La variable réactive user_data$data_folder est ensuite utilisée dans l'application pour charger les données du bon répertoire, en fonction de l'utilisateur connecté.

Nous avons maintenant un système d'authentification qui lie chaque utilisateur à son propre répertoire de données.

L'étape suivante suit naturellement lorsque vous regardez la page d'authentification par défaut fournie par auth0 :

Interface utilisateur par défaut d'Auth0

C'est déjà assez bien, mais ce serait encore mieux si nous pouvions voir l'identité visuelle de DIGITAL FUEL CAPITAL dès que nous arrivons sur la page de connexion.

Pour ce faire, nous nous connectons à notre tableau de bord auth0 , allons dans Branding, puis Universal Login. Ici, nous trouvons plusieurs niveaux de personnalisation. Si vous êtes familier avec les langages web, vous pouvez choisir les Options avancées, où vous pouvez coder directement le style.

Je vous montrerai le résultat de la page de connexion améliorée dans la section suivante !

Le design se compose de deux parties : l'interface utilisateur (UI) et l'expérience utilisateur (UX).

Ces deux éléments sont essentiels pour l'industrialisation d'un outil.

En termes simples, l'objectif est de créer un produit qui soit à la fois attrayant ET fonctionnel. C'est ainsi que vous encouragez les gens à utiliser l'outil.

L'UI et l'UX sont des domaines spécialisés.

Comme ce n'est pas mon domaine d'expertise, j'ai contacté une experte : Sundas.

Je lui ai présenté l'application, expliqué son fonctionnement et exposé les objectifs de Jeff.

Je n'avais aucune idée de ce à quoi ressemblerait l'application.

Mais quand j'ai vu le design, j'ai immédiatement pensé, C'est exactement ce qui était nécessaire !

L'identité de marque de DIGITAL FUEL CAPITAL est instantanément reconnaissable.

Maquette graphique de la nouvelle interface utilisateur

Je partage le lien vers le site web de DIGITAL FUEL CAPITAL pour comparaison : lien

À ce stade... il ne restait plus qu'à tout intégrer dans R Shiny.

Et puis...

La grande question était : devrions-nous continuer à utiliser Shinydashboard?

À première vue, cela pourrait sembler une bonne idée : ce package offre une barre latérale propre et pré-construite avec des capacités d'intégration hiérarchique.

Cependant, dans ce cas, nous recherchions un haut degré de personnalisation, et notre expertise en développement web nous a permis d'y parvenir plus efficacement.

Ainsi, partir de zéro et construire les éléments avec HTML et CSS s'est avéré être une solution plus simple pour nous.

Créer la structure HTML est assez simple.

Shiny utilise Bootstrap par défaut, vous n'avez donc pas besoin de partir complètement de zéro.

Bootstrap offre de nombreux outils, comme la possibilité de créer une grille de colonnes en utilisant les fonctions fluidRow() et column() .

Voici un exemple de structure de tableau de bord :

fluidPage(
  fluidRow(
    id = "header",
    # Contenu de l'en-tête
  ),
  fluidRow(
    id = "body_content",
    column(
      id = "sidebar_content",
      width = 3,
      div(
        # Contenu de la barre latérale
      )
    ),
    column(
      id = "main_content",
      width = 9,
      div(
        # Contenu du corps principal
      )
    )
  )
)

Et c'est tout ! Le reste consiste simplement à ajouter le contenu.

Nous utilisons l'argument id pour les éléments de l'interface utilisateur.

Ces id seront largement utilisés plus tard dans CSS pour personnaliser l'apparence. Ils aident à créer des sélecteurs.

Car, par défaut, l'apparence ne sera pas très esthétique.

Maintenant, il suffit de coder la partie visuelle ! Pour cela, nous devons utiliser CSS.

Mon outil préféré pour tout ce qui concerne le design est le package Sass, qui est une extension de CSS.

Son objectif principal est d'organiser le code CSS, le rendant plus lisible et, surtout, plus facile à écrire.

Par exemple :

#main_content {
  padding: 50px 7%;
  .introduction {
    position: relative;
    background-color: white;
    padding: 10px 25px 30px 25px;
    margin-bottom: 20px;
    h3 {
      font-size: 20px;
      color: $red;
      text-transform: uppercase;
    }
  }
}

En CSS, cela se traduit par :

#main_contents {
  padding: 50px 7%;
}

#main_content .introduction {
  position: relative;
  background-color: white;
  padding: 10px 25px 30px 25px;
  margin-bottom: 20px;
}

#main_content .introduction h3 {
  font-size: 20px;
  color: $red;
  text-transform: uppercase;
}

La différence peut sembler mineure au premier abord. Cependant, le fichier CSS manque de structure, et les sélecteurs sont beaucoup plus longs.

Dans ce petit exemple, c'est encore gérable. Mais lorsqu'il s'agit de centaines de lignes de code, il devient encore plus bénéfique de structurer et d'organiser les sélecteurs.

Pour utiliser un fichier .scss dans une application Shiny, il existe deux méthodes :

sass styles/style.scss www/style.css

Ou, encore plus simple, vous pouvez utiliser le package {{sass}} développé par Posit (anciennement RStudio). Il s'occupera du travail pour vous.

La mise en page a été intégrée avec succès.

Cependant, il y a certains composants d'interface utilisateur spécifiques : les visualisations et les entrées...

Jeff a initialement utilisé la bibliothèque ggplot2 pour les visualisations du tableau de bord.

L'objectif était d'améliorer les visualisations en les rendant à la fois plus attrayantes visuellement, comme indiqué dans la maquette de conception, et plus interactives pour une meilleure expérience utilisateur.

1. Choix de la bibliothèque de visualisation : Highcharter

Après une brève étude, deux choix ont été présélectionnés :

• 
  Rester avec ggplot2, en ajoutant plus de personnalisation et en implémentant une info-bulle avec le package {ggiraph} pour l'interactivité.
• 
  Reconstruire les visualisations avec un autre package : Highcharter
• 
  D'une part, ggplot2 est le package de visualisation utilisé par défaut par les utilisateurs de R. Sa popularité lui confère une documentation redondante et une force communautaire.
• 
  D'autre part, Highcharter, développé par Joshua Kunst, est un wrapper R pour la bibliothèque JavaScript Highcharts qui est largement utilisée sur le web. Il offre des niveaux impressionnants de personnalisation grâce à une API riche qui donne le contrôle sur l'ensemble du graphique.
• 
  Comme le développeur décrit le package R : "Il n'y a pas d'arguments par défaut. Tous les arguments doivent être nommés."
• 
  En d'autres termes, cela signifie que vous avez une flexibilité totale pour utiliser toutes les fonctionnalités de la bibliothèque Highcharts JS dans R.
• 
  Highcharter permet une utilisation efficace de la syntaxe JSON via les listes R pour définir et personnaliser vos graphiques. Cela fonctionne si bien grâce à la similitude entre les listes R et les objets JSON utilisés par Highcharts en JavaScript.
• 
  Par exemple, ce graphique en JS.

Highcharts.chart('container', {
  chart: {
    type: 'line',
    backgroundColor: '#f0f0f0'
  },
  title: {
    text: 'Customized Chart'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    title: {
      text: 'values'
    },
    plotBands: [ // Highlighted range on the Y-axis
      {
        from: 5,
        to: 10,
        color: 'rgba(68, 170, 213, 0.1)',
        label: {
          text: 'Safe Range',
          style: {
            color: '#606060'
          }
        }
      }
    ]
  },
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  },
  series: [{
    name: 'Serie 1',
    data: [7, 6, 9, 14, 18, 21],
    color: '#FF5733'
  }, {
    name: 'Serie 2',
    data: [3, 4, 5, 8, 11, 15],
    color: '#33FF57'
  }]
});

... devient en R :

library(highcharter)

highchart() %>%
  hc_chart(type = "line", backgroundColor = "#f4f4f4") %>%
  hc_title(text = "Customized Chart") %>%
  hc_xAxis(categories = c("Jan", "Feb", "Mar", "Apr", "May", "Jun")) %>%
  hc_yAxis(
    title = list(text = "values"),
    plotBands = list(list(
      from = 5,
      to = 10,
      color = "rgba(68, 170, 213, 0.1)",
      label = list(text = "Safe Range", style = list(color = "#606060"))
    ))
  ) %>%
  hc_tooltip(shared = TRUE, valueSuffix = " units") %>%
  hc_series(
    list(
      name = "serie 1",
      data = c(7, 6, 9, 14, 18, 21),
      color = "#FF5733"
    ),
    list(
      name = "serie 2",
      data = c(3, 4, 5, 8, 11, 15),
      color = "#33FF57"
    )
          )

• 
  Cependant, au-delà des visualisations statiques montrées plus tôt dans cette étude de cas, Jeff voulait également implémenter une fonctionnalité fancy —de petits graphiques supplémentaires qui afficheraient, en temps réel, l'évolution de certaines métriques pré-calculées, mises à jour à la seconde.
• 
  Pour cette fonctionnalité, Highcharter s'est clairement démarqué comme la meilleure option pour le projet, grâce à ses animations particulièrement élégantes pour les mises à jour de graphiques en temps réel.
• 
  De plus, puisque la politique du projet n'avait aucune restriction de licence, le passage à Highcharts est devenu un choix évident.

2. Comment créer un graphique qui se met à jour en temps réel avec 'highcharter'

• 
  Étant donné que les KPI pré-calculés sont confidentiels pour DIGITAL FUEL CAPITAL, j'ai créé un exemple avec des données fictives, toujours dans le contexte de l'e-commerce.
• 
  Let's say we want to display data showing the evolution of web traffic, with second-by-second accuracy, coming from a server API.
• 
  Here's an example illustrating this:

Real Time Data evolution of web traffic with Highcharter

• 
  In our example, API calls are simulated using the auto_invalidatevariable, which automatically resets every two seconds thanks to the reactiveTimer() function. This process is known as automatic invalidation in Shiny.
• 
  In our fictional example, with each reset, random data is generated and incremented to the historical data.
• 
  Ensuite, l'ajout d'un nouveau point est géré directement par les fonctions proxy hcpxy_add_point() et hcpxy_set_data(), en spécifiant l'ID de la série.
• 
  Vous pouvez trouver le code source ici.
• 
  Vous pouvez également consulter l'exemple en direct ici.

Dans le contexte de l'industrialisation d'une application web, les entrées standard fournies par Shiny ne sont clairement pas visuellement suffisantes, surtout lorsqu'on essaie de suivre les directives de conception de l'entreprise.

Voici les deux versions pour comparaison :

Entrée de sélection personnalisée

Sans surprise, l'entrée conçue dans la maquette s'intègre mieux dans l'univers visuel de DIGITAL FUEL CAPITAL.

Pour changer l'apparence d'une entrée dans une application Shiny, il existe principalement deux méthodes :

Un bon point de départ pour la méthode rapide est d'utiliser l'inspecteur de code pour ajuster temporairement le style visuel jusqu'à obtenir l'apparence souhaitée. Ensuite, vous ajouteriez simplement ces styles à l'en-tête de votre application Shiny.

La méthode professionnelle, en revanche, nécessite un peu plus de travail. Elle implique de créer un widget Shiny entièrement personnalisé en utilisant des composants HTML, CSS et JavaScript de base. Cela permet un contrôle total sur le comportement et l'apparence du widget, avec l'avantage supplémentaire d'une réutilisabilité et d'une maintenabilité accrues.

Pour les curieux, voici quelques ressources intéressantes pour commencer :

• 
  Construire des objets d'entrée personnalisés
• 
  Comment créer des liaisons d'entrée personnalisées
• 
  Débogage des entrées Shiny personnalisées
• 
  7 étapes faciles pour les entrées personnalisées dans shiny

Dans notre exemple, voici le code complet : lien

Le code R : contient les balises HTML pour le widget. C'est simplement une balise d'entrée.

Le code CSS : utilisé pour suivre les directives de conception.

Le code JavaScript : c'est là que se trouve le code pour le transformer en widget Shiny.