Découvrabilité et rétroaction dans la conception Web

Récemment, Vox, avec 99% Invisible, a produit un brillant court métrage sur une porte située au dixième étage du bureau de Vox Media. Outre de nombreuses autres portes, il présentait Don Norman: icône du design et célèbre auteur de The Design of Everyday Things. Le but du film était de mettre en évidence la convivialité des produits et des systèmes, en se ramenant à deux principes fondamentaux de la conception centrée sur l’être humain: la découvrabilité et le retour d’information..

Découvrabilité

“Que dois-je faire?” Lorsque vous rencontrez un objet, un produit ou un système, vous devez comprendre comment interagir avec cet objet. Un manque de découvrabilité vous empêche de savoir comment utiliser quelque chose..

Retour d'information

"Qu'est-ce qui vient juste de se passer? Une fois que vous avez effectué une action avec votre objet ou votre système, un élément de retour devrait vous informer de ce qui s’est passé et du pourquoi. Sans commentaires, vous êtes dans le noir.

Jetons un coup d'oeil à quelques exemples d'interfaces et de produits sur le Web qui démontrent le bon usage de ces idées.

Nous allons commencer par la découvrabilité; Tout site Web, que ce soit pour le commerce électronique, un portefeuille, le marketing, un produit ou un service, ou pour toute autre chose, demandera aux utilisateurs de comprendre ce que l'on attend d'eux. La page d'accueil de CodePen utilise une ligne de lanière accrocheuse, suivie d'une proposition de valeur claire, avant d'attirer l'attention et d'offrir aux nouveaux visiteurs deux voies d'action claires..

Il y a beaucoup de discussions sur le web sur l'efficacité des boutons «fantômes» (où le bouton n'a pas de remplissage, juste une bordure), parce qu'ils ne Regardez comme des boutons. Cela pourrait entraver la découvrabilité, mais je vous laisse y faire votre propre idée.

duolingo.com

Duolingo, la plateforme d’apprentissage des langues préférée de tous (non?), Rend leur page d’accueil encore plus claire pour les nouveaux utilisateurs. Il y a un bouton, très évident, très cliquable au centre de l'écran. Et si je frappe je sais exactement ce que je me laisse entrer pour.

Ces deux premiers exemples sont des «appels à l’action» (CTA) bien exécutés. En tant que propriétaires de produits, nous voulons que les utilisateurs se sentent obligés d'agir, mais créer un bouton gros, rouge et brillant ne suffit pas. Au-delà d'être visuellement évident, un CTA doit aider les utilisateurs à comprendre pourquoi ils agissent..

www.spotify-valentines.com

La promotion récente de Spotify pour la Saint-Valentin, où vous pouviez envoyer une note d'amour au moyen d'une liste de lecture, était (comme toujours) esthétiquement époustouflante. Mais le chemin de l'action aurait pu être plus clair. C’est évident ce que nous voulons que le résultat soit, mais l’instruction (qui agit en tant que CTA) n’a pas réellement faire n'importe quoi. Au lieu de cela, nous nous attendons à ce que nous fassions défiler l'écran vers le bas, ce qui peut donner l'impression à certains qu'ils s'éloignent de l'action à entreprendre..

En revanche, voici un exemple d'action très découvrable: le bouton de lecture humble.

http://valiocon.com/

Avec des hectares d'espaces, cette icône circulaire invite les utilisateurs à agir. L'icône de jeu est universellement reconnue et sa forme même suggère une direction; une prochaine étape. Hit ceci et une vidéo va jouer.

BuddyApp, un thème de BuddyPress, la plateforme communautaire de WordPress, nous offre deux options possibles ici, mais nous indique clairement quel est le parcours d'inscription préféré.

Accessibilité

Toute la découvrabilité dont nous avons discuté jusqu'à présent suppose une chose très importante: nous n'avons aucun problème d'accessibilité. Si une interface rend difficile la découverte de ce que l'on attend de nous dans des conditions parfaites, imaginez en quoi cela affecte les personnes souffrant de handicaps visuels, physiques ou cognitifs.?

A11y

Je ne saurais trop vous recommander de jeter un coup d'œil au cours d'initiation au guide d'initiation au Web de John Hartley. A 2,5 heures c'est un sérieusement guide complet sur la signification de l'accessibilité pour le Web et sur la manière de l'intégrer à votre flux de travail. 

De nos jours, Github permet aux utilisateurs de transférer des fichiers directement dans l’hôte via l’interface Web. En termes de découvrabilité, cette commande est assez claire. Il y a même un plan d'action secondaire, clairement présenté, si nous en avons besoin.

Une fois que j'ai glissé mon fichier dans la fenêtre, un changement d’état indique que mon action a été acquittée: lignes pointillées et instructions supplémentaires..

Enfin, une fois que j'ai abandonné mon dossier, je reçois davantage de commentaires sous la forme d'un rapport d'avancement pour me faire savoir que le dossier est en route, prêt à être engagé..

La ligne en pointillé est devenue un modèle classique (excusez le jeu de mots) permettant aux utilisateurs de laisser tomber tout ce qu'ils traînent. Invision est un autre exemple, bien que la possibilité de réaliser une telle action ne soit pas aussi évidente, mais repose plutôt sur une certaine maîtrise de la part de l'utilisateur..

Et Basecamp fait quelque chose de similaire, bien que ce ne soit pas une ligne pointillée. De toute façon, bons commentaires.

Animation

Le mouvement est le moyen idéal pour faire des commentaires. nous sommes complètement habitués à voir des actions et des réactions dans le monde réel, alors pourquoi pas aussi sur le Web? Les concepteurs utilisent depuis longtemps des transitions subtiles sur les états de survol (par exemple), car elles aident l'utilisateur à comprendre la connexion entre avant et après. De nos jours, avec l'animation et le SVG, nous pouvons aller au-delà. Avez-vous aimé quelque chose sur Twitter récemment?

Cette mini-explosion nous permet de savoir, sans aucun doute, que notre action a conduit à quelque chose qui se passe.

Dans cet exemple, le thème Mode de commerce électronique pour WordPress illustre le comportement typique de Woocommerce. Lors de l'ajout d'un produit au panier, une vignette passe de l'image principale au panier en haut à droite de l'écran. C'est un excellent retour visuel, me permettant de savoir que j'ai placé quelque chose dans le panier et suggérant la prochaine étape pour terminer mon achat..

FcStore; Un autre thème de WooCommerce adopte une approche moins littérale, mais me propose une simple coche pour indiquer que j'ai ajouté mon produit au panier..

makethisyear.com

Les formulaires sont l'exemple classique de situations dans lesquelles les utilisateurs ont absolument besoin d'un retour d'informations. Le formulaire a-t-il été envoyé correctement? Ai-je tout gâché? Ici, Make This Year utilise une copie attrayante et cinq émoticônes de grande qualité. Clairement, je me suis inscrit à leur newsletter.

C'est été émotionnel

En vous concentrant sur la possibilité de découverte et les commentaires, vous garantissez que les utilisateurs se connectent à votre site Web. Exploitez leurs traits de comportement, aidez-les à comprendre et à prédire ce qui se passe, et vous leur ferez enfin sentir bien votre produit. Comme deux dernières références en matière d’inspiration, vous devriez consulter le livre Designing for Emotion d’Aarron Walter et le TED de Don Norman 3 façons dont un bon design vous rend heureux.