Warning: strpos() [function.strpos]: Empty delimiter. in /home/www/client/www/blog/wp-content/plugins/seo-image/seo-friendly-images.php on line 222

Les applications webs sont riches en fonctionnalités d’utilisabilité. A travers l’étude d’un exemple, celui de Del.icio.us, ce billet soulève l’intérêt de pouvoir dériver ce que l’on y trouve et comment on pourrait les appliquer à un site de ecommerce.



Les applications web recèlent des joyaux d’ergonomie

Il suffit parfois d’ouvrir nos mirettes pour découvrir que les outils que nous utilisons tous les jours recèlent des joyaux d’ergonomie applicables directement et intelligemment à nos pauvres sites de ecommerce, souvent en mal d’inspiration lorsqu’il est question d’utilisabilité.
Certains s’en sont peut-être aperçus, mais je suis un fervent utilisateur de del.icio.us depuis plus de 2 ans et j’en ai fait depuis, sans me poser de question, mon outil de bookmarking favori.
Il n’est peut-être pas le plus puissant en terme de fonctionnalités, en revanche sa facilité d’utilisation, sa simplicité, son excellente utilisabilité en somme, en ont fait un compagnon de surf indispensable. Pourquoi ? Voyons un peu les pépites que recèle en lui Del.icio.us.


Quelques exemples sur Del.ici.ous



  • Ajout de lien par un simple clic
    1clic=1 lien !
    Grâce à un plugin Firefox, l’ajout d’un bookmark se fait en 1 clic.
    Le système de mot clé pare au fastidieux système de classement par catégories


    C’est peut-être idiot, mais un clic suffit pour ajouter un lien à del.icio.us, puis un autre clic pour l’enregistrer. En attendant, vous n’avez été obligé de rentrer qu’une information : le titre de votre bookmark. Pour le reste, c’est à vous de vous arranger avec votre patience et votre vitesse de frappe au clavier.


  • Suggestions de mots clés
    Suggestion de mots clés sur del.icio.us
    Recommandation de mots clés sur del.icio.us

    Lorsque vous ajoutez un bookmark, non seulement, del.icio.us vous indique les mots clés déjà ajoutés par les autres utilisateurs de del.icio.us, mais en plus, lors de la frappe, à la manière d’une boîte de suggestion, il vous propose les mots clés que vous avez déjà utilisé afin d’augmenter encore la vitesse de saisie. Drôlement efficace ! Retenez également de ne classer les bookmarks que par mots clés, ce qui évite ainsi le classement plus fastidieux par catégories.

  • Dépouillement total du design
    Dépouillement du design sur del.icio.us
    L’interface est austère, mais lisible. La quantité d’informations visible sur la page est plutôt faible comparée à la moyenne des sites


    Chez del.icio.us, on ne fait pas dans le rococo ni le baroque, l’ajout et la gestion des bookmarks se fait dans une interface au style stalinien de la grande époque, froid, dépouillé, pur, sans fioriture. Pas par haine des designers sans doute, mais plutôt pour laisser l’attention des utilisateurs ne pas être perturbée par autre chose que l’essentiel.

  • Pas de fonctions superflues
    Pas de petites étoiles pour noter les bookmarks, pas de commentaires, c’est parfois un peu dommage, mais ça concourt à simplifier l’interface et à la rendre reposante pour le regard en évitant la surcharge visuelle de l’information que pourraient engendrer trop de fonctionnalités (remember Google et sa homepage)
  • Fonctions de classement efficace
    Recherche de bookmark sur del.icio.us
    Cliquez sur un tag et Del.icio.us vous propose immédiatement une série de tags en relation, ce qui vous permet d’affiner votre recherche


    Retrouver un bookmark que l’on a classé il y a 4 mois relève souvent de l’exploit. Sans être parfait dans ce domaine, le plug-in qui accompagne del.icio.us dans Firefox permet en moins de 5mn (chrono en main) d’arriver à soulager votre mémoire sans s’arracher les cheveux.



