image.png

Emailing : test A/B split

 

Qu’est ce que le test A/B split?

cela consiste a envoyer en 2 groupes destinataires différentes un emailing portant de légères modifications. Des statistiques nous permettent de connaitre l’envoi qui a été le plus réceptifs et d’envoyer au reste des destinataires le meilleurs messages; En tout cas celui ayant le mieux fonctionné.

image

Exemple

On constate ici des modifications légères (un bouton par exemple) et surtout proposer une seule modification à la fois et sur un envoi au même moment

image

Lire la suite

Rosières amélioration de la charte

 

imageRosières choisit le noir et argent pour améliorer sa charte graphique. Le mise en valeur des produits est plus évidente et le choix de ces couleurs améliore son niveau de notoriété.

Cette amélioration est très minimaliste mais ce simple changement contribue encore à élever la marque.

Lire la suite

Ergonomie web et ecommerce : faites du Eyes tracking (3)

Que pouvons nous voir sur cette images : des zones de chaleurs plus c’est rouge, plus c’est chaud, plus c’est bleu, plus c’est froid.

Plus c’est chaud plus l’internaute reste longtemps sur l’information, plus c’est froid plus il occulte l’information voire l’ignore.

Je trouve pour ma part que c’est une des plus intéressante car on repère le regard que porte l’internaute sur la page et surtout l’insistance sur certaines zones

qui permet de localiser les points d’intérêt de l’internaute.

Sur notre site on s’aperçoit que c’est la colonne centrale sur l’envoi de SMS  qui est regarder en premier, la colonne gauche sur la “création de site” et ainsi que la partie “nos clients”  donc si on doit améliorer cette page on connait les points à mettre en valeur. Puis si on veux mettre d’autres sujets en valeurs un travail visuel est a réaliser.  Un  travail peut également être fait pour mettre plus en valeur les titres et sous titres mais également mieux organiser l’information de la page car les textes étant important ici trop peu sont lus.

Les zones à droites, censées retenir le regard, ne fonctionnent pas du tout.

image

Bien sûr chaque site à son importance et ses particularités, ecommerce ou site vitrine, portail ou magazine chacun

aura sa carte d’identité de l’eye tracking.

Il faut bien comprendre que suivant la charte graphique et les informations diffusées ou à diffuser  il est intéressant de faire de l’eye tracking

pour en améliorer les pages.

Lire la suite

Jquery 1.4 : son créateur John Resig explique

En janvier l’équipe de JQuery  organise un événement sur 14 jours pour expliquer sa nouvelle version la Jquery 1.4.

Des vidéos et des articles sont diffusés tous les jours avec une explication, par jour, de nouvelles fonctionnalités jusqu’au 27/01

Jour 1 :  un article sur les nouvelles performances de la version 1.4 , encore plus rapide..

Voici des graphes qui parlent d’eux même :
Plus d’explications sur les nouvelles améliorations  sur cette page : http://jquery14.com/day-01

# of Function Calls for Popular jQuery Methods par John Resig

Performance of .remove() and .empty() par John Resig

4272434054_819d8f9e19[1]
# of Function Calls for Popular jQuery Methods par John Resig

Performance of DOM Insertion par John Resig

Performance of .css() par John Resig

Performance of .html() par John Resig

Lire la suite

Ergonomie web et ecommerce : faites du Eyes tracking (2)

Voici les zones d’attention des visiteurs lorsqu’ils visionnent la page.
Nous avons pris exemple sur notre site www.olvani.com mais cela peut très bien se porter sur un ecommerce
pour observer les comportements des prospects.
Les pourcentages sur les liens sont les clics.

image

on s’aperçoit que cela se concentre sur la zone de texte en haut de page et sur le schéma en milieu de page.

Une fois les pages analysées on peut s’attaquer à l’amélioration des pages.

image

Nous pouvons également observer en plus des clics de souris, les survols de souris et ainsi constater

où s’est arrêté l’internaute, sur quel mot, …

image

Lire la suite

Ergonomie web et ecommerce : faites du Eyes tracking

J’avais fait allusion au Eyes tracking dans mon dernier article sur Google Browser Size

mais voilà la page de www.olvani.com avec quelques points de chaleurs par dessus qui reflètent

ce que les internautes  regardent ou cliquent sur la page.

Plus c’est chaud plus il reste sur la zone. Idéal pour améliorer sa mise en page et ses informations.

Si on la compare aux zones de Google Browser Size, on s’aperçoit que les zones correspondent bien

voir  http://blog.olvani.com/post/ergonomie-web-quadriller-vos-pages-avec-google-browser-size.aspx

image

Il faut savoir que les logiciels de eyes tracking sont très chers et est en général utilisé par des

sites à gros budget.

Mais comme, bien sûr, sur Internet tout existe ;°)

Voici un service pour faire du eyes tracking : http://www.clicktale.com/

Il existe une offre gratuite et restreinte mais qui peut servir pour votre site.

Je vous montrerais dans un prochain article des informations sur le scrolling.

Lire la suite

