Nicolas Sarkozy réinvente l’ORTF, en couleur cette fois.

C’est une mire de l’ORTF sur le téléphone portable, pour ceux qui n’auraient pas suivi les 50 dernières années de la télévision.

Après cette longue et inutile introduction qui n’aura eu d’autre effets que de vous apprendre que je suis tombé du lit ce matin, je voudrais parler de Hand drawing style, de blog de geekette et de Firefox3. Mais vite fait hein. Parce que j’ai pas encore pris mon petit-déjeuner.

Le style dessin  à la main

L’excellllllent [2] magazine en ligne Smashing Magazine a publié un long article sur le hand drawing style (dessin à la main en français). L’article est complet, synthétique et fourmille d’exemples. On y apprend que le style dessin à la main arrive en force sur le web. Smashing donne une liste d’exemple longue comme la main [3] et alerte également les webdesigners qui seraient tentés par ce style (plutôt sympa d’ailleurs) sur les problèmes d’utilisabilité qu’il peut poser. Car en effet, une police type handwriting se lit beaucoup moins bien qu’une bonne vieille verdana.

blog de la geekette

Le style est tellement sympa, et je suis tellement dans la hype, que avant même de tomber sur cet article, je m’étais déjà essayé aux hand drawing chez CNET CBS pour le blog Geekette vol 3, le dernier né des blogs de CNET France.fr.

CNET France publie des tests, des news et guides sur des produits électroniques grand public, que ce soit du gps, du baladeur mp3 ou de la télévision écran plat (allez y, c’est bien). Tout ça est très bien mais manquait d’un côté un peu déjanté. Bha voilà, avec elle, c’est rattrapé. Par contre geekette, si tu pouvais publier un peu plus régulièrement, ce serait cool, que je me dise pas que j’ai fait un beau design au summum de la hypitude branchée pou rien hein (je dis ça parce que j’aime bien te lire)

Firefox 3

Justement, pour le blog de la geekette, j’ai voulu faire mon malin et lui faire un joli bandeau au summum de la hypitude branchée (je répète). Tout ça est très joli mais faire un bandeau comme ça, ça suppose de tordre les css dans tous les sens. Et là, je les ai tellement tordues, que firefox 3 n’a pas trop apprécié. Il décale les trois images du bandeau un peu trop vers la droite :

Ce que j’ai voulu faire

Ce que firefox 3 me fait

Les 3 images fautives (qui ont pour id frigo, chaussures et courses) sont positionnées en absolute et placées au pixel près sur la page. C’est ce positionnement que firefox interprète différemment des autres navigateurs. J’en appelle donc à la communauté et vous demande (oui, la communauté c’est vous) si vous avez déjà rencontré ce problème ou si vous connaissez un hack css pour exclure firefox 3. Pour info je colle le code en dessous :

#chaussures, #frigo, #courses {position: absolute; display: inline; left: auto; float: left}
#frigo {margin-left: 230px; margin-top: -25px}
#courses {margin-left: 570px; margin-top: -70px}
#chaussures {margin-left: 750px; margin-top: -82px}
 J’offre toute ma considération à celui qui me trouve le hack. Sinon je vais chercher de mon côté également; Mais je vous l’ai dit, je suis sous l’eau, alors si je peux faire bosser les autres C’est ça le communautaire non ?

1. 7h23 très exactement
2. C’est pas une fôte les 6 l, juste un effet d’emphase
3. oh le jeu de mot pourri

Au vu des derniers billets publiés, ce blog risque de se transformer en une vulgaire ferme de liens [1] avec une empilade de billets Liens du jour qui risquent en plus de noyer les quelques billets intéressants écrits par une vraie main [2] reliée à un vrai cerveau.

Si mes liens delicious vous intéressent, ils sont toujours disponibles dans la colonne de droite de ce blog, dans le pavé judicieusement nommé Mon delicious. Si vous êtes vraiment accroc aux liens delicious et que vous n’en tenez plus de savoir quel site je mets en favori chaque jour, vous pouvez consulter mon profil delicious et faire F5 toute la journée. Si vous ne voulez pas faire F5 toute la journée, vous pouvez vous abonnez au fil rss de mon profil delicious.

C’est bien l’automatisation de création de contenu, mais faut pas en abuser. Ça noie le vrai contenu (intéressant) rédigé par de vrais être humains. Par contre, c’est moins cher et ça demande moins d’efforts. C’est un choix. Pour mon site perso, j’ai choisi. Pour les sites pros, c’est une autre histoire, google oblige…

