Journée Mondiale de l’Utilisabilité 2010

En introduction

Pour la 6ème année, Fred Cavazza a animé une participation française au World Usability Day (qui est tombé un jour férié en France, le 11 novembre. La France est donc en avance d’une journée).

Le thème pour cette année était sur l’utilisabilité des sites d’informations et le programme portait sur :

  • un panorama de la presse en ligne
  • le webdocumentaire
  • l’écrit web
  • la visualisation des données
  • l’information à l’heure du websocial
  • l’utilisabilité des interfaces mobiles

Le thème n’est pas, à priori, celui qui me concerne le plus. Pourtant, la diversité des interventions et le fil rouge utilisabilité ont permis un balayage riche.
Plus que de donner de l’information ou un apprentissage, cet événement était une bonne occasion de sortir un peu de flux de la production et de jeter un œil sur ce qui se fait.

En plus, petite satisfaction personnelle, j’ai eu le plaisir d’y voir Amélie Boucher. Na !

Panorama de la presse en ligne

Benoît Drouillat

A travers son panorama, Benoît Drouillat a fait remonter des points qui ont en particulier retenu mon attention :

  • « un nouveau médium ne s’ajoute jamais aux média antérieurs et ne les laisse jamais intacts. Il les bouscule sans cesse et leur trouve de nouvelles formes et de nouveaux emplois. » (Marshall Mac Luhan), bon, juste pour rappeler que non, Internet ce n’est pas la mort du livre, de la télé, de la carte postale ou de je ne sais quoi !
  • Respecter un design en passant d’un support à l’autre (charte graphique identique du Financial Times du papier à l’écran) est-ce un garant d’une bonne ergonomie ? L’amoureuse de l’identité graphique que je suis aurais tendance à répondre qu’il faut garder des éléments. Mais justement, l’identité graphique, c’est l’art de respecter une identité globale avec des éléments, des supports, des contextes différents. De plus, la plus-qu’amoureuse de l’expérience utilisateur que je suis aurait tendance à dire qu’il faut s’adapter au média et ses modes d’utilisation. Donc ? Donc respecter l’identité ne veut pas dire copier-coller une charte. Et le web a sa propre utilisation, grandement différente du papier.
  • La culture de l’innovation n’existerait pas ou peu en France dans les médias et les efforts sont plutôt portés sur les terminaux mobiles. C’est en effet l’incontournable du moment sans compter, bien sûr, sur le sempiternel blocage financier sur la R&D (Recherche et Développement).
  • Si les versions de journaux en ligne qui ne sont que des versions papier en PDF sont vraiment bien faibles par rapport aux possibilités, c’est au designer de proposer quelque chose exploitant le médium et favorisant les usages (bon, et à la direction de trouver des sous pour !)

Pour un compte-rendu (bien plus fidèle, de fait !) voir à la source 😉 :
Un panorama du design de la presse en ligne

Webdocumentaire

Upian

La conférence d’Upian a eut pour avantage d’ouvrir mes petits yeux d’intégrateur-du-bon-vieux-HTML-de-papa sur un autre support que la page web traditionnelle.
Les projets présentés étaient :

  • Gaza Sderot
  • Prison Valley

« Gaza Sderot » (mais ? tiens ! Jonez Ronez nous en avait aussi parlé lors de sa conférence sur la qualité éditoriale à Paris Web 2008 !) est un projet ayant pour but de présenter des vidéos faites à Gaza, en Israël et à Sderot, en Palestine. L’ensemble du webdocumentaire est basé sur cette volonté de toujours montrer les deux villes en parallèle.

« Prison Valley » (qui, selon Ben, serait « partout ») propose près de 3h de films articulés sur une frise chronologie permettant de l’interaction avec des éléments connexes.

Ce qui est à retenir c’est que ces deux webdocumentaires abordent la page web avec des principes de navigation originaux. Mais rien n’a été dit sur des tests d’utilisabilité (tests utilisateurs) fait pour valider ces navigations.
Je me demande aussi si l’accessibilité est prise en compte…

L’unique point technique soulevé était sur l’innovation et le fait que les équipes sont tournés vers les nouveautés technologiques pour toujours chercher à aller plus loin.

L’écrit web

Éric Mettout – Rédacteur en chef du site L’Express

Cette conférence aurait largement pu prendre une demi-heure de plus. Les informations données par Éric Mettout ne sont pas nouvelles (pour quiconque consomme des informations sur le sujet, en tout cas) mais c’est très bien retranscrit. Il me semble que cette conférence balaye la totalité du sujet. Les diapositives étaient très complètes et peuvent aisément servir de « rattrapage ».

