empty-states.jpg

Empty states : les écrans vides à ne pas oublier dans une application mobile

Dans la famille « bonnes pratiques pour construire une application mobile », j’appelle les empty states (états ou écrans vides, en français). En réalité, il s’agit de ces écrans constitués le plus souvent de messages textuels, de pictogrammes ou d’illustrations vous indiquant la marche à suivre lorsqu’aucune donnée n’est à afficher. Présents la plupart du temps dès la première ouverture de l’application, ils sont également visibles lorsqu’une erreur survient ou lors de la suppression complète de certains contenus.

Voici quelques exemples de situations dans lesquelles tout utilisateur peut rencontrer ces empty states :

– Installer une application mobile dédiée au stockage de fichiers et n’avoir aucun document importé.
– Prendre l’initiative de vider entièrement sa boite mail.
– Rencontrer une erreur lors d’un téléchargement ou le visionnage d’une vidéo.
– Etc.

 

empty states 1

Google Drive / Mail / YouTube

 

Alors qu’un écran blanc n’engage pas à poursuivre la navigation, des empty states bien conçus ont un impact important sur les pensées et les décisions inconscientes de l’utilisateur. C’est pourquoi il est important de les personnaliser, de les adapter au domaine d’activité, au parcours et à l’univers de l’application mobile en question. Éléments de l’UX par excellence, ils peuvent à la fois laisser indifférent, frustrer, encourager à abandonner, ou favoriser l’engagement et l’accoutumance.

 

À la base de la conception

Lorsque le designer conçoit l’application, il a souvent tendance à représenter les écrans avec un contenu déjà fourni et opérationnel (par exemple : contacts renseignés, liste de favoris, etc.). Les empty states sont généralement oubliés alors qu’ils ont la faculté par exemple de servir d’onboarding en indiquant précisément à l’utilisateur quelles sont les actions attendues pour que puisse s’afficher le contenu. Ils ont en effet les mêmes objectifs : informer, distraire et inciter à l’action.

Prenons un cas inspiré de la vie réelle. En arrivant pour la première fois à la réception de l’hôtel dans lequel j’ai réservé pour la nuit, j’attends du réceptionniste qu’il m’indique comment accéder à ma chambre, le lieu du petit-déjeuner pour le lendemain matin et l’heure à partir de laquelle je devrai libérer la chambre.
Si le réceptionniste n’est pas là, j’espère qu’un panneau me donnera toutes les informations nécessaires.

Tout comme l’hôtelier souhaite que son client profite de son séjour, le designer doit tout faire pour que l’utilisateur agisse et établisse une relation concrète avec les fonctionnalités de l’application mobile.

 

Pour cela, certaines bonnes pratiques sont à respecter en fonction des situations :

 

Premier lancement d’une application mobile
L’empty state doit être simple, clair et contrasté. Un bouton call-to-action est alors nécessaire pour indiquer à l’utilisateur ce qu’il doit faire pour poursuivre.
Exemple : Dropbox. Lorsque l’application mobile est vide de contenu, les empty states misent sur les illustrations pour créer un univers sympathique et sur des paragraphes explicatifs. Les boutons incitent à démarrer l’utilisation concrète de l’application mobile.

 

empty states 2

 

 

Pendant un chargement
Les temps de chargement peuvent parfois être plus longs que prévus en raison d’une erreur quelconque ou d’une mauvaise connexion au réseau. Dans ce cas, l’empty state prend tout son sens et doit empêcher l’utilisateur de quitter l’application. Cela peut se faire par l’ajout d’animations, de micro-interactions ou par la composition originale de l’écran.

On retrouve ici un bon exemple avec Facebook. Pendant le chargement de sa timeline, l’écran affiche tout de même la structure de la page avec une légère animation de surbrillance au niveau des zones grisées. L’animation permet à l’utilisateur d’attendre sans s’impatienter puisqu’il comprend que l’application mobile « travaille » et qu’elle va finir par afficher le contenu demandé. De même pour Instagram qui dévoile une grille vide lors du chargement des images. Cette façon de faire a l’avantage d’indiquer immédiatement à l’utilisateur la position des principaux éléments de navigation.

 

empty states 3

Facebook / Instagram

 


 

Conclusion

Vous ne pourrez connaître l’impact qu’ont les empty states sur l’expérience utilisateur de votre application mobile, qu’en en créant plusieurs, en les analysant et en les ajustant selon les résultats obtenus. Comme souvent dans le mobile, les ateliers UX et les tests utilisateurs sont un moyen efficace de récolter les avis, les expériences et les parcours. Une fois que vous aurez trouvé quel type d’empty state intéresse le plus vos utilisateurs, vous serez capable d’atteindre de plus hauts niveaux d’engagement et de rétention.

Il est donc temps de voir au delà des interfaces conçues pour les situations idéales, où tout est sous contrôle, et faire face à la réalité de l’utilisation quotidienne, où tout peut arriver.

 

Sources : Studio by UXPin, Product Mavens by AppSee
IdéineEmpty states : les écrans vides à ne pas oublier dans une application mobile
Share this post

Join the conversation

À lire aussi