Voici une étude intéressante menée par le SURL (Software Usability Research Laboratory) sur le parcours de l’œil sur une page web, et ce, dans différents cas de figure :

• lorsque l’utilisateur parcourt des pages qui contiennent soit du texte, soit des images,
• et lorsque l’utilisateur navigue librement ou recherche une information précise.

Cette étude s’appuie sur la "lecture en F" exposée par Jakob Nielsen dans son article d’avril 2006. Elle vient enrichir cet article avec quelques informations importantes.

Notre mode de lecture varie selon le type de page. Nielsen affirmait que nous parcourons une page web en suivant le chemin d’un "F"; les résultats de cette étude aportent un éclairage supplémentaire.

Dans une cas d’une page de texte, la lecture en "F" est utilisée, que l’on parcoure la page librement ou que l’on recherche une information précise. Mais il y a cependant quelques petites différences à noter (on passe plus de temps lorsque l’on recherche une information, et on va plus souvent au bout des lignes de texte.)

Dans une cas d’une page avec une grille de visuels, on note une différence en fonction du contexte (recherche d’information ou navigation libre) :

• quand on recherche une information, on utiliserait un chemin aléatoire,
• alors que lorsqu’on surfe librement, le parcours en F n’est toujours pas utilisé : on lit de gauche à droite, puis de droite à gauche, ligne par ligne.

Intéressante comme étude, non ? Qu'en pensez-vous ?

...Comme l'atteste la page d'accueil de Microsoft Clubic. Ou alors j'ai râté quelque chose ;-)

Si le démon du bricolage vous appelle ce week end, vous pourrez faire comme Jason Winter et bricoler un "Picodore 64", mélange entre un Commodore 64 et un PDA / Palmtop dixit son auteur.

Fiche technique : écran LCD 5 pouces, clavier 69 touches, alimenté par 6 piles AA 1.5v, prise joystick, connecteur pour 1541, audio/video, sortie casque, connecteur PS/2, lecteur cartes SD…

Réalisé avec des parties de Commodore 64, de joystick Atari et d’écran de PSOne, ça a une certaine classe tout de même, non ? Vous croyez que c’est compatible avec le iPhone d’Apple ? ;-)

Ce billet fait référence à un article de Jared M. Spool "The quiet death of the major re-launch". Ce dernier date de mai 2003 mais je pense qu’il est toujours d’actualité et il a suscité de nombreux commentaires lors de sa re-publication en août 2006 sur le blog de UIE.

La refonte graphique n’est pas la solution

Dans ce billet (que je vous invite à lire), Jared Spool affirme que la mise en place d’une refonte graphique totale n’est plus une méthode à utiliser (il affirme même que c’est une très mauvaise idée).

Pourquoi ? Parce que selon lui, la refonte graphique modifie énormément l’expérience utilisateur et les risques liés à cette refonte sont trop importants (rejet, incompréhension, perte de repères…) et les utilisateurs pourraient même vous le reprocher (par exemple, il raconte que les designers d’Ebay avaient décidé de remplacer un arrière-plan de couleur jaune par un aplat blanc sur énormément de pages du site. Ils ont été assaillis d’emails de mécontentement de la part des utilisateurs et ont été "contraints" de s’y prendre autrement : ils ont baissé légèrement les tons de jaune pendant plusieurs mois pour finalement arriver à un arrière-plan totalement blanc. Et quasiment personne ne s’est plaint car la transition s’est faite en douceur, "step by step").

Nouveau design = nouvelle expérience utilisateur

C’est vrai qu’un nouveau design modifie notre expérience utilisateur et la perception que l’on se fait du site. Il est vrai aussi que certains gros sites comme Amazon ou Ebay n’ont pas modifié leur identité graphique d’un coup, mais plutôt par étapes (Yahoo n’a que très peu modifié son style graphique, sauf entre 2006 et 2005 où la rupture est plus profonde).

