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).

Voilà un très bon article qui vient d’être publié sur UsabilityPost : Experience vs. Function — a Beautiful UI is Not Always the Best UI. L’auteur y explique fort justement que le but d’une interface n’est pas de remporter un concours de beauté mais plutôt de bien restituer le contenu et les fonctionnalités. En d’autres termes : la meilleure interface est celle qui ne se remarque pas, celle qui s’efface pour laisser plus de place au contenu, celle qui supporte le mieux les fonctionnalités sans leur faire de l’ombre.

Illustration avec deux sites remplissant la même fonction (agrégation de news IT) : Newspond et HackerNews.

L’un propose une superbe interface avec de très beau effets graphiques (Newspond) :

L’autre est beaucoup plus sobre (à la limite de l’austérité) mais permet d’afficher beaucoup plus de news (HackerNews) :

Force est de constater qu’à l’usage le deuxième site est tout de même beaucoup plus productif. D’autres sites sont ainsi des modèles d’effacement face au contenu : Amazon, Ebay, Craiglist…

Tout ceci me fait penser à un vieux débat sur l’élasticité du design (un design moche rassure alors qu’un design trop sophistiqué peut rendre méfiant) : La règle de l’élasticité s’applique-t-elle au design des sites web ?.

Ce mois-ci, le pôle Conseil en ergonomie de Benchmark Group a mis en ligne les résultats d’une enquête très intéressante : “Ergonomie des sites Web : le verdict des internautes”. Cette enquête a été menée au cours du mois de novembre 2008 auprès des lecteurs du Journal du Net et de L’Internaute Magazine. L’enquête a recueilli 824 réponses.

Nous vous invitons fortement à la consulter.

Voici quelques informations à retenir :

1- 75% des internautes rencontrent encore «souvent» des difficultés pour trouver ce qu’ils cherchent sur les sites qu’ils consultent, et que 58% sont «souvent» confrontés à des problèmes de navigation.

2- 66% trouvent les contenus des sites «souvent mal présentés» et 47% «l’allure de la page d’accueil souvent peu engageante».

3- 7 internautes sur 10 ne reviennent pas sur un site où ils ont rencontré des problèmes de navigation ou d’orientation.

Finalement, voici un des schémas qui se retrouve dans les résultats de l’enquête que nous souhaitons partagez avec vous.

Qu’en pensez-vous ?

Source : PEG veille pour vous

Billet initialement publié sur Mikimya

Les formulaires de création de compte sont un grand classique du web. Exercice aujourd’hui bien maîtrisé (cf. Le formulaire parfait ?), il ne pose plus trop de problème. Et pourtant, les équipes de Cloudo nous propose une version encore améliorée avec notamment un système d’aide contextuel très performant :

Les points forts de ce formulaire :

• Une vérification de surface des champs (matérialisée par la petite coche) ;
• Un indicateur de “force” pour le mot de passe (plus ou moins dure à trouver) ;
• Un petit rappel pour la correspondance entre les deux champs Password (la double flèche).

Rien de très révolutionnaire mais des petites attentions qui font plaisir aux utilisateurs et améliorent l’intuitivité et préviennent les erreurs.

Si vous êtes à la recherche d’une étude de cas sur le ROI d’une démarche de refonte ergonomique, je vous propose celle-ci : The $300 Million Button.

300.000.000 de $, c’est le C.A. supplémentaire généré par une “simple” modification sur un formulaire. Incroyable ? Et pourtant vrai car celui qui raconte cette anecdote est Jared Spool, un des praticiens les plus reconnus de la profession.

Le nom du client n’est pas donné mais il est question d’un acteur de la distribution US (WallMart ? K-Mart ? Best Buy ?), toujours est-il que le problème venait du formulaire (et processus d’identification) de leur boutique en ligne : après avoir validé leur panier les clients devaient s’identifier ou créer un compte. Mais un test avec des utilisateurs a révélé que ces derniers ne souhaitaient pas toujours créer de compte, ils voulaient juste acheter en ligne.

