Dessine-moi un site

Une étoile lumineuse virevolte sur l'écran. Après avoir effectué quelques tours, elle se décompose soudainement en une succession de points bleus qui symbolisent l'entrée dans différents univers. Nous sommes sur le nouveau site Internet des montres de luxe Piaget, conçu par Le Studio. Sans animation fracassante, mais en utilisant les potentialités du logiciel Flash, ce site montre comment le Web design peut mettre en valeur une entreprise plus que centenaire qui, a priori, n'a pas grand-chose à voir avec les nouvelles technologies. Aux balbutiements d'Internet, certaines marques, portées par l'enthousiasme de la nouveauté, ont pu se laisser aller à jouer allégrement avec leurs codes graphiques, au point d'être totalement illisibles pour les internautes. D'autres, au contraire, se sont contentées de mettre en ligne leur plaquette de présentation sans valeur ajoutée interactive. Ces deux approches sont révolues. Le Web design intègre une triple fonction d'esthétique, de fonctionnalité et de conseil. Son rôle commence dès la définition du positionnement du site et inclut la prise en compte des problématiques d'identité visuelle, d'ergonomie et de technologie. Les annonceurs ont donc intérêt à définir une stratégie de communication en ligne spécifique en suivant cinq passages obligés.

1- Définir son positionnement

Fini le temps où l'on créait un site pour le prestige d'être présent sur le Net ou pour épater ses concurrents. Depuis l'explosion de la bulle Internet, les annonceurs n'ont plus d'argent à investir dans ce domaine sans espérer un retour en termes d'image ou de ventes. Avant même de penser au graphisme, ils doivent savoir ce qu'ils veulent lui faire dire.«Le design n'est que la partie visible de l'iceberg. Nous mettons en garde nos clients quand la problématique de leur site est ailleurs, dans le contenu éditorial par exemple»,souligne Alain Castoriano, le directeur de création du Studio, l'ex-Studio Grolier. La Web agency Hitit a mis au point un outil, baptisé Brand.hit, qui aide à définir le territoire de la marque avant toute démarche créative. En fonction du positionnement Internet de l'annonceur, le design sera plutôt identitaire, démonstratif ou discret. Dans tous les cas, il sera au service du contenu. On ne peut pas imaginer, par exemple, un site de commerce électronique, comme Ooshop ou C-mescourses, s'ouvrant sur une animation Flash de trois minutes. L'internaute s'attend à un graphisme sobre qui le guide facilement dans ses achats. En revanche, un site qui met en scène l'univers d'une marque peut se permettre de multiplier les effets, comme Piaget. Dans le cas d'un site corporate, l'utilisateur cherche d'abord des informations claires sur une entreprise, mais cela n'exclut pas une certaine recherche esthétique, à la manière des rapports annuels. Encore les annonceurs doivent-ils s'assurer que leur positionnement a été correctement défini.«Il ne sert à rien de créer un portail pour parler plus fort que les autres. Il faut être crédible»,estime Matthieu de Lesseux, cofondateur de l'agence Duke.«Aux États-Unis, les gens se sont lassés des sites-portails»,renchérit Pantchika Arana, la directrice de création de BDDP Tequila Interactive. Comme le design hors ligne, le Web design est indissociable de la stratégie.

2- Respecter l'identité de sa marque...

Une fois définie la raison d'être du site, la réflexion sur la forme peut commencer. Dans le brouhaha des sites présents sur la Toile, le design remplit une double fonction de traduction de l'identité de la marque et de reconnaissance. Ainsi, une marque qui est déjà connue dans l'économie«brick and mortar» doit tenir un discours cohérent et pouvoir être reconnue sans aucune ambiguïté sur son site. A fortiori, une marque «pure player» (c'est-à-dire qui n'existe que sur Internet) doit installer des codes forts et stables afin de construire sa notoriété, et ce, dès le choix de son nom. Mais respecter l'identité de la marque sur Internet ne se résume pas à apposer son logo en haut à gauche de l'écran. Trop de sites, y compris les plus visités comme tf1.fr, se contentent de cette signalétique pour proposer ensuite un graphisme passe-partout. La marque doit être reconnaissable tout au long du site. Les agences disposent pour cela d'un «torture test» dévastateur: cacher le logo sur la page d'accueil et recueillir les impressions des internautes. Duke a utilisé cette méthode pour valider le design de lequipe.fr. «L'Équipea une telle légitimité dans le domaine du sport que certaines des personnes interrogées croyaient que le site existait déjà avant qu'il ne soit lancé,s'amuse Matthieu de Lesseux.Quand une marque a une notoriété pareille, on ne peut pas faire n'importe quoi.»L'agence a donc établi une charte graphique très précise, qui refléte l'identité d'expert du sport de la marque, avec une large place laissée au texte et des codes couleurs rouge et noir. Autre exemple de mise en valeur d'une identité de marque, le site TGV est fondé sur le concept «Prenez le temps d'aller vite», développé dans la campagne de publicité de TBWA\Paris. BDDP Tequila Interactive, sa consoeur appartenant au groupe TBWA\France, a illustré cette signature dès la page d'accueil. Celle-ci se divise en une colonne de gauche dédiée à la réservation des billets, une partie magazine placée sur la droite et une partie centrale consacrée à la mise en scène de la thématique du voyage.

3- ... Mais aussi savoir jouer avec

