Mon Paris-Web 2009 : web sémantique, ergonomie, agile et analytics

Pour la 2e année consécutive, je suis allé assister à une journée à Paris Web.

Ce que j’apprécie ?

Des rencontres à dimension humaines, la proximité, la bonne humeur et le professionnalisme des intervenants…
Même si le gros du public est constitué de développeurs — ce qui est très bien parce qu’ils sont concernés au premier chef par la qualité, l’accessibilité et la performance des sites web qu’ils développent — le programme fait la part belle aux problématique de la maîtrise d’ouvrage web, ce qui me parle davantage.
Pourtant, je regrette de devoir faire un choix entre les conférences « techniques » et « métier » pare qu’il n’est pas de bon chef de projet MOA qui ne soit au courant des dernières technologies. cette année : CSS 3, OOCSS, HTML 5, RDFa, WCAG 2.0, Flash, PDF, Javascript…

Extraits de mon bloc note alternés avec les tweets qui ponctuaient la journée

Twitter – 09:10

fxbodin: Microformats et referencement, rapprochement fertile mais j’attends de voir comment.

Web sémantique et référencement

Thierry Régagnon (RESONEO) dissertait sur « Référencement & Standards Web : La même destination ».

Twitter – 09:27

fxbodin: RDFa (web sémantique) et référencement : j’ai compris ! événements, adresses, produits, vidéos, images, critiques, prix…

A retenir : l’intérêt de structurer et de taguer ses contenus soit en Microformat, soit en RDFa pour enrichir le référencement de ses données. Sous la page web, les données. La page de résultat (SERP) de Google / yahoo / Bing affichera en plus de l’adresse et le résumé ou extrait de votre page, des informations détaillées : la photo, un rating, une adresse, des dates, des prix, des libellés de produits…
Autant d’informations pertinentes qui ne manqueront pas de faire augmenter le taux de clics sur votre lien.

Twitter – 10:10

fxbodin: Amélie Boucher a acheté un sac à main en cherchant des exemples pour sa confe de. Super !

Amélie Boucher maniait avec brio les « do » et « don’t » de l’ergonomie de sites e-commerce, en faisant remarquer avec humour qu’elle n’avait que des exemples « de fille ». (sympa les petits points d’avancement en bas des slides d’Amélie)

Ergonomie et ecommerce

Twitter – 10:15

fxbodin: e-commerce, finalisation de commande : je veux payer, pas créer un %$è!§ de compte

Créer un compte est un point de rupture/fuite très important. Expérience universelle du formulaire de création de compte alors qu’on est prêt à ce moment là à payer. Combien de paniers bien garni de bon chiffre d’affaire abandonnés en route ?
Pour les marchands anxieux, il suffirait de demander un email pour commencer…
Les recommandations d’Amélie : aider le client à se figurer/projeter : mieux décrire le produit… en fonction de ce qui intéresse le client (ex. prix /dose, contenu, utilisation…) ; anticiper les idées/hésitations/questions qui pourraient faire renoncer le client et y répondre au bon moment (au bon endroit de l’écran, pas avant, pas ailleurs) l’élément différentiant (ex. retour gratuit ; ex. return poolicy dans un onglet dans la fiche produit, idem les cadeaux qu’on vous offre : dans la description du produit, pas dans le panier = la bonne surprise trop tard, ne rapporte rien) idem les mauvaises surprises : indisponibilité du produit à remonter très en amont mais non pas retirer l’offre, proposer une alternative ou une alerte sur dispo.

Twitter – 10:54

fxbodin: J’ai appris le mot « uplift ». Merci Amélie Boucher


Les 2 méthodes pour étudier et améliorer l’ergonomie d’un site :
1 : test utilisateur
2: analyser les réelles pratiques, test de version A/B testing

Facebook – 10:56

Camille Duvelleroy : et c’est quoi donc « uplift » ?
Francois-Xavier Bodin : c’est ce que tu gagnes en taux de conversion visiteur -> client/abonné/etc. entre une version initiale de ton site, et une version optimisée après tests comparatifs.
Ex. :
« — après un test A/B, le client a eu un uplift de 21%…
— Wouah ! »

Twitter – 10:56

fxbodin: « Les conventions priment souvent sur l’ergonomie pure » Amélie Boucher

