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.

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.

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.

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.

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, …

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

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.

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

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

Voici une lightbox facile à intégrer et qui permet d’insérer des flash ou autre page via Iframe

Elle comporte des thèmes différents : clair, foncé, avec sous ans coins arrondis.

Un petit défaut pas de traduction en français. Il faut juste changer les boutons.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Suite d’une liste de plugins en Jquery utiles pour vos sites

Menus

http://www.getintothis.com/pub/projects/rb_menu/

Type  Ipod

http://www.getintothis.com/blog/2006/09/26/my-first-jquery-plugin-a-sliding-menu/

http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

http://www.filamentgroup.com/examples/menusHierarchical/index2.php

http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

http://p.sohei.org/jquery-plugins/clickmenu/

http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

http://be.twixt.us/jquery/

http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish

http://p.sohei.org/jquery-plugins/menu/

http://javascript-array.com/scripts/multi_level_drop_down_menu/?j

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Menu Contextuel

http://www.trendskitchens.co.nz/jquery/contextmenu/

http://abeautifulsite.net/notebook/80

Popup

http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/ 

Menu over sorte de bulles

http://www.webdesignerwall.com/demo/jquery/

Pour faire suite à un article du 26/12/2008 dans le hub Ecommerce, Ergonomie et Retours Utilisateurs sur Viadeo :

Visiter et participer au hub

Je souhaiterais vous parler des inscriptions OBLIGATOIRES dans les Ecommerces car 2 écoles s’affrontent celle du web marketing et celle de l’ergonomie

Coté Web Marketing

Les partisans du Marketing veulent imposer des formulaires de saisie pour récupérer les adresses de facturation, de livraison et donc obliger une inscription.

• Cette inscription, obligatoire pour commander, permet de mettre en avant des promotions ou de simples produits liées à l’internaute authentifié. Grâce à son identification, la boutique connait les éléments de commandes et peut donc proposer des produits similaires on appelle cela un environnement contextuel.  Cela a pour objectif d’augmenter le nombre de conversion de prospects en clients ou d’augmenter les ventes des clients. La technique peut être très efficace  et également très plaisante pour l’internaute qui se voit proposer une multitude d’objets liés à son microcosme.
• Cette technique mémorise les adresses du clients qui n’a pas besoin de les retaper
• Elle permet également de suivre les commandes en cours et d’avoir un historique des commandes
• Elle historise la navigation de l’internautes : données également utilisées pour proposer des produits suivant les centres d’intérêts.

Amazon.fr en est  un fort exemple : www.amazon.fr

Apparemment  il n’y aurait que des avantages à cette technique!

Coté Ergonomie

Ergonomiquement parlant certains points sont très intuitifs comme la mémorisation des adresses, le suivi de commande ,…. et ne sont donc pas à bannir!

Mais le nombre de ecommerces étant très importants, l’internaute se retrouve à s’inscrire sur une multitude de sites et possède des dizaines voire des centaines de paramètres de connexion (un pour chaque site) et il se lasse de s’inscrire.  Il m’est moi même arrivé de ne pas commander car le formulaire était trop long ou tout simplement présent.

Les Ecommerces sont-ils obligés d’inscrire le prospect? Techniquement non! Il doit pouvoir commander sans être dans l’obligation de s’inscrire. Il va rentrer ses adresses (facturation, livraison, …) et passer commande. Quand il reviendra il retapera tout cela! Pas de mémorisation des données! Le commerçant possède quand même le nom du client (nom, prénom, société, email, …)  et peut  donc envoyer des informations (newletters) au client.

Que choisir ?

En fait il faut, à mon sens, proposer les 2 techniques sans imposer d’inscription.

Cela permet de coupler le meilleur des 2 mondes et de maximiser les conversions : on ne perd ni d’un coté ni de l’autre.

Voici  une liste de plugins JQUERY très utiles pour améliorer l’expérience utilisateur (l’ergonomie d’un site web).