Mes notes en vrac :

  • la longueur d’un texte sur le web est aussi dépendante de la façon dont on va architecturer le texte. Penser à laisser des respirations dans un texte long.
  • les questions 5W2H (What, Where, Who, When, Why, How, How many) doivent avoir été couvertes par les premiers éléments : titre, intertitre, chapô, et, au pire, premier paragraphe.
  • C’est également dans cette même zone que doivent figurer les mots qui permettront aux moteurs d’indexation de classer la page.
  • L’écriture web c’est aussi des photos, des vidéos (attention aux droits de diffusion !), des mashups, l’anticipation des commentaires à venir, des liens. Le rédacteur web doit avoir ces outils là en tête et s’en servir.
  • A propos des mashups, Éric Mettout a évoqué les frises chronologiques, la visualisation de données, les arborescences, les webdocumentaires. Il a alors souligné le fait que, grâce à des outils en ligne (dipity, Many Eyes, Pearltrees…), l’éditeur est maintenant à même de travailler lui-même ces éléments (voilà pourquoi ils rejoignent les tâches de l’écrit web).
  • Le rédacteur en chef de L’Express atteste que plus on fournit des liens externes à un internaute …plus il revient ! (Si ce principe me paraît plein de bon sens, il semble que là, il ait été vérifié et validé par un site dont les revenus sont probablement basés sur l’audience. Voilà qui apporte de l’eau à ce moulin)
  • chaque article est potentiellement une page d’atterrissage. Cela doit être prise en compte dans les principes de navigation du site.
  • L’écrit web (journalistique) peut aussi être du live-blogging ou l’écriture dédiée à des réseaux sociaux. Commenter une manifestation en direct, animer une page éditoriale sur Facebook, alimenter un fil Twitter d’actualité est un exercice spécifique auquel le journaliste doit s’adapter. Il en va de même pour le blog.

Enfin, Éric Mettout a fini de balayé tout son paysage de journaliste web en insistant sur combien les informations de web analytics pouvait être précieuses (et nouvelles !) pour un éditeur qui voit rapidement quels sont les contenus qui « marchent » le mieux. Le rédacteur web doit donc faire appel à ces informations et s’en servir.

Si la conférence a été faite au pas de course, je pense donc que le diaporama vaut une lecture.

Visualisation des données

Caroline Goulard

Caroline Goulard est venue nous « vendre » la visualisation des données. On a donc commencé par une introduction rappelant que la visualisation des données permettait de rendre compréhensible aisément une multitude d’informations car elle fait appel à notre intelligence visuelle plutôt que verbale. Bon, je ne sais pas pour vous, mais moi j’en étais déjà convaincue.
Spécifiquement à propos de l’utilisabilité, elle a précisé que la visualisation de données permet :

  • la personnalisation
  • l’interactivité
  • l’affinité
  • l’immersion

et que ces éléments permettaient donc une expérience utilisateur positive (en fait, on est plus dans la désirabilité que l’utilisabilité selon moi et en me référent au schéma de P. Morville).
Les trois modes d’engagement de la visualisation de données offre une forte préhension de l’utilisateur :

  • la vision
  • la manipulation
  • la circulation

Pour organiser une visualisation de données, il faut penser « LATCH » : Localisation Alphabet Temps Catégorie Hiérarchisation.
Les conseils finaux de Caroline Goulard pour concevoir une visualisation de données :

  • de garder à l’esprit que le but est de fournir de l’information ;
  • de privilégier la fonction et non l’esthétique ;
  • de donner du contexte ;
  • de tester ses interfaces à l’aide de tests utilisateurs.

L’information à l’heure du websocial

Fred Cavazza nous livre un passage en revue des impacts du websocial et des usages qui en découlent sur les médias informatiques.

Il note que le multiplicités des usages apporte une nouvelle complexité aux interfaces qui prévoient maintenant plusieurs couches d’information :

  • l’éditoriale,
  • une partie communautaire
  • reliée à une partie sociale.

Il se livre ensuite à son exercice préféré (enfin, c’est une interprétation toute personnelle) : les hypothèses d’évolution.
Il en cite trois :

  • la personnalisation : des médias d’information dont les pages sont créées à mon image
  • l’information à géométrie variable : comme le New York Times par exemple, qui propose une interface classique, une interface écrémée ne gardant plus que le contenu « brut » et une interface linéaire chronologique.
  • la contextualisation en fonction du terminal : si je suis sur mon ordinateur de bureau je ne voudrais pas avoir accès au mêmes fonction qu’en mobilité, par exemple.

Utilisabilité des applications mobiles

Backelite

Backelite est spécialisé en interfaces mobiles. A travers la présentation de leur société et de quelques unes de leurs réalisations, ils insistent sur :

  • la complexité liée à la multiplication des plateformes,
  • l’importance de se consacrer d’abord sur les fonctions premières,
  • le fait que le design doit être dédié à la simplicité et à l’explication
  • et que le contenu doit être adapté au terminal.

