Votre site, vous le voulez comment ?

   Oh, quelque chose de minimaliste, orienté typographie : c’est pour consommer sur place.

Ah… Si j’ai bien compris, vous êtes dans la mouvance du web 2.0

   Oui, oui, on ne produit rien, c’est l’utilisateur qui s’y colle… Nous voulons juste un design web 2.0 libre de droits (pas cher, donc)

Votre cible, c’est un peu l’utilisateur de l’iPhone, quand même ?

   Tout à fait ! On veut un truc genre Apple, sobre et moderne, vous voyez ?

Genre le nouveau logo iTunes ?

   Heu, non, pas jusque-là quand même…

Après ce préambule plus défoulatoire qu’autre chose, venons-en au coeur du sujet. Est-ce que le design d’un site a autant d’importance qu’on le pense généralement, surtout quand on regarde des sites web qui font beaucoup d’audience et d’argent comme Craiglist, Amazon, Ebay ou Google ?

Dans The Ugly Truth ou Le Design Ne Sert À Rien ! les auteurs mettent en avant les qualités de l’interface utilisateur au sens large pour expliquer la réussite de certains site relativement moches. C’est séduisant. Surtout lorsqu’on est plus attaché au fond qu’à la forme. Mais, l’ergonomie n’explique pas tout. Il existe une chose plus forte qu’un design affreux, plus solide qu’une ergonomie à la ramasse… C’est la MO-TI-VA-TION qu’a l’utilisateur de venir sur les sites en question.

Tous les sites montrés du doigt en exemple ont ceci en commun qu’ils proposent quelque chose dont l’internaute a besoin. Quelque chose qui fait qu’il est prêt à souffrir pour arriver essoufflé, la main tremblante sur la souris, jusqu’au formulaire de commande, heureux, enfin, de pouvoir sortir sa carte bancaire.

Articles sur le même sujet

• Le prêt-à-bloguer bride-t-il la créativité ?
• Le web 2.0 peut être dangereux… pour vos profits
• Usability Post, un blog sur le design et l'ergonomie
• Manifeste pour un interlignage minimum syndical pour les blogs !
• L'expérience utilisateur et l'ergonomie des sites web

Ca va sans dire mais mieux en le disant : sauf indication contraire, le contenu de ce blog (le fond et la forme) est protégé par le droit d’auteur.

Mes articles ne sont donc pas sous une licence Creative Commons ou autre, mais sous le régime du droit d’auteur (ouais, comment je me la pète grâve ^_^v ).

Jusqu’à présent, le procédé ne me gênait pas plus que ça, car je fais un usage régulier de liens internes dans mes billets, de sorte que je pensais que la reprise de mon flux pouvait au moins m’apporter quelques backlinks à défaut de royalties ;)

Grossière erreur. Depuis que je suis (verbe suivre) la croisade d’Aymeric contre les pilleurs de contenus, je suis un peu plus vigilant et je viens de m’apercevoir que les liens internes contenus dans mes billets passent de la forme monblog/titredubillet à aspirateur/titredubillet sur xoofoo, mais aussi sur feedshow, par exemple, lorsqu’on utilise des liens relatifs sur son propre blog !

Quelques pistes pour que ça change

Chercher les coordonnées des contrefacteurs et de les prévenir une première fois gentiment de me reverser une parties des sommes gagnés grâce à mes articles ou de supprimer mon flux de leur Planet.

Adresser systématiquement une facture au responsable du site aspirateur avec le rappel du fonctionnement du droit d’auteur. Vu le temps que je passe sur certains articles, la note peut grimper très vite. Pour ceux qui seraient intéressés par cette approche, voici une estimation des tarifs :

• 150€ pour chaque article tagué « tutoriel » ou classé dans Articles traduits,
• 75€ pour chaque billet présents dans les catégories Conception web ou Intégration web,
• 25€ pour les autres.

Revenir aux flux tronqués. Sachant que le service rendu aux lecteurs change de nature : au lieu d’apporter au visiteur le contenu sur un plateau, on le prévient juste qu’un billet a paru. Un pis-aller à mon humble avis.

Supprimer totalement les flux RSS, ce qui aurait pour avantage inconvénient de faire venir les visiteurs sur le blog au lieu de lire le billet confortablement installé dans leur aggrégateur ;)

Je dois avouer que cette dernière solution me tente bien. A la limite, pour ne pas pénaliser les lecteurs réguliers en les obligeant à venir sur le blog pour rien, je regarderai s’il est possible de mettre en place un système pour permettre la réception des billets par e-mail sans avoir de flux RSS actif. (Si quelqu’un a une idée).

Sachant que les visiteurs les plus actifs viennent généralement sur le blog pour lire et/ou laisser un commentaire, la suppression des flux RSS couplé avec la réception des articles par e-mail n’est finalement pas si pénalisante que ça.