La rupture n’est-elle pas nécessaire parfois ?

Parfois, une refonte totale est le passage obligé. Certains sites d’e-commerce, même s’ils ont évolué par étapes, sont quand même passés par une refonte graphique quasi-totale (cf. exemple avec Voyages-Sncf).

L'utilisation de nouvelles technologies (Flash, et maintenant Ajax), les attentes des utilisateurs et leur nouveaux modes de consommation de l'information, le développement du haut débit... Tout cela fait que nous avons modifié notre façon de concevoir les sites et les identités graphiques on-line.

Conclusion

Et vous ? Que pensez-vous de sa théorie ? Vous semble-t-elle adaptée à tous les types de sites ? Est-ce que vous déconseilleriez à certains de vos clients une refonte graphique totale ?

Il n'a pas besoin de moi pour diffuser ses infos, mais l'initiative est intéressante et vaut la peine d'être relayée.

Fred Cavazza organise une petite visite guidée de "Second Life" afin de mieux comprendre cet univers virtuel dont on parle tant mais que très peu (d'agences / d'annonceurs français) utilisent ou connaissent. Il propose de constituer 2 groupes d'une trentaine de personnes maximum (annonceurs + agences) afin de visiter quelques lieux emblématiques et de découvrir les projets de certaines marques déjà installées dans l'univers virtuel.

Si ça vous intéresse, rendez-vous sur son blog pour vous inscrire.

"Smokin Aces Second Life Assassin" (SASLA), c’est le nom du jeu concours qui a été mis en place le 17 janvier sur Second Life pour accompagner la sortie du film "Smokin Aces" (avec Ben Affleck et Andy Garcia).

Dans ce film, un comédien / magicien témoigne contre la mafia de Las Vegas et n’a plus aucune autre solution que de se cacher. Et dans SASLA, les joueurs de Second Life peuvent intégrer la mafia : ils reçoivent des armes et une liste de joueurs à abattre. But du jeu : être le dernier des assassins à rester en vie afin d’empocher la somme de L$ 1 000 000 (soit environ 4 000 US $ si je ne me trompe pas)

Ce type de stratégie qui accompagne la sortie d’un film me fait penser à la chasse au trésor organisée par Volvo avec Pirates des Caraïbes (le constructeur avait enterré une XC90 série "Pirates des Caraïbes" quelque part dans le monde, et les joueurs devaient utiliser Google Maps pour récolter des indices et localiser la voiture pour la gagner.) SASLA reprend cette idée de "prolongement d’une expérience" sur un autre support / média. Ainsi, l’agence a voulu replonger les spectateurs dans l’ambiance du film par le biais d’une expérience interactive actuelle, intense et en adéquation avec l'esprit du film.

Avec ce genre d’opération, on voit bien que le potentiel de SL est loin d’avoir été épuisé. Des opérations de promotion de films comme celle-ci, on en redemande. C’est tout de même mieux que le mini-site ultra formaté et la bande-annonce sur YouTube, non ?

Nous étions une soixantaine à la présentation des "Designers interactifs" le jeudi 18 janvier.

Déjà plus d’une vingtaine d’adhésions auxquelles il faudra rajouter la mienne, car j’ai noté des choses intéressantes au cours de cette réunion :

• décloisonnement des métiers,
• partage des connaissances et des bonnes pratiques,
• information sur les métiers de l’interactif (indicateurs quali et quanti),
• montrer les bénéfices du design interactif,
• mise en place d’un annuaire des membres,
• ateliers thématiques,
• etc…

Tout est détaillé sur leur présentation en pdf.

Les missions sont nombreuses et ambitieuses, et l’association est très récente, mais je pense qu’elle saura se faire entendre. Je vais de ce pas envoyer mon chèque d’adhésion et placer le badge "Interactive Power" dans la colonne de droite de mon blog ! Et vous devriez faire pareil ;-)

