Compte rendu de Paris Web 2008 (jeudi)

Je sais, je suis en retard. Comme vous l'aurez compris, j'ai assisté à Paris Web 2008. L'année dernière je n'avais pas eu le temps de faire un compte rendu (honte à moi), cette année je vous ai concocté un vrai compte rendu de brute comme j'aime bien les faire (de la même trempe que celui de 2006).

Sommaire

• Accueil et introduction
• Ergonomie des interfaces riches
• Qualité et accessibilité Web : vers l’amélioration continue
  • Quelques principes à respecter
  • Contraintes et pièges actuels
  • Vers l’amélioration continue
  • Pilotage de parc
  • Communiquer et agir
• Travailler dans le présent
• Accessibilité : des volontaires ?
  • Cécité
  • Malvoyance
  • Déficiences motrices
  • Déficiences auditives
  • Déficiences intellectuelles
  • Déficiences techniques
• Internautes et robots des moteurs de recherche, mais comment font-ils pour s’y retrouver ?
• Table ronde
• Conclusion du jeudi

Accueil et introduction

Christophe Porteneuve, par lejoe

Le nouveau président de Paris Web (l’ancien a lâchement abandonné son poste) nous a accueilli, présenté les conférences et donné le ton. Le web c’est cool, Paris Web aussi. Ça paraît anodin, mais je doute que l’ambiance soit la même au LeWeb‘08… (Puis tiens, pas envie de mettre de lien)

Vous pouvez consulter le support de cette présentation sur slideshare.

Ergonomie des interfaces riches

Amélie Boucher, par lejoe

Dans cette conférence, Amélie Boucher a répondue à une question simple : Les interfaces riches sont-elles une révolution pour l’ergonomie ?

Elle répond simplement : Technology changes, humans don't (Les technologies changent, pas les humains), les règles ergonomiques qui sont valables actuellement sur le Web sont valables pour les interfaces riches.

D’après Amélie il existe trois types d’interfaces :

• Le web non riche (le Web 1), on consomme de l’information ;
• Le web avec des bouts de riche (le Web 2.0 en gros), on consomme, participe, agit. L’interface se contextualise en fonction de la demande de l’utilisateur ;
• L’interface entièrement riche (applicatif, logiciels, etc.), on manipule des objets.

Bien sûr, une interface riche est différente et nécessite quelques attentions :

• Limiter l’attente de l’utilisateur : charger un Flash de 500 Ko ça peut être long, il faut l’informer. Il faut également éviter les chargements lors de l’utilisation, c’est très pénible d’avoir à attendre dès que l’on fait une action ;
• Prendre en compte les antécédents des internautes comme la persistance du réflexe « molette » (les gens sont habitués à utiliser la molette pour parcourir une page, ils l’utiliseront forcément et il faut donc que le résultat soit celui attendu), le fonctionnement du bouton précédent, la persistance du réflexe du bouton d’action (on est tenté de cliquer sur un bouton pour accomplir une action, sans faire attention à ce qui est écrit dedans, sans faire attention au contexte) ;
• Penser à l’effet « temps réel » : sur une interface riche tout va très vite et il faut le prendre en considération. En temporisant certains feedbacks, par exemple avec une notion de latence simulée (clairement : faire croire à l’utilisateur que l’application travaille pour qu’il reste informé que son action a bien été prise en compte et que le résultat va bientôt arriver et ce même si l’application peut faire le traitement très rapidement) ;
• Faire attention aux nouveaux modes d’interaction : Guider l’internaute, compenser un défaut d’affordance (avec des mots, des curseurs, etc.).

Au final, l’interface doit s’effacer pour laisser place au service (ce qui forcément ne plaît pas beaucoup aux graphistes). C’était une conférence très intéressante, Amélie maîtrise vraiment son sujet, on l’écoute et on oublie sa timidité latente.

Vous pouvez consulter le support de cette présentation sur slideshare.

