la minute du geek.net 

Amusant de constater que même dans le domaine du web, où tout est supposé aller très vite, un article rédigé il y’a 5 ans est encore largement d’actualité est pourrait considérablement améliorer les relations entre de nombreux sites web et leurs visiteurs.

En « googlelant » certains de mes nouveaux collaborateurs, question de savoir ou j’avais bien pu atterrir (et sans doute un peu dans l’espoir de trouver enfin des collègues geek) je suis tombé sur un article rédigé par l’un d’entre eux il y’a un peu moins de 5 ans. A la vitesse où se développent et s’implantent les idées sur le web, cet article n’aurait normalement du être qu’un vestige d’enseignements largement intégrés dans nos pratiques quotidiennes. Malheureusement, on est pourtant encore très loin d’une mise en pratique quasi systématique des points évoqués dans cet article.

Passons en revue les différentes « Lois » cité dans l’article de Vincent : Most web sites suck (un titre digne d’un « Jakob votre site est tout pourri Nielsen » ;-)).

Law 1: Talk about them, not you / Loi 1 : Parlez d’eux, pas de vous

Je ne compte plus le nombre de réunions de lancement durant lesquels mes interlocuteurs insistaient sur la sensation rassurante que procurait l’historique de leur entreprise. Il est sans doute agréable pour les dirigeants d’une entreprise de parler de leur réussite, mais en aucun cas c’est un argument de vente convaincant pour un internaute pressé. Il n’est pas question de produire des sites web anonymes pour autant, mais simplement de doser et de hiérarchiser intelligemment les propos concernant l’entreprise en enchainant rapidement  sur les besoins pouvant être exprimés par les visiteurs. Parler de son entreprise tout en montrant un intérêt pour les besoins d’un client n’est absolument pas incompatible, par exemple l’agence Québécoise Zengo (que je citais déjà dans un billet précédent) affiche sur sa page d’accueil « Nous sommes obsédés par vos résultats » et détaille chacune de ses prestations en titrant « Ce que nous faisons pour vous ».  Des études de cas classées par typologie de clients et ponctuées de témoignages permettent aussi de citer les domaines d’expertises d’une entreprise tout en plaçant client au centre du propos.

Law 2 : Customize your message / Loi 2 : Personnalisez votre message

Dans son article (encore une fois, rédigé il y’a 5 ans !) Vincent évoque déjà des débuts de technologies permettant de personnaliser le contenu d’une page en fonction des comportements des internautes. Ou est-on aujourd’hui ? En France, pas beaucoup plus avancé qu’il y’a 5 ans… les sites anglophones ont par contre commencés à intégrer le concept de page d’accueil personnalisée en fonction de nombreux critères (mot clés  ayant permis de trouver le site, comportement sur des sites partenaires, comportement d’achat,…).  La publicité commence aussi à sérieusement intégrer les informations comportementales recueillies sur les internautes pour diffuser des annonces ciblées (google, wunderloop), les sites e-commerce capables de s’interconnecter avec un CRM sont maintenant en mesure d’adapter l’offre en fonction des achats précédent. Quid des sites institutionnels ? Une simple segmentation des mots clés les plus régulièrement saisis pour accéder à un site permettrait de mettre en avant une offre en fonction de la recherche de l’internaute, au lieu d’annoncer les grands 5 savoir-faire de l’entreprise dés la page d’accueil, on pourrait focaliser sur une des compétences qui répond au mieux à l’expression recherchée.

Law 3 : Talk to them / Loi 3 : Parlez à vos visiteurs