Ergonomie web : quadriller vos pages avec Google Browser Size

Cet outil permet simplement d’afficher par dessus vos pages une grille  pour mieux vous rendre compte de ce que va visualiser l’internaute

sans utiliser l’ascenseur. Utile pour voir ce qui est vu en premier sur votre page.

Mais attention cette grille est réalisée en fonction d’un panel d’internautes consultants google.com  ce qui veut dire que cette grille n’est pas forcément adaptée

pour les Ecommerces. Les internautes au niveau des Ecommerces ayant des habitudes de repérages comme l’emplacement du caddie, du moteur de recherche,

de certains boutons, … ne vont pas réagir pareil qu’un visiteur sur google

Pour l’utiliser: Browser Size

Google Browser Size

Pour avoir une idée plus précise de ce que voit l’internaute, il faut faire de Eyes Tracking

Lire la suite

Ecommerce, ergonomie et retours utilisateurs : Navigation et multipages avec un Pager

Si on se rapproche des habitudes des utilisateurs, on retrouve à l’esprit rapidité d’accès aux produits et clarté dans la présentation d’une page .

La présence d’un pager sur un ecommerce avec des numéros de pages, suivant, précédent, …
ex)<< précédent [10] [11](page courante)] [12]  [13] suivant >>     est, dans ce sens, discutable et peut dépendre de la politique d’un site.

Voici un exemple d’une boutique : outilspro.com

image
Autre boutique : La Fnac
image

(cliquer pour agrandir)

Il est assez facile pour un développeur de créer des pagers comme en asp.net par exemple c’est pourquoi  il est aussi facile d’en retrouver un peu sur tous les sites mais est ce vraiment intuitif?

La navigation via un pager empêche, à mon sens, d’avoir une vue plus large de la quantité des produits disponibles.
Mais alors que faire pour concentrer tous les avantages ergonomiques?
Comment offrir un système qui donnerait une vue plus large des produits et un accès plus rapide?

– un menu déroulant pour accéder rapidement aux produits
– au lieu de mettre des numéros de pages, mettre des noms de produits
ex) << précédent [article10] [article11 (courant)] [article12]  [article13] suivant >

voici un exemple :  

image

(cliquer pour agrandir)

– utiliser des scripts permettant de faire un défilement horizontal
– ajouter notre fameux moteur de recherche dont on a parlé dans les précédents articles

Avez vous peut-être la réponse?

Vous pouvez voir certaines réactions sur Le Hub : Ecommerce, ergonomie et retours utilisateurs

Lire la suite

Ergonomie ECommerce : Etude sur le panier d’achat : CDiscount (3)

Voici la suite de notre petite étude sur le ECommerce CDiscount. Un zoom sur les effets d’ accroches.


Les produits à ajouter au caddie

     
 
Description
Techniques utilisées
Remarques
Zoom sur les présentations des produits
 produit-a-ne-pas-rater
-Prix en rouge bien visible.
-"Ajouter au panier" en Vert se  voit bien!

– Bouton d’ accroche sur les avantages du produits: "Prix sacrifié", "A ne pas rater"

– Accroche plus importante sur un produit: "A ne pas rater avec un chrono"

– Prix barré avec des remises exceptionnelles

Utiliser les couleurs pour attirer l’ oeil. Autant dire que toutes ces accroches et  ces boutons sont trop nombreux et annulent l’ effet escompté.
Les prix barrés sont invisibles au regard des autres boutons!
       
  produit-venteflash Accroche en jaune, encore différentes de celle ci-dessus avec une vente flash

– un bouton en rouge "vente flash"

– un chrono pour indiquer le temps restant

la vente flash est en générale très efficace!
Indiquer le temps restant incite à la vente et également à transformer l’ essai
Cette vente flash est noyée dans la page avec toutes les autres offres, remises, promos.  Fonction certainement inefficace
       
  produit-topdesventes On continue sur les accroches, maintenant un top 5 des ventes Encore un moyen d’ accélérer la vente et de rassurer le visiteur sur ses choix Toujours pareil, le Top 5 est noyé dans la page!
       

Lire la suite

Ergonomie ECommerce : Etude sur le panier d’achat : CDiscount (2)

Voici une petite étude sur le ECommerce CDiscount pour montrer les avantages et les défauts de la prise de commande.

Après la liste des produits promotionnelles, voici la liste de produits par thème.


La Liste de produits thématiques

     
 
Description
Techniques utilisées
Remarques
       

 
produitdetailall

listeproduitsB01

Affichage des produits promotionnels en haut
Plusieurs  boutons d’ appel :
– en rouge et en vert (détail capture plus bas)

– Boutons verts d’ ajout à sa commande
– vignette de présentation des produits

-utiliser les couleurs pour attirer l’ oeil.

– concentration en haut sur le premier écran

– trop de boutons d’ appel, trop de couleurs d’ appel. On ne sait plus trop où donner de la tête. Notre oeil est attiré par plusieurs endroits à la fois! Du jaune,  du rouge, vert, des images de même tailles,… des promos, …

Lire la suite