1. Je précise que je n’ai rien contre le milieu rural. J’aime beaucoup les fermes, les veaux, les vaches, les cochons… 
2. Oui, je tape d’une seule main sur le clavier

note : je teste la fonctionnalité de del.icio.us daily blog posting, laquelle vous permet - si vous êtes utilisateur du service del.ico.us, de poster de manière automatique les liens que vous avez bookmarqués dans la journée. Ça fait un post à peu de frais et ça peut intéresser des gens. Alors, pourquoi s’en priver ?

En V.O.

Design is largely an exercise in creating or suggesting contrasts, which are used to define hierarchy, manipulate certain widely understood relationships, and exploit context to enhance or redefine those relationships…all in an effort to convey meaning. Contrast is important because the meaningful essence of any thing is defined by its value, properties, or quality relative to something else. That’s right: nothing has much meaning by itself, which is one reason why design is important.

Andy Rutledge dans A List Apart: Articles: Contrast and Meaning

En V.F.

Le design est un exercice de création et de suggestion de contrastes, lesquels servent à définir une hiérarchie, manipuler des relations souvent mal comprises, et exploiter le contexte pour améliorer ou redéfinir ces relations… Le tout dans le but de donner du sens. Les contrastes sont importants parce que l’essence de la signification d’un objet est définie par ses valeurs, ses caractéristiques, ses qualités… en regard de celles d’un autre objet. En effet : aucun objet n’a de sens par lui même et c’est l’une des raisons pour lesquelles le design est important.

1. ou Grégoire :p

I think that design is all about constraints. Some people love the blank canvas situation, but I don’t at all. I think that’s really for artists, not designers. I think design is all about constraints — business constraints, technology constraints. And it’s those constraints that actually create the innovation.

Andy Budd, interviewé par le magazine Sitepoint.com, Andy Budd on Usability, Design, and the Death of CSS

En VF :

Le design, c’est les contraintes. Il y a des gens qui aiment partir d’une page blanche, pas moi. C’est plutôt pour les artistes, pas pour les designers. Le design, ce sont les contraintes, les contraintes business, les contraintes technologiques. Et ce sont ces contraintes qui permettent d’innover.

C’est moi qui ai mis en gras certains termes dans la traduction française

• liste de news classées par ordre chronologique,
• page d’accueil et de rubriques interminables,
• commentaires sur les articles,
• catégories et rubriques affichées en dessous ou au-dessus du titre de même que le nombre de commentaires suscité par la news…

Ce qui est amusant c’est que les blogs, eux, se dirigent vers une forme magazine. Ras le bol de la présentation chronologique des billets, thématisons et mettons de grosses images, exactement comme les sites de news le faisaient il y a encore peu. Pour les blgos propulsés par Wordpress, on voit fleurir les thèmes magazine, des thèmes tout faits qui transforment votre vieux blog à la papa en site de news flambant neuf.

Parmi les plus connus (et les plus efficaces), on peut citer :

• Mimbo
• Massive news
• Révolution
• The morning after

Nous serions nous trompés depuis le début ? Les blogs auraient-ils dû adopter une forme magazine et les magazines une forme blog ?

1. que ce soit sur la forme - c’est l’objet de ce billet - ou sur le fond. Regardez ZDNet.com par exemple qui est désormais alimenté plus par ses blogueurs stars que par ses “journalistes” classiques ou bakchich.info qui mêle dans son fil de news billets de blogs et news classiques (même si chez bakchich le ton des news st plus satyrique que classique).

Dur constat qui démontre que cette profession n’a pas su s’adapter à internet. À ce propos, je voudrais partager une anecdote personnelle qui ne fait que renforcer ce constat.

Il y a quelques temps, j’ai eu l’opportunité de discuter avec la responsable des rédactions web d’un grand groupe de presse français. C’était - et je ne devrais évidemment pas le dire - à l’occasion d’un entretien d’embauche. Après quelques minutes d’entretien, il s’est avéré que mon profil ne correspondait pas ou plus au poste proposé. Comme je ne voulais pas avoir fait tout ce trajet pour rien, j’ai taillé le bout de gras mon interlocutrice et nous avons eu une discussion assez libre sur l’info en ligne et le métier de journaliste.