Ma question est donc la suivante : préféreriez-vous recevoir un flux tronqué et venir sur le blog si le texte visible vous intéresse, ou la suppression pure et simple et recevoir les billets par email ?

PS : si d’autres solutions vous viennent à l’esprit, n’hésitez pas à m’en faire part ;)

Articles sur le même sujet

• Check your <body> avec le W3C
• Le Design serait inutile dans 80% des cas
• Manifeste pour bouter IE 6 hors des blogs avec kickIE6.js
• Feedburner — Holly Hits, my feed is reach!
• Bang! Kapowww! Krakkk! Feedburner, nous avons un problème ?

Ajax, interfaces riches, mashups, web social et User Generated Content ajoutent souvent plus de complexité qu’ils n’offrent de solution. Ce web 2.0 détourne les ressources graphiques et prouve (une fois encore) que le ramage ne se rapporte pas toujours au plumage :

• Ajax et les interfaces riches : trop de complexité,
• Réseaux sociaux et User Generated Content : trop peu d’utilisateurs,
• Mashups : confusion des marques,
• Modèle économique basé sur la publicité : bulle 2.0,
• Sites web qui « déchirent » : non-représentatifs des sites commerciaux.

En bref

Ajoutez une pincée de fonction web 2.0, mais concentrez-vous sur le coeur de votre service ! Pour nous guider, Jakob propose de doser l’infusion des fonctionnalités web 2.0 en fonction des différentes sortes d’expérience utilisateur :

• Information, marketing (corporate, gouvernemental ou associatif) : 10%,
• E-commerce : 20%,
• Médias : 30%,
• Intranets : 40%,
• Applications web : 50%.

Articles sur le même sujet

• Le Design serait inutile dans 80% des cas
• L'expérience utilisateur et l'ergonomie des sites web
• Quels sont les services web 2.0 que j'ai utilisés aujourd’hui ?
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Netvibes : web 2.0 vs Google Reader : +1

Articles sur le même sujet

• 35 blogs de développeurs web
• HTML5 Please — Fallback et Polyfills (ou pas)
• BAW Auto Shortener — Raccourcisseur d'URL pour WordPress
• 3 sites web à emporter sur une île déserte ?
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

• Jeudi 19 juillet a eu lieu le premier Apéro du Jeudi au Voxx, à Lyon. Une partie de l’équipe Lyon-Blog a répondu présent à l’invitation de Jef. Très bonne ambiance, des nouvelles têtes par rapport aux Apéro-blog. Je regrette toutefois le peu de porosité entre les différents groupes. Manque peut-être la mise en place de badges, étiquettes, ou tags sur les people, histoire de faciliter la prise de contact, pas toujours aisée, même pour les moins timides d’entre nous. Jef, si tu me lis ;) Enfin, c’est aussi valable pour Lyon-blog !!! Des photos sont disponibles : si vous voulez voir à quoi ça ressemble, je donne le lien vers le compte Flickr des Apéros du jeudi qui contient aussi les prises de vues réalisées par Fétard qui a inauguré son nouvel appareil ;)
• Après avoir demandé aux blogueurs quels étaient les services web 2.0 qu’ils utilisaient le plus, comme promis, Jacques Froissant a fait le tri dans les réponses et propose le classement des 10 services web 2.0 les plus utilisés par les blogueurs.
• Tiens, en parlant de classement, Wikio a placé mon blog en 94ème position toute catégorie confondue (sur plus de 20 000 blogs…) et en 38ème place dans la catégorie High-tech dans laquelle nous retrouvons :
  • Eric en 3ème position,
  • Philippe en 7ème,
  • Henri en 10ème,
  • Vinch en 18ème,
  • François en 43ème,
  • Emich en 65ème,
  • Alexandre en position 69 ^_^,
  • etc.
• Tiens, en parlant de wikio, Marc Thouvenin et Pierre Chappaz quittent Netvibes pour occuper chez Wikio, l’un le poste de responsable marketing, et l’autre, le développement global (enfin j’imagine) en qualité de co-fondateur. En ce qui me concerne, je rappelle que j’ai moi aussi quitté Netvibes pour… Google Reader :)

Articles sur le même sujet

• Quels sont les services web 2.0 que j'ai utilisés aujourd’hui ?
• Twitter : Signal social, microblogging et moblogging
• Fishr arêtes de ficher !
• Web beuh zéro : au secours, ils ont fumé la moquette !
• Journalistes vs Blogueurs (Gladiators inside)

Communication

