L’acte d’achat en ligne n’est pas une démarche naturelle, il requiert une contextualisation particulière de l’offre et une mise en scène très soignée chez les e-commerçants. Au cours du processus d’achat, le panier est une des étapes/pages les plus importantes, car il est la charnière entre le parcours client et le tunnel de commande. Je vous propose ainsi d’étudier un certain nombre de trucs et astuces publiées chez mes confrères.

Commençons avec cette très belle infographie de Monetate qui résume un certain nombre de bonnes pratiques : Shopping Cart Abandonment and Tips To Avoid It.

Nous avons ensuite cette check-list de GetElastic sur les leviers de création de confiance (9 Ways to Build Trust in Checkout) :

• Acquérir un certificat SSL ;
• Affichier des badges de sécurité (comme celui de FIA-Net ou le tout récent Google Trusted Stores) ;
• Utiliser la bonne terminologie dans vos boutons (« Paiement sécurisé« ) ;
• Afficher un lien vers la politique de confidentialité ;
• Fournir des explications sur le code de sécurité (de préférence avec une illustration du dos d’une carte bancaire) ;
• Proposer un tchat ou un rappel immédiat du service client ;
• Fournir des explications complètes, ou un lien vers les conditions d’expédition à l’étranger ;
• Proposer des systèmes de paiement alternatifs ;
• Afficher une adresse physique.

Chez ClickZ ils proposent également une série de bonnes pratiques (3 Shopping Cart Promotional Tactics for the Holiday Season) :

• Ajuster les frais de livraison en fonction du montant du panier (notamment pour les « petits » paniers dont le montant est inférieur aux frais de livraison) ;
• Offrir la livraison au-delà du seuil psychologique des 100$ (ou 100€) ;

  

• Aligner les promotions individuelles sur le taux d’abandon des produits.

Les rédacteurs de GetElastic ont également publié un article fort intéressant sur le moyen de créer un sentiment d’urgence : Creating Urgency on the Shopping Cart Page.

Dernier conseil chez Monetate qui insistent sur l’affichage d’éléments de réassurance au plus près du bouton de passage à l’acte : Cart Messaging Matters, We Guarantee It.

Avec ça, vous pouvez donc faire le plein de bons conseils et astuces pour améliorer l’efficacité de votre panier. Sachez qu’il existe d’autres astuces, comme par exemple les techniques de récupération de paniers abandonnés (8 Tips for Recovering Abandoned Shopping Carts).

Même si je suis convaincu de l’importance « stratégique » du panier dans l’acte d’achat, il y a également de nombreux points à surveiller / améliorer au niveau du tunnel de commande, mais ça fera l’objet d’un autre article. Pour patienter, je vous propose cette vidéo satyrique publiée par les équipes de Google Analytics :

La suite en seconde partie de mois…

Voilà maintenant près de 4 ans que l’iPhone a été présenté au grand public, et 4 ans que les concepteurs d’interfaces mobiles se creusent la tête pour pouvoir exploiter au mieux la taille réduite de l’écran. Outre cette contrainte au niveau de la surface utile d’affichage, les applications mobiles ne sont utilisées que de façon intermittente, la prise en main doit donc se faire très rapidement pour ne pas frustrer les utilisateurs (cf. iPhone Apps Need Low Starting Hurdles).

Autant sur un ordinateur et dans le cadre d’une application traditionnelle, les utilisateurs tolèrent de passer un peu de temps à apprendre les fondamentaux de l’interface et la logique de l’application (après tout vous n’installez pas si souvent de nouveaux logiciels sur votre ordinateur). Sur les smartphones, et plus particulièrement l’iPhone, le contexte est différent, car l’utilisation quotidienne est répartie sur une multitude de petites applications. Les utilisateurs d’iPhone sont également amenés à télécharger et installer plusieurs nouvelles applications par semaine (du moins pour les plus assidus). Il est donc inconcevable de leur faire lire un manuel ou de leur imposer une longue séquence d’apprentissage. Les iOS Human Interface Guidelines publiées par Apple sont d’ailleurs très explicites sur la nécessité de se concentrer sur la tâche principale et d’apporter une satisfaction immédiate.