En conclusion

Félicitations à Fred Cavazza qui a réussi, je trouve, un joli éventail de sujet autour de l’utilisabilité via les sites d’information. On a abordé, au cours de cette demi-journée, les sites de presse traditionnels, le webdocumentaire et ses originalités, l’écriture web (bien) vue par un journaliste, l’information de données et sa retranscription visuelle (et utilisable !), l’incursion du websocial dans la consommation et les usages de l’information et un focus sur les applications mobiles (inévitable, par les temps qui courent) !

Encore une fois, cette conférence était plus un temps d’arrêt sur ce qui se fait que de la mise en pratique.

A cette occasion, Eyrolles, Designers Interactifs et L’Express ont gentiment distribués quelques livres, extraits et magazines.

Les 100 agences qui font le design interactif, Les métier du design numérique, Ergonomie web illustrée
Les 100 agences qui font le design interactif, Les métier du design numérique, Ergonomie web illustrée

Voir : Journée Mondiale de l’Utilisabilité 2010

Les 5 principes d’un logo efficace

Logos

En 2004, j’écrivais mes premiers articles en ligne. Deux articles se complétant l’un l’autre, sur la création d’un logo : Concevoir un logo – Considérations théoriques et considérations pratiques. Aujourd’hui, ces articles sont encore parmi les plus lus de mon blog.

En complément, voici les principes essentiels d’un logo :
What makes a good logo? (en anglais)

Quels sont, en quelques mots, ces principes ?

Un logo doit être :

  • simple
  • mémorisable
  • intemporel
  • multi-supports
  • approprié

Simple

Un logo simple est un logo qui combine plusieurs avantages : reconnaissable -même en peu de temps, mémorisable et propre à faire passer l’image du client.
Le principe KISS (Keep It Simple, Stupid) est à garder en tête pour tout logo.

Mémorisable

L’important est que le design doit logo soit facilement retenu et associé à la marque qu’il représente. En ce sens, il doit aussi se distinguer par rapport aux autres logos.

Intemporel

Le logo représente la marque et son identité. Quel meilleur gain si le logo traverse les décennies sans renier les principes de la marque, sans avoir l’air d’appartenir à une autre époque !

Multi-support

Un graphiste professionnel ne s’y trompe pas, un logo ce n’est pas seulement une belle image en en-tête d’un courrier. Le logo doit pouvoir être décliné sur une affiche en 4×3, sur un fond sombre comme sur un fond clair, en noir et blanc…

Approprié

Un logo représente une marque et donc son identité, son style, son univers. Par contre, il ne représente pas ses produits ; il représente plus un concept.

Pour en savoir plus sur ces quelques principes, consultez l’article de justcreativedesign.com et ses références : What makes a good logo? (en anglais)
Image de captcreate

Le développement durable dans la chaîne graphique

La consommation du papier

La consommation du papier n’est pas, comme on le croit encore, une mauvaise pratique écologique  (bon, le gâchis, c’est autre chose, mais là, c’est moi qui rajoute ça et c’est un autre sujet). Là, le conférencier à insisté sur la consommation d’Internet bien plus préjudiciable et je me suis faite toute petite, seule dans la salle à prendre les notes sur un ordi alors que tous avaient des blocs-notes (ahhh ! que je me suis sentie moins seule le soir même au W3Café !)

La gestion des forêts à été mise en place il y a déjà longtemps. L’industrie du papier ayant été la première à être montrée du doigt dans la prise de conscience écologique, elle a aussi été la première à réagir.
Les forêts gérées dans l’optique du développement durable prennent en compte à la fois la dimension écologique, économique et sociale (je ne le savais pas, mais les conditions de travail font partie de la notion de développement durable, par exemple).
La gestion de ces forêts implique également qu’il y a plus d’arbres plantés par an que d’arbres coupés.

Parallèlement, des forêts non gérées continuent à être exploitée (et détruites). C’est donc le papier issu de ces forêts là qu’il ne faut pas consommer. Des normes nous aident à choisir.

Les normes

La marque « IMPRIM’VERT »

IMPRIM'VERT

Elle ne concerne que les industries graphiques. Elle gère, depuis 11 ans, 3 critères :

  • la gestion des déchets dangereux
  • le stockage des liquides dangereux et déchets liquides
  • l »abandon de produits toxiques

Elle demande un fort engagement et est mise à jour en fonction des produits nouvellement découverts comme dangereux.

La marque « Print environnement »

Print environnement

Elle est équivalente à la marque IMPRIM’VERT mas s’adresse plutôt à des entreprises de taille modeste. Elle est tout aussi  valable et sérieuse que la précédente.

Les certifications FSC et PEFC

FSCPEFC

Ces certifications sont toutes les deux liées à la gestion du papier et de la forêt. Ces deux normes sont d’ailleurs équivalente ; l’une d’origine canadienne, l’autre est européenne.