• Gmail : la boite mail accessible partout que j’utilise depuis un peu plus d’un an maintenant. J’ai quand même configuré Opera pour avoir une copie locale de ma correspondance. J’apprécie particulièrement la réactivité globale, les filtres (règles de messages), la gestion très souple du classement par Labels (tags) même si un peu de rigueur dans l’organisation aide aussi ;) J’arrive à 37% d’utilisation sur les 3 Giga disponibles (je me sers de Gmail Drive pour quelques sauvegardes).
• Twitter : Parce que je le veux bien ;) Pratique pour être en contact avec des personnes que l’on n’a pas forcément parmi ses contacts MSN…
• MSN Messenger : disponible sur tous les ordinateurs de France, de Navarre et hors de nos frontières, et puis tout le monde n’est pas sur Twitter :p

Page personnalisable

• J’utilise de moins en moins Netvibes à cause des ralentissements désagréables qu’il provoque dans mon Firefox sous w2k. Et puisque iGoogle est définitivement trop moche – les widgets sont tous plus affreux les uns que les autres, et le pire, c’est que leurs laideurs n’arrivent même pas à s’harmoniser entre elles – je n’utilise plus de page personnalisable. Na !

Organisation

• Post-it : Pour prendre des notes avec une page web sous les yeux.
• Google Notebook : Très pratique pour structurer les notes un peu longues prises avec Post-it.
• Google Calendar : Je m’y met doucement et je suis vraiment emballé par l’ergonomie et les fonctions de partage d’agenda.
• 43Things : pour se fixer des objectifs (plutôt sur le long terme) en organisant le suivi avec la tenue d’un mini-blog pour faire le point sur les étapes accomplies et obtenir l’avis de ceux qui partagent le même but. Bon, j’avoue que je ne l’utilise pas vraiment tous les jours, mais il y a du potentiel quand on se lance dans un projet complexe qui nécessite un feed back de la part d’une communauté. Bon, en même temps on peut aussi ouvrir un blog dédié…

Bureautique

• Google Document & Tableur : super pratique pour ouvrir un document Office depuis Gmail sans le télécharger pour autant (bien plus rapide que de l’ouvrir avec OpenOffice.org).
• Post-it : je commence presque toujours mes textes avec ce petit utilitaire astucieux pour les continuer sur OOo ou sur Google Document.

blogs

• WordPress : Code Quantum!
• DotClear : Da Vinci Code!
• Google Reader : celui que j’utilise le plus. Je teste également bloglines et newsgator.

Statistiques

• Google Analytics : indispensable. Devient par la force des choses la référence en matière de mesure d’audience. La nouvelle version satisfera les petits et les grands.
• iMinr : il est possible de configurer soi-même les données à analyser. Nécessite quand même : 1) de savoir ce que l’on veut, et 2) de savoir le programmer.
• TLMEB : Ce site propose un classement des blogs sur une donnée très pertinente : le nombre de visiteurs uniques sur 7 jours glissants par catégorie thématique. Les chiffres sont fournis grâce à un script à installer soi-même. C’est apparemment la même personne (ou société) qui est à l’initiative de iMinr.
• Spongestats : Développé par un lyonnais passionné professionnel et rigoureux, Spongestats carbure à l’Ajax et m’apporte mes résultats quotidien sur un plateau.
• phpMyVisites : pas très beau, pas très web 2.0, mais contient des morceaux d’Ajax. Je ne sais pas si c’est l’habitude (c’est le premier outil statistique que j’ai installé) mais les données essentielles sont accessibles très rapidement. Quelques problèmes en revanche avec le time limit de 30 sec. pour afficher les statistiques mensuelles. Mais bon, je m’en sers surtout pour les vues quotidiennes et hebdomadaires.
• MyBlogLog : Les chiffres fournis par MBL sont parfois fantaisistes, mais l’outil donne une petite idée des liens sortants les plus cliqués.
• HitTail : pour savoir si la longue traine de mes mots-clés vaut de l’or. Ou pas.
• Feedburner : j’espère que le rachat par Google permettra de fusionner les chiffres fournis par Google Analytics en tenant compte des clics en provenance du flux RSS…
• Technorati : inscris depuis presque un an, j’ai commencé à l’utiliser régulièrement depuis peu pour avoir une idée des sites participants à la chaîne Kawa-Yaka. Depuis, j’ai peur de devenir accro ;)

Publicités

• Text-Link-Ads : prometteur.
• Google Adsense : très intéressant pour connaitre le positionnement d’un billet en terme de mots-clés ;)

Réseaux sociaux

• Copaing : un « copain d’avant » d’aujourd’hui qui nous veut du bieng (gratuit) ;)
• Viadeo : Le seul réseau où j’ai réussi à renseigner mon profil à au moins 90%.
• Ziki : Pas mal d’inscrits parmi lesquels il est possible de faire des recherches selon de très nombreux critères. Je m’en sers de plus en plus pour centraliser mes différents profils. Permet également d’être visible sur Google et Yahoo!
• Facebook : je suis (du verbe suivre) le mouvement twitterien… on verra bien, s’il en reste quelque chose…
• Twitter : pour réseauter entre messagerie instantanée, micro-blogging et Google News de proximité.