Evidemment nous n’avions pas le même point de vue. Même si il fut un temps j’ai exercé le métier de rédacteur et même si je suis un littéraire avant d’être un technicien, je n’ai jamais vraiment été journaliste. Elle, par contre, c’était une journaliste pur jus qui avait déjà exercé ce métier depuis plus longtemps que moi je n’avais travaillé jusqu’alors. Lors de notre discussion “libre”, ses propos m’ont vraiment estomaqués. Puis après réflexion, pas tant ça. Ils reflétaient finalement assez bien une certaine idée que se font la plupart des journalistes de leur profession. Je m’explique.

Après que l’entretien eut tourné court, je me suis mis à parler des nouveaux formats d’articles que nous expérimentions chez CNET. J’ai parlé en particulier d’un article rédigé par Mohamed Afiri, journaliste chez CNET France, sur l’utilisation de l’iphone: Six utilisateurs nous parlent de leur iPhone. Pour cet article, comme son titre l’indique, Mohamed a reccueilli des témoignages d’utilisateurs et les a publiés en les titrant avec le type profil de l’utilisateur d’iphone : “Le pragmatique”, “le curieux”, “l’avant-gardiste”… etc. J’expliquais à la responsable des rédactions web de ce groupe que c’était typiquement ce genre d’articles que je trouvais pertinent sur internet, à savoir un journaliste qui valorise intelligemment du contenu utilisateur. C’est pertinent, c’est sous contrôle de la rédaction et ça valorise les utilisateurs qui ont participé à la rédaction de l’article.

Son opinion à elle était radicalement différente et, je le répète, très symptomatique à mon sens de l’état d’esprit de la plupart des journalistes vis-à-vis d’internet :

On ne peut pas mettre sur le même plan les propos d’un journaliste qui a bossé son sujet et les propos d’utilisateurs qui viennent déposer leur commentaire sur un site. Il faut les comprendre les journalistes : ils ont un ego, ça fait 10 ou 15 ans qu’ils font ce métier et là quelques utilisateurs tiendraient dans les commentaires des propos plus pertinents que les leurs ? C’est dur à admettre. [1]

Evidemment ce n’est pas ma position. Je pense non seulement qu’un utilisateur lambda peut avoir un avis plus pertinent qu’un journaliste sur un sujet donné mais je pense également que c’est l’essence même du métier de journaliste que de faire émerger ces perles et de les publier.

Non mais c’est quoi ces journalistes enfermés dans leur tour d’ivoire ?! Journaliste, ce n’est pas expert. Journaliste c’est passeur. Le rôle du journaliste n’est pas de décréter mais d’informer. Et si un lecteur lambda peut apporter une information supplémentaire, pertinente et vérifiée sur un sujet déjà traité par un journaliste, le journaliste doit savoir mettre son gros ego de côté et accepter de ne pas être le seul à connaître un sujet. Cela s’appelle enrichir l’information.

A titre d’exemple et pour prouver à mon interlocutrice sus-citée que même des sites médias d’actualité sérieux enrichissent leurs articles avec les commentaires de leurs utilisateurs (oui, vous chez cnet, c’est du consummer, c’est pas des sujets sensibles. Nous c’est de l’actu, dès qu’on parle politique ou religion, il faut savoir que ça dérive toujours, me suis-je entendu dire), je citerais l’exemple de Rue89 qui ouvre systématiquement ses commentaires aux internautes, quelque soit le sujet traité. Backchich, un autre site d’actu généraliste, “s’abaisse” à utiliser les contributions des internautes en faisant régulièrement une synthèse des commentaires des lecteurs sur les articles les plus commentés de la semaine et ce, sur des sujets très chauds comme celui-ci, celui-là ou encore celui-là (Rue89 le fait également depuis quelques temps et ZDNet.fr a également pris cette nouvelle et bonne habitude).

Dans les formats innovants, pour peu qu’on s’affranchisse des carcans traditionnels du journalisme et du papier, je reprendrai l’exemple de Rue89 (encore) et de leur format d’article mis à jour en temps réel, pour relater et réagir à chaud à l’intervention de notre président de la République. Et pour parler un peu de CNET, l’un de nos journalistees, Christophe Guillemin, pourtant peu habitué à ce genre d’exercice a inauguré un nouveau format d’article (nouveau chez ZDNet.fr) entre journalisme et blog avec son article Pourquoi Ubuntu 8.04 m’a convaincu dans lequel il s’exprime à la première personne, loin des règles du journalisme “traditionnel” (objectivité, relater les faits, pas prendre partie… blablabla) et explique pourquoi en tant que particulier, il utilise chez lui un linux plutôt qu’un Windows. Ce n’est pas vraiment une information, mais ça a été l’un des articles les plus commentés de ZDNet.fr la semaine de sa parution.