L’apposition d’une ou l’autre de ces certifications garanti :

  • la préservation de l’environnement
  • le respect les droits sociaux des travailleurs
  • une économie viable

Chacune de ces normes garantie que le papier ne vient pas de forêts non-gérées et atteste également des efforts faits autour de la gestion des déchets, des encres, etc.

Pour pouvoir apposer sur un document les mentions FSC ou PEFC, il ne suffit pas que le papier respecte une des normes, il faut aussi que l’imprimeur soit certifié de la même norme. Dans ce cas-là, l’imprimeur demande un numéro de certification (assez long à obtenir)

Le papier recyclé

Pour ce qui est du papier recyclé, ce n’est pas une obligation mais plutôt une question de besoin. En fonction de la pérennité du document imprimé et du niveau de qualité attendu, on opte pour un papier recyclé ou non.
Il faut garder à l’esprit que, en plus de fait que le papier est une denrée renouvelable et qu’il faut, de toute façon, du papier « neuf » pour fabriquer du papier recyclé. Il n’y a donc aucune culpabilité à avoir si on décide d’utiliser du papier très blanc et donc non-recyclé pour un document haut-de-gammedont la durée de vie doit être longue.

Les autres normes

Boucle de Moebius

La boucle de Mœbius indique juste la quantité de papier recyclé dans le papier

Ecolabel européenNordic Environmental LabelDer Blaue EngelAPUR 100%

Label écologique de l’Union Européenne, l’Ecolabel nordique, L’Ange bleu et l’APUR (Association des Producteurs et Utilisateur de Uapier), dont le logo indique le pourcentage de papier recyclé,  sont aussi des bons repères.

Comment, en tant que donneur d’ordre ou concepteur print, optimiser la demande pour qu’elle soit la plus « écologique » possible ?

  • Choisir un papier certifié : FSC ou PEFC ou Recyclé
  • Favoriser des formats standards
  • Choisir le gramage en fonction de la durée de vie
  • Éviter les grands aplats (car la charge d’encre est plus forte et cela demande plus de pétrole)
  • Limiter les plis et les finitions

Comment choisir son imprimeur ?

Choisir un imprimeur certifié FSC / PEFC et/ou qui a la Marque Imprim’vert (ou iso 14001).

A défaut, privilégier celui qui utilise des encres végétales, imprime avec 3 % maxi d’alcool isopropylique dans ses solutions, gère ses déchets, utilise un CTP (sans chimie si possible), produit dans un bâtiment Haute Qualité Environnementale, etc.

Communiquer son engagement

Il est important de communiquer sur l’utilisation que l’on fait de papier recyclé, issu de forêts gérées, gestion des déchets, etc :

  • Pour sensibiliser
  • Pour son image de marque

Attention toutefois, pour pouvoir apposer les logos FSC ou PEFC sur un document, il ne suffit pas que le papier réponde à ces normes, il faut aussi que l’imprimeur soit certifié. Il doit alors demander un numéro de certification (procédure assez longue).

Cela peut donner :

  • « Ce document est imprimé sur du papier FSC – N° de chaîne de contrôle (fourni par l’imprimeur) »
  • « Ce document est imprimé sur du papier recyclé à 100 % »
  • « Ce document est imprimé avec des encres végétales »
  • « Ce document est imprimé par une entreprise Imprim’Vert / certifiée Iso 14001 »

Parlez-en à votre imprimeur, il vous conseillera.

Communiquez également sur une démarche globale de votre entreprise.
Un exemple de communication :  Cosmic Communication, Neoma (PDF)

En résumé

  • Sans se priver de toute créativité, favoriser, à la conception du document, les critères « écologiques » (grammage, format, etc)
  • Choisir un imprimeur FSC / PEFC
  • Opter ou non pour du papier recyclé mais se poser la question
  • Communiquer sur sa démarche

Pour en savoir plus

Voilà. J’ai souhaité faire ce compte-rendu car la prise de conscience écologique est encore difficile et peu répandue* et il suffit parfois simplement d’informer. Cette conférence m’a emballée pour toutes les informations qu’elle fournissait et, depuis, je n’achète plus un carnet de croquis sans chercher le label dessus ! 😉
* Peu répandue et pourtant : S’attaquer aux tabous pour devenir écolo et Des produits écolo rien que dans mes RSS de ces derniers jours 😉
Conférence tenue le 15/05/2009 par Patrick Cahuet, chef de segment à la division Systèmes d’Impression de IBM Printing System Divisions France.

W3Espresso du 15/05/09 – Compte-rendu

C’est Aurélien qui en parle le mieux 😉

