Content crit : c’est quoi un bon empty state ?

Après l’e-mail transactionnel, la content crit est de retour : place à l’empty state, un composant souvent sous-estimé.

Nous vous proposons d’analyser 4 empty states qui nous ont tapé dans l’œil. Ensuite, ce sera à vous de jouer !

L’empty state, kesako ?

Comme son nom l’indique, l’empty state (ou état vide) est un composant utilisé lorsque l’interface ne contient pas d’information, ou pas encore.

Il existe différents types d’empty states. Voici les principaux :

• L’empty state d’une section vide — le plus courant Lors d’une première utilisation ou lorsqu’il n’y pas de données à afficher à un moment donné. Par exemple, un panier d’achat vide ou une boîte de réception vide.
• L’empty state d’une action sans résultat La plupart du temps, il s’agit d’une recherche qui n’a pas donné de résultats.
• L’empty state lié à la gestion d’erreur Cela peut-être une erreur système ou un problème de connexion à Internet, une limitation de permission (l’utilisatrice n’a pas les droits d’accès) ou une configuration requise.
• L’empty state de vente incitative ou vente croisée Par exemple, pour inciter un utilisateur à changer de forfait afin d’accéder à une fonctionnalité.

« Que suis-je sensé·e faire ici ? Help 😧 » Un message d’empty state non travaillé peut générer plusieurs émotions : perplexité, frustration, voire stress, selon l’importance de l’action.

Un mauvais exemple : l’empty state de la fonctionnalité ‘Webhooks’ sur Cal.com ❌

📌 Contexte : Cal.com permet de planifier des évènements (à l’instar de Calendly). En configurant notre lien de rendez-vous dans le cadre d’un coaching, nous sommes tombées sur la fonctionnalité ‘Webhooks’.

❌ Qu’est-ce qui ne fonctionne pas ?

• Le problème le plus flagrant : mais qu’est-ce qu’un webhook ?! C’est un terme technique, que peut-être seuls des développeurs connaissent. C’est très frustrant de ne pas comprendre et de nous laisser faire notre propre recherche pour savoir de quoi il s’agit.
• Le titre et le sous-titre sont redondants. Cela donne l’impression de meubler l’espace et cela n’aide pas à nous approprier cette fonctionnalité.
• L’action n’en est pas vraiment une. Le manque de verbe et un bouton peu contrasté donnent l’impression d’une action passive et peu importante.

🛠️ Comment améliorer cet empty state ?

• Axer le titre sur le bénéfice : cela évite de laisser l’utilisateur perplexe face à un terme technique, et permet d’introduire la définition et l’utilité d’un webhook.

Suivez vos évènements emailing en temps réel

• Expliquer succinctement ce qu’est un webhook et à quoi il sert. Pour cela, on pourrait s’aider du sous-titre. En 2-3 lignes, l’explication est donnée. Comme peut le faire Mailjet.

Grâce aux notifications webhook, nous vous transmettons toutes les alertes liées à vos e-mails (ouverture, clic, erreur de destinataire, etc.).

• Introduire un verbe d’action dans le call-to-action. Un bon call-to-action a une structure de type {verbe} + {complément}.

Créer un webhook

Trois bons exemples : les empty states de Doctolib, Airbnb et BlaBlaCar 👍

1) Doctolib

📌 Contexte : lorsque l’on clique sur l’onglet ‘Rendez-vous’ dans le menu, un message d’état vide s’affiche quand nous n’avons aucun rendez-vous prévu.

✅ Pourquoi ça fonctionne ?

• Le titre pose le constat : il n’y a rien pour le moment, vous n’avez pas de rendez-vous prévu.
• Le sous-titre invite à prendre rendez-vous.
• Le call-to-action est clair, il fonctionnerait même sans contexte.
• L’association du titre et du call-to-action permet de scanner l’information pour passer rapidement à l’action.

🛠️ Qu’est-ce qui peut encore être amélioré ?

• Le titre pourrait plus conversationnel, d’autant que le tone of voice de Doctolib conseille de s’adresser à l’utilisateur.

Vous n’avez pas de rendez-vous prévu

• Le sous-titre pourrait être plus précis et laisser de côté les mots inutiles (en ligne à tout moment)

Vous devez consulter ? Retrouvez vos praticiens dans votre historique, ou faites une recherche pour trouver celui qui vous convient.

• Un peu d’UI : le call-to-action pourrait être rapproché du texte et centré.

2) Airbnb

📌 Contexte : lorsque l’on clique sur l’onglet ‘Voyages’ dans le menu, un message d’état vide s’affiche quand nous n’avons aucun voyage prévu.

✅ Pourquoi ça fonctionne ?

• Le titre pose le constat : il n’y a rien pour le moment, vous n’avez pas de voyage prévu. Il initie aussi l’action qui peut être faite.
• Le sous-titre invite au voyage : préparer notre prochaine aventure.
• Le call-to-action est clair : pour trouver un logement, il faut faire une recherche.

🛠️ Qu’est-ce qui peut encore être amélioré ?

• Le sous-titre comporte une formulation légèrement culpabilisante : « Il est temps de ». Comme si tout le monde avait le choix de partir en vacances ou de réserver un logement. (oui, on est tatillonnes)

Ressortez vos valises et préparez votre prochaine aventure.

• Le call-to-action pourrait être plus précis : l’action se concentre sur la recherche d’un logement.

Rechercher un logement

3) BlaBlaCar

📌 Contexte : lorsque l’on clique sur l’onglet ‘Vos trajets’ dans le menu, un message d’état vide s’affiche quand nous n’avons aucun trajet prévu.

✅ Pourquoi ça fonctionne ?

• Le titre a une formulation différente des autres exemples, qui est intéressante : il ne pose pas le constat d’une absence, mais il explique que le prochain trajet que nous aurons réservé apparaîtra dans cet espace. C’est très clair, en un coup d’œil on comprend l’objet de cette section.
• Le sous-titre indique que deux options existent : soit rechercher un trajet, soit publier sa propre annonce de trajet.

🛠️ Qu’est-ce qui peut encore être amélioré ?

• Le sous-titre pourrait être plus précis :
• Il ne s’agit pas de trouver le trajet idéal parmi des milliers de destinations : quand on cherche un trajet, c’est pour une destination précise. Sur BlaBlaCar, il est plus fréquent d’aller vers une destination précise que de partir à l’aventure et choisir une destination au hasard.
• Plutôt que « des trajets », commençons d’abord par en publier un seul.

Trouvez le trajet idéal qui vous amène à destination, ou publiez votre trajet pour partager vos frais de voyage.

• Des call-to-actions pourraient être introduits : rechercher un trajet et publier un trajet.

Comment concevoir un bon empty state ?

Ne laissez jamais un écran vide : cela entraîne de la confusion ou de la frustration.

L’empty state est un bon outil pour favoriser l’utilisation du produit.

À vous de jouer ! L’exo de Lorem ✍️ 

Vous travaillez chez SNCF Connect, et vous êtes en charge de l’amélioration de cet empty state dans le cas où aucun voyage n’est prévu.

Votre mission, si vous l’acceptez :

• Réaliser un mini audit : qu’est-ce qui ne fonctionne pas sur cet empty state ?
• Améliorer son contenu, en expliquant ce qui doit se trouver là, ce qu’il est possible de faire et comment.

Sentez-vous libre de ré-agencer l’architecture de l’information si vous le jugez nécessaire.

N’hésitez pas à nous envoyer le résultat de votre exercice. On serait ravies de vous faire un retour 😊