Si la presse en ligne veut survivre, il faut qu’elle évolue, qu’elle essaye de nouveaux formats et qu’elle saisisse les opportunités offertes par ce nouveau média qu’est internet Si les journalistes du groupe de presse où j’ai passé cet entretien veulent exercer leur métier pour encore 10 ou 15 ans, il faut qu’ils acceptent de mettre les commentaires de leurs lecteurs à côté de leurs articles et qu’ils comprennent que leur métier a déjà changé.

Pour creuser le sujet sur le rôle de journaliste dans la presse d’information et son évolution, je vous recommande le très long et très bon article du New Yorker Out of print ou son digest, par Benoît Raphaël : La mort des journaux… Et d’un certain journalisme ?
ainsi que celui de Narvic : Où se joue la bataille de l’information ? Le buzz idiot !

1. Je rapporte ces propos tels que dans mon souvenir. Je précise que ça fait un bout de temps que cet épisode a eu lieu, donc si la responsable des rédactions web de ce groupe se reconnaît, qu’elle n’hésite pas à clarifier sa position ou à me rectifier si jamais j’ai mal interprété ses propos

Quand je travaille sur un nouveau site, et lorsqu’on me dit : Tu vois coco, ce projet est capital pour l’avenir de l’entreprise, si on se plante là-dessus, je ne suis pas sûr que l’industrie du web s’en relèvera. Alors vas-y, donne-toi à fond., j’essaye de m’appliquer. Le seul problème, c’est que bien souvent, mes commanditaires et moi même n’avons pas  la même notion de ce qui est important.

Typiquement, dans ce genre de cas, la première chose qu’on demande à voir, c’est la page d’accueil car c’est la page qui permet de vendre un projet, en interne d’abord, puis à d’éventuels clients/partenaires ensuite.  Or, de mon point de vue de designer, la page d’accueil n’est vraiment pas un élément décisif dans un projet web. C’est d’ailleurs la page que je fais à la fin. La page la plus importante selon moi, c’est la page la plus profonde de l’arborescence, à savoir : la page d’article.

La page d’article

La page d’article (ou de story, ou de billet, de post) est la page la plus consultée puisque c’est en général sur ce type de page que les utilisateurs en provenance des moteurs de recherche arrivent directement, ce qui peut réprésenter jusqu’à 70% du traffic d’un site (70% pour ce blog). C’est également sur cette page que vous allez servir la substantifique moelle de votre site à vos utilisateurs, je veux parler du contenu bien sûr.

.

Pour faire une page d’article efficace, il y a quelques astuce :

1. respecter les règles d’utilisabilité ;
2. faire un peu beaucoup de SEO ;
3. éviter d’en faire des “dead end” (impasses) où les utilisateurs n’auraient pas la possibilité de rebondir pour aller voir d’autres articles sur votre site mais au contraire leur proposer des contenus en rapport avec celui qu’ils sont en train de consulter ;
4. Faire simple.

On pourrait écrire un roman sur la conception de ce type de page et c’est d’ailleurs tout l’objet d’une mutltitude de sites sur internet (dont le barbablog évidemment). La seule méthode efficace pour concevoir ce genre de page est de se mettre à la place des utilisateurs.

Combien de fois n’ai-je pas pas changé le design de pages conçues par mes soins et mises en production depuis un certain temps le jour où lisant un article je me suis dit “mais quel crétin ce designer, il a mis les liens relatifs en tout petit et en gris clair. C’est vrai que c’est joli mais on les voit pas”.

La page d’acceuil

La page d’accueil est importante évidemment, mais comme je l’ai dit plus haut, c’est la page qui vient en fin d’un projet. A l’image de l’intro et de la conclusion dans une disserte, la page d’accueil (ou <em>home page</em> en anglais) est censée refléter l’ensemble des décisions de design prises au cours du projet. Si vous vous souvenez de vos cours de français, d’histoire ou de philo, (oui je sais, c’est loin), vous vous souviendrez que l’intro et la conclusion c’est ce qu’on faisait à la fin d’un devoir au moment où le gros moustachu assis sur un bureau à côté du tableau disait  ”Levez les crayons, c’est fini. Pouget ! J’ai dit c’est fini !”.

