Mais qu’en est-il réellement et quelles sont les limites de cette utilisation ?

Cette technologie utilise les fonctions Javascript pushState() et replaceState(), utilisables uniquement sur le moteur web Gecko 2. Et oui ! C’est uniquement compatible Chrome (min v5), Firefox (min v4), Opéra (min v11.5) et Safari (min v5). Internet Explorer n’est pas dans la liste, ni-même sa version 10 et encore moins la 9 !

Après cette petite introduction, donnons tout de suite un exemple simple d’utilisation. Suivez bien :

Je suis sur une page A.html. J’ai un lien dans cette page qui me mène vers la page B.html, comme cela pourrait être le cas dans un menu de navigation. Je désire charger en Ajax le contenu de B.html afin de fluidifier un peu tout ça. Je vais donc récupérer en Ajax la page B.html, avec la méthode .load() de JQuery par exemple.

Jusque-là, rien d’innovant. L’un des problèmes de ce type de navigation est que si je fais « précédent » avec mon navigateur, je ne retomberai pas sur le contenu précédent, c’est à dire A.html. Pourquoi ? Etant donné qu’en appelant en Ajax le contenu de B.html, je n’ai pas bougé de ma page A.html. Donc le bouton précédent ne fera que me ramener sur la page où je me trouvais avant A.html. Vous comprenez facilement la limite de cette exemple au niveau ergonomique.

C’est là qu’intervient la fonction de manipulation de l’historique du navigateur. Quand je charge ma page A.html, j’exécute la fonction history.replaceState() en lui donnant en paramètre l’URL de la page, c’est-à-dire A.html. Au moment d’appeler B.html en Ajax, je fais un history.pushState() en lui plaçant en paramètre l’URL que je demande, B.html. Je crée ainsi une nouvelle entrée dans l’historique de navigation de mon navigateur. Tout le monde a suivi ?

Pour activer la navigation par le navigateur avec le bouton « précédent » et « suivant », je fais la fonction suivante :