La préconisation a donc été de créer un processus d’achat plus court sans création de compte. Résultat : une augmentation de 45% du nombre de transactions (+15M$ le premier mois et +300M$ la première année).

Pour la petite histoire, le problème était néanmoins plus profond car le système d’identification était défaillant et posait de gros problèmes (jusqu’à 160.000 demande de mot de passe par jour, gloups !).

Voilà un petit moment que les sites de vidéo en ligne trustent l’audience du web mondial. Extrêmement appréciés des internautes, ces sites n’en sont pas moins d’une pauvreté affligeante au niveau de leur interface. Vous pourriez me dire que l’important c’est le contenu et que si YouTube et Dailymotion sont si dépouillés, c’est pour mieux mettre en valeur les vidéos. Certes, il n’empêche que d’autres sites proposent une expérience bien plus plaisante avec plus de sophistication dans l’interface sans toutefois “éclipser” l’intérêt pour les vidéos. Je pense notamment à Hulu, un site de contenus vidéo “officiels”, qui propose une expérience utilisateur en rupture radicale avec les autres hypermarchés de la vidéo.

Dès la page d’accueil le ton est donné avec un remarquable travail au niveau de la grille de lecture, de l’harmonie des couleurs et des typos :

Rien à voir avec la page très déséquilibrée de YouTube (minuscules vignettes et colonne de droite trop courte) :

Pour Dailymotion c’est un peu mieux même si la densité d’information est trop forte :

Au niveau des chaînes thématiques c’est encore plus flagrant avec un très large bandeau identitaire pour Hulu et toujours ces zones de respiration très agréables (les espaces blanc entre les différents éléments) qui reposent l’oeil et concentre l’attention :

Chez YouTube il y a un peu plus de place pour respirer, peut-être trop car les 6 lignes de texte sous les vignettes sont difficiles à lire et force l’oeil à faire des sauts :

Chez Daillymotion la page est plus équilibrée mais la surabondance de vignettes (“Best of“), n’est pas très intuitive (est-ce la timeline d’un même film ?) :

Bref, je suis admiratif du travail réalisé sur Hulu, qui même sur les pages de vidéo conserve cette remarquable lisibilité et toujours beaucoup de “rondeur” dans les formes et couleurs. Hulu réussi le tour de force de nous reposer l’oeil là où YouTube à plus des airs de prospectus publicitaire.

Oui la critique est sévère mais je pense que les sites de vidéo en ligne, de part leur audience et la place qu’ils ont pris dans notre société de l’infirmation méritent un meilleur traitement et surtout plus d’attention de la part des concepteurs.

Petit à petit la blogosphère commence à se doter de blogs de plus en plus ciblés pour les métiers de la conception web. Nous connaissions déjà les sites “généralistes” comme Smashing Magazine, Boxes and Arrows ou encore Digital Web Magazine. Il y a aussi des portails comme UX Magazine et même des web TV comme l’Information Architecture TV.

Je vous propose de découvrir un blog entièrement dédié aux wireframes (autrement appellées maquettes fonctionnelles, storyboard ou zoning) : Wireframes Magazine.

Différentes techniques de wireframing sont ainsi commentées et analysées. Et puisque nous sommes dans le sujet, laissez-moi vous recommander d’autres sources :

• The what, when and why of wireframes, la génèse des wireframes ;
• La série d’articles sur les outils de conception publiée sur le blog SuperFiction ;
• The Fine Art of Wireframes, où l’auteur nous explique les mérites du prototypage papier ;
• Shades of Gray: Wireframes as Thinking Device, une très bonne étude de cas.

Bon tout ça c’est très bien mais maintenant que je viens de passer sous Mac je ne sais pas si je dois utiliser OmniGraffle ou Flash Catalyst…

(via This is Lovely!)