Conclusion

  1. Réfléchissez-y bien. Toutes ces caractéristiques simplement résumées n’ont pas l’air de grand chose si on les met en face d’une application Rich Media en Flex. Oui, mais simplement, leur rusticité (si l’on peut utiliser ce terme) font que, d’une part, l’effort cognitif que doit y consacrer l’utilisateur pour s’en emparer est faible, d’autre part, les fonctionnalités qu’elles assurent sont suffisantes pour parvenir à classer de l’information sur le web et arriver à la retrouver assez facilement.
  2. Vous l’aurez compris, il s’agit d’un subtil équilibre entre la simplicité de l’utilisabilité et la puissance des fonctions offertes. Cette alchimie, contrairement à ce qu’on pourrait penser n’est pas simple à maîtriser et demande beaucoup d’efforts de la part de ses concepteurs, plus sans doute que ceux qui s’amusent à barder leurs applicatifs de trucs aussi complexes que parfois inadaptés.
  3. Point remarquable : l’utilisation d’un plugin Firefox qui, évidemment, permet d’aller plus loin dans la puissance ergonomique de l’application. Ce choix est-il applicable pour un site de ecommerce ? Pourquoi pas, même si, peut-être, seuls les utilisateurs avertis risquent de s’en emparer. C’est une question à étudier.


De plus en plus de site de ecommerce ajoutent à leurs offre de services des fonctionnalités de wishlist (équivalent du bookmark) ou de mots clés. Sont-elles efficaces ? Et avez-vous des exemples ?

PS :  un de ces jours, je vous parlerai de Flickr.com, qui fait aussi très fort en la matière, même si son design a le don de faire fulminer mon voisin de bureau (que j’aime bien par ailleurs)



Mon activité débordante ne m’accord malheureusement pas toujours le temps d’écrire de longs articles sur ce blog et je me permets donc aujourd’hui de partager avec vous mes quelques derniers liens emmagasinés dans mon Delicious.

osCommerce revient à nous par la grâce de Scary-shop et condozone.

Scary-shop n’est rien de plus qu’un site de vente en ligne d’accessoires d’horreurs pour le cinéma ou pour Halloween et vous y trouverez des articles sympas pour détourner votre déguisement de Père Noël et offrir une bonne frayeur à vos tout petits.

Condozone, lui aussi réalisé sous osCommerce, m’a semblé remarquable par la qualité de sa réalisation à tout point de vue : ergonomie, design et marketing.

Plus intéressant encore, Flowerbox, outre le fait qu’il offre aux internautes ébahis une gamme de produits originale et bien désignée (des fleurs pour ne rien vous cacher) présente également une interface intéressante et un bien joli design.

2075617893_2d35365cf3 News en vrac :  nouveaux sites osCommerce, vin USB, usabilité

Pour rire, cette sympathique campagne marketing pour un pinardier en ligne : USB Wine (via Misstics).

Et pour ne pas rire et pour mourir intelligent, un article très détaillé (en anglais, désolé) de Luke Wrobleski sur la hiérarchisation des actions d’une page Web. Après lecture, courez vous acheter un tube d’aspirine pour ne pas mourir de migraine.

,


Vous avez vu ? Je m’améliore franchement en jeux de mots, vous ne trouvez pas ?
Le culte du soi peut parfois pousser l’être humain à commettre des actes parfaitement idiot, comme, par exemple, se faire fabriquer un mug à son effigie sur Internet.
Samedi matin, donc, bien calé dans mon fauteuil, une tasse de café à la main, la souris dans l’autre je partis faire mes emplettes sur le web à la recherche d’un site de personnalisation.
Rassurez-vous, je n’ai pas eu à chercher bien longtemps, la personnalisation étant un de mes sujets de travail en ce moment.

