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].”

En effet loin d’être de simples exécutants, les intégrateurs sont souvent détenteurs d’un savoir et de compétences polyvalentes, car il faut bien l’avouer, ceux qui auparavant étaient regroupés sous le vocable fourre-tout de webmaster sont souvent des passionnés du web pour ne pas dire des accros ne comptant pas leurs heures de netsurfing afin de saisir toutes les subtilités qu’il est nécessaire de posséder pour arriver à concevoir le site parfait…

Prenez un intégrateur, immergez-le dans une entreprise pourvu d’un service webdesign et d’un service informatique, hésitez sur l’endroit où le placer Informatique ? non webdesign ! non informatique ! non webdesign ! non informatique ! Bref ! Demandez lui de recruter quelques-uns de ces pairs (lui seul est en mesure de les reconnaitre). Voilà votre pôle intégration constitué.

Maintenant il s’agit de faire sa place… XHTML strict, accessibilité, ergonomie, javascript non intrusif, il vous sera difficile au départ de comprendre son langage. Il manie des concepts dont vous comprenez mal l’intérêt. Il paraît se compliquer la vie et opter délibérément pour des choix à l’exact opposé des votres, Ces modèles : Eric Meyer, Jakob Nielsen, Dean Edwards, Dave Shea sont des parfaits inconnus pour vous ! Vous n’avez pas de leçon à recevoir de ces nouveaux venus, vous vous en êtes bien passé jusque là !!! Pourvu que vous lui accordiez un peu d’attention, vous verrez assez rapidement que « l’intégrateur » cette bête curieuse va rapidement vous faciliter la vie.

Plus sérieusement : qu’est-ce qu’un intégrateur ? Quel est son rôle ? Quelle doit être sa place ?

L’intégrateur maîtrise le code html ou xhtml, les styles en cascade (CSS) et a de bonnes notions de Javascript. Avec ces trois langages il est en mesure de vous construire une interface qui tient la route. En effet c’est lui qui va permettre de structurer les données dans la page web, chaque balise html ayant une utilité bien spécifique, il va donner de l’importance à la valeur sémantique de chacune. <h1> pour les titres, <p> pour les paragraphes, <ul><li> pour les listes non ordonnées, etc..; la liste est très longue mais sachez qu’il existe 91 balises html et que toutes ont une utilité bien particulière.

Vous l’aurez compris l’intégrateur attache plus d’importance au sens de chacune de ces balise qu’à ces qualités graphiques. Les styles CSS étant spécifiquement dédiés à cette utilité depuis que les fabricants de navigateurs ont eu la bonne idée, mais un peu tardive il faut bien le dire, d’ y implémenter les CSS. Il reste encore du boulot néanmoins, rendez-vous compte par vous même : compatibilité des css dans les navigateurs.

Une fois qu’il a structuré sa page, ajouté les styles pour rendre la page plus agréable, il ne lui reste plus qu’à ajouter quelques comportements qui devront être non-intrusif (ça veut dire que sans JS ça marche quand même ! Magique, non ?). Effectivement l’intégrateur a toujours une petite pensée pour les minorités : ceux qui n’ont pas flash, qui n’ont pas javascript, qui ont de petits écrans, des vieux navigateurs (enfin pas aussi vieux qu’IE6 , j’espère), de mauvais yeux, des mouvements peu surs, des connexions lentes, bref nous tous quoi ! :-)

Ce dernier point s’appelle l’accessibilité et sans pousser le bouchon trop loin, un zeste d’accessibilité dans un site ce sont des internautes en plus qui n’auraient certainement pas pu y naviguer…

Je ne parlerais pas d’ergonomie, ni de référencement, ni même d’interopérabilité parce que vous l’avez déjà compris un intégrateur ce n’est ni un développeur ni un webdesigner graphique, c’est bien autre chose ! Et le jour où une entreprise aura enfin compris ce qu’est la maitrise et la puissance de l’intégration, et bien ce jour là le web lui appartiendra ! (non je déconne là, vous emballez pas !) Enfin ce que je voulais dire c’est qu’intégrateur, c’est un métier !

Bon bah voilà, c’est dit. J’ai fini. vous aussi vous faites ce métier ? ah ouais ? Bon on n’est pas seuls alors… Et autrement ça se passe comment, vous ? Ah ouais ? Vous voulez pas nous en parler ? Dans les commentaires ? Ouais… parfait …