Retenir aussi que les « bonnes pratiques » ne sont pas des garanties de réussite et qu’il vaut mieux faire comme le visiteur s’y attend plutôt que de tenter de lui imposer une « bonne pratique ». Bon sens et relativité. D’où l’intérêt des tests.

Twitter – 11:12

fxbodin: hé, t’as pas un exemple à la place de tes bullet-points de poncifs organisationnels ?

Là, c’était l’interminable intervention « ROI et performance web : intégrer la culture de l’optimisation à la stratégie Internet » par Arnaud Brin

ROI et performance web

Twitter – 11:53

fxbodin: ROI et performance web : tout le monde peut se tromper. moi là, je me suis trompé de conférence.

Pourtant il a fini par apporter quelques informations intéressantes…

Importance de la vitesse d’affichage pour optimiser l’engagement utilisateur.
Microsoft a chiffré un déficit de CA de 2,8% pour 1 seconde supplémentaire de temps d’affichage de la page de son moteur de recherche Bing !
…et moins intéressante : le multimédia et l’interactivité (interface riche, vdo, réalité augmentée…) augmenteraient l’engagement utilisateur (ah, bon ?)

J’ai quand même noté ses éléments de méthode de web analytics pour augmenter le potentiel de conversion (recrutement, fidélisation…) :
- plan de marquage : spécifier, implémenter, recetter, un sous projet à part entière
- exclure le trafic hors visiteurs
- marquage spécifique pour campagnes, recherches internes, plans de tests…
- étudier en priorité le taux de conversion = ceux qui font sur ceux qui auraient pu faire (hors rebond)
- segmenter
- établir des modèles conversion ex. achat 1e visite, J+n jours, ne visite…
- prioriser sur les actions qui ont le plus de potentiel : pages de sortie, tunnels de conversion…

Twitter – 14:34

fxbodin: La « qualité hédonique » de votre site web : vers un web jouissif ? ya urgence.

Conçevoir un produit web accepté

Twitter – 14:38

fxbodin: Conçevoir un produit web accepté : bravo pour le show, Alain Vagner (développeur de DotClear) et Gautier Barrère de http://www.flupa.eu

Les intervenants avaient conçu un véritable show multimédia / vidéo / théatral, un dialogue entre « techno » et « ergo » qui finissait sans surprise par un consensus sur la prise en compte des enjeux d’acceptablité.

Twitter – 15:10

fxbodin: la page player de dailymotion est jouée 1 milliards de fois par mois #parisweb

Hervé Mischler, de Dailymotion, expliquait comment faire évoluer le design d’un site web de grande échelle grâce au design itératif.

Design itératif chez Dailymotion

  1. feedback utilisateur communautaire + panels + analytics
  2. specs
  3. wireframes
  4. maquette (mockup : riche photoshop, fireworks…)
  5. prototype (omnigraffle + html/css)
  6. développement (pair programming : 1 dev + 1 designer)
  7. tests (mais ne pas viser 100%)
  8. production (avec rollback possible)

Des itérations petites, des modifications minimes et rapides (ex la page player de dailymotion est jouée 1 milliards de fois par mois)
Utilisation du framework blueprint, une grille…
L’expérience d’un redesign qui provoque une baisse des vues immédiate ! réaction immédiate de rollback, et analyse avant de restaurer une fonction-clé et de tester une autre ergonomie, moins novatrice.

Complément d’information
Tous les tweets dotés du hashtag #parisweb
Le site web de Paris Web

Ce contenu a été publié dans e-business, avec comme mot(s)-clé(s) , , , , , . Vous pouvez le mettre en favoris avec ce permalien.
  • http://www.les2nouilles.com Camille

    merci, je découvre des trucs, c’est cool.
    j’ai juste rien compris aux rollback, blueprint and co de dailymotion… :(
    tu peux me réexpliquer steuplait ?

  • http://www.fxbodin.com/fx/ fxbodin

    @camille: quelques réponses…

    rollback : revenir en arrière, annuler les modifications de design

    blueprint : un outil de webdesign basé sur une structure de grille (repères verticaux et horizontaux) ; vas voir là : http://blueprintcss.org/

  • http://case.oncle-tom.net/ Oncle Tom

    Tout en sachant que « blueprint », c’est le nom donné aux dessins d’architectes. Le nom a été gardé pour la notion de précision et d’échafaudage d’interface.

  • http://www.fxbodin.com/fx/ fxbodin

    Merci de la précision érudite, Thomas.