Première victime cafepress.com
Cafepress.com est aux Etat-Unis, sûrement, mais je n’en ai pas la preuve, le leader de la personnalisation d’objets en ligne. Source d’inspiration pour mon travail, ce fut donc naturellement vers cette presse à café US que je guidai mes pas dans cette aventure.
Pour choisir mon mug, pas de problème. Une minute après m’être connecté sur le site, je me retrouvai déjà en face de la fiche de personnalisation de mon mug. Prix : 11$99, c’est cher, mais bon…
Première épreuve : uploader mon portrait. Plutôt simple. L’image se télécharge rapidement et , miracle de la technologie, s’affiche prestement sur mon mug de prévisualisation. Parfait, me dis-je, il ne me reste plus qu’à presser sur le bouton “checkout”, payer et attendre patiemment derrière ma boîte aux lettres quelques jours pour tenir enfin entre mes petits doigts potelés l’objet qui, j’espère, transmettra mon âme à mes petits enfants.
Mais les créateurs de cafepress.com avaient placé un piège !… un petit outil vicieux qui me permettait de déplacer sur mon mug l’endroit exact où j’aurais voulu placer mon image. Chouette, me dis-je, je vais pouvoir me caler, au poil près, mon portrait sur mon mug. Malheur à moi ! Il eut mieux valu que jamais un jour je ne clique sur ce bouton. A cause de lui, plusieurs minutes de mon existence furent dilapidés en clics et en clacs inutiles à la recherche d’une improbable possibilité, celle de pouvoir coller 2 images différentes sur mon mug.
Finalement, en désespoir de cause, je passai à la commande, avant de réaliser que…
Eh mais oui, rappellez-vous le début de ce billet. Cafepress.com étant un site américain, cafepress livre depuis le grand et beau territoire des Etats-Unis d’Amérique. Autrement dit, trois obstacles majeurs allaient s’opposer à ma satisfaction de consommateurs :

  • le délai de livraison : long, très long, au moins 3 semaines
  • la douane : un message très clair m’explique que le délai de livraison dépend en partie de la douane et se rappelle alors à ma mémoire l’aventure de mon frère qui ayant commandé un tshirt aux US dut attendre plus de 3 semaines avant de le recevoir et, SURTOUT, de payer des droits de douane équivalents au prix dudit t-shirt.
  • le prix de la livraison : trop cher

J’abandonnais donc ma commande en levant le poing de rage au ciel et me rabattais (pourquoi ne l’avais-je pas fait depuis le début) sur un site plus proche de mes préoccupations, un site français, dont j’étais déjà client et dont au moins je savais que les délais de livraisons m’offriraient l’espoir de recevoir mon mug avant ma mort.
Et toc ! Me voilà sur Photoways. Pour trouver mon mug, pas de problème. Quelques clics de souris m’emmènent prestement sur l’objet convoité et je me vois déjà dégustant mon café (dans ma nouvelle machine à café du bureau, débarquée un jour par la grâce de la stagiaire de Claire-Marie) dans mon superbe mug, mon portrait rutilant dans la chaude lumière solaire du matin.
Espoir, vous vous en doutez, encore une fois (presque) contrecarré.

Je ne sais pas si vous avez déjà essayé d’uploader une image de 1Mo73 sur Photoways, eh bien, je ne vous conseille pas de le faire un samedi matin. Photoways (qui a du lire mes conseils… non, je plaisante), dans sa grande sagesse, et surtout dans sa grande connaissance du web et de ses utilisateurs, offre au photographe amateur tous les moyens possibles et imaginables qui existent pour uploader ses photos :

  • une applet Java (pas terrible, mais bon)
  • un simple formulaire HTML (en principe, robuste, mais limité)
  • un logiciel à télécharger (j’ai autre chose à faire, mais s’il le faut, j’en passerai par là)

Je vous épargne les détails, car ce billet commence à traîner en longueur, mais vous pouvez vous douter évidemment, qu’en dehors du dernier, j’essuyais des échecs cuisants avec les deux premières méthodes de téléchargement, qui me laissèrent plusieurs minutes dans l’expectative de voir mon image s’afficher sur un mug et me permirent tout à la fois de consulter mes mails tout en me demandant si un jour, finalement, je l’aurais ce mug ou quoi et, si je ne ferai pas mieux de me contenter d’un vulgaire mug avec un Bart Simpson dessus, acheté à la rubrique à brac locale.
Non, finalement, il me fallut bien letélécharger, ce damné logiciel, pour parvenir à mes fins. Quelle perte de temps quand je pense à l’élégant et très pratique système d’upload d’images de Flickr.com ou même celui de cafepress.
Mais ce n’était pas tout, car il me fallut encore batailler à plusieurs reprises contre cette infâmante interface de Photoways dont on finit bien par sentir qu’elle n’a pas été refondue depuis les années de la bulle.
Chrono en main, le temps nécessaire pour me créer et commander cette foutue tasse, entre la déception de Cafepress et la complexité de Photoways, prirent à ma matinée plus de trente minutes de ma précieuse existence !
Merci Internet !