Dans cette partie de son article, Vincent propose entre autre l’utilisation d’une interface permettant de dialoguer en direct avec un conseiller via un tchat intégré au site. La mise en place d’un tel système est bien entendu particulièrement destinée aux sites e-commerce qui disposent déjà d’un centre d’appel. Le public ciblé, l’organisation du site, les produits vendus sont aussi à prendre en considération avant d’envisager la mise en place d’un tel système. Différentes études montrent que certains consommateurs passent régulièrement en boutique pour interroger un vendeur avant de procéder à un achat en ligne, la présence d’un interlocuteur « humain » directement sur le site permettrait de sauter cette étape en rassurant et en informant le client directement avant l’acte d’achat. Mais quelle différence avec le centre d’appel clairement indiqué sur le site ? En utilisant une interface de tchat, comme par exemple liveperson, les interactions entre le conseiller et l’utilisateur sont très largement facilitées,  l’opérateur sait a tout moment sur quelle page du site se trouve le visiteur, il peut l’orienter sur la bonne page en lui envoyant simplement l’URL.  On peut aussi améliorer la qualité du service en envoyant par email l’intégralité de la conversation. Les historiques de conversations étant stockés dans le CRM, le prochain conseiller à prendre en charge ce client pourra s’y référer et mieux répondre à la demande. Des règles de gestions peuvent être mise en place pour déclencher automatiquement l’ouverture d’un tchat afin de proposer de l’aide au visiteur s’il répond à un comportement prédéfini. Enfin, les historiques de conversation permettraient aussi au service informatique de mettre en place des procédures d’amélioration basés de véritables retours utilisateurs.

Law 4 : Call to action / Loi 4 : Incitation à l’action

Les fameux CTA ont commencés à trouver leurs places dans les sites e-commerce, en effet les équipes marketing passent de plus en plus de temps à suivre de très près le nombre de visiteurs ayant dépassé le précieux stade de l’acte d’achat et tentent d’optimiser ce ratio. Mais la encore, pour les sites institutionnels, les sites francophones donnent un peu l’impression d’attendre paisiblement que les clients décrochent leur téléphone pour obtenir plus d’information. Je surf régulièrement sur des sites de sociétés américaines pour y trouver des livres blancs ou des screencast sur des sujet susceptibles de m’intéresser et a chaque fois que j’ai laisser mes coordonnées sur l’un de ces sites pour accéder (gratuitement) à une information de qualité, j’ai été contacté par un conseiller qui souhaitait connaître l’avancé de mes projets et savoir en quoi ils pouvaient m’être utile, même si je n’ai jamais conclu d’affaire avec ces sociétés, mais cet appel et ce professionnalisme me reste en mémoire et je cite spontanément ces sociétés quand je me retrouve face à un besoin qui correspond à leur prestations. Plutôt que de laisser vivre son site web dans un coin, la définition d’objectifs (et donc de CTA) permettrait de créer de constituer un véritable portefeuille de prospects pour l’entreprise, l’appel du service commercial à court terme après l’inscription du visiteurs permettrait aussi de confirmer le professionnalisme de l’entreprise.

Law 5 : Make a good impression / Loi 5 : Donner une bonne impression

Sur ce point, je dois bien avouer que les choses ont effectivement bien évoluées depuis la rédaction de l’article. L’importance de soigner l’aspect de son site a bien été intégrée par la majorité des sociétés. Cependant avec l’arrivée des système de gestion de contenu permettant à une entreprise de faire évoluer son site seule sans faire appel au prestataire qui à réaliser ce dernier,  on constate parfois des déviations (tant sur le plan graphique que sur le plan éditorial) et l’apparition d’erreurs (lien rompu, contenu non mis à jour, etc…). Il est important dans le cas ou une société souhaite intervenir seule sur la mise à jour de son site (essentiellement pour des raisons budgétaire) que les documents définissants la charte éditoriale et graphique soient bien rédigés et à la disposition de tous. Aussi des bilans réguliers (dont la fréquence serait défini par la fréquence de mise à jour du contenu) pourrait être proposés par le prestataire afin d’auditer le site et de corriger les points qui pourraient nuire à la qualité du site (et donc à l’image de l’entreprise).

Conclusion