Qualité et accessibilité Web : vers l’amélioration continue

Élie Sloïm, par PascaleLC

C’est la deuxième fois que j’assiste à une conférence d’Élie Sloïm (qui est plus beau en vrai, comme l’a fait remarquer quelqu’un ; je crois que ça va le suivre), une fois de plus je n’ai pas été déçu.

La qualité est quelque chose qui me tient à cœur et il faut dire que dans le Web il y a beaucoup de travail à faire. Toutefois, Élie a décidé de temporiser un peu. Chaque projet est différent et doit avoir des obligations de qualité différentes. Il nous a proposé 5 grands axes pour évaluer le besoin de qualité :

• Quelques principes à respecter

  (Avant de commencer à songer à améliorer la qualité de son site)
  • Séparer le fond de la forme (ça choque quelqu’un ?) ;
  • Structurer le contenu sémantiquement, tôt ou tard le contenu sera utilisé par des machines ;
  • Développement pluri-média puis spécifique (mobile, puis iPhone par exemple) ;
  • Des interfaces appauvrissables (j’ai oublié de noter ce qu’il voulait entendre par là) ;
  • Délégation et mutualisation technique (idem que précédemment)

• Contraintes et pièges actuels

  • Séparation des métiers ;
  • Méthodes agiles, itérations rapides ;
  • Écoute des utilisateurs ;
  • Modèles qualité et référentiels ;
  • Valeur ajoutée sur les contenus et services ;
  • Faire attention aux contraintes techniques (utilisabilité, finance, juridique, innovation, éthique) ;
  • Rejet global : qualité, conformité, accessibilité (je pense que beaucoup de mes lecteurs savent ce que c’est)
  • Surqualité : Trop en vouloir fait perdre du temps
  • Rejets technologiques : Abandon d’AJAX ou de la vidéo (euh, je ne sais plus ce qu’il voulait dire)
  • Exclusion : Déplacer le contenu ne permet pas de s’affranchir des impératifs de qualité (mettre de la vidéo sur Dailymotion par exemple).

• Vers l’amélioration continue

  • Inventaire : Combien de sites je dois gérer ? Qui est responsable de chaque site ? Qui est responsable du parc ?
  • Référentiels : Quelles sont les règles que je m’applique ? Quelles sont les contraintes qui me sont imposées ? Quels référentiels appliquer à mon parc ?
  • Audit : Quel est le degré de conformité de mon parc, de chaque site, de chaque règle ?
  • Planification : Quels sont les objectifs pour le parc, pour chaque site ? Quels sont les priorités ?
  • Déploiement : Somme d’améliorations ponctuelles, suivi des indicateurs, évaluation périodique et/ou continue.

• Pilotage de parc

  C’est plus simple ici : utilisez Mon-Opquast :-).

• Communiquer et agir

  • Approche statique : communication sur l’excellence ou la conformité, annonces ponctuelles, communication institutionnelle ;
  • Approche dynamique : communication sur la démarche, les objectifs, états des lieux permanents, transparence ;
  • Ne pas communiquer uniquement lorsque la conformité est bonne.

Vous pouvez consulter le support de cette présentation sur slideshare.

Travailler dans le présent

Christian Heilmann, par Oncle Tom

J’ai découvert Christian Heilmann l’année dernière. Et quelle découverte ! En plus d’être un excellent orateur, quelqu’un de sympathique, il est extrêmement talentueux. (Ça se voit que je suis fan de lui ?)

Après une introduction poilante sur le métro parisien (littéralement : le fait de se retrouver coincé dans le métro pendant la grève de l’année dernière lui a permis de perdre du poids), il nous a convaincu d’utiliser ce qu’on a.

En vrac voici ce que j’ai pris en note :