On s’aperçoit qu’avec ce type de fonctionnalités le rapprochement en terme d’ergonomie et d’intuitivité d’un site web vers une application traditionnelle est très fort. Je dirais même qu’une interface logicielle peut être beaucoup moins ergonomique (je ne parlerais pas bien sûr de WPF qui est une évolution majeure dans le développement de logiciel, malheureusement loin d’être utilisé par grands nombres d’éditeurs de logiciels):

Boites de dialogue :

http://plugins.jquery.com/project/jmodal

Colonnes

http://www.codeasily.com/demo/few-column-list/few-column-list.html

Effets Fading

http://medienfreunde.com/lab/innerfade/

jquery.innerfade.zip (124kb)

Effets de transitons sur des images :

http://www.malsup.com/jquery/cycle/int2.html

Effets de Zooms

http://www.mind-projects.it/jqzoom_v10

http://www.mind-projects.it/projects/jqzoom/

Carrousels:

http://plugins.jquery.com/project/carousel3d

http://plugins.jquery.com/files/carousel3d_1.1_0.zip

http://www.webcssdesign.com/css/coins-arrondis-avec-jquery-css-et-une-seule-image/

Effets panoramiques

http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=fr

des blogs font l’inventaire de plugins Jquery :

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.webcssdesign.com/ajax/jquery-plugins-240-tutoriels-a-decouvrir/

http://www.webdesignerwall.com/demo/jquery/

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

  
Autre boutique : La Fnac

(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 :  

(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

J’ai décidé de relayer certains articles du hub Ecommerce, ergonomie et retours utilisateurs sur Viadéo dont je suis responsable.

dans le but d’élargir le public visé et de pouvoir illustrer certains de mes articles car sur viadéo ce n’est pas possible.

Chaque article commencera par  “Ecommerce, ergonomie et retours utilisateurs“, Voici donc le premier de la série :

L’ergonomie des carrousels :

On voit pousser un peu partout des carrousels :

ce système qui fait tourner des images de produits sur une ellipse ou une ligne et donne un effet de profondeur ou cyclique avec mouvements perpétuels ou manuels.

Voici quelques exemples de systèmes:

Carrousels linéaire cycliques  :

Voici quelques liens à visiter avec démo et installation : http://sorgalla.com/projects/jcarousel/examples/static_simple.html http://sorgalla.com/projects/jcarousel/examples/static_vertical.html http://sorgalla.com/projects/jcarousel/examples/static_auto.html http://sorgalla.com/projects/jcarousel/examples/static_controls.html http://sorgalla.com/projects/jcarousel/examples/special_easing.html http://thomlx.free.fr/jquery/jquery_carousel.htm

avec différents effets de fondus :

Voici quelques liens à visiter avec démo et installation : http://www.agilecarousel.com/examples/full_example http://www.agilecarousel.com/examples/jqueryui_example http://www.agilecarousel.com/examples/simple_example

Carrousel sur ellipse ou Carrousel 3d :

Voici quelques liens à visiter avec démo et installation : http://www.hotajax.org/download/mootools/3d-carousel/index.html http://interface.eyecon.ro/demos/carousel.html http://interface.eyecon.ro/docs/carousel http://plugins.jquery.com/files/carousel3d_1.zip http://plugins.jquery.com/project/carousel3d http://www.spypoint.com/FR/cameras.html

3d Wall

Voici quelques liens à visiter avec démo et installation : en flash (très joli)  http://www.flashloaded.com/flashcomponents/3dwall/example3.html

Par contre, je trouve qu'il est parfois très difficile d'arrêter le mouvement pour ce positionner sur un objet et j'ai dernièrement vu sur un site un mouvement tellement rapide que l'on apercevait a peine les objets!

Ce qui en fait un système, très difficile d'utilisation et donc pour des internautes moins avertis, les objets tournants ne seront pas visualisés et donc passeront à autre chose. L'effet escompté par le commerçant sera inexistant : Mettre en avant certains produits!

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