Les évolutions les plus récentes du web ont montré la supériorité écrasante des moteurs de recherche sur les arborescences (voir le triomphe de Google sur les Directories de Yahoo). Actuellement, plus d’un internaute sur deux, lorsqu’il « fouille » un site de ecommerce utilise en premier le moteur de recherche du site. J’ai, en fait, de plus en plus tendance à croire que les sites de ecommerce devraient s’orienter vers une morphologie de moteur de recherche, les éléments arborescents ne venant plus qu’à l’appui des résultats de recherche. L’exemple extrême serait d’imaginer la page d’accueil d’un site ecommerce identique à celle de Google, tout l’enjeu serait alors de fournir simplement les meilleurs résultats de recherche à l’internaute et d’oublier les classifications lourdes en arborescence qui rendent si longue et si fastidieuse la navigation sur des sites contenant parfois plusieurs dizaines de milliers de références.

Source : http://www.capitaine-commerce.com/index.php/2008/02/04/506-esquisse-d-un-moteur-de-recherche-pour-le-e-commerce

Alors que de nombreux sites de e-commerce continuent à aligner les onglets et les navigations compliquées au risque de perdre leur clients dans les dédales de leur site, à noyer leur moteur de recherche au milieu de publicités, macarons et autres messages promotionnels, quelques sites de grande envergure ont pris le pari de proposer une autre organisation au risque de dérouter leurs clients : dans le genre le site américain amazon.com fait très fort : plus d’onglets, une navigation à gauche qui reprend la liste des catégories de produit et un moteur de recherche très présent puisque le champs de saisie occupe plus de la moitié de la page dans sa largeur !

La Fnac, même si ce n’est pas aussi spectaculaire a également mis en valeur son moteur de recherche dans sa nouvelle version, Kelkoo propose une navigation innovante ainsi qu’un moteur de recherche très présent, like.com place son moteur de recherche tout en haut de la page avant toute autre information, une tendance à suivre ?

Pourquoi utiliser des pop-up ?

Le raisonnement que j’entends souvent est : « le contenu n’est pas assez important pour une nouvelle page ». Ce raisonnement aussitôt contredit par des demandes de pop-up de 650px sur 800 px … Pourquoi tant d’acharnement ??!!

Bien sur je ne parle pas des pop-up non sollicitées qui ne méritent même pas qu’on s’y arrête ne serait-ce qu’un instant, les navigateurs tels que Firefox ou Opéra, nous en débarassent sans que nous ne nous en rendions même compte.

Alors que la plupart des sites a abandonné cette habitude d’un autre temps, certains résistent encore et toujours bien que les arguments contre l’utilisation de ces petites fenêtres ne manquent pas :

Ergonomie :

1. Les utilisateurs en navigant sur leur site préféré ne s’attendent pas à ce que les liens sur lesquels ils cliquent ouvrent une autre fenêtre.
2. Une pop-up peut passer en dessous de la fenêtre principale si on clique malencontreusement sur cette dernière.
3. Si une pop-up est ouverte et se trouve sous la fenêtre principale toutes les pages ouvertes dans la popup (si elle n’est pas nommée ou porte le même nom dans toutes les fonctions d’ouverture de la popup) demeureront invisibles pour l’internaute qui croira se trouver en présence de liens non-fonctionnels.

Accessibilité :

1. L’ouverture d’une pop up perturbe la navigation notamment pour les personnes qui utilisent des aides techniques pour naviguer. En règle générale, l’ouverture d’une nouvelle fenêtre est déstabilisant pour les personnes aveugles.
   Il est de plus impossible de revenir à la page précédente par l’historique du navigateur.
2. Une popup est ouverte par une fonction javascript, sans js la popup ne s’ouvre pas à moins qu’on prenne le soin d’avoir recours à cette technique (ce qui est loin d’être le cas, le plus souvent) :

<a href="page.htm" onclick="window.open(this.href); return false;">

Il existe d’autres solutions beaucoup plus sympa pour afficher des informations sans changer de page à l’aide de javascripts non-intrusifs (il suffit de regarder les scripts et plugins proposés par des bibliothèques comme jQuery ou script.aculo.us)

Crédibilité :

1. les pop-up nuisent à l’image du site qui les utilise et donnent une impression générale d’amateurisme.
2. Les pop-up sont dans la plupart des cas associées à de la pub et bénéficient de moins d’attention de la part des internautes.

Contraintes des navigateurs :

Dans les navigateurs modernes, et ceci pour éviter les abus, il n’est plus possible d’intervenir sur les propriétés des popup (emplacement, redimensionnement, déplacement, etc.)

Conclusion : on ne devrait plus se poser la question, les popup, c’est NON !

Quelques liens pour poursuivre cette réflexion :

• The Jarrett-Zetie Rules of Pop- ups : http://www.ergologique.com/actualites/actus.php?id_actu=123
• Interview Jakob Nielsen sur JDN : http://www.journaldunet.com/itws/it_nielsen.shtml
• Créer des popup intelligentes : http://openweb.eu.org/articles/popup/
• Lazy, stupid and evil design : http://www.guardian.co.uk/technology/2005/jun/23/columnists.comment