UX : comment optimiser les écrans vides d’une application mobile (empty states) ?

UX : comment optimiser les écrans vides d’une application mobile (empty states) ?

Malgré leur nom, les écrans vides ou « empty states » en anglais ne sont pas le résultat d’un oubli ou d’un bug. En réalité, ces écrans, qui ne sont jamais complètement vides, jouent un rôle crucial. Bien optimisés, ils représentent un véritable plus pour votre application mobile.

Dans quelles situations utiliser les empty states ?

Les écrans vides sont des écrans qui contiennent des messages textuels, des images ou des pictogrammes, et qui indiquent à l’utilisateur la marche à suivre lorsqu’aucune donnée ne s’affiche. Ils sont utilisés, par exemple, quand une application de stockage de fichiers est vide, ou quand une boite email ne contient aucun message. Les empty states interviennent également en cas d’erreur, pour informer l’utilisateur, ou quand un contenu est en train d’être supprimé.

ux optimiser écrans vides application mobile

L’impact des empty states

Les écrans vides peuvent avoir un impact important sur les actions des mobinautes. Au pire, ils laissent indifférents, frustrent, et même poussent parfois les utilisateurs à quitter l’application. Au mieux, ils rassurent, favorisent l’engagement et fidélisent les utilisateurs. Un écran vide efficace doit ainsi donner des informations simples, distraire les utilisateurs pendant qu’ils attendent qu’un téléchargement se termine, ou les inciter à l’action.

Un écran vide pour le premier lancement d’une application mobile

La première règle, en matière d’écrans vides dans l’ergonomie d’une application mobile, c’est de ne pas prendre leur nom au pied de la lettre : il ne faut surtout pas qu’ils soient réellement vides. Ensuite, pour savoir quoi mettre sur votre écran vide, vous devez prendre en compte sa fonction. S’il intervient au premier lancement d’une application, il faut absolument qu’il contienne un bouton call-to-action pour indiquer à l’utilisateur quelle action faire. Pour une application de partage de photos, on insérera par exemple un bouton permettant d’importer des images. Côté graphismes, privilégiez la simplicité et les contrastes de couleurs.

Savoir faire patienter les utilisateurs

Si le temps de chargement d’un contenu est plus long que prévu, à cause d’une erreur ou d’une mauvaise connexion, le rôle de l’empty state est d’empêcher l’utilisateur de quitter l’application. Les graphismes et animations doivent lui faire comprendre que quelque chose va se passer et que l’application travaille : la grille vide d’Instagram est un exemple réussi de ce type d’empty state. En cas d’erreur, vous pouvez opter pour une illustration amusante et originale.

Laisser un commentaire