Bookmark

• blogmarks : vraiment top, avec des fonctions de réseaux d’amis pour partager ses blogmarks. A réussi à importer plus de 2000 bookmarks sans problème alors que del.icio.us a calé…

Musique

• radioblog : pour écouter de la musique et en mettre sur votre blog.
• blogmusik : pour écouter de la musique et en mettre sur votre blog. En mieux ! L’ajout d’un titre par glissé-déposé dans une playlist est un vrai régal.

Quelques liens pour approfondir la question

Comme j’ai déjà eu l’occasion de décrire plus en détail certains services mentionnés plus haut, j’en profite pour redonner un coup de boost à des billets qui sont toujours d’actualité :

• Netvibes et Google Reader
• Les réseaux sociaux
• Les mashups web 2.0
• Walk like an ajaxian avec Copaing, mybloglog, blogmarks…
• 43Things
• Twitter
• Mesure d’audience

Pfiou… Fait :) Bon, je passe la patate chaude à Laeti, myev et Blazouf

Articles sur le même sujet

• Twitter : Signal social, microblogging et moblogging
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Mon Top 5 des outils pour bloguer
• Mesure d’audience : des mots-clefs au ClickRank
• Les réseaux sociaux et l'esprit web 2.0

Présentez en une phrase jusqu’à 43 choses que vous voulez faire dans la vie, associez des tags, reformulez avec d’autres mots afin d’être bien compris, tant il est vrai que :

Ce qui se conçoit bien s’énonce clairement et les mots pour le dire viennent aisément.

Vous verrez ensuite si d’autres personnes partagent les mêmes envies. Inspirez-vous donc des solutions qu’elles ont mises en place pour parvenir à leurs fins, ou pas.

Ne reste plus qu’à alimenter le mini-blog dédié à cet objectif pour faire le point sur l’avancement de votre projet avec l’aide bienveillante des membres de 43 Things qui peuvent laisser des commentaires ou vous encourager par un cheer s’ils estiment que vous allez dans la bonne direction. Il est même possible de donner un cheer à un commentaire constructif au regard du but poursuivi.

Le widget ? Ah, oui, j’allais oublier. Il est possible de mettre la liste des 43 choses que vous aimeriez faire sur votre blog. Ma liste de souhaits est courte, mais comme dit le proverbe :

« Pour aller loin, ménage ta monture » :

Articles sur le même sujet

• Quels sont les services web 2.0 que j'ai utilisés aujourd’hui ?
• Twitter : Signal social, microblogging et moblogging
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Les réseaux sociaux et l'esprit web 2.0
• Le petit journal du web — Non, Twitter n'a pas tué les Backlinks… La preuve !

Je trouvais l’idée sympathique, mais sans plus. Jusqu’à ce que je lise le billet de Vinch. Et hop ! me voilà sur Twitter. Je lis, je m’inscris, et je suis là, à choisir une couleur de fond pas trop criarde pour le widget Flash.

Comment ça marche ?

L’inscription terminée, je commence à tester. Le site affiche mon avatar, mon pseudo (avec un lien vers ma page publique), mon status (ce que je suis en train de faire), et le temps passé depuis mon dernier gazouillis (c’est comme ça que l’on peut traduire Twitter).

Sur le widget Flash, il ne reste plus que le status. Deux flèches permettent d’afficher les status précédents et suivants. Le tout dans un petit bloc ni beau ni moche dont on peut choisir la couleur.

J’allais passer sans m’en rendre compte du côté obscur, quand je suis tombé sur la version brute de fonderie du widget : un honnête Javascript à copier-coller où je veux.

Pour résumer, le script splitte le texte du status et le temps passé depuis ma dernière utilisation, puis écrit le résultat avec innerHTML dans deux balises span qu’il suffit de styler – ou de changer !

Pour ma part, j’ai utilisé la balise blockquote pour l’affichage du status que je considère comme une citation, et une balise p pour le temps passé depuis la dernière mise à jour.

L’affichage du temps est réalisé par le script (simple copié-collé), de sorte que j’ai pu le personnaliser. J’aurais pu tout aussi bien le supprimer, mais il ne serait rien resté du concept Twitter déjà minimaliste ;)

J’ai été agréablement surpris par l’absence totale de publicité sur cette version Low Tech : on dirait vraiment que c’est moi qui l’ai fait ;)

En revanche, je suis moins satisfait par les temps de réponse du script qui ont tendance à ralentir le chargement de la page de temps à autre.

Pourquoi ça marche ?

Le succès grandissant de Twitter et le buzz énorme sur le service ont provoqué moult réactions plus ou moins favorables aux gazouilleurs. Twitter divise la blogosphère :