$(window).bind(‘popstate’, function(event) {

var state = event.originalEvent.state;

if (state) {
$(« #ma_div_ou_je_charge_mon_ajax »).load(state.path);
}
});

J’ai donc placé un écouteur sur les évènements du navigateur afin d’afficher ce qui est demandé.

Niveau SEO :

Au niveau du SEO, c’est parfait ! J’ai uniquement appelé le contenu qui m’intéresse de B.html. J’ai bien deux pages distinctes A.html et B.html dans mon arborescence et les robots indexeront bien les deux pages. Si je désactive le Javascript, j’ai un lien classique de A vers B qui affichera la page demandée avec un rechargement du navigateur comme dans une navigation classique.

Inconvénients :

C’est assez difficile à mettre en place. Les navigateurs ne réagissent pas tous pareils à cette manipulation. En effet, il existe un problème sur Chrome. Je suis sur A.html, j’appelle la page B.html, puis ensuite tape une URL à la main vers un site externe. Si arrivé sur cette nouvelle page je fais précédent avec le navigateur, je retombe sur la page B.html en entière et non plus A.html avec l’importation du contenu de B. Il existe donc une méthode pour remédier à ce problème, mais on n’entrera pas dans les détails ici et elle est assez lourde.

Conclusion :

Grâce à cette technique, on peut créer une navigation très fluide en Ajax, tout en conservant la navigation par les actions du navigateur. Cette technologie se rapproche de ce qu’offre Flash au niveau de la fluidité. Comme toutes les bonnes choses, c’est à consommer avec modération. Nous avons bien vu dans les inconvénients, que cette méthode est encore au stade expérimental. Voici une application concrète de cette méthode sur le site Github. Regardez le chargement du contenu lorsque l’on clique sur un fichier dans le tableau. Testez la navigation par vous-même. Ceci dit, nous repoussons sans cesse les limites de nos navigateurs afin d’en tirer le meilleur. C’est ce genre de pratique qui pousse les concepteurs de navigateurs à améliorer leurs applications et repousse un peu plus la technologie web.

Développé par Julien Nicault, Ajaxy est un outil de création de sites qui se concentre sur la simplicité d’utilisation et l’élégance de son interface.

Sa principale particularité réside dans le fait que utilise nativement des librairies AJAX. Celles-ci permettent de donner à votre site, l’apparence d’une application web sans rechargement de pages. Elles offrent également de jolis effets de transitions lors de la navigation (carrousel, lightbox, cube 3D…)

Essentiellement destiné à la création de sites vitrines et de portfolios, l’approche de l’auteur est de fournir un outil de gestion de contenus (CMS) très simple d’accès pour ses utilisateurs, qui sont jusqu’à présent des clients et amis peu familiers avec les outils internet.

Le CMS est également conçu pour simplifier le travail d’intégration graphique du site grâce un système simplifié de templating.
Des champs de personnalisation des URLs et balises méta permettent quant à eux, l‘optimisation du référencement naturel.

Enfin, l’outil intègre aussi une interface pour les smartphones tactiles, la gestion des statistiques et l’envoi de newsletter.

Actuellement en version de test, Ajaxy est un outil gratuit et open-source qui nécéssite un hébergement PHP/MySQL.

• Téléchargement sur le site officiel d’Ajaxy
• Démonstration en ligne

Comme vous le savez probablement, Google a lancé il y a quelques jours son propre service de micro-blogging social nommé Google Buzz.
Ce nouveau service, qui n’en est pas vraiment un en réalité, est directement intégré à Gmail et permet de suivre en direct, l’actualité de vos contacts.

Des valeurs sûres et des nouveautés

Au programme de ce service, un grand nombre de fonctions présentes sur différents services de micro-blogging, mais aussi des nouveautés à la Google.

Buzz permet donc de publier des actualités, des photos, des vidéos et des tweets, le tout en lien direct avec Picassa, Flickr, Youtube, Reader et Twitter. Ces différentes publications peuvent, comme on est à présent habitué, être commentées ou simplement « aimées ». De plus, Buzz propose la mise à jour des publications en temps réel grâce à Ajax, ainsi que le filtrage de celles-ci.

Mais Google va plus loin avec Buzz, en effet, les différentes publications sont également positionnées grâce à la géolocalisation, ce qui permet d’avoir accès aux publications publiques qui ont été effectuées à proximité de l’endroit où l’on est.

Enfin, Buzz étant intégré à Gmail, il permet de créer votre réseau de manière automatique grâce à l’ajout de vos contacts Gmail dans Buzz, vous avez cependant accès à la validation de ces ajouts. De la même manière, en fonction des contenus de vos publications, Buzz vous proposera des publications publiques et des contacts extérieurs qui vous intéresseront potentiellement, une manière de plus pour Google de s’inclure dans nos vies, comme diront certains.

Le tout est, comme toujours chez Google, présenté dans une interface épurée et intuitive. Pour ceux qui n’y ont pas encore accès, voilà un aperçu. Google Buzz sera en effet accessible à tous les utilisateurs de Gmail dans les prochains jours.

Un réel concurrent de Facebook et Twitter ?

La question qui revient forcement est celle de la concurrence de Buzz : Twitter ? Facebook ? Oui forcement, mais aussi des services qui montent comme Friendfeed, Foursquare ou encore Brightkite.

Google a-t-il une chance de concurrencer Facebook ? Personnellement je n’y crois pas vraiment, notamment à cause du fait que beaucoup de particuliers qui utilisent Facebook, n’utilisent pas Gmail, qui est nécessaire pour Buzz.

Quand à Twitter, c’est une possibilité, mais comme beaucoup le disent, les contacts Gmail sont rarement les même que les contacts Twitter. Cependant grâce à la fonctionnalité qui permet d’ajouter des contacts extérieurs, Buzz pourrait grâce à l’utilisation que l’on peut en faire, concurrencer Twitter. L’évolution de Buzz est donc à suivre.

Le gros avantage mais aussi l’un des inconvénients de Buzz est qu’il s’inscrit dans un panel de services préexistants (Gmail, Twitter, Picassa, Flicker, Youtube, Reader, Lattitude, Profile…). L’un de ses point faible est qu’il s’agit encore d’une nouvelle plateforme de micro-blogging, certes aidée par la notoriété de Google, mais qui vise une cible (Facebook), selon moi décalée par rapport à la cible habituelle de Google.

Une version mobile poussée

Pour finir, quelques mots sur la partie mobile. Avec une interface très soignée, Google montre l’importance que prend à ses yeux ce secteur. La vidéo suivante vous en dit plus.

Suivons donc l’évolution de Buzz, montera-t-il en puissance comme beaucoup des services Google ou stagnera-t-il comme Wave ?

Ce que je trouve le plus intéressant n’est pas tant son design épuré, s’appuyant principalement sur des photographies plein écran (reprenant un peu le principe de danone.com), ni même l’utilisation massive d’effets de transitions ou de transparences. Non, ce qui me semble remarquable, c’est que cette fluidité donnée par ces animations est intégralement réalisée en JavaScript. Et oui, aucun fichier flash là dessous.

Plus que le défi technologique, j’apprécie que le site soit compatible avec tous les navigateurs courants, et entièrement consultable dans un environnement privé de support JS (à priori, seul le zoom sur un produit ne fonctionne pas). Alors certes, le contenu apparait assez bas si l’on désactive la feuille de style, mais le travail est quand même remarquable.

Bravo donc à l’agence Nurun et notamment Emmanuelle Fillassier (CP) et Sébastien Valléry (Dev/intégrateur).

Tout juste rentré des ateliers Paris Web 07 que déjà la frustration de n’avoir pu assister aux conférences s’installe. En effet, tous les excellents échos que j’avais pu avoir se sont révélés vrais.

Plusieurs « pointures » du web français et international étaient présentes ce qui a donné lieu à des interventions d’une qualité plus qu’appréciable, des interactions nombreuses avec les auditeurs et une bonne humeur générale toute à fait plaisante.

Le seul défaut que j’ai pu trouver à cette journée est qu’il était impossible d’assister à tous les ateliers…damned

Puisqu’il a fallait en choisir 4, voici les ateliers auxquels j’ai assisté :

• « Analysons ensemble l’ergonomie de votre site Internet !» par Amélie Boucher
• « Flex, Flash et accessibilité» par Stéphane Deschamp
• « Le RGAA par la pratique » par Aurélien Levy
• « Conception d’un site accessible : démarche et bilan ! » par Émilie Sidoli, Julie Landry, Laurence Borne, et Marie Destandau.

Je vais donc vous faire mon petit compte rendu sur ces 4 interventions (en 4 billets différents) qui, est-il besoin de le préciser, ont toutes d’été de grande qualité.

1^er atelier : Analysons ensemble votre site Internet par Amélie Boucher

Amélie Boucher – fondatrice d’Ergolab et auteur du récent ouvrage sur l’ergonomie web disponible chez Eyrolles.

Première remarque et non des moindres, la salle était pleine. Pleine, à tel point qu’il n’y avait plus de places assises et que les retardataires ont dû rester debout. Bien que cela ait l’air tout à fait anodin, quel meilleur témoin de la prise de conscience de la place importante de l’ergonomie dans la conception de site Internet.

La présentation s’est axée autour de 12 règles essentielles :

- Une architecture bien rangée et adaptée à la cible

S’il semble évident que cela soit une nécessité de base, de nombreux sites Internet viennent nous prouver tous les jours le contraire. L’architecture business ne doit pas systématiquement être adaptée de façon « brut de pomme » sur le site. En effet, certains termes spécifiques à la marque ne sont pas toujours porteurs de sens pour l’internaute ce qui peut venir perturber la navigation au sein du site.

Par ailleurs, il existe une différence notoire entre la quantité d’informations proposées par le site par rapport à celle perçue par l’utilisateur d’où l’importance capitale d’organisation du mieux possible l’information.

- Organisation visuelle

L’organisation visuelle se cale directement sur les lois de Gestalt (grands principes d’organisation visuelle)

-Cohérence

Conserver une logique tout au long de la navigation de l’internaute.

Un peu facile mais tellement flagrant en ce moment, les portails France Television en pleine refonte. La page d’accueil de France 2 et France 3 viennent d’être mise à jour alors que le contenu de niveau 2 conserve l’ancienne mise en forme. Un peu déroutant même pour les utilisateurs avertis que nous sommes.

-Convention

Les conventions font appel à la mémoire utilisateur et au « règles » ou « principes » établis des usages sur Internet. Exemple concret : le logo d’un site Internet. Ce dernier est systématiquement placé en haut à gauche pour suivre le principe de lecture qui va dans ce sens. De façon intuitive nous avons le réflexe d’aller le chercher là quand bien même il serait placé à droite.

L’exemple présenté par Amélie s’est fait sur le site de Clarins. Il est vrai que lors du choix du produit, une liste de checkbox est laissée libre à l’utilisateur. Instinctivement (et puisque c’est gratuit), nous avons tendance à cocher toutes les cases.

Dommages, un seul article semble autorisé (et pourtant cétait indiqué). Un radiobutton aurait semble-t-il été plus judicieux d’autant que les différentes utilisations des éléments de formulaires sont maintenant quasiment acquis pour les utilisateurs réguliers du net.

-Information – visibilité du feedback

Informer l’utilisateur ! Un utilisateur informé est un utilisateur en confiance, qui plus est sur un site d’achat.

Sur VirginMega, un ajout de produit présent déclenche l’affiche en haut de page d’une alerte précisant le contenu du panier. Problème, on ne le voit pas lorsque l’on est trop bas dans la page.

Dommage de ne pas avoir pensé à faire adapter la position de cet affichage selon là où l’on se trouve dans la page.

Résultat de cette erreur, un double clic de l’utilisateur donc un double ajout ce qui entrainera plus tard une suppression dans la page dans son panier. Bien évidemment, cela ne sera pas pour rassurer le futur acheteur.

-Compréhenssion

Faire comprendre à l’internaute ce qu’il est en train d’entreprendre sur le site. Les actions ne doivent pas être ambigües mais claires pour être le plus efficient possible.

-Assistance

Guider l’internaute !

Il faut suggérer les actions (notion d’affordance) qu’il doit faire sur le site. Ne pas le laisser perdu dans cette masse d’information sous peine qu’il ne revienne pas.

-Gestion des erreurs

La gestion des erreurs est essentielle. Comme dans la règle « information », un utilisateur informé est un utilisateur rassuré.

L’erreur en elle-même n’est pas problématique, il faut simplement faire attention à bien le faire remonter à l’internaute en lui indiquant précisément d’où vient le problème pour faciliter la correction.

Attention toutefois à la surprotection.

L’exemple étudié pour illustré les formulaires à vérification instantanée a été Remember the Milk déjà mis en avant par Fred Cavazza. Amélie Boucher montre ici que ce formulaire, aussi intuitif soit-il, pousse la protection utilisateur contre les erreurs trop loin dans le sens où le site considère comme erreur tout champ non rempli à partir du moment où le focus de la souris est sur ce champ.

A titre personnel, je trouve le formulaire d’inscription au portail Yahoo bien plus intéressant et intuitif (celui-ci fera d’ailleurs l’objet d’un article prochain). L’ajax est certes beaucoup utilisé mais de manière plus judicieuse que dans RTM. En effet, Amélie Boucher précisait que si la vérification instantanée était très appréciable d’un point de vue ergonomique, une sur-utilisation pouvait ne pas être utile.

-Rapidité

La rapidité où comment être efficient sur une page.

Un exemple tout simple de comment perdre du temps lorsque l’on cherche quelque chose sur le site de l’AFNIC.

Lorsque vous rechercher un nom de domaine mais que vous souhaitez le modifier, le contenu du champ disparait systématique et l’on se retrouve à devoir ressaisir mainte et mainte fois la saisie.

-Liberté

Live free or die…

L’internaute doit ressentir une grande liberté d’action sur le site. No comment.

-Accessibilité

Bien évidemment, l’accessibilité est une contrainte essentielle.

Selon Tim Bernes Lee, directeur du W3C et inventeur du World Wide Web « Le pouvoir du Web réside dans son universalité»

Rendre un site accessible devrait être aujourd’hui considéré comme un postula obligatoire dans toute création web. Mais oui, un site accessible est souvent plus long à faire ce qui impacte des coûts supplémentaires que tous les annonceurs ne sont pas près à assumer. Par ailleurs, un site accessible n’est pas synonyme de charte graphique absente et d’une mise en page laide, en témoigne le site réalisé par Émilie Sidoli, Julie Landry, Laurence Borne, et Marie Destandau pour le centre Pompidou.

-Satisfaction de l’internaute

Ce point se passe à mon sens de commentaire. Le titre seul suffit à comprendre.

La séance s’est terminée par une analyse de quelques sites proposés par les personnes présentes. Par manque de temps, seuls 3 sites ont été analysés.

Au final, j’ai trouvé que cette intervention était l’un des plus intéressantes de la journée. La bonne humeur dégagée par notre oratrice et les nombreux exemples ont permis d’apprendre rapidement quelques règles essentielles d’ergonomies, qui bien qu’elles soient connues, sont loin d’être appliquées partout.

Bravo pour cet atelier !

Amélie Boucher sera également présente à la conférence du 29 novembre à Adobe organisée par Designers Interactifs.

Synerg’heTiC ne manquera pas de vous faire un compte rendu.