Alors rien n’a changé depuis 5 ans ? Bien sûr que si, les relations entre les prestataires web et les entreprises ont considérablement évoluées en quelques années. Les sociétés s’appuient nettement plus sur les conseils des prestataires web quand il s’agit de domaines d’expertises clairement identifiés (technologie, graphisme, ergonomie…) mais l’appel aux contributions du prestataire arrive encore trop tard dans le processus, le sacro-saint cahier des charges rédigé en amont et en interne ne prend pas en considération l’expertise que pourrait apporter une agence sur le positionnement, les objectifs et la ligne éditorial du site, ce qui a pour effet de verrouiller le cadre du projet avant d’envisager toute les possibilités.

Les sites web institutionnels des entreprises sont encore considérés comme des plaquettes en ligne, un média « vitrine » quasi obligatoire alors qu’il devraient être perçus comme des outils susceptibles d’affecter le mode de fonctionnement et la rentabilité de l’entreprise. Quant aux sites e-commerce, les règles du marketing offline y sont souvent appliquées sans tenir compte des spécificités du média et des nouvelles possibilités qui pourraient être saisies pour améliorer les ventes.

Même si vous êtes comme moi, très légèrement anti Microsoft, mais que vous travaillez dans la conception d’interface utilisateur (web ou autre), je vous conseil vivement de prendre un peu de temps dans les jours qui viennent pour visionner certaines des excellentes vidéos de la conférence Mix09 qui s’est déroulée il y’a quelques jours à Las Vegas.
Je suis tout d’abord tomber sur une vidéo qui détaille comment les tests utilisateurs ont permis aux équipes de Microsoft d’aboutir à certaines des nouvelles fonctionnalités de Windows Seven, Au delà du fait que l’orateur prend la peine de nous expliquer par l’exemple qu’en fait c’est Microsoft qui a inventé le Dock d’Apple en 1985 (ce qui a pour effet d’énerver très légèrement le mac user convaincu que je suis), la conférence met particulièrement bien en valeur le processus de réflexion qui se met progressivement en place durant les phases de conception d’une interface utilisateur. J’ai ensuite creuser un peu dans les sessions enregistrées de la conférence et j’ai trouvé pas moins de 18 vidéos (d’environ 1 heure chacune) qui traitaient des interfaces et des expériences utilisateur, les outils Microsoft sont finalement assez peu mis en avant, et on y apprendre de nombreuses choses passionnantes sur l’organisation des projets orientés utilisateurs et sur les processus d’itération que l’on peut mettre en place.  J’y ai aussi découvert Sketch Flow (de Microsoft), un outil de prototypage dont je n’avais jamais entendu parlé et qui me paraît des plus intéressant. Mon iphone est donc rempli des différentes vidéos que je n’ai pas encore eu le temps de visionner, et je tenterais (si je trouve le temps) de faire une petite synthèse des vidéos les plus intéressantes.

Mauvaise nouvelle, IE 8 est sorti officiellement cette semaine… Je n’ai pas encore eu l’occasion de le faire tourner donc ne comptez pas sur moi pour en dire du mal. Ceci dit pour avoir vécu plus d’un lancement de nouvelle version d’IE, ne comptez pas non plus sur moi pour en dire du bien :-).

Je ne sais pas encore a quel point le moteur de rendu d’IE 8 à été modifié et l’implication que cela risque d’avoir sur les hack exotiques (contre lesquels je milite activement depuis longtemps) ou tout simplement sur une mise en page standard qui fonctionnait miraculeusement sur IE (oui oui c’est déjà arrivé, ou peut être était-ce un rêve ? Je ne sais plus).

Bonne nouvelle, si vous êtes du genre a éviter de prendre des risques avec les sites web de vos clients (ce qui serait une très bonne chose !) vous pouvez toujours insérer une simple balise méta dans vos pages pour forcer IE8 à interpréter la page comme le faisait IE7.

<meta HTTP-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Don’t panic ! Cette balise n’a aucun effet sur les autres navigateurs, vous ne risquez pas de voir Firefox et Safari commencer à interpréter les pages comme IE 7

