Connaissez-vous Hipmunk ? Mais si enfin, un moteur de recherche de vols qui en quelques mois est devenu la nouvelle coqueluche de la Silicon Valley : Hipmunk’s dazzling new view of flight search, Hipmunk Is a Fantastic, Surprisingly Usable Flight Search Site… Pourquoi un tel engouement ? Tout simplement parce que Hipmunk est un service beau, simple et efficace à utiliser. Ce postulat vous semble peut-être simpliste, mais c’est ce qui a fait le succès de Google face à des portails devenus trop chargés et complexes (un peu comme les portails de voyage en fait). Jusqu’à présent, la référence en matière de recherche de vols d’avion était selon moi Orbitz :

Mais maintenant que j’ai testé Hipmunk, je suis accro ! Cette nouvelle expérience de recherche commence donc par une page d’accueil ultra-simple composée uniquement d’un formulaire de recherche simplifié (ça ne vous rappelle pas Google ?) :

Je n’ai pas grand-chose à redire sur ce formulaire, si ce n’est la visibilité des liens en haut à droite (deux onglets et un petit bouton à gauche de « Search » auraient un meilleur impact).

Arrive ensuite la page de résultats à la lisibilité exemplaire :

La clé de cette lisibilité réside dans une représentation visuelle très riche en couleurs (pour focaliser l’attention et faciliter la comparaison) et une absence de « bruit » (pas de distraction inutile). En fait cette interface est plus complexe qu’elle ne le laisse voir au premier abord (principe de simplexité), il est ainsi possible d’activer un certain nombre de tris, filtres et fonctionnalités en explorant les zones périphériques :

Sur cette page nous trouvons donc :

1. Des tirettes pour ajuster la plage horaire (départ / arrivée) ;
2. Un basculement vers les jours suivants (filtre par date de départ) ;
3. Un filtre par usages (pas de départ la matin, pas d’escale…) ;
4. Des regroupements de vols aux caractéristiques similaires (pour n’afficher que le plus intéressant) ;
5. Les détails du vol affichés au survol de la souris ;
6. Une aide en ligne.

Il y a également des options de tri discrètes, mais très bien positionnées (« Sort by« ) ainsi qu’une indication du vol le moins cher (en bleu dans la colonne de gauche). La manipulation de l’interface est parfaitement intuitive et le jeu de couleurs des fonds de lignes permet de faciliter la compréhension.

Bref, c’est du très bon travail. Cette interface devrait en inspirer plus d’un !

Et si vous avez encore un peu de temps à accorder à Hipmunk, je vous recommande vivement un détour par le blog officiel du service qui est un modèle de proximité (montrer un visage humain du service) et de transparence (un ton éditorial très accessible) : @theHipmunk Blog.

En cette période de Noël, le commerce en ligne n’a jamais aussi bien marché en France. Et pourtant… la plupart des boutiques en ligne proposent une expérience d’achat massacrée par la page de paiement, ou plus précisément par la page de saisie de la carte bancaire.

Illustration avec Archiduchesse, une boutique particulièrement soignée jusqu’à son tunnel de transformation et la page de sélection du moyen de paiement :

Vous choisissez un type de carte bancaire… et là c’est la catastrophe :

Une page en complète rupture avec la charte graphique / ergonomique du site :

• un fond de page beige sale (pourquoi ne pas utiliser des logos avec un fond transparent ?) ;
• une typographie anachronique (qu’est-ce que ça leur coûte d’utiliser de l’Arial ?) ;
• une organisation chaotique (le champ de saisie des trois chiffres positionné dans le coin du double cadre est invisible) ;
• une hiérarchie visuelle incohérente (pourquoi le bouton d’annulation est-il trois fois plus gros que celui de confirmation ? Pourquoi ce même bouton est positionné sous un page break ?)

J’imagine qu’il y a d’innombrables contraintes de sécurité (un argument bien pratique pour celui qui n’a pas envie de se casser la tête), mais nous parlons bien ici d’une ignominie. Ce qui me met en rogne (en tant que professionnel mais également en tant qu’acheteur) c’est qu’il n’y aurait absolument aucun impact à revoir l’organisation et la mise en forme de cette page.

J’imagine que les informaticiens en charge de la maintenance de cette page doivent se conformer à la célèbre maxime « Si ce n’est pas cassé, pourquoi le changer ?« . Pour augmenter le taux de transformation bien sûr ! En provoquant une rupture complète dans l’expérience d’achat, vous mettez le doute dans la tête des acheteurs (« Suis-je toujours sur le bon site ?« , « Où est passé ma commande ?« …). Ceci est d’autant plus dommageable que la saisie de ses numéros de carte bancaire est une étape anxiogène.

Autre exemple encore pire chez Rue du Commerce où la page de confirmation n’est déjà pas terrible (il faut cocher les deux cases d’acceptation des CGV dans le cadre invisible en bas de page) :

Une fois cliqué sur le type de carte bancaire que vous souhaitez, on retrouve une page légèrement différente du premier exemple, mais tout aussi déroutante :

Un effort a visiblement été fait pour améliorer la mise en page et la lisibilité (quoique le contraste est trop fort) sur cette page. Par contre vous remarquerez qu’ils ont inséré l’ancien bandeau de navigation dans le haut de page. Non seulement ce bandeau n’a rien à faire sur cet écran (où l’attention doit être focalisée sur la saisie des numéros) mais en plus les onglets ne sont pas cliquables ! J’imagine que les informaticiens qui ont conçu la page étaient très fiers de pouvoir afficher en haut de page la mention « Cryptage SSL » en rouge, mais peut-être devrait-on leur expliquer que le jargon technique ne rassure personne s’il n’est pas expliqué quelque part…

Pourtant il est tout à fait possible de proposer une expérience d’achat cohérente comme sur le site de la Fnac où la saisie des numéros de carte est directement intégrée à la page de récapitulatif :

Je ne suis pas le mieux placé pour vous expliquer en détail les impacts techniques et financiers de la mise en oeuvre d’une telle solution, mais du point de vue des clients (le seul qui compte réellement), l’expérience est nettement plus agréable.

Je milite donc pour convaincre les opérateurs de paiement en ligne de faire un effort de présentation. Et je vous engage à faire de même !