L’utilisabilité des boutiques en ligne est un sujet très vaste qui nourrit des discussions sans fin depuis plus de 10 ans (j’y ai moi-même contribué récemment : De l’intérêt de soigner votre page de paiement). Une boutique en ligne est en effet un endroit où l’on doit à la fois séduire, rassurer, convaincre, fidéliser… ça fait beaucoup de choses en même temps et il en résulte toujours des dispositifs assez complexes (et qui se complexifient avec le temps).

Les efforts en matière d’utilisabilité et d’ergonomie incitative portent sur l’ensemble des pages d’une boutique (accueil, catégorie, produit, panier…) et plus particulièrement sur le tunnel de commande, une étape critique dans le processus d’achat. Dernièrement nous avons pu voir des marchands qui innovaient avec notamment Apple et American Eagle qui proposent un processus d’achat vertical (et non horizontal comme 99,9% des boutiques en ligne).

Dernièrement je suis tombé sur deux exemples de tunnel de commande simplifiés, notamment chez UI Stencils (qui commercialise de très pratiques kits pour faire du maquettes au crayon). La simplification commence dès le panier où l’on vous propose de commencer le processus en choisissant votre mode de paiement :

Le tunnel de commande n’est composé que de deux étapes avec un formulaire d’adresse de livraison minimaliste :

Le processus se termine dès la deuxième étape avec le choix du mode de livraison, la saisie du N° de carte et la validation :

Voilà c’est tout ! Non seulement ce tunnel d’achat réduit au minimum le nombre d’étapes, mais il est ne plus un modèle de lisibilité. L’expérience d’achat de cette boutique me fait relativiser les innombrables étapes et informations que l’on doit renseigner chez nos marchands français. Certes, ils proposent des scénarios de vente un peu plus sophistiqués, mais cet exemple devrait vous pousser à remettre en question la longueur du processus d’achat de votre boutique.

Cette boutique exploite la plateforme Shopify qui équipe également la boutique de Red Sweater, l’éditeur de la solution de blog MarsEdit. Cet éditeur a également fait le choix d’un tunnel de commande simplifié, mais également d’une boutique minimaliste puisqu’elle ne comporte qu’une seule page :

Cette page unique combine ainsi le catalogue, le panier ainsi que le choix du mode de paiement. C’est extrême, mais ça fonctionne bien puisque les infos sur les produits sont disponibles à un autre endroit du site (avec le support et toutes les infos sur les mises à jour).

Encore un fois, ces deux exemples ne sont pas compatibles avec la gamme ou les scénarios de vente de l’ensemble des marchands, mais devraient nous stimuler pour simplifier des processus d’achat qui n’ont pas beaucoup évolué sur ces 10 dernières années. J’ai ainsi beaucoup de mal à comprendre que très peu de marchands proposent l’achat en mode « invité » (est-ce que l’on vous force à créer un compte quand vous passez à la caisse d’une boutique ?).

Bref, deux expériences d’achat minimalistes qui devraient vous inspirer. Je profite de ce billet pour vous signaler la formation E-commerce que je vais donner le 23 juin prochain à Paris (Retours d’expérience et meilleures pratiques pour améliorer vote efficacité marchande) et qui abordera notamment l’optimisation du tunnel d’achat.

Avec la généralisation des écrans plats, la résolution moyenne des moniteurs qui équipent les internautes est en constante hausse (cf. StatCounter Global Stats). En conséquence de quoi, les pages des sites web s’allongent de plus en plus. Mais qui dit « pages qui s’allongent » dit « menus de navigation qui s’éloignent« . Le (petit) monde de l’ergonomie web est donc en train de débattre sur les menus de navigation qui restent collés en haut de l’écran (Docking Navigation Bars) et même les pieds de pages statiques (Static Footer Bars).

On retrouve ainsi un très bel exemple de menu de navigation qui se positionne au-dessus du contenu lorsque vous parcourez la page chez GamePro :

De même, on trouve un exemple de pied de page statique chez Cnet :

Dans ces deux précédents exemples, la gène est minime, car ces bars affichés en permanence ne prennent pas trop de place. Par contre, on ne les remarque pas forcément (surtout le pied de page de Cnet).

On trouve également des exemples de pied de page statique sur des sites marchands comme Comet :

Une astuce très pratique, car cette barre permet de caser le comparateur et la liste des derniers produits visités, le tout sans prendre trop de place.

L’intérêt de telles techniques est discutable :

• Dans le cas d’un site de contenu, elle facilite surtout le zapping d’une page à l’autre (augmentant mécaniquement le nombre de bannières affichées) ;
• Dans le cas d’un site marchand, elle déplace dans une zone moins exposée au regard des fonctions à valeur ajoutée (comparateur et liste des derniers produits).