Aussi, si vous avez eu l’étrange idée d’utiliser la syntaxe suivante pour vos commentaires conditionnels : <!–[if IE 7]> qui aura pour effet d’interpréter les instructions uniquement si il s’agit d’IE7, je vous conseil de les modifier en <!–[if gt IE 6]> qui traitera les instructions pour toutes les version d’IE supérieures à 6.

Vu chez David Walsh

Update : Si vous voulez en savoir plus sur la balise X-UA-Compatible, clever age à publié un article très complet à son sujet.

Et oui, mauvaise nouvelle pour les graphistes, l’accessibilité n’est pas uniquement le problème des intégrateurs et développeurs Le choix des couleurs, le contrast entre deux éléments accolés ou entre un texte et une couleur de fond peut poser de vrais problèmes de lisibilité pour les personnes souffrant d’un handicap visuel. J’ai découvert aujourd’hui deux petits outils qui proposent de vérifier rapidement que les couleurs choisies ne posent pas de problème d’accessibilté.

Tout d’abord Toucan, l’équivalent Aviary du fameux Kuler d’Adobe (qui ne propose malheureusement pas le mode de lecture color deficiency preview dont dispose Toucan). Particulièrement adapté aux graphistes, Toucan permet de définir une série de couleurs grâce à différents outils, puis il permet, sans quitter l’interface principale de contrôler la perception de ces couleurs en cas de déficience visuelle.

Le second outil, Contrast-A (une petite application AIR, trouvée sur RefreshingApps.com) est plus spécifiquement conçu pour l’accessibilité. Il permet de visualiser le niveau de contrast entre deux valeurs, et vous assure que les niveaux de contrast indiqués par les WCAG 2.0 sont respectés.

Sacré Tim Berners-Lee, 20 ans après l’invention du web, toujours la même energie pour défendre la séparation des contenus et de la présentation.

Ca manque juste un peu d’exemple concret, un petit coup d’Ubiquity aurait peut être pu illustrer une partie des applications que l’on peut envisager au quotidien.

Certes, ce site vend des plantes qui font du bien… mais il faudrait peut être vérifier les stocks les jours ou le webmaster travail tard :

Pour citer un (ex)collègue : “Si vous comprenez ce formulaire… ne prenez la route.”

Je me trompe peut être mais il me semble bien que c’est nouveau ça non ?

La recherche “à proximité” existe depuis un petit moment dans google, mais il fallait saisir la requête suivie du nom de la ville (ou d’un code postal) pour l’activer. Après avoir saisi un code postal ou un nom de ville dans le formulaire ci-dessus, il est sauvegardé et utilisé par défaut dés que Google considère que la recherche par proximité est pertinente. Cela permettra sans doute d’afficher des résultats “à proximité” alors que ce n’était pas un critère prioritaire.

Résultat recherche de proximité automatique

Pour les entreprises qui ne sont encore référencées sur Google Maps ou Local Business Center, il est donc sérieusement temps d’y penser.

Donc c’est officiel… il y a quelque part des gens qui n’ont vraiment mais alors vraiment rien de mieux a faire de leur temps libre Bon ok, je suis peut être un peu jaloux de ne pas avoir le temps talent pour y penser moi même…

Vu chez Patrice Cassard

Que le monde est petit ! Hier soir, après avoir trouvé le lien sur un billet de mozilla labs, j’ai commencé a tester rapidement le nouvel outil de wireframe iplotz en prenant des notes dans le but de rédiger cet article, ce matin en parcourant rapidement mes flux RSS j’ai vu que Pierre avait rédigé un article sur les wireframe et que son premier commentaire était justement rédigé par iplotz (qui faisait sa pub ). Je prend donc (humblement ) la suite de Pierre pour rédiger un petit billet sur mes premières impressions concernant Iplotz.