Le blog InspireUX nous propose à ce sujet un très bon article sur les différentes façons de faciliter la compréhension d’une interface et son fonctionnement : Top 6 Help Design Patterns for iPhone Apps. L’auteur a ainsi identifié 6 design patterns :

• Les vidéos de démonstration qui présentent les fonctionnalités principales de l’application. Une solution intéressante, mais coûteuse à produire et frustrante pour les utilisateurs les plus impatients (et ils sont nombreux). Exemple avec l’application Convertbot :

  

• Les tutoriels, généralement présentés écran par écran. Une solution simple et legère, mais qui n’est pas forcément évidente à trouver une fois proposée à l’initialisation de l’application. Exemple avec l’application FLUD :

  

• L’écran aide en sur-impression qui s’affiche sur sollicitation de l’utilisateur. Une solution simple et efficace, mais qui ne convient pas aux interfaces complexes qui nécessitent de longues explications. Exemple avec l’application Pulse News :

  

• Les visites guidées qui proposent une cinématique complète des différents écrans. Une très bonne entrée en matière mais, qui condense l’apprentissage en une seule session. Exemple avec l’application Shopkick :

  

• Les écrans d’aide qui sont associés aux fonctionnalités (« Tips« ). Cette solution permet de fragmenter l’aide et de proposer des explications beaucoup plus courtes et surtout directement en rapport avec l’écran en cours de consultation. Exemple avec l’application Evernote :

  

• Les aides contextuelles qui sont affichées en sur-impression lors de la première visite et disparaissent au bout de quelques secondes. C’est la solution que je préfère car elle fait un très bon usage de la contextualisation, mais ne peut pas délivrer de trop longues explications. Exemple avec l’application Instagram :

  

Voici donc une très belle collection de solutions d’aide et de prise en main pour les smartphones. Je suis intimement convaincu qu’une solution n’est pas forcément meilleure que les autres, car tout dépend de l’application en question (de la richesse de son interface et du nombre de fonctionnalités proposées). Il n’empêche que, comme toujours, le mieux est de combiner les solutions présentées plus haut :

• Une démo avec captures d’écran qui présente l’application dans les grandes lignes. Ce tutoriel est imposé lors de la première ouverture de l’application (avec la possibilité de le sauter) et est facilement accessible sur l’écran d’accueil.
• Des tutoriels qui résument en quelques étapes les fonctionnalités-clés.
• Une aide contextuelle en plein écran qui vient s’afficher en surimpression lorsque l’in clic sur l’icône d’aide (qui est présent sur chacun des écrans).

La démo ainsi que les tutoriels peuvent également servir sur le site web de l’application pour en assurer la promotion et pour nourrir la partie « Support ». Si vous avez de bons exemples d’applications qui combinent ces différentes méthodes, n’hésitez pas à les mentionner dans les commentaires.

Souvenez-vous il y a quelques temps je vous avait parlé de Moblin, un système d’exploitation pour Netbooks sur lequel intel travaillait (Quelle interface pour le système d’exploitation de demain ?). Aujourd’hui ce projet n’existe plus car il a été fusionné avec le projet de système d’exploitation Maemo de Nokia pour être renommé en MeeGo. Vou suivez ? Bon bref, ce que vous devez retenir est que MeeGo ambitionne d’être une plateforme de développement multi-terminaux mobiles, donc qui va pouvoir équiper aussi bien les netbooks, que les smartphones, que les téléphones standards, que les TV, que les ordinateurs de bord de véhicules…

Se pose donc le problème de l’uniformisation de l’interface mais également de l’expérience utilisateur. Une première version pour netbooks a été publiée le mois dernier auprès de la communauté : MeeGo v1.0 Core Software Platform & Netbook User Experience project release. Cette première version reprend les fondamentaux de l’interface de Moblin avec sa barre de tâches en position haute (ils ont rajouté un peu de couleurs) :