Conclusion de cette palpitante aventure
Encore une fois, et je ne saurais trop insister là dessus, la survie du ecommerçant passe par le soin qu’il apporte à l’ergonomie de ses interfaces. Il faut bien le reconnaître, les interfaces du ecommerce d’aujourd’hui sont encore de loin beaucoup trop compliquées pour nos contemporains. Plusieurs raisons à cela :

  1. nos contemporains sont loin d’être tous des maîtres de l’informatique. L’arrivée de générations ayant baigné dans l’informatique et les consoles de jeux devrait arranger cela, mais plusieurs années seront encore nécessaires à ce qu’elles deviennent des consommateurs avec un fort pouvoir d’achat.
  2. Internet en est à l’âge de l’automobile quand l’automobile ressemblait plus encore à une charette sans chevaux qu’à un fier destrier des autoroutes comme, mettons, la dernière Mercedes 500 SLK. Les interfaces de demain ne ressembleront certainement pas à celles d’aujourd’hui
  3. Conséquemment, depuis l’invention de la souris et des fenêtres, on peut difficilement dire que des grandes innovations ont été faites en termes d’interfaces homme machines (IHM), même si des gens très sérieux y travaillent jour et nuit

Mais ce n’est pas une raison pour attendre des temps meilleurs. Il est primordial, pour qui veut gagner des parts de marché et augmenter son taux de transformation, de fournir un effort permanent sur ses interfaces. J’ai déjà insisté depuis le début de ce blog sur pas mal de points : la fiche produit, la page d’accueil, le processus de commande, les formulaires d’inscription et j’en passe.
Améliorer l’ergonomie et l’usabilité de son site reste et demeure le meilleur levier de profit sur Internet après l’acquisition de trafic par les moyens classiques (emailing, affiliation, etc.).<br/> L’interface de téléchargement d’images de Photoways est une honte pour ses créateurs et un véritable travail de lisibilité et de fiabilité devrait y être porté pour que des types comme moi ne dépensent que 5mn à commander un mug. Je n’ose imaginer l’attitude de ma mère devant une telle complexité. Et pourtant, ma mère représente ce qu’il y a de mieux en terme de pouvoir d’achat. C’est un peu dommage de la négliger sous prétexte qu’elle n’est pas une Geek.



Il n’y a jamais de grandes révolution en matière d’interface et d’usabilité. Rappellez-vous que votre système de fenêtre et de souris date de 1978. Inauguré par Apple sur un simple Macintosh, aucune grande transformation n’a depuis été apporté à ce concept, hormis les liftings de rigueur autorisés par la puissance exponentielle des cartes graphiques.


Pourquoi s’occuper d’usabilité ?

En terme de e-commerce, rappellons-nous qu’une de nos priorités devrait être l’amélioration perpétuelle de l’usabilité et de l’ergonomie de notre site afin d’en améliorer le taux de transformation. C’est un sujet que j’ai déjà longuement abordé dans ces pages et le web regorge d’exemples d’amélioration possibles sur le processus de commande, la position du champ de recherche, etc.

S’adapter aux utilisateurs de plus en plus nombreux et divers

La démocratisation du web et l’explosion du ecommerce supposent l’arrivée en masse d’utilisateurs de plus en plus néophytes encore plus exigeant en matière d’usabilité (seniors ou populations peu habituées à l’informatique) créant une véritable demande auprès des producteurs de sites pour créer des environnement favorables à l’achat en ligne.


Laredoute.fr homepage fnac.fr homepage 3suisses.fr homepage
Le syndrome “arbre de boël” frappe toutes les grandes enseignes. Un peu de simplification et de personnalisation ne seraient-ils pas nécessaires ?

Etudier l’ergonomie d’un site web nécessite un certain investissement

C’est un travail qui nécessite parfois des compétences ou des moyens que seuls les “gros poissons” peuvent se permettre d’avoir. Néanmoins il n’en reste pas moins important de rester au courant et de voir ce que les meilleurs sites ou les expérimentations les plus folles peuvent proposer pour pouvoir peut-être les appliquer à son propre site.

Voici donc pour commencer quelques pistes de recherche sur le futur des interfaces webs du ecommerce.

Les boutiques en 3D dans Second Life

184341246_a17ab3950a_o Réinventer les interfaces du commerce électronique : quelques exemples dalternatives

184341244_cf925c4635_o Réinventer les interfaces du commerce électronique : quelques exemples dalternatives


Ah les interfaces en 3D ! Ah, le mythe de l’usabilité résolu par la 3D! Largement mises en question dans cet excellent billet de Stéphane Bayle, les boutiques en 3D semblent, en ce qui me concerne, relever de la fausse bonne idée. Je ne parle pas d’affichage en 3D des articles du catalogue comme c’est le cas chez VB2s, ni de cabine d’essayage en 3D comme chez MyVirtualModel, mais bien de boutiques entièrement en 3D, comme dans Second Life, dont voici un petit aperçu ci-dessous.