Parmi tous les outils de wireframe disponibles, certains proposent certes des possibilités de travail collaboratif, mais aucun ne propose véritablement de fonction permettant à vos clients de faire des retours. C’est vraiment regrettable de ne pas disposer d’un outil permettant aux clients d’annoter simplement différents points de l’interface en organisant par exemple une réunion de travail interne, plutôt que de nous dire par mail ou par téléphone « Le gros rectangle sous le logo ne devrait-il pas être à droite ? ». C’est, au premier abord ce qui a vraiment attiré mon attention sur iplotz. Il dispose en effet de 3 fonctions : “Manage” pour gérer un projet, “Wireframe” pour réaliser les zoning (seul ou a plusieurs)  et “Preview” qui permet d’accéder au wireframe en mode lecture uniquement et qui ouvre une fonction d’ajout de commentaires. Ainsi après avoir réalisé votre maquette, vous pouvez simplement inviter votre client à venir l’annoter de ses remarques.

Je vais passer très rapidement sur la fonction “Manage”.  Elle me paraît superflue, si parmi tous les outils du marché vous n’avez toujours pas adopté une solution de gestion des taches, celle-ci ne semble pas apporter de véritables nouveautés et n’étant pas interfaçable avec des applications externes, il faudrait ressaisir les informations dans vos agendas et vos outils de saisis des temps, ce qui en plus d’être chronophage est une source d’erreur en plus.

Voyons maintenant le cœur du système, la fonction Wireframe. Au premier abord l’interface est claire, on situe rapidement les différents outils, les éléments graphiques disponibles par défaut on un traité graphique « dessin à la main » dans le style de balsamiq (moins grossier même). L’interface (en flash, une version AIR est annoncée) se charge rapidement, sans effet graphique superflu.  En parcourant l’interface du regard, différents points très positifs ont attirés mon attention :

• Il est multipage, vous pouvez donc dans un même projet réaliser plusieurs wireframe (et même les lier entre eux grâce à l’ajout de liens sur vos éléments).
• Il propose une gestion des Masters, ce qui permet de placer vos éléments récurrents (la navigation par exemple) sur un modèle et de toujours utiliser ce modèle comme point de départ pour vos différentes pages. Si vous modifier votre master, toutes les pages seront mise à jour automatiquement.
• Il dispose d’un mode plein écran confortable (celui de la version en ligne de balsamiq ne fonctionne pas sur mon Firefox mac)
• Enfin on trouve une bibliothèque d’élément graphique qui semble complète.

Passons à l’utilisation… aie… pas aussi pratique qu’on aurait pu le penser. L’une des forces de Balsamiq c’est d’être très rapide à prendre en main. L’accès aux éléments de la bibliothèque est très intuitif grâce à une présentation horizontale qui permet de présenter des visuels assez grands de chaque élément, du coup on se focalise plus sur la forme que sur le libellé et on trouve très facilement ce qu’on recherche. Comme si ça ne suffisait pas, on peut aussi rechercher un élément par mot clés, ce qui facilite encore la recherche. Sur Iplotz, l’accès aux objets de la bibliothèque se fait dans un menu vertical et les picto sont trop petits (et pas très représentatif du résultat final), il faut donc se fier aux libellés (qui ne sont pas toujours très clair) on passe donc beaucoup de temps a monter et a descendre en espérant trouver son bonheur, et je me suis même retrouver a intégrer plusieurs fois par erreur le même composant dans la page avant de réaliser que c’était celui que je venais de supprimer.

Quand on réussi finalement a placer les différents éléments de l’interface dans la page, l’absence de guides complique sérieusement l’alignement. Il y’a bien une grille en fond de page qui permet d’aligner (approximativement) les composants, mais celle-ci était masquée par le fond blanc de la fenêtre du navigateur que j’avais placé en premier.

Enfin après avoir placé un tout un tas de composants sur ma page (pour tester les différents boutons) je me suis retrouvé bloqué avec l’impossibilité de supprimer ce que je venais de créer, j’arrivais bien a sélectionner mes composants, mais impossible de supprimer, à force de cliquer partout j’ai fini par réussir mais je ne saurais dire comment.

