Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Découvrabilité et rétroaction dans le design web

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Web Design Inspiration: Scrollin’, Scrollin’, Scrollin’
Best Photography Portfolio Themes for WordPress

French (Français) translation by Henri Lotin (you can also view the original English article)

Récemment Vox, avec 99% Invisible, a produit un court-métrage brillant au sujet d'une porte au dixième étage de bureaux de Vox Media. Mis à part de nombreuses autres portes, il met en vedette 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 facilité d’utilisation des produits et systèmes, basée sur deux principes fondamentaux du design centré sur l’humain : découvrabilité et rétroaction.

Découvrabilité

« Que dois-je faire ? » Lorsque vous rencontrez un objet, un produit ou un système quelconque, vous devez comprendre comment interagir avec lui. Un manque de découvstabilité vous pousse simplement à n'avoir aucune idée de comment utiliser quelque chose.

Rétroaction

« Que qu'est-il passé ? Une fois que vous avez posé une action avec votre objet ou système, certains éléments de rétroaction doivent vous informer de ce qui s’est passé et pourquoi. Sans rétroaction, vous vous retrouvez dans le noir.

Nous allons jeter un oeil à quelques exemples d’interfaces et de produits sur le web qui montrent le bon usage de ces idées.

Nous allons commencer avec la découvrabilité ; tout site Web, que ce soit pour le commerce électronique, pour un portfolio, pour du marketing, pour un produit ou service ou toute autre chose, aurez besoin de faire comprendre aux utilisateurs ce que l'on attend d’eux. La page d’accueil de CodePen utilise une ligne de courroie aaccrocheuse suivie d’une proposition de valeur claire, avant de mener l'œil vers le bas et en offrant aux nouveaux visiteurs deux lignes de conduite claires.

Il y a plusieurs discussions sur le web au sujet de l’efficacité des boutons « fantôme » (où le bouton n’a aucun remplissage, juste une bordure), parce qu’ils ne ressemblent pas nécessairement à des boutons. Cela pourrait entraver la découvrabilité, mais je vous laisse vous faire votre propre opinion là-dessus.

httpsenduolingocom
duolingo.com