halls beer burger, chouffe, cuba libre, welch, il parait que paul connait un peu Firefox, laaaaapin, hadopi, ARIA, ...
hall s beer burger, chouffe, cuba libre, welch, il parait que paul connait un peu Firefox, laaaaapin, hadopi, ARIA, ...

Je voudrais en rester là car tout est dit, mais je profite tout de même de ce mini-billet pour remercier « les gentils organisateurs » et pour témoigner, comme d’autres, de mon plaisir d’avoir été là à partager un moment « entre nous ».

Voir aussi :
La page du W3Espresso du 15/05/09
Pour ne pas rater le prochain : Flux RSS du site W3Café France
Aurélien, qui en parle si bien : fairytells

Les standards du web en entreprise – Jérémie Patonnier

Et les standards du Web dans tout ça ?
Et les standards du Web dans tout ça ?

Cette conférence très concrète nous permet de comprendre en quoi les standards du web et la qualité ne sont pas (que) des lubies des développeurs-geeks-passionnés-et-intégristes mais bien des actions menées par les entreprises au service du chiffre et de la rentabilité.

Présentation

Une rapide présentation de BNP Paribas Personal Finance nous permet de comprendre qu’il s’agit d’un acteur majeur du crédit (à la consommation, immobilier et rachat de crédits). L’ampleur du business sur Internet est tel (un million de visiteurs uniques par mois, un milliard de chiffre d’affaire en 2007) qu’une équipe est dédiée à l’activité web.

Et les standards du web dans tout ça ?

L’objectif d’une telle entité est clair et identifié : la rentabilité (acquisition, taux de transformation, ROI)

De façon très pragmatique, les choix technologiques sont donc fait aussi en fonction du taux de pénétration. HTML est utilisé à 100% (à la différence de technologies tentantes parce que plus « sexy »).
Si l’on se penche ensuite sur l’équipement des visiteurs de Personal Finance, on constate une forte pénétration de Window et environ 2% de Mac – pour les systèmes d’exploitation – et une forte pénétration de Internet Explorer (75%), Firefox (20%) et environ 2% pour Safari – côté navigateurs.

La conversion est simple : à un million de visiteurs par mois, 2% représentent environ 20 000 visiteurs.
L’entité e-Business d’une entreprise telle que BNP Paribas Personal Finance ne peut donc pas pas se permettre de « laisser de côté » les configurations plus rares. Utiliser les standards est le meilleur garant pour s’affranchir en grande partie des problèmes de configuration.

Cela prend également le relai des exigences en visibilité : référencement naturel, e-mailing et contraintes juridiques (accessibilité).

Bon, les standards du web ok. Mais qui et comment ?

Les équipes concernées sont toutes celles qui interviennent sur la conception et la réalisation de pages et applications web : marketing, commerciale, agence de communication, agence web, DSI et, dans le cas de BNP PF, une équipe dédiée interne de développement web.

Chaque intervenant joue un rôle vis-à-vis des standards en fonction de son périmètre : conception, webmastering, référencement, contraintes juridiques, etc.

Les standards du web sont intégrés au projet via l’intégration, bien-sûr, mais aussi la rédaction de cahiers des charges, l’audit, le suivi de la qualité ou via la formation des différents intervenants.

Au delà des standards : la qualité

Aller plus loin c’est intégrer la qualité au cœur des développements et de la maintenance. Elle va permettre d’assurer la pérennité d’indicateurs, d’élargir au maximum le public touché, de simplifier maintenance et interopérabilité.

Néanmoins, il ne faut pas se laisser égarer par le fait que la qualité est une notion subjective. On doit au contraire se baser sur les règles de développement web :

  • standards du web
  • accessibilité
  • bonnes pratiques de développement

Enfin, il faut s’assurer que ces règles sont suivies.

Pour mettre en place un suivi de la qualité, il va falloir dédier du temps et des ressources  au suivi de la qualité. A travers documentations et formations, sensibiliser les intervenants à l’accessibilité, à l’enrichissement progressif.

Un outil de suivi de la qualité est fait pour accompagner ce chantier itératif.

Enfin, une fois ces leviers mis en place, des pistes sont toujours possibles pour aller plus loin : améliorer sa performance, monter les équipes en compétences, industrialiser les développements…

Une fois qu’on s’est dit tout ça, qu’est-ce qu’il reste ?

Les standards du web mis en place vont donc permettre d’augmenter le chiffre d’affaire potentiel en élargissant la base client. De plus, le fait de garantir l’accessibilité aux applications – et notamment aux formulaires de demande – augmente le taux de transformation.
Des modes de conception et de développement normalisés entre les différents intervenants abaissent les couts. Enfin, cette baisse des couts se ressent également au niveau de la maintenance et de l’interopérabilité.

Voir la conférence :

La mode se démode, le <style> jamais – Daniel Glazman