Pour creuser le sujet sur l’importance relative de la homepage, je vous conseille 2 billets diamétralement opposés sur le sujet : Muriel de écrire pour le web lui fait sa fête avec un billet titré Le grand déclin de la homepage tandis que Jean Marc Hardy de 60 qestions.net tente de la sauver dans son billet La home page : en déclin ?.

Dans la série Les 3 pages clés sur un site

1. la Recherche
2. Page d’article vs Page d’Accueil
3. la 404 (à venir)

Quand je dis, connus, c’est relatif. Parce que lorsqu’on me demande heu tu fais quoi comme boulot et que je réponds que je travaille pour ZDNet, on me répond souvent Ah ? C’est quoi ça ?. De là s’ensuit une longue discussion sur les médias en ligne (mais pourquoi tu dis média ? Tu bosses pour le web), le web (le web c’est vrai que c’est pratique pour acheter des billets de trains) et mon métier de webdesigner (ah ouis, t’es informaticien en fait).

Sauf que maintenant, la donne a changée : CBS vient de racheter CNET Networks et la prochaine fois qu’on me demandera heu tu fais quoi comme boulot, je répondrai je bosse pour CBS, tu sais ? La télé. Desperate housewifes tout ça tout ça… Et toi ? .

La discussion sera plus courte.

Un média différent

De par sa nature, Le média web nous oblige à adopter une attitude pragmatique. La lecture sur écran est moins confortable et plus fatigante que la lecture sur papier. C’est pour cette raison qu’en matière de typographie, on ne peut pas respecter les mêmes règles sur le papier et sur le web.

L’exemple qui tue : les listes

Une énumération d’éléments, sur le papier, se traduit la plupart du temps par une liste de mots séparés par des virgules. Sur internet, une liste se traduit par des bullet points (<ul><li>etc…</li></ul>). Dans ce genre de liste, on ne rajoute pas de virgule ou de point virgule à la fin de chaque élément ; la séparation des éléments et les retours à la ligne est déjà bien suffisante pour indiquer au lecteur que l’ensemble de mots ainsi constitué est une liste.

Le web a t-il tué la ponctuation ?

Évidement non comme le prouve le “?” dans l’intertitre ci-dessus ainsi que tous les autres . et , utilisés dans ce billet. Seulement on ne peut pas utiliser les mêmes règles typographiques sur le web et sur le papier. Muriel de écrire pour le web partage ses réflexions sur le sujet dans son billet typographie et web. Elle y compare les usages typographiques standards (présentation des noms de familles, de références bibliographiques, d’acronymes…) sue la papier et sur le web et donne à chaque fois ses “best practices”. La plupart du temps elle privilégie la lisibilité au respect des règles? Je suis assez d’accord avec elle. de mon côté j’ai également un approche assez pragmatique de la typo sur le web. Et comme elle le dit elle-même :

Et puis, n’est-ce pas Le Monde ou Libé qui a abandonné, il y a quelques années, les insécables même dans le format papier ? Soyons dans notre temps, dans le média et innovons

Les access key

En html, les liens et les éléments de formulaires peuvent se voir attribuer un attribut accesskey. Exemple : <input type="text" name="s" id="s" accesskey="r" />

A l’origine créés pour améliorer l’accessibilité sur les pages web, les accesskey permettent de créer des raccourcis pour accéder à certains éléments d’une page html. Par exemple sur le barbablog, grâce au petit bout de code ci-dessus, vous pouvez sur toutes les pages et à tout instant à la recherche d’une simple pression des touches Ctrl et R (’tain j’aurais dû être vendeur d’épluche légumes magique sur un marché moi).

Informez vos utilisateurs

C’est bien beau les accesskey mais encore faut-il informer vos visiteurs que vous leur avez mis à disposition ces raccourcis. Sur ce site, j’ai mis cette information en bas de la page de recherche, près la liste des résultats. Pourquoi en bas ? Parce que le plus important sur une page de recherche, c’est comme l’indique le nom de la page : les résultats. Donc pas la peine de polluer le haut de la page avec une information que l’utilisateur n’est pas venu chercher.

De plus, on peut légitimement supposer que si l’internaute n’a pas trouvé son bonheur lors de sa recherche après avoir consulté la liste des résultats, il voudra relancer une recherche. C’est là que vous lui parlez des accesskey :

