Dans son dernier billet, Raphaël de Robiano, consultant en ergonomie, a effectué un test utilisateur sur un site Web. Il soulève un détail intéressant en ce qui concerne les formulaires de recherche. Je cite :

Ce test a été l’occasion d’identifier un problème sur un des formulaires de recherche du site que j’aimerais partager avec vous.

Le champ de recherche était accompagné sur la droite d’un petit bouton permettant de valider les caractères introduits et de déclencher le processus de recherche. Ce bouton représentait un petit triangle pointant vers la droite.

Or certains participants au test ont pensé qu’en cliquant dans ce champ, ils obtiendraient une liste déroulante reprenant l’ensemble des produits de la compagnie. Et, en effet, il y a une certaine similarité entre le bouton déclenchant la recherche et celui des listes déroulantes classiques (la balise SELECT  pour les familiers du HTML).

D’autres participants ont bien identifié cet élément comme un formulaire de recherche, mais se sont fait la remarque qu’un bouton « search », « go » ou « ok » serait plus approprié.

Comme quoi, la présence d’un petit élément graphique, peut parfois avoir un effet significatif dans l’interprétation de l’interface d’un site.

Voulant approfondir et échanger avec vous sur le sujet, j’ai regardé ce qu’il en était des formulaires de recherche sur d’autres sites sélectionnés au hasard : Twitter, Amazon, Facebook , Linkedin, Skype , Orange et Cyberpresse.ca

Le formulaire de recherche de Twitter :

Le formulaire de recherche de Amazon :

Le formulaire de recherche de Facebook :

Le formulaire de recherche de Linkedin :

Le formulaire de recherche de Skype :

Le formulaire de recherche du site de Orange :

Le formulaire de recherche du site Cyberpresse.ca (Google ) :

Je remarque que la mention ” Rechercher ” est celle qui est le plus utilisée. Il arrive aussi qu’on l’accompagne des mots ” OK ” ou ” GO” . À mon avis,  je crois que la mention “Rechercher”inscrite directement dans le champ de recherche avec l’ajout  icône ( loupe ) à droite est un choix intéressant.

À titre d’information, je partage avec vous un un article dont je me suis rappelée après la lecture du billet de Raphaël de Robiano. L’article en question traitait les observations de Jakob Nielsen. Je cite le passage intéressant sur le sujet :

3- Le moteur doit ressembler à un moteur !

Le moteur de recherche doit être facilement repérable par l’internaute. Mieux vaut donc éviter les libellés « amusants » ou originaux pour le bouton de recherche: « chercher » ou « rechercher » convient mieux que « trouver », « OK », « allons-y ! » ou autres… éventuellement, « OK » ou « go ! » est acceptable, à condition que le mot « recherche » (ou : « rechercher dans monsite.com ») figure avant le champ de saisie, comme suit:

la recherche sur amazon.fr

De plus, il est préférable que le bouton de recherche soit facilement identifiable comme tel: un bouton standard de formulaire, même si son esthétique est moyennement appréciée des designers, présente l’avantage d’être immédiatement reconnu. Si vous choisissez d’utiliser une image, arrangez-vous pour qu’elle ait bien l’air d’un bouton: forme allongée aux extrémités arrondies, et/ou dessin ombré suggérant le relief.

|
a priori, aucun problème d’identification pour ces boutons

Qu’en pensez-vous.

Comment concevez-vous vos formulaires de recherche ? Quelles mentions avez-vous tendance à ajouter ? :   » Rechercher  » ,  » OK « , « GO » , une loupe, une flèche, ect.  ? Intégrez-vous tout simplement le mot  » Rechercher » dans le champ de recherche ? Vous arrive-t-il de choisir un autre terme que  » Rechercher  » ?

Avec l’avènement des médias sociaux et des contenus générés par les utilisateurs, certaines plateformes sociales ou portails sont devenus si denses que l’on ne sait plus trop ce qu’ils sont ou à quoi ils servent. Voilà pourquoi il y a généralement des pages « About » (ou « À propos » quand l’interface est en français).

Le problème est que ces fameuses pages « About » ne renseigne pas réellement sur le site, sa mission, son histoire et les fonctionnalités qu’il propose. Illustration avec le site Idealist :

En regardant la page d’accueil il est impossible de comprendre ou deviner l’activité de ce site. Par contre, la section « About » propose une page « First Time Users » tout à fait remarquable :

Toutes les informations utiles sont sur cette page :

• Une explication courte de ce qu’est le site, de son fondateur, avec un accès vers l’historique ;
• Une liste des grande fonctionnalités proposées avec des liens directs vers les sous-fonctionnalités ;
• Une visite guidée en vidéo pour ceux qui veulent prendre plus de temps.