Définitivement, je n’aime pas les conférences de Daniel Glazman ! …Ben oui, quoi ! c’est frustrant toutes ces choses qui vont arriver, tous ces nouveaux éléments, enthousiasmants et parfois très attendus qui … qui vont arriver ! 😀
Bon, bien sûr, je les aime autant qu’elles me mettent dans un état d’impatience et je sors d’une conférence de Daniel Glazman, telle que celle-ci, emballée et en aimant encore plus mes chers CSS !

Le compte-rendu si dessous est d’ailleurs très partiel par rapport à la richesse de la conférence. J’ai eu du mal à doser entre le plaisir d’écouter et de me laisser porter et celui de prendre des notes consciencieuses et rigoureuses 😉 De toute façon, je vous recommande vivement de vous faire vos propres notes en visionnant la vidéo … dès qu’elle sera sortie !

Quelques rappels :

CSS1 date de 1996 ; CSS2 est sorti en 1998 et CSS3 est en travail depuis … 1998.

Le CSS Working Group a imposé que CSS2.1 devait sortir dans les 2 ans.

CSS2.1?

CSS2.1 parce que CSS2 est à revoir : il faut corriger les erreurs et ambiguïtés, virer ce qui inimplémentable / inimplémenté / inutilisé. Les ajouts y sont minimes.
CSS2.1 devra subir des suites de tests.

Ce qui va être implémenté à CSS :

C’est là que commence le « teasing » avec une liste d’éléments CSS. Certains sont déjà implémentés dans certains navigateurs ; on peut donc commencer à « jouer » avec.

Selectors Level 3

  • :nth-child: s’utilise avec un argument. Cela permet de sélectionner un élément dans un groupe : 1 paragraphe sur 2, le 8ème élément … On pense tout de suite à nos tableaux dont on veut modifier la couleur de ligne une ligne sur deux. Finis ma class="lignePaire" !
  • selecteur d’attribut [nomdattribut] (implémenté dans tous les navigateurs sauf IE6)
  • @namespace : permet de mélanger du style pour HTML et SVG sans soucis.
  • :not() : pour nier la valeur booléenne résultante – Si l’élément n’a pas la classe « xxx » alors la règle s’applique. Je trouve ça génial et, maintenant qu’on me le met sous le nez, indispensable.
  • ::selection couleur de fond et couleur du texte des éléments sélectionnés. Je suis pressée de l’utiliser également pour me débarrasser du moche « blanc sur fond bleu ». Attention toutefois à ce qu’il n’y ait pas de « dérives » de graphistes ne voulant pas gâcher un design et en profitant pour rompre trop le contraste de la sélection.

marquee

On croyait s’en être débarrassé. On croyait que c’était bien. …Et bien non ! La possibilité de faire défiler un texte est très importante pour sur les marchés asiatiques (Japon, Chine). Cela fait partie de leurs usages.

Sauf que là, ce sera géré par CSS et non plus par HTML.

CSS Media Queries

Sélection des média selon leurs caractéristiques intrinsèques.
Celui-là aussi est génial et très attendu. Il va permettre de sélectionner une feuille de style en fonction, par exemple, de la taille de l’écran :
@media screen and (max-width: 501px) { ... }

Borders and backgrounds

De nombreux éléments arrivent pour les bordures et les images de fond :

  • background-size
  • background-repeat : space | round
  • background-clip : border-box | padding-box | content-box | no-clip
  • backgound-break : pour l’impression
  • border-radius (Mozilla, WebKit, Safari OK)
  • box-shadow

CSS Transformations

Je crois qu’on n’a pas fini de s’amuser quand la propriété transform sera à notre disposition ! A nous, intégrateurs et webdesigners consciencieux, d’en faire du bon et non pas du gadget.

  • transform: scale rotate translate skew matrix
  • transform-origin

CSS Transitions

Pareil avec celle-ci qui permet des animations de page bien sympatiques si on n’abuse pas de l’effet.

-property, -duration

Valeurs, unités et autres

J’en rêvais, je ne le croyais même pas possible. Depuis le temps que des profs de maths s’évertuent à me faire comprendre qu’on n’additionne pas des torchons et des serviettes … et bien CSS si !
CSS va nous permettre de donner des valeurs additionnant des % et des valeurs fixes ! Waouh !

width: calc(100%/3 - 2*1em - 2*1px)

Typage de attr() et généralisation de la propriété content ! (attention, si je remplace un paragraphe par l’url d’une image, il faut que le lecteur d’écran se base sur le DOM et non sur la restitution)

Multi-colomn

Le multi-colomn, que certains d’entre-nous exploitent déjà grâce à Firefox…

CSS colors

Idem avec opacity.

A noter à propos des couleurs, la dépréciation des couleurs système CSS2.

CSS 3 Basic UI