• Une grande partie trouve que ça ne sert strictement à rien, et qu’il est même indécent d’étaler sa vie quotidienne dans ce qu’elle a de plus banale ou triviale. A ceux-là, je rappellerais seulement le slogan qui accompagna la Twingo en son temps : à nous d’inventer la vie qui va avec… Et toc ;)
• Beaucoup trouvent ça inutile donc indispensable. Ce sont souvent des blogueurs qui relayent l’information sans trop s’engager eux-mêmes. Mais au moins ne dénigrent-ils pas un service qu’ils n’ont pas vraiment testé…
• D’autres encore, dont je suis, essaient de comprendre le phénomène de l’intérieur tout en s’amusant :)
• Et enfin, une majorité de blogueurs ou non-blogueurs trouvent dans Twitter le moyen de diversifier encore plus les moyens de communication pour rester en contact avec leur tribu. Ce qui est l’objectif premier du site.
• etc.

C’est pas tout de l’installer, mais je fais quoi avec ?

Pour l’instant, parmi toutes les utilisations possibles, je n’ai pas encore vraiment choisi : 140 caractères c’est court (à peu près la taille d’un SMS). En même temps, ça peut être motivant de faire passer un message en si peu de lettres :

• Mon humeur du moment (mais je doute que ça intéresse du monde),
• Ce que je suis en train de faire (idem),
• Des Haikus (tiens pourquoi pas),
• Des citations (idem),
• Le site que je suis en train de visiter (pas bête),
• Le bon plan de derrière les fagot (idem),
• De l’auto-promotion (ouééééé, noooooon),
• …

Finalement les idées ne manquent pas. Si de votre côté vous voulez rallonger la liste, n’hésitez pas à squatter les commentaires.

Trucs et astuces pour Twitter tranquille

Il est possible de faire des liens. Mais comme tous les caractères sont comptés il ne reste pas beaucoup de place pour le corps du message. J’utilise donc tinyurl qui échange mes longues URL contre des plus courtes. C’est toujours ça de gagné.

Je peux Twitter de partout…

Outre l’interface du site lui-même, il existe une extension Firefox très astucieuse pour twitter tout en surfant. Par ailleurs, en activant l’option idoine sur le site, et en invitant le contact twitter@twitter.com, je peux utiliser mes 140 caractères sur GTalk ! Malgré tout, je pense rester sur l’interface du site car l’affichage du nombre de caractères restants lors de la saisie est une aide précieuse quand on a tendance à déborder…

… mais pas sur Internet Explorer

En vérifiant mon Twitter sur IE6, je me suis rendu compte qu’il ne gazouillait pas. En attendant de régler le problème, j’ai copié-collé le code HTML résultant du script en ciblant le dernier de la classe via les commentaires conditionnels, et j’ai mis deux citations en attendant.

Un éco-système riche et innovant

Twitter a inspiré des initiatives nombreuses et parfois étonnantes :

• twittervision propose une carte du monde affichant en temps réel les utilisateurs en train de gazouiller. C’est assez bluffant : la carte se déplace sous vos yeux (en 1280 x 1024) et affiche une infobulle à l’endroit où le Twitterer twitte.
• Le moteur de recherche twitterment affiche les résultats sur deux colonnes. La première affiche les gazouillis associés à votre mot-clé, et la seconde fournit des indications statistiques sur la tendance horaire ou journalière d’apparition du mot-clé, une carte Google (inaccessible à l’heure où j’écris), et quelques mots-clés en relation avec le vôtre pour élargir votre recherche.Vous pourrez aussi comparer la fréquence d’apparition de deux mots-clés. Deux nuages de tags vous renseigneront sur les termes qui montent et ceux qui descendent pour avoir une idée du Zeitgeist Twitterien.
• Pour mettre un peu de sémantique dans cette joyeuse anarchie, Gorka Julio propose de mettre en place un nanoformat pour Twitter sur une page wikispaces. En voilà une idée qu’elle est bonne ! Je dirais même que c’est le genre d’idée qui, si elle marche et si le phénomène Twitter continue sur sa lancée, pourrait permettre de structurer le web. Save the web, save Twitter ? Pourquoi pas :)

C’est pas tout mais faut y aller, maintenant !

Maintenant que le vin est tiré, il faut le boire. Je verrais bien à l’usage quoi faire de Twitter. Certainement un mélange de tout ce que j’ai évoqué plus haut.

Reste la dimension « sociale » de Twitter que je découvre à peine et que je vous invite à découvrir vous aussi : Twitter, c’est trop bien pour que seuls les ados en profitent.

Pour conclure, voici quelques liens de blogueurs qui parlent de Twitter

Ils sont plutôt favorables :