Mettre de l’interactivité dans la 3D

Fascinante mise en perspective d’un monde de pixels et de base de données, qu’apportent-elles réellement à l’utilisateur ? C’est une question que l’on peut légtimemment se poser, mais qui ne semble pas faire peur à certains. Fred Cavazza présentait, au début de l’année, Immersiv, une société parisienne, ayant conçu une interface 3D multi-usage extrêmement puissante et suffisament souple pour pouvoir l’intégrer à divers endroits de la chaîne d’achat d’un site web.
















La boutique cartographique : Browsegood

Déjà cité dans ce blog , Browsegood veut révolutionner la manière de surfer dans une boutique, exactement comme lorsqu’on utilise une GoogleMap. Intéressant, mais les avis divergent quant à sa viabilité (voir les réactions au billet) et surtout, déroutant, trop déroutant sans doute, pour des utilisateurs néophytes.


Browsegood permet de naviguer comme sur Google Map

Les nouvelles manières de chercher : osKope, Etsy, BrightQube, Blogbang

Aider à trouver les internautes ce qu’il recherche, répondre le plus précisément à leurs demandes, ce sont entre autres certains des enjeux des moteurs de recherche. Grâce à Ajax, la suggestion de mots clés semble être un incontournable (Magento offre la fonctionnalité nativement), mais certains chercheurs fous vont beaucoup plus loin et réinventent les concepts de la recherche.


osKope “visualise” les résultats de recherche

C’est le cas d’osKope dont j’avais parlé la semaine dernière et qui offre une manière visuelle de se retrouver dans une liste de produit, mais aussi du fameux Etsy avec son incroyable moteur de recherche par couleur. Ces deux dernières création très innovantes sont enthousiasmantes, mais il est peu problable de les voir se généraliser rapidement.


Etsy et son moteur de recherche par couleur

oSkope : moteur de recherche visuel
oSkope aide à “visualiser” les recherches


Blogbang : la mosaïque

Présenter tout le contenu d’un site en un clin d’oeil est l’objectif de la page d’accueil de blogbang. Blogbang : une page d'accueil en mosaïque
Visualiser toute l’information en un clin d’oeil avec Blogbang

Brightqube : une mosaïque pour mieux chercher ?

Dans cet exemple, c’est la vente d’images en ligne qui profite d’une mise en page cartographique. L’oeil peut embrasser simultanément des dizaines de visuels.

Brightqube permet de faire une recherche visuelle
La sélection par la vue sur Brightqube

Les catalogues virtuels

Plus proches de nous et déjà très répandus parmi les grandes enseignes de la VPC, les catalogues virtuels sont des transpositions au poil près de catalogues papier recréé en Flash. Véritables bijoux de technologie, l’idée me paraissait loufoque, dans un premier temps, mais leur richesse ergonomique et interactive m’ont finalement convaincu. Ils devraient largement se généraliser pour tout ceux qui possèdent déjà un catalogue papier. Pour les autres, ce sera plus difficile.

Catalogue interactif de Cyrillus
Exemple de catalogue virtuel en Flash

La science-fiction : les plans de métro à l’aide du ecommerce

Oui, bon là, je vais sans doute un peu loin, mais il faut absolument lire ce billet (en angliche) d’un développeur à la recherche d’une nouvelle manière de réprésenter sur le papier la structure ou l’organisation d’une base de données. Tourmenté par des affres de réflexion, cet homme, Patrick C Walsh s’est amusé à représenter la structure de données en utilisant une sorte de plan de métro (inspiré par le métro londonien). Voici ce que ça donne :

graphic1 Réinventer les interfaces du commerce électronique : quelques exemples dalternatives
Un plan de métro pour visualiser le contenu d’un site ? Pourquoi pas.

Conclusion : il est temps de tirer parti de ce que la technologie nous offre et de recréer les schémas habituels

Que ce soit les 3 Suisses, La Redoute ou la FNAC, les grandes enseignes françaises ne brillent pas par leur originalité en terme d’interface. Sans doute frigorifiées par le moindre changement et la nécessité de répondre aux besoins de la masse, elles s’interdisent encore des évolutions qui paraissent nécessaire pour améliorer le confort des utilisateurs et la fluidification de la navigation. C’est ce que j’essaierai de montrer dans mes prochains billets et tout au long du temps qui me reste à m’occuper de ce blog.