Et encore plus d’éléments à découvrir, exploiter et utiliser :

  • contrôle des éléments de formulaire : :active, :defaut, :valid, :invalid, …
  • ::value, ::choises
  • box-sizing
  • nav-index

Brouillons :

Et pour finir de se mettre l’eau à la bouche, voici ce qui est en préparation dans la hotte :

  • gradiant,
  • grid positioning / CSS templat layout,
  • @font-face,
  • flexible box model,
  • Generated content for page media,
  • variables / constantes, CSS positioning (hauteur d’un élément égal à la hauteur d’un autre élément).
Il paraît qu'il est de bon ton de mettre un canard...
Il paraît qu'il est de bon ton de mettre un canard...

Qualité éditoriale, la grande oubliée – Joël Ronez

Joël Ronez à Paris Web 2008 (Photo de _yupa_)
Joël Ronez à Paris Web 2008 (Photo de _yupa_)

En matière de qualité éditoriale, Joël Ronez déconseille la mise en application d’une charte qui est, selon lui, trop difficile à mettre en œuvre et donc très peu suivie.

Il met en avant, à la place de toute charte, 10 grands principes, détaillés ci-dessous :

  1. On écrit pour les lecteurs
    Il faut éviter le jargon et les phrases compliquées. Au contraire, il faut faire court et concis. Le texte doit donner de l’information ; attention aux phrases vides de sens ! Et, dans la même idée, éviter de s’auto-centrer.
  2. Le texte n’est pas un élément décoratif
    Néanmoins, le texte fait partie de la maquette. La maquette doit donc être préparée, de préférence, avec du vrai texte.
  3. Le texte est le véhicule
    Le texte est à la fois le véhicule du sens et celui du parcourt du visiteur ; il fait partie des éléments de guidage.
    Les titres doivent être informatifs et renseigner le visiteur sur ce qu’il trouvera dans le texte en dessous. La logique du teasing ne marche pas dans le domaine de l’éditorial web.
    Penser également à utiliser des textes d’accroche ou chapô.
  4. La page est un espace
    Concevoir son texte en fonction de l’espace de la page. La lecture d’un contenu par l’internaute se fait en « F » : l’axe vertical pour rechercher de l’information, l’axe horizontal pour approfondir. Il faut donc que les titres et les informations importantes soit en début de ligne.
  5. Le web n’est pas fait de pages
    Les pages web ne sont pas des espaces statiques où l’éditeur à la main sur tout. Les pages sont maintenant de plus en plus collaboratives et il faut prendre en compte la participation de l’internaute.
  6. Le CMS m’a tuer
  7. Le workflow m’a tuer
  8. La DSI m’a tuer
  9. Le lien c’est le web
    Proposer des axes d’approfondissement en faisant des liens entre son contenu et les autres contenus. Ne pas appauvrir son message en ne faisant pas de lien sortant.
  10. Quelques basiques :
    • Lisibilité par la forme (aération, paragraphe) et par le fond (précis et concis)
    • Structure (Titre, accroche, texte)
    • Principe de la pyramide inversée (les informations importantes en haut) et des 5W (Who, What, Where, When, Why)
    • Indexabilité (titres informatifs et utiles au référencement naturel)
    • Facilité d’accès aux contenus (libellés clairs)
    • Temporalité (citer ces sources)
    • Profondeur (faciliter l’accès à la profondeur)

Si ce rapide survol vous a donné envie d’approfondir, Joël Ronez a écrit un livre sur le sujet : L’écrit web

Qualité et accessibilité web, vers l’amélioration continue – Élie Sloïm

La conférence d’Élie Sloïm était une introduction à l’amélioration continue de la qualité dont voici un rapide compte-rendu.

Les principes techniques à respecter

La séparation du fond et de la forme, en tout premier lieu, est une base indispensable à la qualité. Elle est gérée en mettant d’un côté le contenu dans les fichiers HTML et de l’autre la mise en forme via les fichiers CSS. Le recours au HTML, en autre, va également vous permettre de renseigner la structure sémantique de votre contenu.

Lors des développements, commencer par faire du pluri-média puis du spécifique, on peut ensuite également enrichir les interfaces : les interfaces sont d’abord « pauvres » et sont fonctionnelles, puis on peut rajouter une « surcouche » d’interfaces riches.

Enfin, penser à la délégation et mutualisation technique.

Les principes de management

Le modèle VPTCS (Visibilité Perception Technique Contenu Service)

Les clés du management d’un projet vers l’amélioration de la qualité passe par la séparation des métiers. Le web se professionnalise et chaque aspect de la fabrication et du maintient d’un site web passe maintenant par des spécialistes.

Le média implique aussi de privilégier les méthodes agiles (modèle VMC). Des itérations rapides et fréquentes seront plus efficaces. Dans le même état d’esprit, être à l’écoute des utilisateurs permet de savoir quels points travailler, selon quelle priorité.