J'en avais déjà parlé lors d'un précédent billet, les designers interactifs organisent leur première réunion publique le jeudi 18 janvier dans les locaux de l'Ecole Parsons dans le 15ème arrondissement à Paris. Je me suis inscrit et j'ai hâte de m'y rendre (apparemment, il y a 110 professionnels qui se sont inscrits pour venir assister à cette réunion).

Pour ceux qui ne savent pas de quoi je parle, voici des infos :

• sur le blog de Benoit Drouillat, un des membres fondateurs
• sur leur site
• sur leur wiki,

Je ferai un compte-rendu dans les jours qui suivront.

En matière de communication ultra décalée, le "Hans Brinker Budget Hotel" situé à Amsterdam avait fait parler de lui l’année passée avec cette campagne de communication étonnante. Pour ceux qui ne le connaissent pas, c’est un hôtel pour les "petits budgets" dont la communication réalisée par l’agence Kesselskramer.

Pour 2007, l’agence "remet le couvert" avec une série d’affiches plus graphiques, très stylisées, et avec un ton toujours très décalé. On y voit un mug avec les anses cassées, un poil qui traine dans le bac de douche, une chaise à qui il manque un pied, des clés de chambre tordues… avec l’accroche suivante "Unique Design".

On est ici à l’opposé du discours traditionnel que pourrait faire un hôtel de ce genre (faire croire qu'un hôtel bon marché est presque aussi bien qu'un hôtel de luxe). L’agence a utilisé les clichés sur les hôtels cheap pour les détourner et en faire l’argument principal de l’hôtel. Il fallait oser (côté Agence et côté Client), et je trouve que c'est réussi !

CBS et YouTube se sont sûrement inspirés de cette fameuse phrase d’Andy Warhol(¹) pour faire ce concours :

"et si vous aviez 15 secondes pour dire au monde ce que vous voulez, que diriez-vous ?"

Le principe est très simple :

• vous vous inscrivez sur YouTube et vous postez votre vidéo de 15 secondes maximum,
• toutes les 2 semaines, CBS Interactive sélectionnera 5 vidéos et les diffusera sur www.cbs.com,
• et CBS Interactive en sélectionnera une qui sera diffusée à la télévision pendant le SuperBowl.

Et quand on sait que cet événement sportif est regardé par 100 millions d’américains et diffusé dans 225 pays environ, on comprend vite que YouTube va bénéficier d’un sérieux coup de pouce côté visibilité.

Et côté notoriété, s’ils choisissent une vidéo émouvante avec un enfant ou une vidéo pleine de "make love, not war", ils vont attendrir le public et s’attirer la sympathie des téléspectateurs. Mais encore faut-il trouver une vidéo intéressante (et pour le moment, ce n’est pas gagné…).

CBS et YouTube profitent-ils de la couverture du Time de décembre 2006 ("Person of the year : You") pour lancer ce concours au message très symbolique ? Depuis le lancement du concours (fin décembre 2006 aussi ;-), il y a plus de 160 vidéos qui ont été postées et le buzz devrait encore s’amplifier avec les diffusions à venir sur CBS.

Alors en attendant la première sélection de la chaîne le 4 février 2007, qui est prêt à se lancer ?

eCreativeGarden, c'est le nom donné à ce 3ème blog qui parlera des tendances, des stratégies de marque... bref, de tout ce qui touche à la création numérique.

• eMarketingGarden, le blog dédié au marketing interactif a été lancé en janvier 2006,
• et ergonomicGarden, le blog dédié à l'ergonomie et l'expérience utilisateur date de septembre 2006.

Après le marketing, l'ergonomie et la création, on peut légitimement penser qu'un autre blog, spécialisé dans les solutions techniques et le développement web par exemple, pourrait faire son apparition dans quelques mois. L'agence disposerait ainsi d'un blog pour chacune des compétences nécessaires à la mise en place de projets interactifs.

