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/

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://www.ggtelecom.ca/2010/FR/Cameras.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

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

De nombreuses librairies javascripts (jquery, extjs, scriptaculous,dojo,…) existent pour rendre plus intuitives vos interfaces web.

Mais  une a plus particulièrement attirée mon attention :  Jquery

Pourquoi choisir cette librairie ?

1. - elle est très complète
2. - la communauté est importante
3. - les plugins importants
4. - les bugs réparés rapidement

Qu’a t-elle de spéciale par rapport aux autres ?

1. Son concept de base : utiliser la structure hiérarchique du document HTML (Le DOM)
2. Le script ne parasite pas le code HTML : utilisation des attributs “id” et “class” des tags
3. Elle supporte l’XmlHttpRequest (Ajax)
4. Externalisation du script qui permet de gérer les événements
5. Installation très facile par de simples liens (link) et l’étiquetage des tag Html via Id ou Class
6. Légèreté de la librairie

Les principes de bases :

1. Des actions sur les noeuds du DOM (choix d’éléments, boucle sur des éléments, événements : un langage dans le langage, …)
2. Des effets et animations : fade, déplacement (sliding), de tremblement, de glissement, …
3. Des widgets : drag and drop, accordéon, sliders, tri, barre de progression, datepicker, boite de dialogue, onglets, …

Beaucoup d’animations pour enrichir vos interfaces web et en améliorer l’expérience utilisateur.
On se rapproche de logiciels classiques avec peut-être encore plus d’esthétique et d’ergonomique.

Que peut-on faire avec Jquery ?

1. des carrousels,
2. des popup nouvelles génération (lightbox, thickbox, greybox)
3. des menus de toutes sortes : verticaux, horizontaux, onglets, hierarchique, …
4. des Glisser-Déplacer
5. des menus déroulants plus ergonomiques
6. des tooltips plus joli, plus paramétrables
7. …

sans rechargement des pages bien sûr!

voir le site www.jquery.com

et les sites en version française :

www.jquery-france.com 

www.jquery.info

Un prochain article listera les différents plugins utiles : menus, boite de dialogue, lightbox, thickbox, greybox, drag and drop, …

Une autre libraire peut également faire des effets similaires mais je trouve qu’elle n’a pas tous ces avantages : c’est Library Ajax  de l’ASP.NET. Fournie de nombreux exemples avec  l’AjaxToolkit