Je suis tout à fait d’accord avec les premières conclusions exposées dans l’article : les hauts et pieds de page statiques ne compensent en rien un système de navigation / repérage défaillant. Ceci étant dit, il est tout à fiat possible de proposer des améliorations aux exemples cités plus haut :

• Ne pas imposer ces barres affichées en permanence et donner la possibilité de les replier ;
• Utiliser un fond transparent pour ne pas trop réduire la surface d’affichage ;
• Ne pas utiliser toute la largeur de la page, mais seulement une partie (comme peut le faire Chrome avec sa status bar) ;
• Ne pas se reposer uniquement sur ces barres et doubler les fonctionnalités dans la page elle-même.

Plus que pour les sites de contenu, c’est avant pour les sites marchands que je vois un intérêt à cette technique. Il serait ainsi tout à fait envisageable de combiner les deux : le panier, compte-client et pourquoi pas la recherche dans la barre de haut de page, le comparateur, les derniers produits visités et même le rubricage dans le pied de page.

Je n’ai pas encore trouvé de site utilisant les deux, mais si vous avez des exemples, je suis preneur.

Vous connaissez les interfaces textuelles ? Mais si enfin, les interfaces à ligne de commande (« Command Line Interface » en anglais). Les premiers IHM ne proposaient ainsi pas d’interfaces graphiques; il fallait donc exploiter des lignes de commande :

find / -size +1000k -mtime -7 | sort | tee trace | less

Autant dire que la manipulation était complexe et l’apprentissage très long. Le pire, c’est que ces interfaces étaient également très laides :

Depuis l’outil informatique a beaucoup évolué (Windows turns 25 years old, let’s take a look back in time). Il n’empêche que si l’utilisation d’un ordinateur avec une souris est plus simple à comprendre, nous avons tout de même perdu en rapidité d’exécution. C’est à ça que servent les raccourcis clavier : à gagner du temps sur l’exécution de tâches répétitives. Voilà pourquoi des services en ligne à usage intensif comme Google Reader ou Twitter proposent les leurs : Google Reader Keyboard Shortcuts et New Twitter’s Keyboard Shortcuts.

Pour les nostalgiques il existe même des meta-moteurs de recherche proposant une interface textuelle comme Goosh ou YubNub :

Je rebondis tout naturellement sur un article publié par UX Magazine (Command Lines: Alive & Kicking) pour faire le point sur les dernières innovations en matière d’interface. Mélangez ainsi une interface graphique avec des raccourcis clavier et vous obtenez les lanceurs d’applications (l’auteur de l’article parle de Graphic Command Line). Ces utilitaires sont devenus en quelque temps les nouvelles coqueluches des geeks et autres power users (Launchy pour Windows, Quicksilver ou Alfred pour Mac).

Le principe de ces outils est de vous faire gagner du temps en vous permettant d’effectuer tout un tas d’opérations élémentaires à l’aide de raccourcis clavier (ouvrir une application, trouver un fichier, faire une recherche sur le web, effectuer des opérations mathématiques simples…). Ces outils se positionnent donc en complément des fonctions natives du système d’exploitation (menu démarrer, calculatrice…) mais sont accessibles depuis votre clavier sans avoir à lever les mains de votre clavier et attraper votre souris (il faut faire une combinaison de type Ctrl + Alt pour invoquer le lanceur).

Dans le même esprit, Mozilla propose un système similaire baptisé Ubiquity : un plug-in pour Firefox permettant d’exécuter des opérations à partir de commandes textuelles en langage naturel.

Tout ceci vous semble peut-être un peu trop expérimental, mais quand j’observe le rythme d’innovation sur des navigateurs modernes comme Firefox ou Chrome (et le barre de recherche universelle), je me dis que nous ne sommes pas loin de l’intégration en natif de ce type d’interfaces (en supplément des menus et icônes).

Au-delà des navigateurs, il me semble primordial d’envisager cette solution pour les applications en ligne à usage intensif, et je fais plus précisément référence aux applications internes. L’idée serait donc de proposer :

• Une interface graphique avec des boutons, icônes et liens ;
• Des raccourcis clavier pour les fonctions simples ;
• Une interface à ligne de commande pour les fonctions plus élaborées.

Ces trois types de modalités d’interaction seraient bien évidemment complémentaires et permettraient de satisfaire à la fois les utilisateurs occasionnels et les utilisateurs avancés qui passent leur journée dessus. Idéalement il faudrait même prévoir deux interfaces graphiques :