• Un CMS c’est beaucoup d’argent, il faut former tous ceux qui vont l’utiliser. Choisir le mauvais c’est perdre beaucoup d’argent ;
• Le site ESPN.com a économisé 2 To de trafic par journée en passant au CSS (et au HTML sémantique) ;
• Pour des décideurs, il vaut mieux présenter ces chiffres en faisant une analogie. Représentez 2 To en nombre de CD par exemple ;
• L’open source ne mourra jamais. Choisir du propriétaire c’est s’exposer à des risques (fermeture de l’éditeur, coût des maintenances, etc.) ;
• Les clients surveillent les concurrents. Il peut arriver qu’ils disent « machin a un super truc appelé Django, on veut la même chose » (c’est juste un exemple) ;
• Si vous vous posez encore la question : www.shouldiusetablesforlayout.com (et regardez le source) ;
• Il faut réutiliser ce qu’on a déjà fait, recycler.

Vous pouvez consulter le support de cette présentation sur slideshare.

Accessibilité : des volontaires ?

Stéphane Deschamps et Aurélien Levy sur le point de torturer deux volontaires, par PascaleLC

Stéphane Deschamps et Aurélien Levy se sont associés pour nous immerger dans les différentes déficiences qui peuvent toucher un internaute. Ces mises en situation ont fait beaucoup rire, mais j’espère que l’audience a pris conscience que quelqu’un d’handicapé (dois-je le rappeler ? Un handicap est lié au contexte) subit ça tous les jours.

Au menu :

• Cécité

  Plus de lumière, plus d’écran, l’introduction lue par une synthèse vocale (bien sûr paramétrée comme pour un aveugle : avec un débit extrêmement rapide).

  Ce qu’il faut en retenir :

  • Il faut faire des textes alternatifs et qui plus est pertinents (je l’écris, même si ça coule de source) ;
  • Il faut structurer sa page avec les balises appropriées, les synthèses vocales fournissent un mode qui permet aux déficients de parcourir la page suivant son plan. Dans ce cas les balises <h1>, <h2>, <h3>, etc. ont un énorme intérêt ;
  • Il faut faire des liens pertinents. Arrêtez les « cliquez ici », « en savoir plus », etc. ;
  • Il faut utiliser les balises <label> pour les formulaires, sans ça les champs ne sont pas associés à leurs intitulés et il est très difficile de faire l’association de tête (la synthèse va lire les x intitulés, puis les x champs) ;
  • Rendez accessibles vos vidéos ! Avec par exemple de l’audio-description ;
  • Spécifiez la langue de votre document et marquez les mots qui sont dans une autre langue (sinon la synthèse vocale lira le mot avec la phonétique d’une autre langue ; imaginez de l’anglais lu par un allemand alors que vous êtes français…)

• Malvoyance

  Des exemples de choses que nous faisons tout le temps : mettre un texte avec une couleur pas assez contrastée par rapport à la couleur de fond, donner du sens à du texte en fonction de sa couleur (« Les champs en rouge sont obligatoires »), ne pas prendre en compte les daltoniens (pourtant 10% de la population française est daltonienne).

  Ce qu’il faut en retenir :

  • Contrastez votre texte, utilisez l’extension Color Contrast Analyser de Firefox pour avoir des informations sur les contrastes de vos pages ;
  • Évitez de vous baser sur une couleur pour véhiculer du sens ;
  • Et en règle générale : arrêtez de penser comme un voyant ou comme quelqu’un de normal, si vous voyez du vert, dites vous que certains n’en voit pas.

• Déficiences motrices

  Un volontaire désigné se faisait ligoter le bras droit (puisqu’il était droitier) et devait remplir un formulaire. Lors de la soumission un joyeux message « session expirée » a bien fait rire tout le monde.

  Ce qu’il faut en retenir :

  • Il faut prévoir une session d’une durée suffisante, et pas seulement pour quelqu’un de valide (ne passez pas vos sessions à 10 minutes pour un formulaire de 3 champs non plus).