• Chez Vinch
• Chez Stéphanie Booth
• Chez xtof
• Chez lifehack
• Chez LLM, mais c’est Ouriel Oyahon qui régale ;)

Ils sont plutôt contre :

• Chez Jacques Froissant
• Chez Frederic de Villamil

Articles sur le même sujet

• Quels sont les services web 2.0 que j'ai utilisés aujourd’hui ?
• Moi aussi, j'ai quitté Netvibes…
• 43 Things : what do you want to do with your life?
• L'expérience utilisateur et l'ergonomie des sites web
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…

Ruiner l’expérience utilisateur

Pendant un récent voyage d’affaire à Seattle, j’ai passé deux soirées à déguster la cuisine locale. Je me suis régalé à chaque repas, mais je garde de l’un deux un souvenir bien plus marqué. Mais pourquoi ?

Les deux restaurants présentaient de nombreux points communs : les plats étaient alléchants et présentés avec goût ; l’atmosphère était sympathique et chaleureuse ; les menus offraient un large choix de plats tout deux à un prix raisonnable, et le personnel était aux petits soins. Alors qu’est-ce qui fait que le second restaurant m’a laissé un bien meilleur souvenir que le premier ?

Comme souvent dans la vie, ce sont les détails qui comptent le plus. Prenez un verre d’eau, par exemple. Un serveur négligent peut le servir glacé, ou pire encore, vous laisser mourir de soif avant de vous resservir. Alors qu’un serveur bienveillant s’assurera que le niveau de l’eau ne descendra jamais plus bas que la moitié du verre ; les meilleurs vous feront la surprise de trouver le verre que vous venez de finir, rempli à ras bord une nouvelle fois.

Pour nous les ergonomes du web, Il y a beaucoup à apprendre d’une chose aussi simple qu’un verre d’eau.

Qui est le client ?

Quand vous êtes serveur dans un restaurant, vous savez que les gens viennent avec certains besoins et, parfois même, avec quelques attentes. Souvent, le verre d’eau est le « premier contact » avec le client. S’il est rempli rapidement, vous marquez un point, mais ce n’est que le début. En effet, certaines personnes boivent plus vite que d’autres et demandent à être resservies plus souvent. Certains clients ne boiront pas avant d’avoir les plats devant eux. D’autres encore ne toucheront pas à leur bouteille d’eau… ou demanderont peut-être un peu de thé glacé, ou encore autre chose. Au départ, vous ne pouvez vraiment pas savoir à qui vous avez à faire. Et lorsqu’il s’agit d’une table de 4, 6 ou même 10 personnes il vaut mieux s’être préparé à l’avance…

Sur le web, c’est la même chose. Nous faisons de beaux sites qui (nous l’espérons) font une excellente première impression, mais nous devons nous assurer que chaque point d’interactivité renforce cet avis favorable tout au long de la navigation, sinon nous risquons de dilapider le peu de crédit acquis au départ. Ce type de pensée à donné naissance au concept d’amélioration progressive

Sur le web, nous ne savons rien à propos de la personne qui vient visiter notre site. Nous ne connaissons pas le navigateur utilisé. Nous ignorons si le serveur est interrogé depuis un téléphone portable. Nous ne savons pas si le clavier est préféré à la souris. Nous ne savons pas si Javascript (ou même CSS) est activé. Nous ne savons pas si la page doit être imprimée. Nous ne savons pas si l’utilisateur consulte le site à l’aide d’un lecteur d’écran. Nous ne savons vraiment rien…

Alors, que fait-on quand on ne sait rien ? On an-ti-ci-pe.

En tant que développeurs, nous devons pouvoir satisfaire les besoins de nos clients. Et si nous sommes assez pointus, nous pouvons régler leurs problèmes sans qu’ils ne se rendent compte de notre intervention.

Une douche froide ?

Lala.com est un site bâti autour d’une communauté de gens qui aiment la musique. Le système facilite l’échange de CD dans toute la communauté par la poste.

Je ne dirais pas que leur site web est attractif, mais il est utilisable… sauf si Javascript est désactivé.

Vous apprécierez le fait qu’il y a un message indiquant un Chargement en cours alors que rien ne se charge.

Pour régler le problème (la copie d’écran ci-dessus a été prise entre le moment où j’ai commencé à me servir du site comme exemple de ce qu’il ne fallait pas faire et la finalisation de l’article), tout ce qu’ils ont été capable de faire, c’est de ressortir ce vieux message au parfum entêtant datant de la dernière guerre des navigateurs.

Le problème ici n’est pas que le site utilise Javascript, mais qu’il ne fonctionne pas sans. La raison ? Et bien, apparemment, les concepteurs se font plaisir en Ajax-isant tout le contenu. Dans leur précipitation, ils ont entassés tous les trucs du web 2.0 sous le capot et se sont aliénés une bonne partie des utilisateurs du web 1.0, et une part importante du marché des appareils mobiles. Et ils ne sont pas les seuls.

