Qu’elle soit intuitive, claire, que le regroupement des catégories soit logique, que les risques d’erreurs soit limités, que les messages d’information soient clairs ?
Tout ça et bien d’autres choses encore.

Je voudrais aujourd’hui parler plus particulièrement des boutons d’actions que ce soit des boutons de validation de formulaire ou des liens de navigations.

En général et dans la plupart des sites professionnels il sont particulièrement mis en valeur (avec plus ou moins de succès) pour que l’internaute sache comment naviguer et comment valider ses formulaires. Dans la vraie vie, en appuyant sur un bouton on s’attend à ce qu’il s’enfonce ou du moins qu’il réagisse à notre action par un changement d’état ou par l’émission d’un son. Je me demande pourquoi cette convention parfaitement adaptée aux interfaces de sites web n’est pas appliquée systématiquement, surtout que pour les boutons de validation, le langage html intègre ce comportement par défaut ? Dans la plupart des cas le mode :hover et préféré au mode :active, si bien qu’on a l’impression d’avoir une réponse en décalage avec l’action. Je survole le bouton = changement d’état (voire état enfoncé), je clique = rien. ça peut paraitre anodin comme ça mais testez la différence sur un site qui se rapproche d’une interface physique avec des changement d’état au clic et vous me direz quelle version vous préférez.

Le site web Metalabdesign.com, est un bon exemple de mise en application de ce principe :

Il y est question de différentes solutions regroupées sous l’appellation « engagement progressif », permettant à vos visiteurs de comprendre et d’utiliser votre service avant (ou pendant) l’inscription, en évitant autant que possible le classique et indigeste formulaire d’inscription.

Les formulaires d’inscription doivent disparaître

Nous sommes heureux de vous présenter un extrait du chapitre 13 du prochain livre de Luke Wroblewski : Web Form Design: Filling in the Blanks (Rosenfeld Media, 2008). — Ed.

Je vais simplement dire ceci : les formulaires d’inscription doivent mourir. Dans l’introduction de ce livre, je décris le processus de découverte ou de recommandation d’un service web. Vous arrivez sur le site, empressé d’essayer ce nouveau service, et que trouvez-vous en guise d’accueil ? Un formulaire d’inscription.

Nous pouvons faire mieux. En fait, je pense que l’on peut amener des personnes à utiliser un service web en leur expliquant comment il fonctionne, et pourquoi ils devraient l’utiliser. Je pense également que nous pouvons y parvenir sans leur faire remplir un formulaire dès la première étape.

Mais avant d’aborder le potentiel de l’engagement progressif (la route vers un enregistrement « imperceptible »), regardons comment fonctionne le processus d’engagement classique pour un service en ligne. 2007 fut une grande année pour la vidéo en ligne. Nous pouvons supposer que nombre de personnes se connectent aujourd’hui pour publier une de leurs vidéos. Peut-être ont-ils entendu que Google Video était un bon service pour y parvenir. Dès l’arrivée sur le site, ils trouvent un lien pour partager leurs vidéos, et que se passe-t-il ensuite ? Le formulaire illustré sur la figure 13.1. apparaît.

Figure 13.1
Un formulaire d’enregistrement accueille les nouveaux clients de Google Vidéo.

Vous devez leur donner votre adresse email, choisir un mot de passe, indiquer votre nom, votre adresse, déchiffrer cet étrange mot, accepter les conditions d’utilisation et enfin, vous verrez ce qu’il y a après ce formulaire.

Contrastons maintenant cette approche avec celle d’un autre service vidéo en ligne : Jumpcut. Sur la page d’accueil, les actions principales sont « Make a movie » (Créer un film) et « Try a demo » (Démonstration), comme illustré sur la figure 13.2 (Ndt : la page a changé : un bouton « Register » -Créer un compte-, dirigeant sur l’identification ou la création d’un compte Yahoo, a pris place au centre de la page…). Jumpcut vous explique immédiatement comment fonctionne leur service, et en quoi il peut vous intéresser. Allons-y.

Sélectionner « Make a movie » (Créer un film) affichera un simple champ permettant saisir le titre de votre vidéo, et quelques options que vous pouvez utiliser pour envoyer les différents fichiers utilisés pour la création de votre vidéo. Choisir « Upload » (Téléchargement) dans cette liste vous permettra d’ajouter des images, du son et de la vidéo depuis votre ordinateur. Ceci fait, vous êtes dirigé vers l’outil de création vidéo en ligne de Jumpcut. Vous pouvez modifier votre vidéo, ajouter des styles, coordonner vos sons, vidéos, images, etc.

Figure 13.2
Le processus d’ajout de vidéo à Jumpcut vous présente le service que propose le site : l’édition vidéo en ligne.