SQLI est une des rares agences (la seule ?) à s'investir autant dans les blogs afin de démontrer son savoir-faire et ses compétences. Mais pensez-vous que cette démarche soit "rentable" ? J'entends par là : est-ce qu'il y a des retours (en terme de contrats, en terme d'image, de notoriété...) suite au travail fourni sur chacun des blogs ?

Messieurs de chez SQLI, une réponse peut-être ?

Ca y est, il fallait que ça arrive : Yahoo a racheté myBlogLog (mais pour de bon cette fois-ci).

On retrouve l'info sur le blog de Yahoo et sur celui de myBlogLog

TechCrunch parle d'un rachat d'environ 10-12 millions de dollars. Affaire à suivre...

1. Je ne finis jamais les bouquins que je commence Je trouve vraiment les chaînes débiles
2. Je m’éclate avec une console dernier cri : la Sega MegaDrive Mais je me soumets lamentablement à celle-ci
3. J’ai travaillé avec Marc-Antoine Mathieu (un auteur de BD super intéressant) sur un projet de site qui n’est malheureusement plus en ligne Je ne veux pas décevoir Sébastien qui m’a taggué
4. Physiquement, je ressemble à peu près à ça Parce qu’on va co-blogguer un billet prochainement
5. 2007 sera l’année… de mon mariage ! Et que ce serait malpoli de ma part ;-)

Et hop, direction Ogilvy avec peut être la suite chez Cyril ou Jean-Philippe, à moins que ce ne soit chez Laurent (qui revient d’un voyage en Inde), chez Benoit ou Emmanuel (qui vient de rejoindre MSN France)

UPDATE DU 13/01 :

Ce billet fait suite à un mème qui se propage sur la blogosphère : dévoiler "5 choses que vous ne saviez probablement pas à mon sujet" et demander à d'autres blogueurs d’en faire autant. Mais comme j'ai apporté quelques modifications au titre et à la présentation du billet, certains ne comprenaient pas de quoi il s'agissait (voilà pourquoi j'apporte cette petite précision...)

La fonction "d'ajout au panier" est la première fonction du processus de commande. Si elle est laborieuse ou au contraire pratique et bien pensée, elle peut faire que vous alliez (ou non) jusqu’au bout du tunnel de conversion. A quelques jours des soldes, c’est l’occasion de faire un petit tour d’horizon des différentes méthodes utilisées.

Méthode 1 : afficher directement le panier

Lorsqu’on ajoute un produit, on nous affiche le contenu du panier. C’est la méthode qui est, de loin, la plus utilisée. On la retrouve (entre autres) chez La Redoute, Rue du Commerce, Endless (dont je vous ai parlé dans mon précédent billet).

L’avantage, c’est qu’elle est bien intégrée par les utilisateurs, car c’est la méthode la plus ancienne. On voit l’intégralité du panier et ce, de façon détaillée. L’inconvénient, c’est que l’on peut être perturbé par l’affichage soudain du panier alors que l’on a rien demandé et que l’on souhaite continuer à faire ses achats (d’autant plus que le bouton "continuer mes achats" n’est pas toujours très identifiable…)

Méthode 2 : confirmer l’ajout au panier

Au lieu d’afficher le panier, on nous indique que le produit a bien été ajouté au panier. Généralement affiché en popup (comme chez Darty), on voit de plus en plus l’utilisation d’un DIV placé au premier plan (comme chez CDiscount ou Surcouf)

Avantages : cela permet de proposer un choix simple à l’utilisateur (continuer ses achats ou terminer sa commande) sans l’embrouiller pas avec d’autres informations. Inconvénients : si on ferme la fenêtre sans utiliser le bouton "continuer mes achats", on ne voit pas de suite que le produit a été rajouté au panier.

Seuls les 3 Suisses affichent le message de confirmation dans une page entière. Du coup, on n’a ni les avantages de la première méthode, ni ceux de la seconde… Un choix ergonomique que je ne comprends pas bien…