• Une interface privilégiant la pédagogie et le guidage (avec de l’aide en ligne et des intitulés explicites) au détriment de la densité d’information ;
• Une interface privilégiant la productivité (en mode plein écran et avec des abréviations) mais nécessitant un temps d’apprentissage.

Tout ceci est théorique, mais je suis certain que dans de grosses institutions (banques, compagnies d’assurance…) de telles réflexions seraient bénéfiques.

J’ai déjà eu l’occasion de vous parler des webdocumentaires, un format à mi-chemin entre site web et DVD-Rom : France5 et CuriosphereTV expérimentent les web-documentaires. Je souhaiterais aujourd’hui rattraper une grande injustice et vous faire l’apologie de Prison Valley, un superbe web documentaire sorti il y a quelques mois et coproduit par Arte, Upian et le CNC qui vous plonge dans l’univers incroyable d’une ville-prison du fin fond de l’Amérique.

Ce n’est pas le premier webdocumentaire réalisé (il me semble que le premier date de 2007 : Thanatorama) mais c’est à ce jour le plus abouti avec près de 250 K€ de budget et un certain nombre de récompenses (cf. Les webdocumentaires d’Upian). Ce qu’il y a de particulièrement intéressant avec ce « site » c’est qu’il intègre de façon parfaitement harmonieuse la narration vidéo interactive et la dimension sociale. Pour accéder au documentaire, il faut ainsi se créer un compte ou se connecter avec un profil Facebook ou Twitter. Pourquoi ? Tout simplement pour faire vivre le site de nombreux mois après sa publication, ou plus précisément pour faire vivre les discussions en rapport avec le sujet traité.

Le site est ainsi étendu sur différents médias sociaux avec un blog, un forum, une page Facebook et un compte Twitter. Le « produit » est également disponible en VOD, en application iPhone et en livre.

Mais ce qui nous intéresse particulièrement c’est le site web et son incroyable modèle d’interaction où la trame narrative est enrichie par de nombreux d’éléments interactifs. Le fil rouge est bien entendu le documentaire en lui-même qui est découpé en plusieurs chapitres :

L’interface est très épurée avec une timeline et un bouton unique qui permet de rentrer au motel où séjournaient les journalistes. La chambre du motel sert ainsi d’écran d’orientation entre les différents chapitres de la vidéo et les contenus additionnels :

Au fur et à mesure du visionnage des séquences vidéo, vous amassez des indices qui vous apportent un complément d’information sur l’enquête en cours. La référence au monde des jeux vidéo est ici évidente, mais elle fonctionne particulièrement bien dans ce contexte :

Les différents personnages qui sont mentionnés dans le reportage viennent compléter une galerie à laquelle il est possible d’accéder, toujours pour avoir des compléments d’infos :

L’expérience d’utilisation de ce site est réellement unique : l’immersion est totale et le documentaire est ponctué de nombreux embranchements pour maintenir l’attention de l’internaute et lui donner envie de consulter les bonus. Le basculement d’un écran à un autre est parfaitement intuitif et les boutons sont suffisamment larges pour pouvoir manipuler cette interface à l’aide d’un touchbook.

Un touchbook comme l’iPad ? Non car l’iPad souffre de limitations qui ne permettent pas de consulter ce site (en Flash), mais de nombreux modèles concurrents vont voir le jour d’ici la fin de l’année et permettront de pleinement profiter de ce format. Pleinement ? Oui car c’est en position de repos (assis ou allongé) que ce documentaire se consomme, les manipulations étant réduites au strict minimum.

Là où je suis particulièrement conquis par ce format c’est qu’il fonctionne à la fois sur les touchbooks (pour un premier visionnage) mais également sur un ordinateur (pour l’accès au bonus et la participation aux discussions). La formule magique semble donc avoir été trouvée : un document vidéo chapitré + des contenus additionnels + une interface minimaliste + des espaces d’interactions sociales.

Ce documentaire préfigure-t-il l’avenir du web ? Non car les sites traditionnels continueront de dominer le web pour de nombreuses années. Par contre, attendez-vous à voir fleurir de nombreux autres formats novateurs de ce type qui parviennent à repousser les limites du web.

J’avais constaté il y a quelque temps la prolifération de menus de navigation au format XL (cf. Est-ce la mode des menus déroulants surdimensionnés ?) mais c’est un article de Jakob Nielsen qui me pousse à aborder à nouveau le sujet : Mega Drop-Down Navigation Menus Work Well.

L’auteur nous explique ainsi que les menus de navigation surdimensionnés peuvent mieux fonctionner qu’un menu traditionnel :

• Ils proposent une meilleur lisibilité avec un espace mieux exploiter et un guidage renforcé à l’aide de séparateurs et de pictos ;
• Ils permettent d’afficher la totalité de l’arborescence d’une section.