Jusqu’à présent, aucun formulaire. Ce n’est qu’au moment où vous voudrez publier ou partager votre film que Jumpcut vous demandera votre nom et votre email, ainsi vous et les autres utilisateurs pourrez accéder au film que vous venez de créer. A travers ce processus, vous avez vu ce que permettait de faire Jumpcut, et cela sans avoir à passer par un formulaire d’inscription. Il s’agit d’un engagement progressif.

Voyons un autre exemple. Geni est un service web permettant à quiconque de créer un arbre généalogique et de le partager avec ses amis ou sa famille. Quelle est la première chose que les clients potentiels doivent faire en arrivant sur Geni ? Remplir un formulaire d’inscription ? Non, ils créent un arbre généalogique. Après tout, c’est ce pourquoi Geni est fait.

La page d’accueil de Geni (Figure 13.3) indique clairement ce que propose le site. On commence par créer une famille en entrant son nom et son adresse email. Ensuite, vous pouvez entrer vos parents, leurs frères et sœurs ou les vôtres, et en quelques instants, vous obtenez un petit arbre généalogique. Pendant ce temps, Geni vous a envoyé un email contenant votre nom d’utilisateur et votre mot de passe : vous pourrez ainsi revenir sur votre arbre généalogique quand vous le désirerez.

Figure 13.3
La création d’un arbre généalogique sur Geni ne contient pas de formulaire d’enregistrement explicite et informe immédiatement les utilisateurs.

Encore une fois, au travers du processus d’engagement progressif, vous avez appris ce que proposait un service web, et ceci sans inscription explicite vous obligeant à fournir une certaine quantité d’informations. Dans le cas de Geni, l’approche de l’engagement progressif leur a donné cinq millions d’utilisateurs en cinq mois. Pas mal.

Un autre exemple d’engagement progressif nous est proposé par TripIt : ce service web propose aux utilisateurs d’assembler un itinéraire de voyage complet, comprenant la météo et les feuilles de route, en utilisant uniquement leurs emails de confirmations de vols, d’hôtels et de location de voiture.
La première étape pour commencer à utiliser ce service est d’envoyer à TripIt un email de confirmation d’un voyage passé ou à venir. TripIt vous renverra un email vous permettant d’accéder à un itinéraire de voyage personnel créé automatiquement (Figure 13.4).

Figure 13.4
Pour commencer à utiliser TripIt, il faut lui renvoyer ses emails de confirmation, et pas s’inscrire en utilisant un formulaire.

Encore une fois, la première étape pour utiliser TripIt n’est pas de s’inscrire en passant par un formulaire. A la place, vous découvrez le service tout en l’utilisant. TripIt récupère votre nom et votre email à l’aide des emails que vous renvoyez au service. Ensuite, si vous voulez modifier votre nom, votre email, ou créer un mot de passe pour accéder au site, vous pouvez le faire. Il y a de grandes chances pour que vous le fassiez, maintenant que vous savez en quoi consiste ce service et ce qu’il peut vous apporter.

En étudiant si l’engagement progressif peut être utilisé sur votre service web, il est important de penser à la façon dont une série d’interactions pourrait expliquer à vos clients potentiels comment ils peuvent utiliser le service et ce qu’il peut leur apporter. L’engagement progressif ne consiste pas simplement à répartir les champs de votre formulaire d’inscription en plusieurs pages séparées.

Je salue volontiers la tentative de Fidelity’s myplan de simplifier leur formulaire de planification de placements financiers (Figure 13.5), mais je ne suis pas sûr que séparer leurs différents champs de saisies en plusieurs pages sous forme de curseurs glissants soit le meilleur moyen d’atteindre leur but, qui est d’expliquer aux visiteurs ce que Fidelity peut faire pour eux.

Figure 13.5
Le formulaire de Fidelity’s myplan divise une série de champs de saisie en plusieurs curseurs glissants, présentés l’un après l’autre.

Bonnes pratiques

• En étudiant la première expérience d’un utilisateur sur votre site web, pensez à la manière dont vous pouvez éviter l’utilisation d’un formulaire d’inscription en faveur d’un engagement progressif.
• Si vous optez pour une solution d’engagement progressif, assurez-vous qu’elle apporte à vos clients potentiels des informations sur le fonctionnement de votre service, et ce qu’il peut leur apporter.
• Si vous choisissez d’auto-générer les comptes de vos clients potentiels, assurez-vous qu’ils disposent d’un moyen clair d’accéder à leur compte. Il y a des chances pour que les utilisateurs ignorent ou ne voient pas votre email confirmation indiquant la création de leur compte, et qu’ils ne sachent pas exactement s’ils ont un compte ou pas.
• Evitez les solutions d’engagement progressif qui répartissent simplement les différents champs de votre formulaire d’inscription sur plusieurs pages. Il y a de fortes chances que cela en réduise l’efficacité, sans pour autant l’alléger.

Translated with the permission of A List Apart Magazine and the author[s].”