Rien à redire, c’est du grand art : les phrases sont courtes et précises, sans possibilité de mauvaise interprétation. La mise en page est très sobre avec un cadre pour renforcer l’attention. La liste à puces est bien aérée pour faciliter la lecture à l’écran.

Un exemple à suivre.

L’option « Événements » de Facebook

Je me suis souvent questionnée sur l’efficacité de la présentation du bloc « Événements », situé dans le bas de la colonne droite de facebook.

À quelques reprises j’ai pensé qu’il s’agissait de l’anniversaire plusieurs connaissances en même temps. C’est le cas aussi pour quelques connaissances qui, par erreur, ont envoyé des souhaits à leurs copains quelques jours en avance.

Les journées sont-elles assez évidentes? Qu’en pensez-vous ?

Cet article est le début d’une série de billets portant sur des erreurs ergonomiques un peu partout sur le Web. N’hésitez pas à m’envoyer vos suggestions.

Voilà un petit bout de temps que je cherche à aborder le sujet des visites guidées (« demo tour » ou « product tour » en anglais). Très utiles pour valoriser votre offre voir indispensable quand vous devez faire preuve de pédagogie pour présenter un service complexe. Les visite guidée existent depuis de nombreuses années sous différentes formes : statiques (un seule page), séquentielle (plusieurs pages), animée (format flash), vidéo… Un exercice délicat qui demande de respecter certaines règles qui sont bien résumées ici : 16 manières de designer une page de tour.

Même si j’apprécie l’article précédemment cité, je trouve qu’il y manque un petit quelque chose… une visite guidée ultime qui serve de référence. J’ai longtemps cherché et je pense avoir finalement trouvé un très bon exemple : Get Glue.

Pour faire simple, Glue est une social bar qui vous accompagne dans votre navigation quotidienne. La page d’accueil du site est un bel exemple de minimalisme et de concision : une capture d’écran, une courte explication, des témoignages et trois boutons d’action (installation, visite guidée et démonstration vidéo).

La particularité de cette visite guidée est qu’elle est directement intégrée à la page d’accueil, vous ne changer pas d’écran et l’on vous présente les différentes caractéristiques du service en les illustrant sur la capture d’écran :

Les textes sont courts et le guidage est renforcé par des flèches qui pointent les zones d’intérêt et un ombrage sur le reste de la capture :

La visite guidée se termine par la proposition d’installation de l’application :

Donc au final nous avons une visite guidée d’une redoutable efficacité : peu de texte, des bénéfices et non une liste de fonctionnalités, une cinématique limpide et rapide à dérouler. Cette visite guidée est de plus secondée par une démonstration vidéo pour ceux qui souhaitent s’attarder plus de temps.

Bref, c’est du très bon travail même si je trouve qu’il manque dans ce site une page où seraient résumées les fonctionnalités et les bénéfices. Ce que j’apprécie particulièrement est le choix de la simplicité par rapport à des solutions plus sophistiquées ayant recours à une animation Flas plus longue à charger et lourde à manipuler.

Comme toujours, si vous avez de bons exemples, n’hésitez pas à publier l’URL dans les commentaires.

Pour faire suite aux articles de Frédéric « Tout savoir sur les chemins de navigation (breadcrumb) » et « Peut-on se passer des menus de navigation ? » voici une découverte très intéressante que je souhaite partager avec vous.

Il s’agit de l’article 37 Examples of Unique Navigation sur inspiredology.com.

J’ai particulièrement aimé ma visite sur les trois sites suivants :

Jaymeblackmon.com pour les rolovers du menu de navigation

Porsche.com pour les gros menus présentant les modèles de Porsches.

Salinas-rio.com.br pour l’ajout des illustrations dans le menu de navigation

Et vous, quels sont vos préférés ?

Lorsque vous vendez du service (ou même des produits avec beaucoup de caractéristiques techniques), il est essentiel de bien présenter les différentes offres et surtout de ne pas générer de la confusion chez le prospect. Plus facile à dire qu’à faire car vous pouvez avoir des offres très similaires ou complexes à présenter. Idéalement il faut un tableau comparatif qui donne envie et où chacun va trouver facilement l’offre qui lui correspond et se persuader qu’elle est mieux que les autres.

Pour attayer votre réflexion je vous propose donc deux très bons articles : Pricing Tables: Examples And Best Practices et Design Decisions: The new Highrise signup chart.

Dans le premier article, il est question des meilleures pratiques :