Nous avons également vu dernièrement la version pour smartphones faire son apparition : MeeGo for netbooks and smartphones gets Chrome and Fennec. Même si certaines règles semblent communes (le fond sombre pour les icônes du haut d’écran, le flux d’activité…) nous commençons à voir de sérieuses divergences dans l’interface :

Ces divergences sont tout à fait normales car elles sont la conséquence de la prise en compte des contraintes de ces deux types de terminaux. Et ce n’est qu’un début car il va très certainement falloir également tenir compte des spécificités des smartphones eux-mêmes (d’un modèle à l’autre) :

Et finalement cette semaine ont été publiée les premières images de la version touchbook : Pre-alpha MeeGo for tablets demo.

Comme vous pouvez le constater sur la vidéo précédente, l’expérience utilisateur a été complètement repensée pour une manipulation au doigt (donc moins de précision et de clics) où l’on fait défiler les contenus par types de droite à gauche :

Cette page d’accueil me semble tout à fait intéressante mais tranche complètement avec les principes posés pour les autres versions. Il y a également une vue plus traditionnelle avec des icônes sur un bureau et une barre d’applications pour basculer de l’une à l’autre :

Nous sommes ici bien plus proche de l’iOS que du MeeGo pour netbooks. En soit ce n’est pas un drame mais cela illustre bien la difficulté de concevoir une interface suffisamment malléable pour convenir à différents types de terminaux.

Si je ne me trompe pas, l’objectif de MeeGo est avant tout de fournir une plateforme technique stable, mais pas nécessairement une interface unifiée pour l’ensemble des terminaux visés. Certains éléments communs pourraient être conservés (jeux de couleurs, picto et typo, barre d’état…) mais le pari de proposer une interface unique me semble intenable (Microsoft s’y est cassé les dents avec Windows). Attendons de voir s’ils se lancent dans la publication de design guidelines (qui pourraient être très intéressantes)…

MàJ (01/07/2010) : De nouvelles captures d’écrans viennent d’être publiées pour illustrer l’interface de la version smartphones de Meego  : MeeGo Handset Project Day 1 is Here.

Pas de gros changement par rapport à la précédente version mais un réel effort d’épuration de l’interface et une identité visuelle bien marquée (qui diverge toujours des autres versions). (via The Next Web Mobile)

Saviez-vous que le format PDF a été créé en 1993 par Adobe ? Autant dire que ce format de fichiers est aussi vieux que le web (presque). Toujours est-il que les fichiers PDF font partie du quotidien des internautes mais qu’ils ne sont pas sans poser de problèmes. Le principal étant de provoquer l’ouverture d’une nouvelle fenêtre ou de lancer le téléchargement du fichier alors que l’utilisateur croit avoir cliqué sur un « simple » lien.

Idéalement il faudrait que chacun des liens pointant vers un fichier PDF soit clairement identifiable et précise le poids du fichier. C’est ce que je m’efforce généralement de faire en le précisant dans le lien mais il y a différentes possibilités :

• Ceci est un exemple de fichier (PDF, 55 Ko)
• Ceci est un exemple de fichier (fichier PDF, 55 Ko)
• Ceci est un exemple de fichier (PDF, 55 Ko)
• Ceci est un exemple de fichier [PDF, 55 Ko]

C’est en tombant sur un article récemment publié (How should you display links to PDF files?) que j’ai eu envie de relancer ce vieux débat. Un débat ? Oui tout à fait, celui qui concerne les système de formatage automatique des liens en fonction du format des fichiers. Car le problème est que vous ne pouvez pas vous reposer sur la bonne volonté des rédacteurs qui n’auront pas toujours la conscience de préciser le format ainsi que le poids.

Il y a bien les recommandations d’Adobe en la matière (Use of Adobe icons and web logos) mais elles ne disent pas comment mettre ça en oeuvre de façon automatisée sur un existant avec une multitude liens dans une multitude de pages :

