amomenti blog, stratégie, permission marketing, expérience utilisateur

Hier après-midi, je me suis rendu compte en passant quelques heures avec un client en pleine conception éditoriale de son site, que je n'avais jamais formalisé les règles de conception d'une page web sur ce blog. Ce billet fait suite à ceux postés auparavant sur l'écriture pour le web (1ère, 2ème et 3ème partie).

Lire la suite...

C'est une question client qui est à l'origine de ce post. Celui-ci s'étonnait que son site étant trouvé dans un moteur de recherche, le lien renvoie vers une page interne du site et non pas sur la page d'accueil. Là c'est moi qui m'étonnai. Il enchaîna en demandant si il était possible de faire en sorte que l'internaute soit redirigé sur la page d'accueil...

Lire la suite...

Je vous ai souvent parlé de la valeur d'un site Web. En réalité, j'emprunte cette notion à Peter Morville et à ses travaux sur l'expérience utilisateur. Il a découpé la valeur d'un site Web en six caractéristiques, je me contente de les traduire "à ma manière" et de m'en servir au quotidien.

Utilité : Quelle réponse le site Web apporte aux attentes des internautes.
Ergonomie ou utilisabilité : Comment le site Web accompagne le chemin de l'internaute vers l'information
Visibilité (findability) : Le site doit être lu par les internautes et les moteurs de recherche, cela implique une conception particulière
Pertinence : Qualité des contenus de votre site (cela paraît évident mais votre site est-il pertinent de bout en bout ?)
Accessibilité : Si vous êtes lecteur de ce blog, cela se passe de commentaires
Design : La part "séduction" est un facteur évident de réussite

Un nota intéressant, le design est la dernière caractéristique, non pas qu'il soit moins important mais il doit être un résultat et ne pas guider la conception Web.

Et on ne le répètera jamais assez. Merci à Aurélien pour ce billet sur les "7 raisons d'ajouter du contenu à votre site" de Jim Boykin.

De part les commentaires et les emails reçus à propos de ce blog, je sais qu'un certain nombre de lecteurs sont des professionnels en agence ou en studio. J'aimerais lancer auprès d'eux une discussion autour de la difficulté souvent rencontrée de garder un client "dans la ligne" de ce qui a été décidé.