Bref, un outil plein d’idées intéressantes, mais de sérieuses lacunes en terme d’ergonomie, dont certaines aurait pu être corrigées par la simple présence d’une page d’aide… j’ai tenté d’utiliser la fonction « feedback » pour informer les concepteurs de certaines de mes remarques mais j’ai eu droit à un beau warning PHP… so far pour les retours utilisateurs

Inutile de préciser que cette petite expérience m’a refroidi et que je n’ai même pas pris la peine de tester la troisième fonction : La preview qui m’intéressait tant.  Conclusion, je me tiendrais sans doute informé des évolutions d’Iplotz, mais pour l’instant je m’en tiens à Balsamiq, Omnigraffe et Illutrator bien plus confortable à utiliser.

Si je commence a vous parler du G1, en bon geek que vous êtes vous allez me répondre qu’il s’agit d’un téléphone portable T-Mobile qui tourne sous Android… Certes, mais c’est aussi le dernier-né de la gamme Lumix de Panasonic. Et franchement, étant plutôt un fan d’Iphone, je préfère nettement vous parler du petit bijou de Panasonic (Si vous vous sentez frustrés, vous pouvez toujours consulter le billet de Gonzague sur le G1 de T-Mobile).

J’étais déjà plutôt fan de la gamme Lumix en matière de compact, elle est constituée de petits boîtiers très abordables équipés d’optiques Leica (marque qui à toujours fait frémir les amateurs de photographie par la qualité de ses produits), simples d’utilisation, et la qualité des images (en tout cas sur mon FX-9) à toujours été largement au rendez-vous (pour un compact).

La grande originalité du G1 c’est qu’il s’agit d’un nouveau type d’appareil. Pas vraiment un Compact ou un Bridge du fait qu’on peut changer les optiques et certainement pas un Reflex du fait qu’il ne dispose pas d’un système de visée mécanique à miroir. Cette absence de visée par miroir permet de proposer un appareil de taille nettement réduite par rapport aux reflex et de diminuer considérablement le tirage* de l’appareil.  J’ai appris dernièrement, dans un article de Luc Saint-Elie, que ce faible tirage va sans doute entraîner l’apparition de bagues d’adaptation qui vont nous permettre de ressortir de sublimes cailloux (entendez par la, des optiques de très belle fabrication) de nos cartons.

Je résume donc ce qu’est pour moi le nouveau Lumix G1 :
- un petit appareil (très abordable) bien moins encombrant et plus discret qu’un reflex ;
- un écran orientable (je n’ai encore jamais eu d’appareil avec cette fonction et j’avoue que ça m’a souvent manqué) ;
- la possibilité (j’espère d’ici la fin de l’année) de trouver des bagues d’adaptation (sans lentille corrective) pour des optiques du type Sonnar ou Biogon de Carl Zeiss (qu’on peut encore trouver sur ebay à des prix très éloignés des prix d’origine) ;
- et ENFIN des boîtiers disponibles dans une autre couleur que le traditionnel noir (oui je sais, d’un point de vue marketing cette spécificité vise le public féminin, mais la ma virilité s’insurge énergiquement… moi aussi je veux un boîtier en couleur ! ).

Bref, il faut que j’appel mes parents avant Noël pour leur faire apprendre par cÅ“ur : “Bonjour monsieur le vendeur, je voudrais un Lumix G1 bleu nu s’il vous plait”… Vous pensez qu’ils vont s’en rappeler ?

Quelques liens :

• Fiche de l’appareil chez Panasonic
• Le G1 et ses accessoires photographié sous toutes ses coutures (Set Flickr)
• Test du G1 sur lesnumeriques.com
• Test sur Luminous Landscascape (en anglais, trouvé chez Luc Saint-Elie)
• Présentation vidéo de l’appareil

* Pour la définition du “tirage” d’un objectif, je vous laisse consulter la note de l’article de Luc Saint-Elie.