Méthode 3 : afficher le panier et des produits complémentaires (cross selling)

La Fnac propose une variante en affichant une page avec un "mini-panier" sur la droite de l’écran et des produits similaires qui sont énormément mis en avant.

Du coup, on a de suite des produits complémentaires susceptibles de nous intéresser, mais le panier n’est peut être pas assez visible, car relégué à droite de l’écran et "noyé" au milieu de beaucoup d’information.

Méthode 4 : afficher le panier sans refresh ni pop-up

Sur le site Piperlime, l’ajout au panier est animé (ce qui permet de bien faire comprendre le process), et assez détaillé (on peut lire les infos principales sur le produit sans perdre sa liste ou sa fiche produit).

Autre méthode dans cette rubrique de Pixmania : le panier est affiché sur la droite de l’écran et reste visible même lorsqu’on scrolle. Et quand on ajoute un produit au panier, on le voit de suite et sans avoir à scroller.

CONCLUSION

Il y a sûrement d’autres façons de faire et d’autres variantes, mais on s'aperçoit que la méthode n°1 n’est plus la seule façon de procéder. En tant qu’utilisateur, je pense que les méthodes 2 et 4 sont les plus pratiques surtout lorsqu’on fait beaucoup d’achats (elles évitent les allers-retours avec le panier). Par contre, côté e-commerçant, la préférence ira sûrement aux méthodes 1 et 3.

Et vous, que pensez-vous de ces process d’ajout au panier ?

Amazon vient de lancer Endless.com, sa boutique en ligne spécialisée dans les chaussures et les sacs à main.

Graphiquement, le site est sobre et très élégant. Il utilise des couleurs assez haut de gamme (beige et marron clair) et l’ambiance générale est reposante et douce (on est loin de l’agressivité graphique des concurrents, mais c’est peut être parce qu’ils n’ont pas encore autant de produits…)

Au niveau de l’utilisation, Ajax étant bien utilisé, il apporte donc beaucoup. On peut, par exemple, croiser plusieurs filtres pour affiner les résultats de sa recherche en direct :

• en ajoutant / supprimant une ou plusieurs marques
• en choisissant une ou plusieurs couleurs
• en sélectionnant une / des tailles
• et en proposant une fourchette de prix (en utilisant les 2 tirettes)

On reste donc dans la même page et on a ses résultats affinés directement, le tout avec une belle transition en alpha !

La fiche produit est également bien conçue. Les informations essentielles sont contenues dans la partie supérieure de l’écran (on n’a pas besoin de scroller pour les voir), alors que les détails sont en-dessous. On a plusieurs vues du produit ainsi que ses différentes couleurs, et on retrouve sa liste de produits dans un sélecteur horizontal placé dans la partie supérieure. Ainsi, une fois sa sélection arrêtée, on peut voir tous les produits sans avoir à revenir en arrière sur la liste. Intelligent non ?

Mais ce qui est le plus intéressant sur la fiche produit, c’est qu’au survol du visuel, les informations de base (nom, couleur, taille…) sont remplacées par un zoom du produit. Exit la popup avec le produit en entier et en grande taille ! Place au très gros zoom sur un point précis du produit !

CONCLUSION

Un site très bien conçu et très simple d’utilisation mais qui n’est pas exempt de petits défauts :

• le breadcrumb n’est pas très identifiable sur les listes de produits (il est carrément absent sur la fiche produit)
• malgré le nouveau zoom qui permet de voir les moindres détails du produit, je regrette de ne plus avoir un zoom avec le produit en entier…

A terme, il devrait y avoir environ 250 marques (source : Reuters). Avec ce site, Amazon a donc bien l’intention de marcher sur les platebandes de Zappos.com, Onlineshoes.com, ou Shoes.com pour n'en citer que qelques uns…

Et vue la phrase située sur la home page indique que la bataille sera rude :
"Hundreds of brands, thousands of styles (and we’re just getting started)"