Un média interactif par essence comme Internet autorise de jouer avec la personnalité de la marque. À la différence d'une carte de visite ou d'un papier à lettres, le Web design n'est pas gravé dans le marbre pour des années et permet de s'adresser à des publics différents. Kellogg's en fait la démonstration avec les céréales Crisp-X, sa première incursion sur la cible des adolescents. Crisp-x.com développe le concept publicitaire de la marque avec ce «site qui se réveille toutes les quatre heures». Le design, conçu par CB'A Online, change effectivement toutes les deux cent quarante minutes avec des rotations de cinq créations différentes jusqu'à minuit, moment où un message annonce que le site est endormi!«Internet permet de développer un univers, ce qui ne serait pas possible sur un packaging ou dans une publicité,insiste Guillaume de Coral, le directeur général de CB'A Online.On peut imaginer une synergie entre le packaging, le site et la promotion, comme nous l'avons fait pour les sucettes Chupa Chups: le pack renvoie à l'adresse du site, qui informe des opérations de promo, qui renvoient à leur tour sur le site.»D'autres annonceurs choisissent de créer plusieurs sites pour ne pas brouiller leurs messages. Eurostar dispose ainsi d'un site classique de vente de billets et d'informations, eurostar.com, et d'une autre adresse accessible par un lien, eu rostarplanet.com, consacrée aux sorties dans le Londres branché. Là où le premier décline sagement les couleurs de la marque, le second se permet une créativité débridée avec un dégradé de rose «shocking». L'agence responsable du site, Impiric Interactive, envisage à terme de créer une véritable marque Eurostarplanet, avec ses propres codes, indépendants de l'identité corporate.«Décliner une charte graphique sur un site n'a aucun intérêt,affirme Vincent Wibaux, le directeur de création d'Impiric Interactive.Internet est un support spécifique sur lequel on n'attend pas les mêmes choses que sur les autres médias.»

4- Adopter le point de vue de l'utilisateur

L'ergonomie devient aussi importante que le graphisme dans la conception d'une interface. Il s'agit de hiérarchiser les pages, créer des rubriques en fonction des publics visés, organiser une navigation intuitive... Dans les agences, le directeur artistique remplit ces tâches, faute d'un ergonome de formation. Olivier Soussan, directeur du pôle image de l'agence WIS, en emploie en free-lance.«Ce sont les plus à même de résoudre les problèmes d'interface entre l'homme et la machine»,estime-t-il. Ni technicien ni graphiste, l'ergonome est plutôt psychologue. Icon Medialab systématise cette approche en amont de ses projets pour situer les attentes des internautes par rapport aux sites concurrents ou au site du client, dans le cas d'une refonte du design. Des questionnaires en ligne sur le contenu et des entretiens de groupe concernant la qualité d'usage du site permettent de cerner la perception du public. Yuséo, agence spécialisée en ergonomie, enregistre même les mouvements de l'oeil et les réactions de l'internaute pendant sa navigation en laboratoire. Les applications sont très concrètes, comme cesser d'aligner trente pictogrammes incompréhensibles ou encore réduire le nombre de clics pour accéder à l'information. Tout mettre à portée de clic pousse les sites informatifs à remonter le maximum de contenu dès la page d'accueil, quitte à ressembler à des portails. Le site du GAN, réalisé par Fi System, multiplie les entrées texte, tout en préservant un a-plat de couleur pour aérer la page et des photos pour l'animer. Le site Kozen.com de Kenzo utilise icônes, codes couleurs et affichage progressif; de bonnes astuces qui permettent de simuler une profusion d'informations. L'agence WIS a, quant à elle, conçu pour le vépéciste atlasfor men.com un site de recrutement de clientèle où tout se passe sur un seul écran: photos des produits, fiches techniques et modules de paiement sont hiérarchisés par cadres et pop-up. À aucun moment, la patience du visiteur n'est éprouvée.«84% des internautes restent après un temps de chargement de 10secondes, mais 51% seulement après 15secondes et 5% après 30secondes»,rappelle Philippe Simonet, le président de Publicis Networks.

5- Utiliser les technologies à bon escient

La technologie redevient un service et sert le contenu. Fini les effets en Java simulant les reflets du bord de mer et alourdissant la page. L'infographie se débarrasse des poncifs de Photoshop quand ceux-ci n'apportent rien au sens de la page: typographie en relief, ombrée, animée, logo rotatif ou drapeau qui flotte. De même, le logiciel Flash qui permet d'animer les sites à tout va, a tendance à retrouver sa place d'outil.«Faire du Flash pour du Flash n'a pas de sens. Le site de Cartier, par exemple, est purement esthétique. On n'y retourne pas»,critique Jean-François Bouillot, designer et fondateur de l'agence Supergazol. Paradoxalement, le logiciel, aux effets spectaculaires, a été utilisé à en étourdir l'internaute, tout en étant sous-exploité quant à ses possibilités.«La technologie Flash n'est pas seulement au service de la forme. Elle sert également le contenu, en présentant l'information de façon ludique»,souligne Guillaume Tirard, consultant senior chez d/g* interactive. Ainsi, plutôt que de présenter l'argumentaire en bloc, comme dans une édition papier, il apparaît au fur et à mesure, comme un poème déclamé, version Chanel, ou comme une notice qui s'adapte à l'utilisateur, selon IBM. Pour les sites d'e-commerce, où la priorité est à la rapidité d'affichage, les agences sont revenues au format HTML simple. La Fnac a lancé un prototype de boutique virtuelle en trois dimensions, avec le logiciel de Cryo Networks.«Nous nous préparons à utiliser la 3D en B to B, mais nous ne serons pas crédibles avant deux ou trois ans,estime Olivier Soussan.Car la technologie n'est pas au point. Et cela nécessite pour les internautes de télécharger l'application et de s'équiper en connexion haut débit.»En revanche, un nouveau format promet de se répandre très rapidement: le XML permet en effet de dissocier la mise en page du texte et donc d'adapter un même contenu à tous les supports: WAP, Web, PDA, etc.