Les modèles de qualité, tel que VPTCS (1) et les référentiels sont des éléments qui permettent de cadrer les actions et qui servent de base et d’accompagnement.

Enfin, tout cela ne servirait à rien sans des contenus et services à valeur ajoutée.

Les pièges à éviter

Le plus gros des freins est bien sûr le rejet global. Néanmoins, il faut également se méfier de la surqualité. Voir trop bien faire amène parfois à des excès, des culs-de-sac. Parallèlement, une mauvaise démarche consisterait aussi à faire des rejets technologiques pour aplanir les contraintes de qualité ou encore de déporter les hébergements des éléments « à difficulté » pour ne pas avoir à les régler.

Description de la démarche

La démarche de l’amélioration continue de la qualité passe par cinq étapes itératives :

  1. l’inventaire : quel est le parc de site ? qui le gère ?
  2. les référentiels : quels sont les critères auxquels je veux que mes sites répondent
  3. l’état des lieux : quel est le niveau de mes sites par rapport au niveau de qualité que je souhaite atteindre
  4. la planification : quels sont les objectifs de mes sites ? Comment je m’organise afin d’atteindre ces objectifs
  5. le déploiement : suivi des améliorations

L’outil Mon Opquast

L’outil Mon Opquast s’inscrit dans la démarche de l’amélioration continue de la qualité. Il permet de traiter les cinq étapes décrites ci-dessus.

Communiquer sur la qualité

Une des erreurs consiste à ne vouloir communiquer sur la qualité qu’une fois un niveau idéal atteint. Ce n’est pas la chose à faire car ce niveau n’est pas toujours (jamais) atteint et l’on se prive, pendant ce temps, d’une communication positive et récurrente sur notre démarche.

L’accessibilité

L’accessibilité est un cas difficile sur lequel il faut se pencher en fonction de ses moyens. La démarche en cinq étapes décrites ci-dessus peut s’appliquer à ce cas là où le référentiel utilisé pourrait être RGAA (déjà implémenté dans Mon Opquast), où l’on prévoirait des formations à l’étape de la planification et où le déploiement serait le moment de la mesure des progrès, de la communication et du retour à la planification.

Ergonomie des interfaces riches – Amélie Boucher

Amélie Boucher lors de la conférence Paris Web 2008
Amélie Boucher lors de la conférence Paris Web 2008 sur l'ergonomie des interfaces riches

Les interfaces riches ne changent pas les grands principes de l’ergonomie

Si l’arrivée des interfaces riches – qui se construisent et se déconstruisent en fonction des actions de l’internaute – apporte de gros changements matière d’ergonomie, les principes et les contraintes restent les mêmes. L’interface reste « l’écrin » du service ; elle s’efface à son profit.

Quelques points sont à veiller particulièrement avec les interfaces riches

Les changements ergonomiques qui découlent des interfaces riches portent plus sur la façon dont l’ergonomie va s’adapter aux nouvelles techno pour toujours faciliter la tâche de l’internaute.

Attente et Immédiateté

Si l’attente doit être limitée, elle doit aussi être signalée. L’internaute doit savoir que quelque chose est en train de se produire, il doit aussi savoir quoi. L’attente doit aussi être justifiée : attendre pour un calcul, oui ; attendre pour avoir une police à disposition dans une application d’édition, non.

L’attente peut parfois être « forcée » car parfois, l’immédiateté est déroutante.

Feedback

Le feedback doit être donné à chaque fois qu’il est nécessaire : au rechargement d’un élément, pendant le traitement d’une action, pour les différents état d’une tâche (« Ajout en cours », « Ajouté »)

Il doit également être correctement placé, c’est-à-dire dans la même zone que celle du changement.

Affordances

Les affordances sont les possibilités d’action que suggère un objet par sa forme. Elles se basent aussi bien sur la métaphore que sur l’expérience.

Les nouvelles possibilités d’interaction suggèrent de nouveaux usages. Cela implique de bien guider l’internaute pour qu’il comprenne les actions attendues. Les mots, sont toujours le moyen le plus efficace pour le guider mais on peut également avoir recours aux symboles, aux icônes, au curseur de la souris…

Comme pour les interfaces « traditionnelles », il s’agit de bien accompagner l’internaute dès sa première utilisation.

Paris Web 2008 – La boîte à souvenirs

Le site de l’édition 2008 :

Les « twitts » :

Les photos :

Les croquis (et oui !) :

Les présentations :

Et voilà la mise à jour tant attendue ; la totalité des présentations sont accessibles : Présentation des conférences Paris web.

Les ateliers

Les comptes-rendus :

Les vidéos :

Mise à jour pour indiquer le lien le plus précieux : 😉

Les favoris :

Tout ce billet sera complété au fur et à mesure de la mise à disposition des présentations, des vidéos, etc.