Duolingo, la plate-forme préférée d’apprentissage des langues de tout le monde (n'est-ce pas ?) a rendu sa page d’accueil encore plus claire pour les nouveaux utilisateurs. Il y a un bouton, très évident, très interactif au centre de l’écran. Et si je le clique, je sais exactement ce dans quoi je m'embarque.

Ces deux premiers exemples sont des « Appels à l’Action » (CTAs) bien exécutés. En tant que propriétaires de produit nous souhaitons que les utilisateurs se sentent obligés de poser des actions, mais faire un bouton grand, rouge et brillant n’est pas suffisant. Au-delà d’être visuellement évident, un CTA a besoin d'aider les utilisateurs à comprendre ce pour quoi ils prennent action.

httpwwwspotify-valentinescom
www.spotify-valentines.com

La récente promotion de Spotify pourrait la Saint-Valentin, où vous pouviez envoyer une note d’amour au moyen d’une playlist, était (comme toujours) esthétiquement superbe. Mais le chemin vers l’action aurait pu être plus clair. C’est évident que nous voulons des résultats, mais l’instruction (qui agit comme un CTA) ne fait rien en réalité. Au lieu de cela nous nous attendons à défiler vers le bas, ce qui peut pour certains donner l'impression de défiler loin de l’action, qu'ils veulent prendre.

En revanche, voici un exemple d’une action très détectable : l'humble bouton play.

httpvalioconcom
http://valiocon.com/

Avec des hectares d’espace vierge, cet icone circulaire encourage les utilisateurs à poser une action. L’icone de lecture est universellement reconnu, et sa forme en elle-même suggère la direction ; une prochaine étape. Appuyez-le et la vidéo se lancera.

buddyapp

BuddyApp, un thème pour la plate-forme communautaire BuddyPress de WordPress, nous donne deux options possibles ici, mais nous montre clairement quel est le chemin privilégié de souscription.

Accessibilité

Toutes les découvrabilités dont nous avons discuté jusqu'à présent supposent une chose très importante : que 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 comment cela affecte ceux qui ont une déficience visuelle, physique ou cognitive ?

A11y

Je ne pourrai jamais assez recommander que vous jetiez un œil au cours de John Hartley, Guide du débutant à l’accessibilité du Web. À 2 h 30, c’est un guide sérieusement complet sur ce que l’accessibilité signifie pour le web et comment vous pouvez en faire une partie de votre flux de travail.

GitHub, de nos jours, permet aux utilisateurs de pousser les fichiers vers les dépôts, directement via l’interface web. En ce qui concerne la découvrabilité cette commande est assez claire. Il y a même une façon de procéder alternative, clairement présentée, devrions nous en avons besoin.

Une fois que je fais glisser mon fichier dans la fenêtre, j'ai ensuite un changement d’état comme rétroaction que mon action a été reconnue : des lignes interrompues et plus d’instructions.

Enfin, une fois que j’ai déposé mon fichier, j’ai plus de rétroaction sous la forme d’un rapport d’étape pour me faire savoir que le fichier est en cours, prêt à être validé.

La ligne interrompue est devenue un modèle conventionnel (excusez le jeu de mots) pour les rétroactions, en disant aux utilisateurs de déposer tout ce qu’ils font glisser. Invision est un autre exemple, bien que la découvrabilité d’une telle action ne soit pas aussi évidente, au contraire elle s’appuie sur une certaine maîtrise de l’utilisateur.

Et Basecamp fait quelque chose de similaire, bien que ce ne soit pas une ligne en pointillés. Quoi qu’il en soit, bonne rétroaction.

Animation

Le mouvement est le moyen idéal pour communiquer une rétroaction ; nous sommes totalement habitués à voir l’action et la réaction dans le monde réel, alors pourquoi pas aussi sur le web ? Depuis une longue période les designers utilisent des transitions subtiles sur les états de survol (hiver, ndlt) (par exemple) parce qu’ils aident l’utilisateur à comprendre le lien entre l'avant et l'après. De nos jours, avec l'animation et le SVG, nous pouvons aller au-delà. Avez vous aimé (liké) quoi que ce soit sur Twitter récemment ?

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

Mode

Dans cet exemple, le thème ecommerce Mode pour WordPress montre un comportement typique de Woocommerce. Après l’ajout d’un produit au panier, une miniature fait une transition en l’image principale vers le panier en haut à droite de l’écran. Il s’agit d’une excellente rétroaction visuelle, me laissant savoir que j’ai placé quelque chose dans le panier et ce qui semble indiquer où je peux aller ensuite pour compléter mon achat.

fcstore

FcStore ; un autre thème WooCommerce, adopte une approche moins littérale, il m’offre à la place, une simple case à cocher pour indiquer que j’ai ajouté avec succès mon produit au panier.

httpmakethisyearcom
makethisyear.com

Les formulaires sont l’exemple classique des situations où les utilisateurs ont absolument besoin de rétroaction. Le formulaire a-t-il correctement été envoyé ? Ai-je foiré quoi que ce soit ? Ici, Make This Year utilise une rédaction de belle prestance et un emoji de louanges à bon escient. Clairement, j’ai souscrit à leur newsletter.

Ça a été émouvant

En mettant l’accent sur la découvrabilité et la rétroaction, vous allez vous assurer que les utilisateurs se connectent à votre site Web. Puisez dans leurs traits comportements, aiderz-les à comprendre et à prévoir ce qui passe et vous aurez finalement heureux à utiliser votre produit. Comme deux dernières références pour vous inspirer, vous devriez lire le livre de Aarron Walter  Designing for Emotion et le TED talk de Don Norman 3 ways good design makes you happy.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.