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.

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

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.

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/

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/

On poursuit avec des applications Surface sur la santé :

Applications sur le dossier santé d’un patient : Très intéressant pour expliquer au patient ses maux.

Explication de la connexion de téléphone mobile sur la Surface :

Démonstration sur l’interaction entre un mobile et la Surface

Encore des applications sur Surface :

Un jeu de cible: on lance des petits galets sur la surface et la position donne le score.

Bon exemple de tags.

Un autre exemple de TAG  : une carte de visite avec toutes les informations sur l’usager : photo, …

Encore un dernier exemple de TAG, on pose une carte sur la surface et des informations en ressortent.

En plus une démo pour le choix d’un bague avec la possibilité de changer le diamant. Le résultat

est  visualisé en 3D. Splendide!!

Après un bref article en novembre 2008, je vous propose de faire un petit tour des applications développées pour Surface.

Pour ma part cet outil qui allie le multi-touch, l’intuitivité, l’utilisation multi-utilisateurs, l’utilisation à 360° peut avoir des applications fabuleuses.

La fluidité  des objets à manipuler est impressionnante et la cerise sur le gâteau, Microsoft Surface peut identifier des objets  posés à sa surface grâce à des Tags collés sur l’objet lui-même.

Je pense que cette table peut changer la façon d’utiliser les logiciels et les ordinateurs en y rajoutant un facteur important :  Une manipulation NATURELLE.

On parle d’ailleurs de NUI : Natural User Interface.

On peux également remarquer que tous les logiciels présentés ont un design superbe, très professionnel.

Application pour l’éducation : vie scolaire

On va donc voir des applications pour l’éducation avec la manipulation de photo mais également de jeux à plusieurs autour de la table :

Voici donc les 1eres vidéos :

La manipulation de carte de façon très naturelle.

La détection d’accidents sur une carte