Référencement, Design et Cie

Après le très bon Memento CSS, Raphael Goetter de Alsacréations nous offre le Memento XHTML. Un aide mémoire bien pratique.

Je profite également de ce billet pour vous signaler la création du aStore Référencement Design et Cie, une sélection de livres sur la conception web (mais aussi sur d'autres sujets) que j'ai particulièrement appréciés.

Scapture vous permet d'obtenir des captures d'écran de votre site vu dans plusieurs navigateurs sous Linux. Des services équivalent existent déjà pour divers plateformes, certains payants (Browsercam), certains gratuits (Browsershots, Browsrcamp). Scapture se démarque en proposant également des captures en mode texte (Navigateurs Lynx et Links).

Voir des exemples pour Référencement Design et Cie.

A lire, deux récents articles très intéressants sur l'écriture blog : "Ecrire pour les blogs" par Jean-Marc Hardy sur le site redaction.be, et "Comment écrire pour votre blog ?" par François Lamotte.

(Merci à Katsoura pour le lien)

A lire sur A List Apart, cet article de Derek Powazek intitulé "Learn to write !".

Traduction par mes soins :

"C'est peut être à la mode de dire que les marchés sont des conversations, ou que le design, c'est communiquer des idées, mais comment cela peut-il être vrai si les designers ne travaillent pas le texte ?

L'expérience utilisateur ne se réduit pas au design graphique. Il est temps que nous, web designers, cessions de nous voir comme des artisans du pixel, et que nous commencions à nous voir comme des créateurs d'expériences. Et quand on parle d'expérience web, il n'y a pas meilleur moyen pour la créer que d'écrire. Et d'écrire bien.

Regardons cette référence qu'est Flickr : Demandez aux gens ce qu'ils pensent de leur expérience avec Flickr. Ils emploieront des mots comme "fun", "convivial" pour la décrire.

Pourquoi ? Il n'y a rien de spécialement amusant dans un texte noir sur fond blanc. Il n'y a rien de spécialement convivial à uploader et tagger, peu importe la quantité d'AJAX que vous pouvez y mettre. Effectivement, le contenu photographique est lui même générateur d'expérience. Mais personne n'a jamais parlé du coté "fun" d'Ofoto. Les fonctionnalités de networking social génèrent elles aussi une expérience au niveau émotionnel. Mais je crois qu'il y a quelque chose de plus.

Ce plus, j'affirme que c'est l'écriture. La convivialité vient du bon vieux texte. Quand vous visitez le site, vous êtes acceuilli par un Hola ! Salut ! Shalom ! Quand vous vous connectez, le bouton affiche "Entrez" et non "Submit". Quand vous uploadez une photo, rejoignez un groupe, ajoutez un contact etc. tous les textes associés sont ouverts, incitatifs, sympathiques, enthousiastes. Et tout ceci a un impact significatif sur l'expérience de l'utilisateur.

Le texte fait partie de l'interface. Ce n'est pas du marketing (même si ça l'est un peu aussi), c'est de l'interface. Ce texte ne peut pas venir du département relations publiques du client. Ce texte doit venir de nous, les designers, qui sommes en charge de l'experience utilisateur. Le texte est une composante de l'interface utilisateur tout autant que les couleurs, les pixels, et toutes ces choses qui préoccupent en général les concepteurs web, et peut-être même plus (...)

Donc, si vous êtes quelqu'un qui embauche des designers web, demandez-leur ce qu'ils aiment lire. Parlez avec eux du choix des mots pour chaque bouton, chaque lien, chaque titre. Posez-leur une colle en leur demandant de reécrire votre page "à propos". C'est le boulot du concepteur web de penser votre site pour les utilisateurs, et de dire ce qu'ils veulent entendre, et quand. Un designer digne de ce nom sera capable de le faire. Et si votre designer vous répond "Je ne suis pas rédacteur", c'est qu'il est peut-être temps d'en trouver un qui le soit.

Si vous êtes un web designer qui ne se voit pas comme un rédacteur, il est temps alors de reconsidérer les choses. Procurez-vous un livre sur l'écriture web, faites un peu de recherche en ligne, ou suivez une formation. Le design, c'est de la communication, et il faut plus que des pixels pour communiquer."

La théorie c'est bien, la pratique, c'est mieux ! A lire sur le blog de Damien Anfroy, un excellent billet sur l'audit ergonomique puis la refonte d'une fiche produit Fnac, validée ensuite par des tests utilisateurs. Les résultats obtenus sont étonnants.

Mapsurface est un outil de statistiques étonnant, qui permet de dresser une cartographie des liens cliqués sur une page web, et d'obtenir ainsi des indices sur le comportement de l'utilisateur (Pour essayer, pressez simultanément les touches Alt+x).

Voici par exemple une capture d'écran (400 ko) des données que j'ai pu collecter en quelques jours.

Ce type d'analyse n'est pas un substitut à de vrais tests utilisateur, puisque si l'on peut capturer leur actions, on ne peut qu'émettre des hypothèses sur les raisons de ces actions. Plusieurs tendances me semblent cependant remarquables :

L'essentiel des clics a lieu dans la partie "contenu" du blog. Les éléments de navigation (pagination, rubriques, archives) sont finalement très peu utilisés : l'utilisateur ne souhaite pas, ou ne sait pas, accéder aux billets plus anciens (Le fait que mon lectorat soit plutôt technophile me fait pencher pour la première solution, mais je peux me tromper).

Au sein de la colonne de menu, la navigation par rubriques est nettement préférée à la navigation dans les archives, puisque elle récolte 8 fois plus de clics (et encore, certains clics étaient de mon fait). Je pense donc sérieusement mettre les archives en pied de page, pour faire remonter des éléments plus utiles et davantage cliqués, comme les liens et les fils RSS.

Si la majorité des clics au sein du contenu concerne la partie haute de la page, il y a quand même un nombre non négligeable de clics dans les parties inférieures. Les pages longues ne sont donc pas forcément à bannir, en tout cas pour un blog. Si les billets de la région inférieure avaient été relégués en deuxième page, je doute qu'ils aient été lus.

Enfin, les rubriques "CV" et "à propos de l'auteur" sont fréquemment consultées, ce qui semble confirmer les propos de Jakob Nielsen à propos de l'usabilité des blogs et de la nécessité d'identifier les auteurs.

Et vous, quelles sont vos habitudes de navigation dans les blogs ?

Le design est l'alliance de la forme et de la fonction. Malheureusement certains communicants ont tendance à privilégier la forme... Michael Carpentier nous livre ses (pertinentes) réflexions :

"Une jolie maquette proposée sans analyse fait appel à vos émotions, pas à vos besoins réels, ni à ceux de vos clients. Faire concevoir un site web par un graphiste, c'est comme confier la réalisation d'un pont à un architecte pour qu'il soit beau, sans le faire valider par un ingénieur ensuite. Traverseriez-vous ce pont?"

Yahoo vient d'intégrer à son portail à destination des developpeurs, ses "design patterns", une collection de conseils sur l'architecture de l'information et l'ergonomie.

Un blog dédié aux interfaces utilisateur complète ces patterns, ainsi qu'un SDK javascript/AJAX en Open Source, dédiée à l'enrichissement des interfaces.

Intéressante citation de Jason Santa Maria à propos du design, vue sur le blog de Michael et traduite par mes soins :

"L'innovation n'est pas le design. Le design, c'est de la communication. Il est vrai que l'innovation dans le design est fréquemment un très beau sous-produit, ou bien le résultat d'un besoin particulier. Mais un design qui vise avant tout l'innovation s'écroulera la plupart du temps sous son propre poids stylistique" (En clair l'innovation pour l'innovation n'est pas efficace).

Le Zen des CSS, de Dave Shea et Molly Holzschlag, est enfin disponible en français grâce aux éditions Eyrolles. Ce livre est l'occasion de découvrir toutes les techniques et astuces des plus beaux designs du site CSS Zen Garden. Des extraits au format pdf sont disponibles sur le site des éditions Eyrolles.

Le livre sur Amazon

Et hop, dans ma wishlist ! (Bientôt Noel)

A lire absolument sur Alistapart : cet article (en anglais) intitulé "L'attaque de la copie zombie" qui écorche le discours "baveux" et "creux" fréquemment arboré par certain sites web d'entreprises.

Exemple type de ce type de discours : "Les conclusions, consignées dans un résumé précisément architecturé, cristallisent l'aspiration de la nation à maximiser ses capacités d'innovation dans une variété de scenarios économiques modernes".

Si l'on souhaite être compris de son auditoire, et maximiser sa visibilité dans les moteurs de recherche, on optera plutôt pour le "Plain language" qui vise à être compris dès la 1ère lecture.

J'aimerais qu'il existe des ressources de ce type en français...

Nul doute que cette alerte du gourou de l'usabilité va être commentée dans la blogosphère... (Denis en parle déjà)

Pour ma part, je pense que les recommandations sont dans l'ensemble pertinentes. Je serais cependant plus nuancé sur quelques unes :

• "Avoid cute or humorous headlines that make no sense out of context" : Tous les blogs n'ont pas vocation à être aussi factuels que les dépeches d'une agence presse. Un post peut occasionnellement y gagner à avoir un titre sortant de l'ordinaire en terme de relation avec le lecteur, en le surprenant, en excitant sa curiosité. Un blog c'est aussi de la relation, de la conversation, pas seulement de l'archivage.

• "Classic Hits are Buried" : Un blog est un blog, pas un CMS traditionnel. Ce doit donc être un choix de mettre en valeur des posts très importants, mais en aucun cas une régle. La plupart des visites viennent d'ailleurs des moteurs de recherche qui amènent le visiteurs directement sur la bonne page...

• "A related mistake in this category is to use insider shorthand, such as using first names when you reference other writers or weblogs". Idem, les blogs peuvent décider d'adopter un ton informel ou non.

• "For a weblog, users must be able to anticipate when and how often updates will occur" : Un blog n'est pas une newsletter, et la fréquence des publications peut très bien être apériodique. Si un utilisateur souhaite apprecier le rythme des publications, il peut se baser sur la fréquence des derniers billets. Le seul danger est qu'une trop longue période sans billets risque de faire perdre une partie de son lectorat. Mais je ne pense pas qu'un blog nécessite impérativement une régularité de publication.

Il est parfois difficile d'arbitrer entre graphisme et contenu textuel quand il s'agit de produire un site web, notamment un site d'entreprise. Chaque tendance a ses partisans, les uns arguant "une image vaut 10.000 mots", les autres ne jurant que par le texte (Je me situe plutôt dans cette dernière catégorie).

Mais qu'en est-il vraiment ? Le document "Lisibilité et Intelligibilité des documents d'information", quoique traitant des documents d'information administratifs en print propose des pistes intéressantes :

L'article rappelle d'abord que "l'image a un effet cognitif non­ contesté dans la littérature cognitiviste", permettant d'améliorer sensiblement la mémorisation de l'information et "génèrant plus aisément des images mentales que les mots ne peuvent le faire".

Cependant, "le message verbal dans sa forme écrite (sans image) apparaît adéquat si le public est motivé par le sujet et s'il est apte à traiter l'information. C'est le cas du public pour qui le sujet de l'information est important et qui peut contrôler le rythme de traitement de l'information (...) Le message visuel est plus adapté dans le cas où le public est moins motivé ou moins habile sur le plan cognitif".

J'en tire personnellement les conclusions suivantes :

• Il n'est pas pertinent de baser sa communication sur l'image, le visiteur d'un site étant à priori motivé par le sujet (puisque il a cliqué pour accéder au site), apte à traiter l'information, et pouvant pleinement contrôler le rythme de l'information. Une communication trop visuelle et donc superficielle pourrait même frustrer le visiteur avide d'information.
• L'image peut faciliter la communication, pour les visiteurs pressés, ou peu motivés. L'image est également très adaptée pour illustrer des interactions. Il faut cependant veiller, du fait de sa capacité à générer des images mentales, à l'utiliser avec parcimonie et seulement pour illustrer le propos. Les usages gratuits, purement décoratifs sont à éviter. Ne pas oublier non plus le phénomène de "banner blindness", spécifique au web.
• Les problématiques d'accessibilité et de référencement me confortent dans mon choix de privilégier le texte en tant que contenu principal (Ce qui ne veut pas dire négliger la qualité visuelle des sites).

D'autres opinions sur la question ?

Eric Kavanagh sur le site Ergologique nous offre un bel article sur l'écriture web, en évoquant au passage le ridicule de certaines règles, comme celle des phrases de moins de 15 mots (Celle-ci en contenait bien plus, la trouvez vous trop verbeuse et difficile à lire ?).

Extrait choisi : "La simplification d'un texte est affaire de dosage bien plus que d'interdits. Aucun texte intéressant et bien écrit n'est composé que de phrases courtes ayant la même structure syntaxique. Bien qu'une structure négative puisse être plus difficile à comprendre, il est souvent plus clair et plus juste d'y recourir. La voix passive est extrêmement utile pour assurer la progression thématique dans un texte. Comme dans tout, c'est l'abus qui est à proscrire, et rarement les procédés eux-mêmes."

Michael Carpentier nous gâte avec 2 billets dignes de lecture à mon avis : "Beau = différent ?" et "Votre organigramme n'interesse que vous !".

Extrait :

"Un livre est-il moins intéressant parce qu’il n’a pas de table des matières, que les numéros de pages sont situés, d’une page à l’autre, à des endroits différents et que les différentes pages du texte sont disposées au hasard, vous laissant deviner quelles constituent le début et quelles la fin ? Non ? Alors pourquoi certains processus de conception de sites web sont-ils encore soumis à d'intéressantes hypothèses du genre : C’est un look différent qui amène le succès d’un site ?"