Pour effecteur une nouvelle recherche, vous pouvez utiliser le raccourci clavier Alt + R sur internet explorer, Shift + Alt + R sur Firefox, Ctrl + R sur Safari.

Une pincée de css

Si vous avez un navigateur de dernière génération vous devez normalement voir dans le texte ci-dessus les noms de touches avec une bordure qui donne un petit effet de relief, genre comme si c’était une touche de clavier. Ca tombe bien vu que c’est ce qu’on veut faire comprendre à nos utilisateurs.

Ce qui est encore plus chouette c’est que pour désigner du texte à entrer sur un clavier, il existe en html le tag <kbd>. KBD pour keyboard. Avec un peu de css et un marquage sémantique on aboutit à un résultat assez parlant.

le html

<p class="helper">Pour effecteur une <a href="#searchheader">nouvelle recherche</a>, vous pouvez utiliser le raccourci clavier <kbd>Alt</kbd> + <kbd>R</kbd> sur internet explorer, <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> sur Firefox, <kbd>Ctrl</kbd> + <kbd>R</kbd> sur Safari.</p>

les css

p.helper small {color:#666; font-size: .8em; margin: 1em 0}
kbd {border: 1px outset #333; background: #eee; font-size: 1.1em; color: #c00; padding: .1em .3em; font-family:"Courier New", Courier, mono; font-family:Geneva, Arial, Helvetica, sans-serif; }

Une louchette de javascript

Si vous êtes observateurs, vous aurez constaté que j’ai placé sur les mots “nouvelle recherche” un lien. Vous l’avez vu ? Bravo, vous avez gagné un week end en Normandie pour 2 personnes. Le lien renvoie vers une ancre nommée, #searchheader, l’id de mon input texte pour entrer une recherche. Ainsi lorsque l’utilisateur cliquera sur ce lien, il sera renvoyé en haut de la page, au niveau du formulaire de recherche.

Mais on peut faire mieux. Et si, comme dirait marc Lévy, et si en plus de renvoyer vers le formulaire on donnait le focus [1] au champ de recherche (ainsi vous pouvez entrer directement des termes à rechercher). C’est possible vous répondrai-je avec le sourire et du javascript.

Je vous la fait courte et sans explication de texte mais avec quand même des commentaires dans le code. Si l’explication est trop succinte ou si vous avez des problèmes pour mettre en oeuvre ce script chez vous, n’hésitez pas à vous manifester dans les commentaires.

// pour lancer le script au chargement de la page
addEvent(window,'load',initNewSearch); // au chargement de la page, on déclenche la fonction initNewSearch, laquelle va ajouter un nouveau comportement sur le lien
// fonction d'initialisation
function initNewSearch() {
if(!getElementsByClass('helper')) return; // on ne déclenche cette fonction que si on trouve un paragraphe avec une classe "helper". getElementsByClass est une fonction de ma bibliothèque personnelle
var myLink = getElementsByClass('helper')[0].getElementsByTagName(’a')[0]; // on cible le premier lien de ce paragraphe
addEvent(myLink,’click’, newSearch); // on ajoute un comportement à ce lien : on lance la fonction newSearch lorsque le lien est cliqué
}
// Fonction principale
function newSearch() {
var searchInput= $(’s’); // cible le champ texte pour la recherche. $ est un raccourci pour document.getElementById()
searchInput.value=”"; // on vide le champs
searchInput.focus(); // on lui donne le focus
}

Pour info, je n’utilise pas de librairies javascript type jquery, prototype ou mootools sur ce blog car comme je l’ai déjà écrit dans un billet sur la refonte de ce blog, je les trouve assez lourde et surtout surdimensionnée pour un site de ce type. A la place, j’utilise une librairie récupérée chez Dustin Diaz composée des 10 fonctions javascript les plus utilisées. Vous trouverez les fonctions $(), getElementsByClas() et addevent() chez lui.

Et encore une pincée de css pour alerter l’utilisateur

C’est bien beau de donner le focus au champ de recherche lorsqu’on clique sur le lien “nouvelle recherche” ou lorsqu’on utilise les accesskey, encore faut-il en informer l’utilisateur. Ça tombe bien, en css il existe une pseudo classe :focus qui permet de cibler l’élément qui a le focus sur votre page.

En l’utilisant intelligemment et en changeant l’aspect du champ de recherche lorsque celui ci a le focus, on signale alors à l’utilisateur qu’il s’est passé quelque chose.

input#s {border: 1px solid #000; padding : 1px 3px;} /* le champ de recherche a un fond blanc et une bordure noire lorsqu'il n'est pas utilisé */
input#s:focus {background: #000; border: 2px solid #fff; color: #FFF;} /* le champ de recherche a un fond noir et une bordure blanche lorsqu'il a le focus */

Pour comprendre l’effet dont je parle, utiliser le racourci clavier Alt + R sur internet explorer, Shift + Alt + R sur Firefox, Ctrl + R sur Safari. Effet garanti [2] !

1. Pour les non initiés, donner le focus signifie activer le champs texte
2. (enfin pas sur ie, lui, il n’interprète pas la pseudo classe focus).

Pas de navigation standard…

En tant que designer ou concepteur de site, il ne faut pas être trop prétentieux et se dire que la navigation à laquelle nous avons pensé n’est peut-être pas celle qui conviendrait à madame Michu.

D’un site à l’autre, la navigation change: barre de nav en haut, sur les côtés, navigation par tags, par rubriques, par type de contenus… Il n’y a pas une façon d’organiser les contenus mais une infinité. Il n’existe pas vraiment de norme pour organiser les contenus sur internet. Du fait de cette absence de normes, les utilisateurs (dont fait partie madame Michu) ne peuvent pas se créer de réflexe de navigation.

… À part le moteur de recherche

Pas de norme ? Ce n’est pas complètement vrai. Il existe un élément de navigation commun à tous les sites et dont le comportement est absolument standard: le formulaire de recherche. Quel que soit le site que vous consultez, le comportement du formulaire est toujours identique : vous tapez un terme (ou plusieurs) et vous arrivez sur une liste de résultats.

Avec l’utilisation massive de google, les internautes ont pris l’habitude de naviguer en utilisant les moteurs. La fonction recherche représente le raccourci ultime sur un site pour naviguer. Alors un conseil : soignez votre recherche.

Pour ce faire, il faut respecter ces trois règles :

1. Optimiser l’algorithme de recherche
2. S’assurer que le formulaire de recherche est visible sur toutes les pages (genre en haut à droite)
3. Soigner la page de résultats

Pour présenter les résultats : 2 écoles

1. présentation par type de contenu
2. présentation par pertinence

Résultats classés par type

Présenter les résultats par type de contenu c’est ce qui se fait par exemple sur ZDNet, Tom’s Hardware ouClubic . Ca a l’avantage d’être clair dans la tête des concepteurs du site. Par contre pour les utilisateurs, ça se discute. Sur Clubic par exemple, comment différencier un dossier d’une brève d’un article ?

Même chose pour Tom’s hardware qui présente sur sa page de recherche un bloc libellé actualité et un autre bloc libellé article.

ZDNet s’en tire juste un peu mieux puisqu’il ne présentent que des news et des produits. Pas optimal mais peut-être un peu plus clair. Bon je dis ça parce que je bosse là-bas. En fait, l’internaute se fiche de tomber sur un article sur le eee pc ou sur le test du ee pc. Tout ce qu’il veut lorsqu’il tape eee pc dans un moteur de recherche, c’est trouver de l’info, test, news ou actu, peu importew.

Résultats classés par pertinence

Présenter les résultats par pertinence c’est ce que font les sites de news (qui n’ont d’ailleurs en général qu’un type de contenu) type lemonde, Rue89 ou Libé.

Plus intéressant : un CNETFrance.fr (oui je bosse chez eux et nous avons récemment refait le design de la page de recherche) qui a plusieurs types de contenus présente les résultats par pertinence. L’internaute peut ensuite filtrer ces résultats sur un type de contenu ou une thématique.

Libération utilise le même genre de filtre sur sa page de recherche et propose des expressions certainement parmi les plus souvent tapées. Je fais une recherche sur eee pc par exemple et au dessus de la liste de résultats, le site m’affiche une liste de liens pour “affiner ma recherche”:

Je reviendrai ultérieurement dessus pour expliquer comment on peut améliorer l’expérience utilisateur sur cette page avec un peu de javascript et de css. Ce sera l’objet d’un prochain billet.

Dans la série Les 3 pages clés sur un site

1. La Recherche
2. Page d’article vs Page d’Accueil
3. la 404 (à venir)