Améliorer l’expérience utilisateur sur nos applications web : pourquoi pas une visite guidée ?

Un constat

Les applications que nous créons peuvent parfois être complexes et difficiles à prendre en main pour un nouvel utilisateur :

• Les fonctionnalités et actions disponibles peuvent être nombreuses
• Les formulaires peuvent contenir de nombreux champs parfois complexes à remplir (format spécifique à respecter, champs obligatoires ou optionnels dans certains cas en fonction de règles métiers…)
• Présence de termes techniques, d’abréviations sur les pages
• …

Par conséquent, un nouvel utilisateur de notre application peut rencontrer des difficultés de navigation, d’utilisation et de compréhension.

Sa première expérience peut donc se révéler compliquée et il aura vite fait de se faire une mauvaise opinion de notre application.

Nos applications sont également amenées à évoluer dans le temps :

• Ajout d’une nouvelle fonctionnalité
• Evolution d’une fonctionnalité existante
• Refonte de l’interface utilisateur
• …

Conséquence, un utilisateur de notre application, même s’il est expérimenté, peut également rencontrer des difficultés d’utilisation de l’application lors de la livraison d’une nouvelle version.

L’expérience utilisateur est alors dégradée.

Des solutions

Des solutions existent pour améliorer et facilité l’expérience de nos utilisateurs :

• Ergonomie bien pensée, c’est la base 😊 : éviter les menus à rallonge, mise en place d’un fil d’Ariane…
• Expliciter les termes techniques ou les abréviations (utilisation de <abbr> par exemple)
• Infobulles pour les champs et/ou données complexes
• Validation des champs d’un formulaire en direct avec un message d’erreur compréhensible par l’utilisateur (obligatoire, format attendu, exemple…)
• Créer une FAQ (foire aux questions)
• Formation de tous les utilisateurs (end-user) ou bien d’utilisateurs ciblés (key-users) qui pourront ensuite former les autres
• Créer des vidéos ou des PowerPoint de présentation/démonstration

Mais on peut également mettre en place un “Guide Tour”.

Un Guide Tour ?

C’est une visite guidée virtuelle de notre application ou d’une ou plusieurs de ses fonctionnalités.

La visite est constituée d’un ensemble d’étapes ordonnées, affichées en surimpression.

Un Guide Tour mis en place avec la librairie ReacTour

Pour chaque étape, on identifie un élément DOM de la page HTML et on lui associe un contenu explicatif.

Un fois le tour guidé démarré, l’élément DOM correspondant à la première étape est mis en surbrillance et le contenu explicatif associé est affiché dans une fenêtre modale.

L’utilisateur peut ensuite choisir de passer à l’étape suivante, ou bien d’arrêter la visite guidée.

Avantages :

Un tour guidé présente de nombreux avantages :

• Il est totalement intégré à l’application contrairement à un PowerPoint par exemple
• Il est exécutable à volonté et à tout moment par l’utilisateur
• Son chargement est très rapide en comparaison d’une vidéo par exemple
• La rédaction du scénario du tour guidé peut aider à détailler et formaliser le besoin métier d’une fonctionnalité
• C’est une documentation orientée utilisateur final

Inconvénients :

Un tour guidé présente aussi quelques inconvénients :

• Il est nécessaire de mettre des identifiants uniques ou des classes CSS sur les éléments de la page à détailler dans la visite guidée pour faciliter sa mise en place
• Cela demande une charge de travail supplémentaire pour dans un premier temps le créer et ensuite le maintenir suite à des évolutions de notre application par exemple
• Cela peut vite devenir intrusif et gênant pour l’utilisateur si l’on intègre trop de tours guidés à notre application (notre application peut vite se transformer en un véritable sapin de Noël 😊). Il faut lui laisser le choix de les masquer facilement et mémoriser le fait qu’il a déjà visualisé un tour guidé pour ne pas lui reproposer à chaque fois

Attention, il faut bien s’assurer que l’on a déjà mis en place toutes les solutions listées dans le paragraphe “Des solutions” avant de penser à intégrer un tour guidé.

Un Guide Tour est juste là en complément !

Et ça donne quoi en React ?

Quelques librairies React :

Il existe des librairies en React facilitant la mise en place d’un tour guidé de notre application :

ReacTour
https://github.com/elrumordelaluz/reactour

React Joyride
https://github.com/gilbarbara/react-joyride

Exemple rapide d’utilisation de la librairie ReacTour :

L’installation de la librairie est très simple :

npm i -S reactour
# or
yarn add reactour

Ensuite, il va falloir décrire le scénario et les différentes étapes de la visite guidée avec cette librairie.

Pour chaque étape, on va devoir définir à minima un “selector” (l’élément qui sera mis en surbrillance) et le contenu “content” à afficher qui peut prendre la forme d’un simple texte ou bien d’un composant custom.

On pourra également customiser le positionnement de la modal, la couleur de fond et bien d’autres choses pour chaque étape.

const scenario = [
  {
    selector: '.my-class-name',
    content: 'This is my first step content',
  },
  {
    selector: '#my-id',
    content: 'This is my second step content',
  },
  {
    selector: '[data-tour="data-tour-attr-name"]',
    content: 'This is my third step content',
  },
  {
    selector: '[data-tour="my-last-step"]',
    content: ({ goTo, inDOM }) => (
    <div>
     This is my last step content with a custom component
     <br />
     <button onClick={() => goTo(1)}>Go to the first step</button>
     <br />
     {inDOM && 'Hello the step is displayed!'}
    </div>
    ),
    position: 'top',
  },
  // ...
]

Enfin, on va pouvoir afficher le tour guidé à l’utilisateur en utilisant le composant “Tour” de la librairie ReacTour en lui passant le scénario que nous avons créé précédemment.

On peut choisir de lancer l’affichage après le montage du composant ou bien suite à un clic sur un bouton ou tout autre élément de la page.

import React from 'react'
import Tour from 'reactour'
class App extends Component {
  // ...
render  (
    <>
      { /* other stuff */}
      <Tour
        steps={scenario}
        isOpen={this.state.isTourOpen}
        onRequestClose={this.closeTour} />
    </>
  )
}

Si vous voulez voir à quoi cela ressemble, vous pouvez aller faire un tour sur la démo en ligne de ReacTour : React App (reactour.js.org).

Conclusion

J’espère que cet article vous a permis de voir l’intérêt de mettre en place un système de visite guidée dans vos applications.

Gardez bien à l’esprit que ce système est bien un complément pour améliorer l’expérience utilisateur sur vos applications mais qu’il ne vous dispense pas de respecter les autres bonnes pratiques que j’ai pu lister rapidement dans cet article.