Pensez à ceci : vous êtes un utilisateur de Lala.com, vous êtes proche d’un magasin de disque et vous vous arrêtez sur l’album des Fatals Picards ["Arcade Fire" dans la version originale, NdT]. Vous n’avez pas réalisé qu’il était sorti et voulez l’ajouter à votre liste de souhaits avant de l’oublier. Si votre téléphone mobile ne supporte pas Javascript (ou si vous l’avez désactivé pour réduire le temps/coût de chargement), vous allez vous retrouver devant un écran qui vous donne des informations pertinentes sur Lala, suivies malheureusement du message indiquant que Javascript est nécessaire pour utiliser le site.

Vous ne pouvez pas accéder à votre liste de souhaits ou à quoi que ça soit d’autre, d’ailleurs. Même le champs de recherche (en bas de la page) ne fonctionne pas. Pour une application de type intranet, cela peut être acceptable, mais pour un site web grand public, c’est un désastre.

Réfléchissez avant de servir

Nous avons déjà établi qu’en tant que développeur web nous sommes généralement dans le brouillard quant aux desiderata de nos utilisateurs. Le mieux que nous puissions faire est d’anticiper ce que pourrait être leurs besoins et s’assurer qu’ils sont pris en compte à tout les niveaux pour apporter la meilleure expérience possible. C’est là que l’amélioration progressive entre en scène. Nous devons penser aux besoins des différents types d’utilisateurs et leur apporter une réponse.

1. Niveau 1 : pas de fioriture

   Certains utilisateurs veulent seulement accéder au contenu. Ils peuvent surfer depuis un appareil mobile, chercher à imprimer quelques informations, ou utiliser toutes sortes de périphériques d’assistance pour naviguer. Ils peuvent même avoir désactivé l’affichage des images. En gardant un marquage propre et bien-ordonné et en respectant la sémantique associée aux balises HTML, vous répondrez aux besoins de ces utilisateurs qui veulent consommer léger et afficher les pages rapidement, sans chichi.

2. Niveau 2 : faites joli

   D’autres, aiment les belles vitrines (ou une tranche de citron). Pour eux, concevez un design graphique visuellement attractif. Vous pouvez même ajouter quelques fioritures visuelles (ou un peu de Flash) et ils seront contents. Aussi longtemps qu’il n’y a pas de confusion entre les éléments de décoration et le contenu de la page, que vous avez réalisé tout vos tests sur les navigateurs (ou que vous fournissez quelques styles basiques pour les médias alternatifs), ça devrait le faire.

3. Niveau 3 : c’est la fête !

   D’autres encore, veulent le grand jeu. Pour ceux-là, vous pouvez faire sauter le bouchon et créer une merveilleuse application web 2.0 avec fondu-enchainé, widget en veux-tu en-voilà, et Ajax en abondance. Gardez toutefois à l’esprit, que ces niveaux ne sont pas toujours aussi clairement identifiables. Un palier intermédiaire entre les niveaux 1 et 2 sera peut-être nécessaire pour donner à Netscape 4.x et IE5/Mac quelques styles typographiques spécifiques. Ou vous pouvez avoir envie d’offrir des raffinements Javascript selon les navigateurs, ou encore injecter un peu de crème au nougat entre les niveaux 2 et 3…

Passer inaperçu

Une fois que vous avez décidé des niveaux à prendre en compte, vous pouvez construire votre site.

Commencez par le contenu. Quelquefois, les webdesigners et les développeurs oublient que les gens viennent surtout pour ça. Travaillez-le avec amour sans noyer vos visiteurs sous les informations. N’empilez pas les blocs comme pour un buffet. La production du contenu demande toujours beaucoup de travail. Mettez-le en valeur.

Lorsque le contenu est balisé, il est temps d’établir le look and feel du site. Concevez un design adapté à vos utilisateurs en utilisant pour chaque niveau les différentes techniques à votre disposition : cachez certains fichiers CSS aux navigateurs les plus anciens et donnez des styles spécifiques à ceux qui demandent un peu plus d’attention. Les commentaires conditionnels sont réellement vos amis pour la vie en la matière. Mais n’oubliez pas les vieilles recettes comme les règles @import et les combinaisons pour les médias spécifiques qui permettent d’offrir sélectivement un parfum différent pour les navigateurs collés au radiateur du fond de la classe.

Vérifiez la présentation de votre contenu à l’impression et son affichage sur les périphériques mobiles. A ce propos, envisagez-vous une mise en pages spécifique ou seulement un traitement basique en terme de couleur ou de typographie ? Quel sort réservez-vous aux images et aux formulaires ? Essayez d’anticiper les fonctionnalités qu’un utilisateur mobile voudrait, et ôtez le superflu ! Si vous utilisez la pseudo-classe :hover sur un lien, n’oubliez pas de considérer également la pseudo-classe :focus, et les utilisateurs de claviers ou d’appareils mobiles vous remercieront.