Vous avez sans doute déjà vécu des cas identique : un client qui dit blanc, qui y revient 6 mois plus tard (alors que le dossier n'avance pas...) et dit noir. Vous êtes obligé de revoir certains éléments de design, voire de contenu, voire du scénario...

Dans la communication traditionnelle, nous faisons signer au client une maquette, un Bon A Graver (BAG) et un Bon A Tirer (BAT), une copie conforme de ce qui sera imprimé (étape finale après les validation de maquette). Pour le Web, nous faisons signer nos clients sur des maquettes (une sortie imprimée : ( ) pour lancer le webdesign. Mais la phase éditoriale , importante s'il en est, reste soumise aux dangers du suivi de dossier.

Cas classique, vous développez un site Web, lequel est travaillé (design et contenu), pour une raison X ou Y, le projet tarde à être publié et lorsqu'enfin le client se penche à nouveau sur son projet, il remet tout en cause (sauf le devis bien sûr). Au delà du désagrément financier évident, c'est la qualité finale même qui est malmenée.

Et vous ? Nous pensons depuis longtemps à la possibilité de prendre une photo du site Web à certains moments de la conception, l'idéal serait de pouvoir faire un PDF de pages Web (en incluant le design), les technos ne semblent malheureusement pas au point de ce côté là. Et vous, des idées, des expériences à partager ?

Le scénario interactif ou le chemin que suit un internaute sur votre site Web induit son expérience utilisateur. Selon que celle-ci s'avèrera bonne ou mauvaise, vous pourrez attendre de lui qu'il transforme sa visite en acte : prise de contact, inscription ou achat. Pour mieux le comprendre encore, je vous propose une image : celle de l'effort d'un athlète.

Lire la suite...

Les étudiants de Berkekey viennent de publier 21 patterns pour le Web (des mises en forme communes pour répondre à des objectifs de pages Web précises). Via Ergologique.

La conception Web s'est affranchie des mises en page en tableau pour embrasser la cause CSS d'une étreinte enflammée. Passée l'aveuglement de la passion première, la raison reprend ses droits et le nouvel amour du webdesigner doit se plier à quelques règles pour aider sa conception Web au quotidien...

Analogie inhabituelle, je "surfe" sur celle de l'auteur de ces 5 conseils pour structurer une feuille de style.

La table des matières dans une feuille de style, pas bète...

Juste une petite expérience qui met en exergue le besoin de "landing page" pour les campagnes Webmarketing...

Lire la suite...

Comme son nom l'indique, la page d'accueil est souvent la première page d'un site Web. Oui mais sous certaines conditions...

Lire la suite...

Et pourquoi pas ? Pourquoi ne pas créer un webdesigners Club ? Pas du tout un annuaire exhaustif mais à l'image des clubs d'Hommes anglais du début du siècle, un lounge où entre pairs on crée des liens, on échange. J'imagine un site Web où une équipe de webdesigners, d'architecteurs, d'experts, mettrait leur expérience en commun pour apporter leur conseil et leur critique sur un site soumis par une marque ou un webmaster.

On pourrait imaginer un site par mois mis sur le grill avec l'avis de chaque membre de l'équipe publié. Un conseil qui permettrait au propriétaire du site d'améliorer ses pages, son design et aux autres webdesigners d'apprendre. Pour les membres de l'équipe "critique", le site serait une visibilité supplémentaire, une démonstration d'expertise.

Soyons fous, j'imagine Jeffrey Zeldman, Jakob Nielsen, Michael Carpentier, Shane Seminole Mielke, Gabocorp, Raphaël Goetter, j'en oublie évidemment...

C'est farfelu comme idée ? Qu'en pensez-vous ?

Lors de la conception éditoriale d'un site Web, le découpage des contenus s'effectue en fonction des catégories d'information, des types de liens que le Webdesigner créera. J'en dénombre 3.

Lire la suite...

Il est accessible à chacun de faire une page Web, les outils sont simples, parfois gratuits et online. Mais il est beaucoup plus complexe de concevoir un site Web efficace, pertinent, référencé, conforme, compatible, etc...

De nouvelles références apparaissent pour guider la conception Web vers une plus grande conformité...

Lire la suite...

L'évolution du parc informatique, l'avènement des écrans Wide (16:9 ou 16:10) font naître à chaque conception Web la question de la résolution d'écran minimale du site Web. Faut-il choisir 800x600 ou 1024x768, le débat s'ouvre...

Lire la suite...

Merci à Georges Lucas (oui oui le grand !) pour une expression trouvée dans un documentaire sur sa manière de travailler : le raffinage. En fait cette étape dans la réalisation de ses films consiste à visionner une dernière fois l'assemblage final (montage des éléments vidéos, effets spéciaux, sons, musiques, postediting...) et "d'affiner" ou de raffiner le montage pour obtenir le tempo, le rythme correspondant à sa vision préalable.

Je récupère ce terme à mon compte pour expliquer une phase je ne parvenais pas à identifier clairement avec mes clients. C'est donc ainsi que je nomme à présent la phase finale de l'optimisation, celle qui intervient après les autres (écriture Web, traitement des images, des css et des codes) pour "coller" idéalement aux objectifs donnés quelques semaines ou quelques mois plus tôt par la réflexion stratégique.

Je ne me compare pas à lui bien sûr, mais à l'instar de Georges Lucas, je raffine les sites pour apporter un petit plus pour la fluidité et l'expérience utilisateur. cette phase me paraît essentielle quand on sait à quel point il est facile de laisser "glisser" un projet au fur et à mesure des évolutions ou des corrections. Le raffinage permet d'éviter les compromis fait à la qualité.

Il m'a fallut expliquer à un client la différence entre un site vitrine et un site éditorial. J'y vois deux grandes différences :

Prendre en compte les cibles
La conception éditoriale d'un site Web s'appuie sur une définition précise des cibles à atteindre et sur les flux souhaités par l'entreprise. C'est à dire les scenarii qui seront suivis par les internautes du moteur de recherche ou d'un site tiers jusqu'à la prise de contact ou l'achat en ligne, on appelle cheminement : "comportement interactif". L'organisation du site Web est réalisée spécifiquement pour répondre à ces comportements alors que les sites vitrines présentent les informations de l'entreprise dans une démarche et un découpage synthétiques.

Ecrire pour le Web et les moteurs
La seconde grande différence se base sur la pertinence et la présence des pages dans les outils de recherche. Les pages ne sont plus écrites selon un discours marketing lissé mais en suivant des règles d'écriture précises (voir les billets précédents sur l'écriture Web). Ces règles ont pour but de valoriser les mots clés à mettre en avant, c'est à dire correspondant aux comportements interactifs.

Merci à Michael pour ce billet plein d'une simplicité redoutable d'efficacité sur les objectifs que doit remplir une page d'accueil. Je me permettrai de l'utiliser pour mes clients.

Vous l'avez sans doute remarqué, j'aime utiliser les images pour faire passer les messages auprès de mes clients. L'une des plus utilisées rejoint en tout point l'analyse de la conception de Jesse James Garrett (voir le billet précédent).

Car lorsque l'on parle de conception Web, il est impératif (dès lors bien sûr que vous souhaite le succès) respecter certaines étapes de conception. J'utilise pour l'exprimer l'image de la construction d'une maison. Le spécialiste Web est alors un architecte qui conseille ses clients et les guide vers le bon choix.

Il ne vous viendrait pas à l'idée de commencer la construction de la maison par le choix de la tapisserie de la chambre du 1er étage ! Et bien c'est la même chose pour le Web. Là où Jesse James Garrett prône la stratégie - les scenarii - l'arborescence - le squelette et le design, j'utilise : les fondations - les désirs d'espace - les choix de pièces - les circulations - la décoration.

Les fondations : c'est la stratégie d'un projet Web. Quelle seront les besoins de la maison (plain pied, étages, extensions), la construction sera-t-elle évolutive ? S'agit-il d'une maison individuelle à forte image ou un collectif fonctionnel ?

Les désirs d'espace : la maison accueillera-t-elle plusieurs ménages, 1, 2, 3 enfants, des animaux domestiques ? Ou à quoi le site Web doit-il servir fonctionnellement ?

Les choix de pièces : une fois les occupant et leurs activités déterminés, la maison prend forme avec un salon, une cuisine, une ou plusieurs salles de bains, etc... Comment le site Web se découpera-t-il en "pièces" accueillant chacune une fonctionnalité (c'est la conception éditoriale).

Les circulations : ou le squelette du site, comment passera-t-on d'une pièce à l'autre, avec quelle facilités ou quelles contraintes, c'est le squelette du site ou son découpage de l'information dans la page : le royaume de l'ergonomie.

La décoration ou le design : c'est l'étape finale où on décide enfin de la meilleur ambiance, des couleurs les plus appropriées pour vivre dans cette maison qu'est le site et y accueillir ceux que l'on va y inviter.

J'aime les images pour ce qu'elles ont d'impactant et de simple, qu'en pensez-vous ?

Je lis l'excellent livre de Jesse James Garrett sur l'expérience utilisateur. Je vous le conseille et je me permets de vous livrer une traduction d'un schéma fort intéressant.



La conscience de l'expérience utilisateur est un atout essentiel à la réussite d'un projet Web. La démarche s'effectue de bas en haut, la stratégie guide le scénario, l'arborescence, le design...

Sans doute ne le répéterai-je jamais assez : "le contenu est roi". C'est grâce au contenu que l'internaute est fidélisé à un site Web ou un blog, c'est grâce aux contenus que Google et consorts vous octroient généreusement une place au soleil des résultats de recherche. L'écriture pour le Web est une écriture spécifique, qui emprunte au journalisme, aux blogs, à la communication.

Je vous invite à consulter les billets précédents pour ce thème (clés pour l'écriture Web 1 et 2) et, pour entrer un peu plus dans la technique, à continuer en cliquant sur ...

Lire la suite...

J'avais abordé il ya quelques mois la première partie de ce thème consacré à l'écriture pour le Web avec les deux premières clés (Clés pour l'écriture Web - 1), je continue avec les clés 3, 4 et 5...

Lire la suite...

Incroyable ! Je viens de visiter le site Web de Toshiba France avec IE et Firefox. Résultat, les utilisateurs de FireFox n'ont pas accès au menu. Ils ont sans doute trop de clients chez Toshiba...

J'ai découvert le Web en 1995. Après les premiers mois passés au cybercafé de Montparnasse en chat, j'ai résolument décidé d'y plonger professionnellement avec la croyance qu'il s'agirait là d'un média que chacun pourrait s'approprier et qui bouleverserait les rapports de forces existants. J'ai connu l'Internet technique, la prophétisation, les Web vitrines, l'avènement de l'animation avec Flash 2.0 (vous souvenez-vous de Gabocorp ?), les premières expériences communautaires, la bulle, les Web dynamiques, l'obsession du référencement et aujourd'hui, enfin, le web éditorial.

Enfin car ces dernières années ont été un investissement personnel pour atteindre et attendre la mâturité du marché professionnel vers le conseil éditorial. Je peux enfin faire le métier que j'ai choisi il y a 10 ans, proposer de communiquer sur la valeur d'un contenu pertinent axé sur les relations. Je repense à Jean-François Gaudrault rencontré à Montréal en 1998 qui m'avait si gentiment fait partager sa vision de la communication : "opportunités et relations", merci Jean-françois, merci à tous les autres qui ont accompagné mon chemin vers ce métier que j'exerce aujourd'hui, je m'éclate.

"Le bonheur est dans la satisfaction" (Lao Tseu)

Pour ceux qui ne connaissent pas encore, voici le site qui vous permettra de comprendre qu'il est possible d'allier "design de qualité" et "compatibilité avec les standards W3C". Choisissez votre design dans le menu, seul la feuille de style change !

www.csszengarden.com

Merci à Michael pour son billet sur l'expérience utilisateur et les notes sur l'utilisabilité. Un site Web professionnel doit créer la confiance pour atteindre son but. L'université de Stanford propose les 10 règles pour la crédibilité d'un site Web...

Lire la suite...

J'étais ce matin au palais des congrès de Nantes pour le Roadshow Studio 8 de Macromedia. Pour une agence interactive comme L'agence Web, la suite Dreamweaver, Fireworks et Flash sont des outils importants. Je ne suis pas déçu des fonctionnalités de la version 8, la version US est disponible depuis le 15 septembre et la version française le sera à partir du 27 septembre. Si les conceptions CSS ne sont pas encore totalement intégrées en création, de nombreux efforts ont été réalisés pour leur gestion.

L'intégration des flux RSS/XML est également l'une des nouveautés importantes avec la vidéo directement installée dans la page. Notons également le zoom, le coller spécial, les rapports de code, l'organisation automatique du code...

Bref, l'agence va passer à Studio 8. Juste une anecdote pour terminer, l'acquisition de Macromedia par Adobe permet aux démonstrateurs de parler librement de Photoshop... : )

Si vous n'allez pas voir les roadshow de Macromedia, vous perdez quelque chose, au delà des softs, je parle des intervenants, ils sont sympas, je les aime bien.

C'est en lisant le post de Michael Carpentier (beau = différent ?) sur l'importance du design d'un site Web que je me suis fait ce constat évident : pourquoi n'accorde-t-on qu'une très faible importance au design d'un Blog ? Car en effet et à part quelques rares exceptions, les bogs ne sont pas la panacée d'une culture graphique débridée.

La réponse est simple et donnée dans les conseils de Michael : la qualité du contenu, car c'est pour le contenu qu'un blog se visite. Et un site Web alors ? Et bien, c'est la même chose ou en tout cas ce devrait l'être. Malheureusement trop souvent oublié, c'est le contenu d'un site Web qui en fait sa richesse, le design est secondaire.

Il faut oublier le design ?

C'est vrai que le contenu est prioritaire mais il ne peut vraiment l'être que si le design du site le lui permet. Un design qui se fait oublier est donc un bon design. Car ne soyons pas extrêmistes, la qualité du design est nécessaire à un site Web professionnel qui doit, rappelons le, rassurer l'internaute sur son identité et sa pertinence à exister sur le Web. Le design doit donc être pensé pour permettre à l'internaute de mieux apréhender le contenu, c'est ce que nous appelons le scénario interactif, lequel propose des lectures synthétiques (par menus) et linéaires (au fil du contenu).

Selon Seth Godin, et j'applaudis des deux mains, une page Web doit avoir un objectif unique pour accompagner l'internaute optimalement. Je publie ici la traduction d'une page du livre électronique gratuit de Seth Godin Knock knock.

"''A quoi sert une page Web ? A quoi sert celle-ci ?

Cela semble simple n'est-ce pas ? Pourtant ça ne l'est pas ! Ca ne l'est pas parce que de très nombreuses pages sont perverties par deux, trois ou des centaines d'objectifs. Le Web est un outil puissant mais en permanence mal utilisé par des gens qui pensent que parce qu'ils peuvent le faire, ils doivent le faire.

Alors mentez-moi pour un moment et prétendez que vous avez une page qui n'a qu'un seul objectif, qu'une seule action. Que celle-ci accompagne l'internaute vers une autre page. Et que souvent (le plus souvent possible), vos pages amènent cos visiteurs à effectuer les actions que vous avez souhaité et pour lesquelles vous avez créé votre site Web.''"

Redoutable !

Chaque internaute possède un ordinateur et un écran. Chacun choisit son écran et sa résolution en fonction de son budget, de son confort ou de sa vue. Jusqu'ici nous ne vous avons rien appris. Pourtant, il s'agit des données essentielles qui permettent de comprendre les différents choix qui s'offrent à vous lors de la conception de votre site Web.

En effet, il convient tout d'abord de prendre en considération les statistiques mondiales : près de 35% des internautes utilisent un écran avec une résolution 800x600, il est donc nécessaire de ne pas se priver d'un tiers des internautes potentiels et puisque "qui peut le plus peut le moins", le site s'appuiera sur cette définition pour définir son cadre principal (soit une largeur réelle de 780 pixels).

En conservant ce format, il existe trois grands styles de site Web : icy, liquid, fluid...

Icy : le site possède une taille figée de 780 pixels et il est calé à droite ou à gauche.

Liquid : Le site possède une taille figée de 780 pixels mais il est systèmatiquement placé au centre de la page (quel que soit le navigateur et sa taille)

Fluid : le site se redimenssionne automatiquement en fonction de la largeur du navigateur. Nous ne recommandons plus cette solution notamment à cause de l'avènement des écrans 'wide', c'est à dire au format allongé type 16/9e. En effet votre site prévu pour être lisible en 780 pixels de large est 'étiré' dans un navigateur de 1280 pixels de large, la création initiale est totalement faussée (sauf si elle prend en compte ce facteur) et la lisibilité du site en souffrira irrémédiablement.

En fonction des créations retenues, on privilégiera donc le format 'icy' ou 'liquid'.

Pénurie de temps et surcharge d'informations à traiter font que nous lisons de moins en moins. Dans ces conditions il est nécessaire de prêter une grande attention à l'écriture Web pour développer la confiance d'un internaute jusqu'à un contact, une vente ou toute autre action interactive. Quelques clés permettent de baliser le chemin de la conception éditoriale d'un site et de l'écriture des pages.

Dans le monde de l'entreprise, nous ne lisons plus ! Les courriers sont parcourus en diagonale, les notes sont regardées du bout de l'oeil et ne parlons pas des mémos et e-mails qui partent à la corbeille (physique ou informatique) sans être ouverts. Pourquoi ? Parce que nous manquons tous de temps. Le temps de travail est en effet restreint par la polyvalence de plus en plus nécessaire au sein des entreprises (les RTT augmentent les risques d'indisponibilité des vos interlocuteurs et collaborateurs). Mais la cause principale réside dans la profusion de messages et d'interruptions que nous rencontrons tous au fil de la journée. Le temps file, s'échappe. Alors puisque le temps devient rare, il est précieux et la lecture d'un document en souffre, pourquoi perdre 5 minutes à lire ce document, quel sera mon bénéfice ?

Le phénomène s'aggrave encore dès lors que l'on passe sur le Web, la possibilité de compréhension par les visuels ou animations, l'instantanéité du média et (encore une fois), la profusion d'informations font que les pages Web sont lues en diagonale. Il ne faut pas oublier également que l'internaute a choisi de venir sur votre site mais qu'il est, pour lui, tout aussi simple de le quitter ("vous n'êtes qu'à un clic de vos concurrents"). Alors comment faut-il écrire pour le Web ?

Cette question primordiale est bien souvent oubliée pour deux raisons majeures : la méconnaissance du média entraîne la croyance que "c'est pareil que le papier" et le fait que l'attention soit bien souvent portée sur l'ergonomie et le design plus que sur le contenu. Or le contenu est une donnée primordiale ("content is king"). mais avant d'en aborder les mécanismes d'écriture, posons-nous une autre question fondamentale : qui lira cette page ?

Clé n°1 : Les lecteurs

Et il existe deux grands types de lecteurs : les humains et les robots. Il ne s'agit nullement de science-fiction, je parle des "spiders" des moteurs de recherche, ces programmes qui scrutent et indexent vos pages pour y référencer vos mots-clés. Ils sont les maîtres d'une partie de votre destin sur la toile, ils décideront de votre "classement" sur Google, Yahoo et consorts. Et l'un des facteurs de votre position dans la liste des résultats concernera le contenu de votre page. Alors oui, les robots lisent vos pages et à moins que vous ne souhaitiez pas être référencé dans les moteurs, il vaut mieux les prendre en compte.

Nota : Lorsque je parle ici de lecture de la page par les robots, je concentre mon propos sur le contenu éditorial (visible) de la page et je laisse - temporairement - de côté l'aspect technique du code. Lequel doit également être optimisé pour être accessible aux deux publics.

La même page sera donc lue à la fois par des internautes et des robots. Elle doit être conçue pour répondre aux impératifs de ces deux publics. C'est donc la première difficulté de l'écriture Web qui consiste à créer un équilibre éditorial.

Clé n°2 : La conception éditoriale

Définition : Conception éditoriale
''La conception éditoriale du site définit son cadre de communication, de quelle façon les contenus sont-ils découpés, en combien de pages, quel ton est retenu ? Comment le menu proposera-t-il d’accéder à tous ces contenus en 3 clics maximum ?

Le découpage des contenus répond à deux objectifs principaux : permettre à l’utilisateur d’appréhender au mieux les messages bien sûr mais aussi développer une structure de page qui optimise auprès des moteurs de recherche la pertinence des mots-clés choisis.''

Retenons un élément particulier de cette définition : le découpage éditorial ou comment les contenus sont-ils répartis en plusieurs pages. Il m'arrive encore de rencontrer des offres de création Web "à la page" (Formule machin : x euros pour 10 pages). Outre le mauvais calcul en terme de rentabilité que représente une telle offre pour l'agence, cette vision obsolète continue de pervertir la conception d'un site Web puisque pour des raisons budgétaires, on réduit le nombre de pages tout en augmentant le contenu de chacune d'elle. Or c'est là oublier l'une des règles fondamentales de l'écriture Web et du développement de la confiance de l'internaute : une page doit avoir un objectif et un seul.

Il vaut mieux en effet augmenter le nombre de pages pour présenter des contenus lisibles et facilement "appropriables" par l'internaute plutôt qu'un maelstrom abscons et souvent peu appétissant. Attention à ne pas oublier que la multiplication des pages doit s'accompagner d'une recherche de continuité de la lecture. C'est à dire que les fins de pages devront inciter à découvrir les suivantes.

Mon propos sur le découpage des pages ne concerne évidemment pas les blogs qui s'appuient sur une structure organisationnelle particulière de l'information.

A venir dans un prochain billet :

Clé n°3 : Lecture et confiance, Acheter du temps. Clé n°4 : De l'air ! Clé n°5 : Les structures de pages.