Il existe des solutions pour faire cela avec les feuilles de style (Showing Hyperlink Cues with CSS) mais cela ne règle pas le problème de l’affichage du poids du fichier et vous pousse à reformater l’ensemble des liens (créant ainsi de la pollution visuelle) :

Idéalement il faudrait limiter ce formatage supplémentaire (ajout d’un picto et du poids) aux liens pointant vers des fichiers et l’intégrer directement à l’outil de gestion de contenu qui se chargerait de rajouter un picto ainsi que de calculer et afficher le poids du document. Savez-vous si ce type de solution existe ?

Sinon il ne vous reste plus qu’à le faire à la main…

Je termine une série d’articles sur la conception de formulaires avec deux sujets encore non-traités : Les formulaires pour terminaux mobiles et les formulaires narratifs.

Tout ce que vous avez besoin de savoir sur les formulaires mobiles est ici : Forms On Mobile Devices: Modern Solutions. Cet article est en fait un résumé d’une série de billets publiés par Luke Wroblewski sur son blog (Web Form Innovations on Mobile Devices et Better Mobile Form Design). J’ai eu la chance d’entendre ce fameux Luke en conférence lors du MIX et je peux vous assurer que son discours est parfaitement au point.

Dans son article il recommande ainsi d’exploiter au maximum les spécificités des interfaces des terminaux mobiles pour faciliter le travail de saisi dans les formulaires avec :

• La fonction de zoom
  
• L’adaptation du clavier virtuel en fonction du format du champ
  
• L’affichage temporaire du dernier caractère saisi dans un champ de mot de passe
• Les menus contextuels pour la saisie de valeurs numériques
• Les menus spéciaux pour la saisie de données complexes (comme la date ou la taille en pieds / pouces)
  
• L’adaptation de la mise en page en fonction de l’orientation de l’écran
• L’utilisation d’éléments d’interfaces natifs qui sont livrés avec le système d’exploitation
  
• L’utilisation des composants hardware comme le micro, le GPS ou le compas.

Cet article est une véritable perle pour qui veut se lancer dans le développement de sites web adaptés au smartphones. Vous remarquerez que je ne fais pas référence aux applications mobiles ni aux sites web mobiles mais au cas bien particulier des sites web destinés aux smartphones (iPhone, Android, Blackberry, Palm, Windows Phone…). Il y a beaucoup de paramètres à prendre en compte dans ce contexte particulier car les différences de rendus peuvent être spectaculaires (comme en témoigne la dernière capture d’écran).

Si vous connaissez un article sur les meilleures pratiques de conception de formulaires pour sites web mobiles (à destination des feature phones) je suis preneur…

Changeons de sujet maintenant pour rebondir sur un autre article de Luke W qui traite des formulaires narratifs : Mad Libs Style Form Increases Conversion 25-40%. Pour faire court, les formulaires narratifs utilisent une mise en page complètement différente des formulaires traditionnels et privilégie une approche plus narrative : « Je suis … et je recherche … pour faire … à partir de …« . À découvrir par exemple chez Effduffer.

Dans les faits, ce type de formulaires transformerait mieux que les formulaires traditionnels, les équipes de Vast ont ainsi constaté une amélioration de 25% à 40% de leur taux de transformation sur le formulaire de contact :

Des résultats surprenant pour une approche très originale. Assurément une piste à creuser…

Avec la vague du tout social, chaque site (ou presque) propose une couche sociale, donc des comptes pour les utilisateur. Il en résulte l’omniprésence des formulaires d’identification que l’on retrouve un peu partout. Oui mais voilà, l’espace se fait rare et il ne reste plus beaucoup de place pour ce type de formulaire. Qu’à cela ne tienne, il existe différentes astuces pour palier à cette contrainte.

Le site Design Reviver nous propose ainsi une très belle collection de formulaires d’identification : 100 Outstanding Login Forms. De cette collection je retiens trois tendances :