Lorsque le design est validé, ajoutez quelques étincelles avec une pincée de Javascript non-intrusif. Vous connaissez déjà les méthodes de détection pour savoir si un script peut fonctionner sur tel navigateur ? Considérez aussi comment vos scripts peuvent interférer avec les interactions communes aux navigateurs telles que « bookmarker » un lien ou utiliser le bouton retour. Et n’oubliez pas l’interdépendance qui peut exister entre des scripts différents : votre site deviendrait-il inutilisable si un script fonctionnait et pas un autre ?

Si vous créez un widget ou autre interface de contrôle, générez le marquage additionnel quand avez déterminé qu’il est prêt à être utilisé, et que tout le reste fonctionne encore. Et si vous séparez les CSS liées à votre widget de votre code Javascript comme un bon petit soldat des standards, assurez-vous que les styles ne sont pas actifs tant que le script n’a pas indiqué que le widget peut être utilisé. Une bonne pratique est d’utiliser l’échange de classe (cf. Table 1) :

Au final, si vous envisagez d’utiliser Ajax, faites-le avec discernement : il n’est pas nécessaire de charger l’ensemble de la page via des appels asynchrones qui finissent par devenir une barrière entre l’utilisateur et votre contenu. Paradoxalement, cela peut entraîner une augmentation de la charge serveur, rendre votre contenu invisible pour les moteurs de recherche, et rendre votre site inutilisable pour quiconque utilise un lecteur d’écran ou un mobile.

Ne me faites pas dire ce que je n’ai pas dit, Ajax a sa place, mais il est important de savoir laquelle, et plus encore, de savoir où elle n’est pas.

Conclusion

Anticipez les besoins de l’utilisateur avec précaution et occupez-vous d’eux en vous faisant remarquer le moins possible. C’est la clé pour laisser une première bonne impression. Comme avec un verre d’eau, vos utilisateurs ne devraient jamais avoir à réclamer pour être servi.

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

Merci à Véro pour son coup de main quand j’étais « Lost in translation » ;)

Note du 24/05/07 : Merci à Goulven pour sa relecture et les améliorations qu’il a apportées à cette traduction.

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• Framework JQuery pour écrire du Javascript non-intrusif
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Trucs et astuces CSS
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

1. CSS Naked Day

   Demain, ce blog fait son full monty en participant à l’opération lancée par dustindiaz pour promouvoir les standards web dans leur plus simple appareil. En désactivant les feuilles de style CSS, vous mettez votre body à nu et montrez que vous utilisez un marquage HTML sémantique et structuré. Pour participer inscrivez votre site sur la liste ! Pour ma part, je commence le strip soit dans la nuit, soit jeudi en début de matinée.

2. Du nouveau sur Copaing

   Si vous aimez taquiner la molette, vous avez peut-être remarqué le widget Copaing qui a fait son apparition sur ce blog. Vous voulez le même ? Alors inscrivez-vous vite et encouragez vos amis à faire pareil. Vous n’avez pas d’amis ? Raison de plus pour quitter ce blog de N0L1F3 et rejoindre Copaing, le site gratuit pour retrouver vos anciens copains de classe et les localiser grâce à l’API Google Maps.

3. Lyon-Blog : ça se passe près de chez vous (ou pas)

   Lyon Blog prépare sa V2 et nous attendons vos suggestions ou simplement vos encouragements. Si vous éditez un blog dans la région lyonnaise, inscrivez-vous et participez aux célèbres Apéros Blog !

4. CSS2 Pratique du design web v2.0

   Aujourd’hui, 29 mars 2007, la seconde édition du livre « CSS2 : pratique du design web » voit officiellement le jour et commence à être diffusée chez les distributeurs. L’année dernière, j’ai lu la 1^ère édition du livre de Raphael Goetter qui m’a été particulièrement utile pour mieux comprendre les questions relatives au positionnement relatif ou absolu. Cette année, j’achète la 2^ème édition qui fait le point, entre autre, sur la prise en charge des CSS par IE7. La liste des nouveautés présentes sur CSS2 Pratique du design web est disponible sur le blog de l’auteur.

5. Principes pour des sites ergonomiques

   Pendant que j’étais sur Alsacreations, je (re)trouvé une page très complète sur les éléments à prendre en compte pour faire des sites web de qualité centrés sur l’utilisateur. Enjoy!

Articles sur le même sujet

• Petit bilan statistique du CSS Naked Day
• Check your <body> avec le W3C
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Je teste mon navigateur sous Acid2, c'est grave, docteur ?
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs