Comment concevoir des pages d'état vides pour des sites Web et des applications mobiles

Les pages d'état vides sont des éléments de conception moins connus qui jouent un rôle important dans l'expérience utilisateur. Dans sa forme la plus simple, les états vides sont mises en page vues lorsqu'un utilisateur visite pour la première fois une page où aucun contenu n'est disponible.

Cela peut inclure des applications mobiles, des réseaux sociaux ou même des catégories de blog vides. Le but est de livrer une page vide qui ressemble à une page non vide. Les visiteurs devraient reconnaître le manque de contenu en tant que moyen de contenu imminent.

J'aimerais expliquer comment fonctionnent les pages d'état vides et pourquoi elles sont si importantes. Les concepteurs d'interface doivent examiner ces points et essayer de les appliquer à des états vides chaque fois que cela est approprié. Mais pour commencer, examinons le fonctionnement d’un état vide et sa valeur ajoutée à l’interface..

La valeur des états vides

La beauté d'un grand design d'état vide réside dans sa simplicité. Les pages vides expliquent ce qui devrait être sur la page une fois il y a du contenu. Il peut être passif, comme une boîte de réception vide, ou attendre activement l'utilisateur, comme un flux Twitter vide..

Les pages vierges sont ennuyeuses, ennuyeuses et même déroutantes. États vides fournir des conseils pour aider les utilisateurs à comprendre ce qu'ils regardent. Même si c'est une page blanche, le contexte supplémentaire aide.

Les états vides donnent aussi une idée de “fraîcheur” avec de nouveaux comptes sans données existantes.

Ce test effectué par Redditor Bambo_Ocha a vérifié 20 applications différentes pour les conceptions d'état vides. Différents styles de conception sont apparus avec des boutons CTA, des exemples de données et même une brève présentation du didacticiel..

Les applications qui se développent sur une base utilisateur doivent concevoir des états vides encourager l'activité des utilisateurs. Cette activité peut être la publication de contenu, l’ajout d’ami, le téléchargement de photos ou l’application pour laquelle l’application a été conçue. L’écran ci-dessous de Tookapic est un bon exemple..

Mais les pages d'état vides ont toujours une valeur même lorsqu'aucune action n'est requise. Ces dessins sont principalement conçus pour fournir des informations.

Les informations statiques ont la même valeur et il n’est pas mauvais en soi d’avoir un état vide. Par exemple, cette conception de page ne montre aucune métrique actuelle d'un tableau de bord d'application de suivi. L'utilisateur peut vouloir ajouter des métriques, mais ce n'est pas grave de laisser le tiret vide.

Des conceptions statiques similaires peuvent très bien fonctionner pour des archives de blog vides ou des dossiers de messages vides. Il est parfaitement acceptable de ne pas afficher de message. Mais la page ne doit pas être complètement vide sans contexte non plus.

Éléments de page vitaux

L'élément le plus important sur une page d'état vide est le contexte. Cela peut prendre la forme de graphiques, de texte ou des deux. Vous souhaitez informer les utilisateurs de la raison pour laquelle la page est vide et du type de données pouvant y figurer (courriels, tweets, profils d'amis, etc.)..

Et bien que le texte soit le principal moyen de communication sur le Web, vous ne pouvez pas négliger la valeur des graphiques et des icônes..

DigitalOcean possède un tableau de bord brillant avec des graphiques d'état vides qui illustrent clairement leur propos. Leur entreprise utilise une image de marque créative et une typographie propre. Il n'est donc pas surprenant que leurs pages d'état vides soient si illustratives.

Un autre aspect crucial de la conception d’états vides est la bouton d'appel à l'action. Ceci est généralement conçu comme un bouton, même si les hyperliens fonctionnent également.

L'objectif est d'aider les utilisateurs à prendre des mesures et à nettoyer leur état vide. Que cela nécessite d'ajouter des données ou de prendre des mesures sur le site, les CTA aident les utilisateurs à passer à l'étape suivante, qui consiste à nettoyer l'état vide..

Dropbox a un super design avec deux boutons CTA. Lorsqu'un utilisateur de Dropbox n'a pas de dossier, il peut créer un nouveau dossier ou ajouter un exemple de dossier sur la page..

Encourager l'activité de l'utilisateur

Les boutons d’appel à l’action sont les éléments actifs, mais rappelez-vous que la copie de page explique ce que l'utilisateur fait. Personne ne clique sur les boutons sans savoir pourquoi.

La meilleure façon d'encourager l'activité est d'écrire une excellente copie sur votre page d'état vide. Guidez les utilisateurs dans un flux de contenu qui encourage leur activité sur l'ensemble de l'application..

Cet état vide de ModSpot est un brillant exemple de design de qualité et de contenu encourageable.

Les icônes servent à montrer ce que l'utilisateur doit ajouter au site. Une flèche pointe vers le bouton sur lequel les utilisateurs doivent cliquer avec un texte encourageant le comportement. Ceci est une conception d'état vide brillante avec tous les éléments que vous attendez.

De même, l'état vide de Gumroad offre deux options ciblant différentes actions potentielles. Les utilisateurs peuvent ajouter un produit numérique ou un produit physique pour commencer à vendre.

D'autres liens sur la page mènent aux guides d'aide et aux coordonnées. Tout est incroyablement simple et se lie bien.

Web vs applications mobiles

Les pages d'état vides pour tous les supports doivent suivre des tendances de conception similaires. Mais il existe quelques différences mineures avec l'expérience utilisateur sur un ordinateur de bureau par rapport à un smartphone..

Sites Web sur des écrans plus grands avoir plus de place pour des boutons supplémentaires. Les pages Web peuvent aussi avoir éléments de navigation plus grands qui peut attirer des gens ailleurs sur le site.

Cela peut être résolu dans un style similaire à celui de Nusii sur la page de leurs propositions. En l'absence de propositions, l'utilisateur est guidé vers le “ajouter des propositions” bouton dans la barre de navigation supérieure.

Les applications mobiles peuvent avoir des problèmes similaires, mais les écrans sont beaucoup plus petits. Cela le rend beaucoup plus facile d'attirer les utilisateurs directement dans l'action.

Je trouve qu'il est préférable de garder les applications mobiles plus simples avec moins d'options. Utilisez des effets visuels pour encourager l'action et dirigez-vous vers un flux d'utilisateur très spécifique..

Exemples de conception d'état vide

Peut-être que la meilleure façon d’en apprendre davantage sur la conception d’états vides consiste à étudier quelques exemples. La brillante galerie Web emptystat.es gère les pages d’état vides de divers sites Web vers des applications mobiles..

J'ai sélectionné à la main des exemples qui méritent votre attention et qui illustrent le mieux la conception d'un état vide. Si vous avez d'autres suggestions, n'hésitez pas à nous le faire savoir..

IP flottant de DigitalOcean