• Les sites qui affichent le formulaire directement sur la page d’accueil ;
• Les sites qui affichent un lien ouvrant un panneau flottant avec le formulaire ;
• Les sites qui affichent un lien menant vers une page spécialement prévu à cet effet.

Afficher les deux champs d’identifiant et de mot de passe sur la page d’accueil est la solution idéale, mais ça prend de la place là où vous en avez désespérément besoin. Utiliser un lien ouvrant un panneau est une très bonne solution de replie, mais cela pénalise les utilisateurs qui ont désactivé le javascript sur leur navigateur. Utiliser une page spécifique est encore mieux car cela ne pénalise personne et peut être combiné avec le formulaire de création de compte et les éléments de réassurance / incitation qui vont avec.

Des formulaires présentés, je retiens celui de WordPress (simple et efficace) :

Dans le même style mais avec un peu plus de… style il y a celui de Tumblr (minimaliste mais cordial) :

Signalons aussi celui de Facebook (très faible encombrement) :

Notez au passage qu’avec des intitulés en français c’est tout de suite plus laborieux comme chez Ning :

Enfin mon préféré est celui de RedBrick Health avec un mélange de compacité et de sophistication :

Je serais bien incapable de vous sortir une règle d’or sur l’emplacement des intitulés de champs car il existe plusieures possibilités :

• Au-dessus des champs ;
• À gauche des champs aligné à gauche ;
• À gauche des champs aligné à droite ;
• Dans le champ.

Ces quatre solutions fonctionnent bien, c’est juste une question de place disponible.

Par contre je peux vous recommander les bonnes pratiques suivantes :

• Localiser le formulaire ou le lien vers le formulaire en haut à droite de la page (là où se trouvera le nom de l’utilisateur une fois identifié) ;
• Afficher un lien vers l’oubli de mot de passe ET d’identifiant ;
• Prévoir un lien vers la création de compte ;
• Proposer de retenir le mot de passe pour une durée fixe (2 semaines semble une convention) ;
• Utiliser un cadenas pour symboliser la connexion sécurisée.

Voilà, si vous en avez d’autres, n’hésitez pas.

Le pied de page st un emplacement de votre site web, c’est le dernier élément visualisé lorsque l’on parcoure la page de haut en bas et c’est aussi le filet de sauvetage pour les utilisateurs perdus qui ne savent plus où cliquer (cf. Soignez vos extrémités  - menu et pied de page et Un plan du site dans votre pied de page).

Bref, le footer est un élément essentiel de la construction de votre site à ne négliger sous aucun prétexte. Je vous propose donc de découvrir deux articles qui en parlent. Tout d’abord 10 Techniques for a Fantastic Footer où l’auteur énumère ses règles de construction pour un pied de page : Inclure un plan du site, un retour en haut de page ainsi que des liens vers les plateformes sociales. De ce point de vue là le site Sushi & Robots est un bel exemple :

Il préconise également de le truffer de liens pour faciliter le rebond sur une page intérieure, comme sur le site RailsTrip (vous noterez au passage l’histogramme du nombre de billets publiés par jour) :

Il est également précisé que l’on peut y mettre du contenu (encore une fois pour les visiteurs perdus qui n’ont pas trouvé ce qu’ils cherchaient en parcourant rapidement la page de haut en bas) comme sur WPBeginner :

Autre article très bine documenté : Informative And Usable Footers In Web Design. Les conseils prodigués y sont à peut près les mêmes, ils citent en prime le très bel exemple d’Apple qui fournit à la fois un fil d’Ariane et un plan du site :

Si vous cherchez d’autres sources d’inspiration, je vous recommanderais également cet article avec des exemples plus « exotiques » : 25 Creative Website Footers. Bon… je sais ce qu’il me reste à faire…