Ces menus doivent par contre respecter quelques  règles d’utilisabilité :

• Pas trop de choix à la fois ;
• Un temps de latence d’1/2 seconde à l’ouverture et à la fermeture du panneau ;
• Pas de contrôle trop complexes ;
• Une navigation au clavier pour assurer une meilleure utilisabilité.

Sur ce dernier point je suis ravi de la position adoptée par le Dr Nielsen : même si les menus de navigation surdimensionnés ne sont pas accessibles (ou peuvent difficilement l’être), il suffit d’assurer l’accès au rubrique de premier niveau.

Deux très bon exemples sont cités dans l’article : Food Network (avec une excellente hiérarchisation de l’information) et Action Envelopes (avec une utilisation astucieuse des pictos).

Dans le même esprit mais à l’autre bout de la page, j’avais également abordé il y a deux ans cette pratique élégante qui consistait à mettre le plan du site dans le pied de page (cf. Un plan du site dans votre pied de page). Et c’est un article publié sur Web Designer Wall qui me fait aborder le sujet à nouveau : Modern Sitemap and Footer.

L’auteur liste ainsi les avantages de mettre le plan du site dans le footer :

• Cela permet d’économiser un clic pour les utilisateurs et d’autoriser les sauts de section ;
• Cela donne plus d’espace à la promotion interne (pour mettre en valeur des fonctions ou contenus clés) ;
• Cela réchauffe le pied de page.

Un certain nombre d’exemples sont cités dont celui de Mozilla :

Mention spéciale au « site à Barak » (WhiteHouse.gov) qui cumule à la fois un menu de navigation surdimensionné et un plan du site en pied de page.

J’ai récemment trouvé un outil qui semble être génial pour la réalisation de Wireframes. Il s’agit de balsamiq-mockups.

Toutefois, je n’ai pas eu l’occasion de le tester encore. C’est pourquoi je me tourne vers vous… Avez-vous déjà tester balsamiq-mockups. ? Quels sont les points forts et faibles ?

Une vidéo explicative est disponible ici.

Qu’en pensez-vous ?

Source : http://www.ergonomie-web.be/

Voilà quelques années que les grands portails et acteurs du web se livrent une guerre sans merci pour s’incruster dans le navigateur au travers des plugins et autres barre : Yahoo! Toolbar,Google Toolbar… A force, ça fini par faire beaucoup de monde qui empiète sur la surface d’affichage et “remonte” la limite de visibilité (un véritable casse-tête pour les concepteurs de sites qui doivent en tenir compte).

La version 7 d’Internet Explorer avait innové en remontant certains boutons dans le cadre de la fenêtre elle-même, libérant ainsi un peu de place en hauteur. Et bien figurez-vous que la bataille est maintenant ouverte sur une nouvelle zone de la fenêtre à conquérir : la barre d’adresse.

Et c’est du côté de Firefox que l’innovation est arrivée avec sur le côté gauche un favicon aux propriétés étendues qui permet d’indiquer si le site est reconnu (ils appellent ça le Site Identity Icon) :

Nous avons ensuite sur la droite l’étoile qui permet d’ajouter un site à vos favoris, la petite icône d’inscription au flux RSS (cf. Feed Icons) et même celui des microformats détectés(cf. On Firefox 3 and microformats with Michael Kaply) :

Dernière nouveauté en date : un bouton universel d’édition pour les wikis (Universal Edit Button) qui permettra d’éditer une page quelque soit la plateforme de wiki :

Wow ! Décidément cette barre d’adresse va commencer à être sacrément encombrée. Nous pouvons déjà anticipée un phénomène de mimétisme et l’apparition prochaine d’autres boutons universels (commentaire, panier d’achat…) et pourquoi pas des boutons d’éditeurs (Digg, Aamzon, Ebay…).

Peut-être un peu confusant pour les utilisateurs vous ne trouvez pas ?

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

C’est étrange de constater comme les habitudes ont la vie dure… Prenez par exemple les boutons ‘Reset‘ sur les formulaires : Je ne sais pas qui a eu cette idée folle, mais elle est incroyablement tenace.

J’ai déjà eu de nombreuses discussion à ce sujet, mais je profite du dernier édito de Jaokb Nielsen (Top-10 Application-Design Mistakes) pour vous le redire : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.

Qui a envie de supprimer toutes les données saisies d’un coup ? Qui va s’offusquer de ne pas se voir proposer cette fonction ? Quelle est l’intérêt pour vous ?

Donc une dernière fois : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.

Et ça sera mon dernier mot ! A vrai dire, je n’ai plus la force d’argumenter sur ce point, je me demande si je ne devrais pas fermer les commentaires pour ce billet…

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