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

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

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.

Dans 95% des cas, concevoir une interface reviens à assembler des briques “standards”. Dans mon jargon on appelle ça des modèles de conception (“design patterns” en anglais). Ces modèles sont à la fois issus de la façon dont le HTML traite les éléments d’interfaces basiques (champs, boutons…) mais également de l’accumulation de bonnes pratiques.

Et justement, quand il est question d’accumulation de bonnes pratiques, rien de telle que les librairies de modèles de conception d’interfaces. Je vous propose de partager avec vous ma liste de librairies. Certaines sont très complètes et actives, d’autres n’ont quasiment pas évoluées mais elles présentent toutes un intérêt.

Mes préférées :

• Welie, de loin la plus complète ;
• Yahoo! Design Pattern Library, de loin la mieux documentée ;
• UI Patterns, une librairie de plus en plus riche et très agréable à parcourir ;
• Pattern Tape, qui est une compilation de captures d’écrans.

Celles qui concernent les interfaces d’applications :

• Designing Interfaces, qui est issue du livre ;
• User Interface Design Patterns, qui est un peu limitée.

Celles qui concernent le E-commerce :

• Web Design Practices, qui n’est malheureusement plus alimentée mais apportent des stats très intéressantes ;
• Ecommr, une toute nouvelle librairie avec des tonnes d’exemples.

Voilà de quoi vous donner des nombreuses sources d’inspiration.

(via Use Design Blog)

La création d’un compte a toujours été une étape pénible pour les utilisateurs et problématique pour les concepteurs. Pénible car il faut nécessairement remplir de nombreux champs et passer par diverse étapes de validation de l’inscription (via Email de confirmation et tout le bazar).

Heureusement est arrivé OpenID, un système d’authentification décentralisé. Pour faire simple : vous créez une compte OpenID qui va vous servir d’identifiant unique sur les services compatibles. Résultat : le processus de création de compte est grandement simplifié et raccourci.

Illustration avec Tarpipe, un service de mashup sociale (dont je parle ici : Ping.fm + Yahoo! Pipes = Tarpipe).

Première étape, vous arrivez sur l’écran de création de compte (1 champ, 1 bouton) :

Deuxième étape, vous cliquez dans le champ et un panneau s’ouvre juste en dessous avec la liste des principaux fournisseurs d’identité (vous pouvez aussi cliquer sur “Other OpenID” pour saisir l’URL de votre propre service ou sur “Get OpenID” pour vous créer une identité) :

En cliquant sur un service, un champ “My username” apparait en dessous avec votre curseur dedans, le champ principal est pré-renseigné :

Vous saisissez directement votre nom d’utilisateur (sans avoir à cliquer) et le champ principal est également renseigné :

Vous tapez la touche “Return” et le panneau disparait. Ne restent plus que le champ (renseigné) et le bouton “Create account” :

Rien à redire, le processus est simple (très peu de clic) et intuitif (le curseur est positionné au bon endroit), le picto en forme de cadenas est là pour rassurer, il y a un minimum de bruit sur l’écran.

En cliquant sur le lien “Help” vous êtes redirigé vers la page d’aide d’OpenID (qui est également très claire) :

Inutile de vous dire que je trouve cette solution particulièrement bien adaptée pour faciliter l’inscription à un service. Bien évidement il faut posséder un compte OpenID mais cette solution facilite tellement al vie des internautes.

Vous n’aimez pas les écrans des distributeurs automatiques de billets (DAB) ? Vous préfériez des interfaces plus riches (RIA) ? Alors vous aimerez sûrement les nouveaux automates de Wells Fargo (WF). Cette banque américaine a en effet eu recours aux services d’une agence de design (Hot Studio) pour concevoir l’interface de ses nouveaux distributeurs automatiques :That design is money! A better ATM experience from Wells Fargo.

Le résultat est tout simplement bluffant avec des écrans d’une grande sobriété mais à la lisibilité parfaite. Ici la saisie du code PIN :

Et là un écran de confirmation avec un exemple de processus :

Juste pour rigoler je vous propose un avant / après du menu principal :

Rien à redire, c’est du très bon travail et cette nouvelle interface participera grandement à réduire les frictions (incompréhensions, frustrations, erreurs…) et à améliorer l’expérience d’usage.

/!\ Billet initialement publié sur FredCavazza.net.