• Faire ressortir les différences et non les similitudes ;
• Mettre en avant un choix pour faciliter la prise de décision des indécis ;
• Ne pas surcharger le tableau pour pouvoir utiliser une typo plus grande ;
• Clôturer le tableau avec des appels à l’action simples.

Pour illustrer ceci, voici un exemple avec le très bon tableau des offres de CrazyEgg :

Dans le deuxième article, il est question de la refonte du tableau de présentation des offres de Highrise dont voici la version initiale :

Vous noterez le côté brouillon de ce tableau avec beaucoup de bruit et du contenu difficile à décrypter (trop de tailles de typo différentes, de couleurs et stimuli visuels). Voici la version finale :

Nous avons ici une page bien plus incitative avec une belle promesse au-dessus du tableau, moins de bruit, une meilleure segmentation (« For big groups, For small teams…« ) et des appels à l’action bien plus visibles. Vous noterez également qu’il existe une offre gratuite mais qu’elle est complètement mise en retrait (en bas à gauche du tableau).

Pour prolonger cette réflexion je vous engage à visiter les sites des constructeurs automobile US qui proposent  des Car Comparator très intéressants.

Pour compléter ma précédente liste de User Interface Patterns Library (cf. Vive les librairies de modèles de conception d’interfaces) je vous propose de découvrir une nouvelle bibliothèque qui s’illustre par son interface : Quince.

Les modèles sont ainsi répartis par tâches, tags et types de wireframe. À chaque mode de classement correspond une interface, ici la recherche par tâches :

Là, la recherche par tags :

Et voici enfin à quoi ressemble la fiche d’un modèle de conception :

C’est donc une interface très originale que nous propose cette bibliothèque de modèles de conception, un peu perturbante au départ mais finalement assez simple d’utilisation. Voici en tout cas un bon moyen de faire évoluer les mentalités et notamment les à priori vis à vis des interfaces riches. (via Usability Post)

J’ai récemment pris connaissance d’une technique en CSS sur le blogue de Mr Xhark. Cette technique permettrait, en quelque sorte, de diminuer le poids d’une page Web. Elle éviterait ainsi l’utilisation de Flash ou de Javascript pour ce genre d’effet. Le résultat n’a rien d’impressionnant, mais sur le plan de la simplicité je le trouve intéressant. À mon avis cet effet facilite la lecture.

Source de l’image : http://blogmotion.fr

Par contre, pour diminuer le risque d’erreur sur les photos j’aurais tendance à jouer avec l’opacité de celles-ci…  :

Qu’en pensez-vous ?

Quand vous étiez lycéens, vous aviez les « Profil d’une oeuvre » pour vous simplifier les fiches de lecture. Quand vous étiez étudiants, vous aviez les « Que sais-je » pour vous initier rapidement à une discipline. Maintenant que vous êtes en activité, je vous propose de découvrir les Mémentos Sites Web. Il s’agit d’une collection d’antisèches pour la conception web. Deux ouvrages nous intéressent particulièrement :

• Ergonomie Web, un condensé de bonnes pratiques pour rendre votre site plus attractif, plus percutant, plus fonctionnel… rédigé par Amélie Boucher d’Ergolab ;
• Bonnes pratiques, un résumé des 153 critères de qualité du référentiel Opquast rédigé par Elie Sloïm.

Inutile de vous dire que je suis plus qu’enthousiaste quand à ces deux fascicules extrêmement bien conçus et qui résument de nombreuses années d’expérience de conception de sites web.

Bref, une lecture indispensable pour tous les concepteurs / designers / chef de projet car cela permet de faire des « piqures de rappel ».

Je ne le répèterais jamais assez : Les formulaires sont les bêtes noires des internautes. Surtout quand il s’agit de saisir des données avec un format bien particulier comme un numéro de téléphone ou une date.

Mais rassurez-vous car la situation est en train de changer grâce aux assistants de saisie qui sont décris ici : Input Masks Design. Le principe est révolutionnaire : simuler le formatage des données lors de la saisie.

Illustration avec une première technique de Masked Input Plugin (cliquez sur l’onglet « Demo« ) :

Deuxième illustration avecle Dynamic Field Masking :

Je trouve ce principe révolutionnaire car il permet une bien meilleure appréhension du format à respecter sans pour autant perturber la saisie.

Dans le même genre il y a aussi la correction orthographique sur les formulaires de recherche de Transport-IdF mais qui est bien plus perturbante car très dirigiste (ne fonctionne que sur certains navigateurs).

En tout cas cette nouvelle variante de la saisie assistée mérite largement que l’on s’y intéresse, surtout si elle se dégrade correctement pour les navigateurs non compatibles (à vérifier).