Les fils d’Ariane (« breadcrumbs » en anglais) sont des éléments de navigation permettant aux internautes de se repérer dans l’arborescence d’un site et de remonter facilement d’un ou plusieurs niveaux. Même s’ils ne sont pas toujours bien vus par les internautes lambda, ils ne prennent pas beaucoup de place et sont utiles pour le référencement. Inutile de vous refaire l’article, sinon il y a Breadcrumb Navigation, Breadcrumb Navigation Increasingly Useful et Breadcrumbs In Web Design: Examples And Best Practices.

Donc en théorie c’est une bonne pratique de conception, sauf que dans certains cas, notamment pour les sites avec une arborescence très profonde, les fils d’Ariane ne tiennent pas sur une seule ligne car les intitulés sont trop longs. La seule solution est alors de faire un affreux retour à la ligne. À moins que vous ne puissiez cacher les niveaux intermédiaires et ne les déplier qu’au survol de la souris. C’est ce que propose ce site : CompareNetworks jQuery’d Bread Crumb.

Plusieurs configuration sont possibles en fonction de la place dont vous disposez : tout cacher, ne pas plier le premier et/ou l’avant dernier niveau… Il y a en prime une petite animation au survol de la souris pour déplier le niveau (il faut pour cela utiliser la librairie javascript jQuery, cf. Getting Started with jQuery).

Le résultat est propre, mais terriblement perturbant (surtout avec cette animation). Le mieux serait encore de réduire la taille des intitulés de navigation ou de simplifier l’arborescence (exemple dans les pieds de page du site d’Apple). Sinon il y a toujours la solution par défaut de faire un retour à la ligne…

(via Escargot)

Voilà plus de 10 ans que je conçois des sites web et plus de 10 ans que les formulaires sont une source de discussions sans fin pour savoir comment les optimiser (j’avais même publier un tutoriel en 2004). Alors que je pensais avoir trouvé LE formulaire parfait (j’hésite encore entre Remember The Milk et Ballpark), voici que l’Apple Store nous propose un formulaire d’achat qui risque bien de faire date : The Apple Store’s Checkout Form Redesign.

L’idée de génie est de proposer un formulaire où les intitulés sont directement dans les champs :

Cette solution permet de gagner beaucoup de place et d’afficher toutes les étapes du processus d’achat en une seule page (grâce à un principe d’accordéon). Le principe n’est pas nouveau mais c’est la première fois que je le vois mis en application sur un formulaire entier et sur une boutique en ligne à très forte fréquentation.

Il y a d’autres exemples de ce type de mise en page, notamment chez FoodSpotting :

Une solution particulièrement efficace mais qui n’est pas forcément meilleure que d’afficher les intitulés à gauche (ou au dessus) des champs, comme ici un très bel exemple chez LaunchMind :

Bref, ça m’embête de vous dire ça, mais il n’y a toujours pas de solution « ultime », tout reste une question de contexte, d’ambiance, de place disponible et d’intégration dans votre charte graphique. Plus d’exemples ici : Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form.

Vous connaissiez déjà les champ texte associés à un menu déroulant pour filtrer la recherche comme sur le site du Guardian :

Vous connaissiez déjà les intitulés-filtre de champ texte en forme de menu déroulant comme sur LinkedIn :

Vous connaissiez déjà les filtres de recherche inclus dans le champ texte comme sur Kontain :

Mais connaissiez-vous les champs texte intégrant un filtre déroulant ? Cette interface de recherche est ainsi disponible sur Giraffe Restaurants (une chaine de restos anglais) : Search-dropdown Hybrid Box. Soit vous saisissez directement le nom de votre ville dans le champs :

Soit vous cliquez sur la petite flèche pour faire apparaitre la liste des villes déjà sélectionnée :

Un clic sur le nom d’une ville et les résultats sont affichés :

L’idée est intéressante mais la mise en œuvre est polluée par des traitements graphiques trop lourds. Dommage car cet écran est pourtant entièrement dédié à la recherche. J’ai souvenir d’autres exemples plus sobres… mais impossible de remettre la main dessus. Si votre mémoire est meilleures que la mienne, partagez vos exemples.