• Déficiences auditives

  Nos joyeux orateurs ont coupé leur micro et raconté une histoire différente en même temps. Personne n’a rien compris (j’ai retenu une histoire de grenouille).

  Ce qu’il faut en retenir :

  • Il faut faire du sous-titrage, systématiquement. Forcément on se dit que c’est impossible à faire, que ça coûte trop cher. Mais non, il existe des solutions simples, souvent automatisées et peu chères.

• Déficiences intellectuelles

  Ils nous ont projeté du texte en mouvement, clignotant (difficulté à se concentrer), un exemple de <marquee> moderne et demandé à quelqu’un de lire le texte (bien évidemment il n’avait pas le temps), un proverbe japonais écrit en kanji (que presque personne n’était capable de décrypter), et mon exemple préféré, que je vous retranscris tel quel :

  « Potentiellement il est possible de dire qu’avec un effort non négligeable et une attention toute particulière il est envisageable qu’un élément aussi insignifiant que la quantité d’informations dans une phrase et sa simplicité permettent de la comprendre plus facilement »

  Ce qu’il faut en retenir :

  • Évitez les textes en mouvement, clignotant et les <marquee>. Sinon, fournissez un moyen de contrôle dessus (des boutons pause et stop par exemple) ;
  • Dans le cas de texte dans une autre langue, fournissez une traduction, une définition, quoi que ce soit qui permettrait à l’utilisateur de comprendre ;
  • Dans le dernier cas je pense que c’est assez clair non ? Il faut faire des phrases simples (d’ailleurs, c’est encore plus difficile de faire simple) et placer l’information principale au début.

• Déficiences techniques

  Quelques exemples de sites avec le javascript (chaotique avec une synthèse vocale) ou les images désactivées.

  Ce qu’il faut en retenir :

  • Il ne faut pas faire de javascript intrusif, c’est le mal (entendez par là que vous ne devez utiliser javascript qu’en surcouche, qu’en bonus) ;
  • Vérifiez le contraste de vos textes avec les images désactivées (il peut être utile de rajouter des couleurs de fond) ;
  • Il ne faut pas utiliser de display:none ou de text-indent:-1000em, une synthèse vocale ne pourra pas « voir » le texte dans le premier cas, le texte sera invisible si vous désactivez les images dans le deuxième cas. Préférez les balises <img> avec un texte alternatif ;
  • Optimisez le poids des éléments d’une page. Il ne faut pas croire que tout le monde a une connexion ADSL (de toute façon personne n’est à l’abri d’une défaillance), il ne faut pas oublier les RTC, les mobiles, les…

Ils ont fait vraiment très forts, c’était une conférence à la fois très enrichissante et très drôle.

Vous pouvez consulter le support de cette présentation sur slideshare.

Internautes et robots des moteurs de recherche, mais comment font-ils pour s’y retrouver ?

Alix Lassaigne et Christophe Cotin-Valois, par Édas

Il me semble que c’est la conférence que j’ai le moins aimé. Les orateurs (Alix Lassaigne et Christophe Cotin-Valois) n’avaient pas l’air très habitués à ce genre de représentation et le sujet choisi, l’intérêt de faire un code sémantique (en gros), n’était pas trop adapté à l’auditoire. Dommage.

Vous pouvez consulter le support de cette présentation sur slideshare.

Table ronde

Une partie de la table ronde, par PascaleLC

Les intervenants de la journée se sont retrouvés autour de non pas une mais deux tables rondes ! Ils ont répondu aux questions posées par la salle et… euh… Ben voilà.

Conclusion du jeudi

C'était vraiment très intense, épuisant même. À part la conférence Internautes et robots… c'était vraiment du haut niveau, ça fait vraiment plaisir de voir ça en France. Bientôt le compte rendu de la journée du vendredi (peut-être un peu moins complet que celui là).

Sinon, ça fait toujours plaisir de rencontrer des personnes qu'on « croise » tous les jours sur internet, de discuter, de rire et de manger (je sais, mes centres d'intérêts sont limités).