Il fut un temps, nous n’avions à notre disposition qu’une poignée de typographies utilisables sur le web. Avec l’émergence de nouvelles technologies tels que les font-face kits ainsi que le HTML5/CSS3, elle est devenue une composante importante à prendre en compte lors de la réalisation d’un site internet.

Véritable effet de mode, on voit de plus en plus de sites dont le webdesign est presque essentiellement basé sur la typographie qui, utilisée de manière intelligente, permet de structurer efficacement le contenu.

Nous essaierons dans ce dossier de toucher du doigt plusieurs domaines relatifs à la typographie :

Dans un premier temps, il s’agira de mettre l’accent sur les bases de la typographie (classification, familles, termes techniques…), afin de mieux interagir avec votre webdesigner et de découvrir de nouvelles polices que vous pourrez utiliser dans un projet futur. Nous verrons ensuite comment profiter des nouvelles technologies pour exploiter à 100% la typographie sur le web et nous terminerons sur les tendances actuelles exemples à l’appui.

Savoir parler à votre designer, quelques notions à savoir :

Quelque soit votre profil, il est bon de connaître les bases du jargon typographique. Etant donné que les termes sont utilisés à la fois par les designers mais aussi pour les intégrateurs, apprendre les bases de la typographie vous permettra de mieux interagir avec votre équipe et d’être plus concret sur vos demandes ou recommandations.

L’empattement :

L’empattement désigne les terminaisons d’un caractère, plus ou moins accentuées et de formes différentes. Ils peuvent ajouter un certain style à votre mise en page. On parle donc de polices avec ou sans empattements, également appelées sérif ou sans-sérif. Chacune apporte un style particulier à votre mise en page et il existe plusieurs familles de polices avec des empattements différents.

Hauteur d’X, montantes et descendantes

Ce terme designe la hauteur d’une lettre courte sans les montantes ni les descendantes. Par exemple « x » est une lettre courte. « p » est une lettre avec une descendante et « d » est une lettre avec une montante.

La hauteur d’X ainsi que la prise en compte des montantes et descendantes s’appelle le corps, c’est la valeur que vous retrouvez dans la majorité des logiciels de traitement de l’image gradué en « points », abrégé « pt ». On utilise par exemple la valeur « 14 pt » pour le texte courant sur internet pour une lisibilité optimale. Le corps est utilisé en CSS via la propriété font-size (ex : p {font-size : 1 em; }).

Les capitales et bas de casse

Les termes « majuscules » et « minuscules » ne sont pas utilisés en typographie, on préfèrera l’utilisation de « capitales » (pour un titre, ou un élément à mettre en avant) et « bas de casse » (en général le texte courant).

Il existe également les petites capitales, qui sont des capitales ayant la même hauteur d’X que les bas de casse. Pour y accéder en CSS on utilise la propriété font-variant (ex : h2 {font-variant : small-caps; }).

Les espacements

On distingue deux grands types d’espacements en typographie :

-   l’espacement entre les lettres, appelé « approche de groupe » et défini par la propriété « letter-spacing » en CSS

-   l’espacement entre les lignes de base du texte, défini par la propriété « line-height » en CSS

N’hésitez pas à travailler ces deux types d’espacements (que ce soit sur Photoshop ou dans votre CSS) afin de garder un bon rythme de lecture pour le texte courant !

Il faut cependant garder à l’esprit que l’interlignage favorisant le plus la lecture, doit avoir un ratio de 1.48. C’est à dire que vous devez multiplier la taille d’X (font-size) par 1.48 pour obtenir l’interlignage idéal (ex : p {line-height : (font-size x 1,48)em; }).

Série de police (ou family)

Les polices de caractère sont classée en « séries » (et non en famille, bien que l’on dise « family » en anglais).

Elles sont identifiées par leur nom de série (Helvetica, Arial, Frutiger…), leur graisse (normal, bold, extra-bold…), leur chasse (encombrement vertical d’un caractère) et leur nom de graisse. La dénomination se fait dans cet ordre : nom de série, graisse, chasse et nom de graisse (ex : Helvetica 95 bold).

Classification des typographies

Les typographies sont classées par familles différentes (bien que parfois la différence soit très subtile…). Il est donc utile de reconnaître les grandes familles ainsi que les idées qu’elles véhiculent : cela vous permettra d’avoir une meilleure force de proposition face à un client car vous pourrez justifier vos choix de typographie en fonction du sujet. C’est également un excellent moyen de mieux communiquer avec un graphiste, sauf si vous êtes un fan inconditionnel de la Comic Sans MS (là je ne peux plus rien faire pour vous).

Formes avec sérif

Humanes, Garaldes et Transitionnelles

Originaires des premières machines à imprimer, ces polices de type sérif sont élégantes, intemporelles et très lisibles. Elles sont parfaites pour le texte courant avec un faible corps (entre 12px et 14px) mais peuvent être également utilisées avec parcimonie pour vos titres.

Ex : Georgia, Times, Palatino

Didones (« modern » en anglais)

Plus difficiles à utiliser que les polices précédentes car pratiquement inutilisables sur le web à cause de leurs empattement très fins, les Didones ont un aspect rigide, idéal et rigoureux. C’est par exemple la police utilisée pour le titre du magazine Elle.

Ex : Didot, Century, Bodoni

Mécanes

Très en vogue en ce moment sur internet, elles sont utilisées avec un corps très élevé (en général superieur à 24px). Solides et fiables, elles sont parfaites pour un titre mais peu lisibles en texte courant.

Ex : Rockwell, Holtwood, Bevan

Formes sans serif (dites linéales)

Plus récentes que les polices avec sérif, elles se démarquent par la disparition de l’empattement : fonctionnalistes, directes et efficaces. Elles sont un excellent moyen pour nuancer vos textes lorsque vous utilisez également du sans serif. Du fait qu’elles sont très lisibles tant sur le web que sur support papier, n’hésitez pas à les utiliser pour vos textes courants.

On notera que comme les mécanes, l’utilisation de linéales de très grande taille (au-delà de 30px) est à la mode en ce moment sur le web pour constituer des titres impactants.

Ex : Helvetica, Futura, Bebas Neue

Script

Ces polices, tels que la Mistral ou la Bello sont inspirées de l’écriture courante. Revenant au pas de charge à la mode de nos jours, elles sont utilisées à profusion dans les sites webs « tendances » ou dans la publicité. Faites tout de même attention à leur utilisation, elles peuvent facilement être très peu lisibles sur un écran.

Ex : Mistral, Bello, Candy Script

Diverses

Inscriptions

Les Inscriptions, dont l’un des meilleurs exemples est la Trajan sont des typographies qui se rapprochent le plus des écritures romaines gravées dans la pierre. Ayant un fort passé historique, elles traduisent majoritairement le prestige et l’ancienneté.

Ex : Trajan, Trajan Pro, Perpetua

Gothiques (à ne pas confondre avec « gothic »)

Les Gothiques sont issues des écritures des moines copistes du Moyen-Âge. Ces polices sombres, anciennes et vernaculaires sont adaptées pour un public très spécifique (journaux, Heavy Metal…).

Ex : Augustal, Brietkopf Fraktur

Graphiques

Plus originales, créatives et rapidement peu lisibles, ces polices sont très diverses : déstructurées, groovy, fun, destroy… tout est permis !

Vous pourrez en trouver un très large choix sur dafont.com, prenez cependant garde aux droits d’auteurs, comme pour toutes les typographies.

Ex : Docteur Atomic, Rio Grande, Billo

Bien choisir sa typo

Maintenant que vous avez pris connaissance des différentes familles de typographie, il s’agit de bien savoir les utiliser…

Il n’y a pas de recette miracle, posez vous simplement les bonnes questions :

• Quelle image de marque, valeur ou message vous souhaitez véhiculer ?
• Y’a-t-il déjà une charte graphique mise en place ?
• Quels sont les goûts de mon client ? N’hésitez pas à envoyer un brief créatif avant toute proposition.

Vous pouvez également utiliser ce schéma (en anglais) pour vous guider si vous manquez d’inspiration : http://inspirationlab.wordpress.com/2010/04/16/so-you-need-a-typeface/

Notez qu’il y a tout de même des règles générales. Par exemple, n’utilisez pas des polices qui se font concurrence (par exemple deux serifs) mais essayez de mélanger les familles, les tailles de corps et les graisses (un titre en serif gras accompagné d’un texte courant sans serif sera plus pertinent que d’utiliser uniquement du sans serif). Créez du contraste !

Essayez d’abord de choisir vos typos comme un couple de personnes : deux personnalités qui ne vont pas ensemble ne fonctionneront pas !

Dans la suite de ce dossier nous verrons comment appliquer ces règles et utiliser les nouvelles technologies web pour utiliser au mieux la typographie : effets de texte CSS3, font-face kits, Cùfon… faites la guerre aux pages ennuyeuses et au Comic Sans MS !

Remerciements à Jérémy Viallard pour sa formation sur la typographie.

Bonne lecture !

1 – Les campagnes à ne pas rater

• Pizza Hut nous fait chanter pour le Super Bowl
• Quand des tampons créent la polémique
• Nouvelle campagne pour The Walking Dead
• Une campagne intrusive pour Kleenex
• L’appartement IKEA, 54m² d’idées à vivre

2 – (Social) Media

• Plus d’utilisateurs pour Google+
• Les news de Facebook
• L’histoire d’un alcoolique sur Timeline

3 – Les insolites d’Iman et Alex

1 – Les campagnes à ne pas rater

Et si on chantait pour Pizza Hut au Super Bowl ?

Le Super Bowl, l’évènement sportif le plus suivi aux Etats-Unis, est une véritable mine d’or pour les annonceurs. Pizza Hut a eu l’idée de faire faire son spot publicitaire par ses fans. A partir du 1er janvier et ce jusqu’au 15, quiconque peut participer à la réalisation d’une chanson et de sa vidéo, à partir de sa page Facebook. 6 vainqueurs seront ensuite choisis pour être diffusé avant le match dans un spot de 30 secondes. Quand on sait combien coûte une publicité destinée à être diffusée pendant le Super Bowl (jusqu’à 3 millions de dollars pour 30 secondes !), on peut alors dire que l’initiative de Pizza Hut, en plus de faire accroître sa popularité, est extrêmement ingénieuse.

Quand des tampons créent la polémique

Une publicité pour une la marque de tampons Libra crée une véritable polémique en Australie et en Nouvelle-Zélande. Le spot montre une femme et un transsexuel se livrer à une guerre de féminité, l’une après l’autre exhiber ses atouts. Pour y couper court, la femme sort de son sac un paquet de tampons, ce qui fait battre en retraite sa rivale. « Libra gets girls » (Libra comprend les femmes) s’affiche alors à l’écran, laissant comprendre qu’un transsexuel ne sera jamais considéré comme une femme. La marque s’est dès lors attirée les foudres des associations de défenses des transsexuels qui trouvent cette publicité autant insultante envers les transsexuels qu’envers les femmes. En effet, elle suggère que la seule façon d’être considérée comme une femme est au travers des menstruations. Or beaucoup de femmes ne peuvent tout simplement pas en avoir pour des raisons diverses et variée.

Nouvelle campagne pour The Walking Dead

Ce n’est pas la première fois que nous parlons des campagnes de pub, toujours astucieuses, pour la série The Walking Dead sur Synerg’heBlog. Cette fois c’est l’agence NoSite qui signe cette campagne à l’occasion de l’arrivée de la série sur la chaîne Sundance Channel à partir du 12 janvier. Pour sa première, l’agence a délibérément choisi de ne pas mettre en scène les zombies, pourtant récurrents dans les autres campagnes (on se souvient du camion rempli de cadavres lors du San Diego Comic Con). Les rues de Paris (puis plus tard les Inrocks et Direct Matin) ont donc vu débarquer des affiches où apparaissent les principaux protagonistes de la série, accompagnés d’accroches malines résumant bien le quotidien de ces personnages.

Une campagne intrusive pour Kleenex

Vous voulez vous moucher gratuitement ? Plus besoin d’aller à Carrefour. Faites-le savoir sur Facebook et vous recevrez des paquets de mouchoirs Kleenex gratuitement ! Pour sa dernière campagne, Kleenex s’est mis à observer les posts de 50 consommateurs israéliens se plaignant de leur nez qui coule pour ensuite leur faire parvenir un lot de mouchoirs personnalisés. Cette nouvelle d’interagir avec les consommateurs peut être qualifiée d’intrusive mais au vu des chiffres, il semblerait que non : « Pour seulement 50 kits envoyés, 650 000 impressions, 1800 interactions et 100% des personnes qui ont reçu le kit Kleenex ont posté une photo sur Facebook ! » selon le site Influencia.net.

« L’appart IKEA, 54m2 d’idées à vivre »

Après le « jardin de senteurs » conçu par Febreze pour redonner un peu de fraîcheur aux couloirs du métro cet été, c’est Ikea qui investi la station Auber en la transformant, cette fois-ci, en un véritable studio de 54 m². Ubi Bene, l’agence, qui s’est occupée de l’organisation de ce véritable chantier, a aussi invité 5 colocataires à s’y installer pour une semaine entière. Un ambient qui surfe un peu trop sur la vague « Big Brothers » à notre goût mais qui répond bien à la problématique : montrer qu’Ikea rend fonctionnelle même les plus petites surface.

2 – Social media

Le nombre d’utilisateurs de Google + accroît considérablement

Google+ n’a peut-être pas le même nombre d’utilisateurs que son rival Facebook, mais le mois dernier a été le plus fructueux. Selon les derniers statistiques, le réseau pourrait atteindre les 400 millions d’utilisateurs d’ici la fin de l’année. Aux Etats-Unis, il y eut plus de 49 millions de visites au mois de décembre, ce qui fait une augmentation de 55% par rapport au mois de novembre. L’analyste Paul Allen a indiqué au Daily Mail que Google + a dépassé la barre des 62 millions d’utilisateurs et que 25% d’entre eux ont créé leur compte en décembre. Ce taux de croissance est très significatif puisque Facebook n’a atteint les 60 millions d’utilisateurs que quatre ans après sa création. Le réseau de Zuckerberg stagne actuellement à 800 millions d’utilisateurs. Affaire à suivre donc…

Les news de Facebook

L’ouverture de http://www.facebook.com/username/ vous permettra de choisir l’url de votre profil et vos pages Facebook. Une option non négligeable pour renforcer la visibilité d’une marque.

Moo.com est un service qui vous permettra de transformer votre Timeline en carte de visite. On vous laisse regarder la vidéo qui explique toutes les possibilités que vous offre ce site assez malin !

Etonnant, Facebook serait cité dans un dossier de divorce sur 3 au Royaume Uni. C’est en tout cas ce que révèle cette étude anglaise assez inquiétante mais qui confirme une fois de plus que les réseaux sociaux ne sont pas uniquement présents pour nous rassembler.

Le chiffre d’affaire de Facebook se serait élevé à 150 millions d’euros en France et 4,3 milliards de dollars à travers le monde. Un chiffre d’affaire gonflé notamment grâce à ses revenus publicitaires dont la provenance est d’ailleurs expliqués sur une partie du site qui vient de leur être dédiés.

Facebook lance son plugin « comment » pour mobile et rend encore plus accessible le partage de musique en implémentant le bouton « listen with ».

Une Timeline facebook qui retrace l’histoire d’un alcoolique

L’agence McCann a réalisé pour l’IADA (Israel Anti Drug Authority) une opération qui joue avec les fonctionnalités du nouveau profil Facebook, Timeline. Le concept vise à dénoncer les effets néfastes de l’alcool en confrontant des moments de la vie d’Adam Barak, un personnage fictif, à ceux de son double sobre. Première campagne qui repose intelligemment sur Timeline, ce qui la rend remarquable. A noter que le profil a été suspendu. Eh oui, si vous n’avez pas suivi nos articles, nous vous rappelons que les faux profils sont interdit et banni par Facebook.

3 – Les insolites

Nous saluons… l’arrivée du président de Paypal, Scott Thompson, aux commandes du géant Yahoo !

Nous avons parcouru… l’année 2011 de Twitter avec cette rétrospective.

Nous nous sommes amusé… de la vague médiatique provoquée par l’affichage malencontreux d’un homme nu sur la Home de La Redoute. Le buzz ne se sera pas finalement pas retourné contre la marque qui a réagit de manière efficace et rapide.

Nous avons trouvé astucieux… cette utilisation de FaceTime et d’une voiture téléguidée afin de ne pas avoir à se déplacer pour payer.

Nous sommes resté estomaqués… devant la bombe lancée par Free Mobile mardi dernier avec ses offres extrêmement alléchantes. Offres alléchantes, certes. Mais que cachent réellement ces forfaits à 2€/mois (service clients déplorable, mauvaise couverture…) ? réseau

Co-écrit avec Alexandre Joussier

Bonne lecture et bonne semaine à tous !

1 – Les campagnes à ne pas rater

• Sidaction, les opérations digitales à retenir cette année
• Samsung : The next big thing
• Bienvenue à AndroidLand
• Les pompiers investissent les cabines d’essayage de Penningtons

2 – (Social) Media

• Google Maps…de l’intérieur
• Facebook, Buffy et HTC
• Nouvelle interface pour Youtube
• Analytics pour Youtube
• Eye-tracking : ce que l’on regarde en premier sur votre profil
• Twitter lance sa « self serve ad platform »

3 – Les insolites d’Iman et Alex

1 – Les campagnes à ne pas rater

Sidaction, les opérations digitales à retenir cette année

Le 1^er décembre, nous étions tous mobilisés pour la Journée mondiale du Sida. Pour rappel, en 2010, plus de 6300 nouveaux cas de séropositivité ont été diagnostiqués en France et 1500 personnes séropositives ont découvert être atteintes du Sida. Dans le monde, c’est 34 millions de personnes infectées. 34 millions de trop. Les actions se succèdent chaque année en cette période et les ONG ont bien conscience que la sensibilisation en format 4×3 dans le métro ne suffisait plus. Le digital au service des bonnes causes, zoom sur 3 opérations contre le Sida.

Accept your future son friend request.

La marque de préservatif Olla Condoms et l’agence brésilienne Age Isobar a tenu à mettre en garde ces messieurs des conséquences que pouvait entraîner une relation sexuelle sans le port d’un préservatif. La campagne met le doigt sur les grossesses accidentelles. En effet les MST ne sont pas le seul risque d’un rapport sans protection ; et la surprise peut parfois surprendre sous une autre forme.

La mécanique de la campagne repose sur la fonctionnalité de demande d’ajout d’amis Facebook et la création de faux profils portant le nom de jeunes hommes pris au hasard accompagné de l’abréviation « Jr. » pour « junior ». A leur connexion, la notification indiquait que leur progéniture voulait devenir être ami avec eux.

Cette activation n’a pas tardé à faire réagir les shérifs de la firme californienne. Facebook interdit en effet la création de faux profils, ce qui a mis en porte à faux le dispositif. Nous saluons tout de même l’idée !

Do Not Accept Unknown Friend

En Pologne, l’agence Saatchi & Saatchi avec la Croix Rouge ont lancé une campagne de prévention contre le sida. L’opération se sert de Facebook en associant l’acte d’accepter une personne que l’on ne connaît pas à celui de coucher avec n’importe qui. Adressée au jeune, la vidéo nous met à la place d’un jeune entraîné dans une nuit bien arrosée avec une fille qu’il vient juste d’accepter sur Facebook. Arrive le rapport sexuel sans précaution. La jeune femme est atteinte du Sida. Double conclusion si l’on creuse un peu : la première, se protéger dans la vie IRL et virtuelle.

« Bref, sortez couvert !»

Sidaction s’est associée pour l’occasion à Canal + et à son programme Bref qui fait un carton depuis la rentrée auprès des jeunes. La mini-série rassemble plus d’1,5 fans sur Facebook et alimente les conversations des pauses café au boulot. Sidaction ne pouvait trouver mieux pour toucher sa cible.

Capote 3000, nom de l’opération et aussi marque officielle des préservatifs mis en scène dans « Bref », consiste en un jeu concours sur Facebook qui fera remporter à 100 chanceux un pack de 12 capotes taguées des citations cultes de la série.

Un épisode événement a même été produit sur le thème du dépistage.

Notons la participation du studio « La Boucherie » et de la très prometteuse agence Darewin, fondée par Wale Gbadamosi-Oyekanmi. Chapeau l’artiste !

Samsung : The next big thing

Décidemment, après Unhate pour United Colors of Benetton, l’agence 72 and sunny ne se relâche pas et rempile avec une campagne qui fait le tour du Web. Le concept paraît simple, des fans d’Apple aux quatre coins des USA s’impatientent en attendant l’ouverture de l’Apple Store. Soudain leur attention est captée par des passants qui se servent de leur « incroyable » Samsung 4G.

La publicité va très loin dans les références aux précédentes campagnes d’Apple comme 1984 qui marquait la rupture de la pomme avec IBM et la satire de la série MAC/PC qui faisaient passer les pro-PC pour des has-been. Cette campagne composée de plusieurs spots est un petit bijou qui s’amuse des stéréotypes et des faiblesses d’un géant mais aussi qui met du piquant dans la publicité comparatrive et on adore ça !

Bienvenue à Androidland

Si vous êtes un adepte d’Android et avez la chance d’habiter à Melbourne, en Australie, alors vous ne manquerez pas de visiter le premier magasin entièrement dédié à Android. Ce magasin vend des smartphones et des tablettes fonctionnant sous le système d’exploitation de Google. A l’intérieur, les visiteurs peuvent entre autres jouer à Angry Birds sur un écran géant ou encore se retrouver dans un simulateur de vol via l’énorme logiciel de recherche, Google Earth.

Les pompiers investissent les cabines d’essayage de Penningtons

On a tous connu la frustration des cabines d’essayage : la chaleur des néons, le pantalon qui ne passe pas, 2h à déambuler dans le magasin et aucun vêtement ne vous satisfait… Et bien avec Penningtons, l’essayage va devenir un pur moment de plaisir. Spécialisé dans les vêtements grandes tailles, la marque a décidé de flatter ses clientes avec la complicité de DDB Canada. Lorsqu’une cliente se met devant le miroir, deux pompiers apparaissent et lui offrent un joli striptease en lui offrant des fleurs. De quoi reprendre plaisir à faire du shopping !

2 – (Social) Media

Google Maps… de l’intérieur

La nouvelle version de Google Maps propose une nouveauté de taille : la navigation en intérieur. Bien évidemment, seuls quelques bâtiments publics ont été cartographiés tels que des aéroports ou des grandes surfaces américaines. Mais on imagine déjà l’utilité de cette mise à jour. Finies les déambulations aléatoires dans les grands centres commerciaux. Finie la longue file d’attente devant leurs plans interactifs (à Châtelet ça en devient même décourageant). Finis les aller-retour dans les hypermarchés à chercher le rayon des boîtes de conserves. En regardant cette vidéo, vous pourrez mieux vous rendre compte de la puissance de ce nouveau service.

Facebook, Buffy et HTC

« Buffy ». C’est le nom de code du prochain Facebook Phone qui sortirait d’ici un an et demi et fabriqué par HTC. Selon le blog du Wall street Journal (AllThingsD), le téléphone tournerait dans une version très modifiée d’Android et permettrait de profiter des services Facebook depuis n’importe quelle application. Avec ses 350 millions d’utilisateurs sur mobile, ce n’est pas une surprise de voir le leader des réseaux sociaux élargir son business.

Nouvelle interface pour Youtube

Youtube revêt sa tenue d’hiver. Une page d’accueil qui met en avant les chaînes et une navigation simplifiée pour un accès plus direct aux abonnements via une sidebar. Aussi, découvrez un module qui permet de connecter votre compte à Facebook et Google + afin d’accéder plus facilement aux vidéos que partagent vos amis. Enfin, Youtube vous permet de customiser votre interface avec des thèmes personnalisables. Retrouvez l’article complet sur le blog officiel de Google.

Analytics pour Youtube

Fini Insight, place à Analytics dans Youtube. Dans l’ère du « viral video content » ce n’est pas un luxe de voir arriver un outil digne de ce nom pour suivre l’évolution des retombées de son travail. Grâce à Youtube Analytics, Google apporte une version plus complète à Insight qui nous permet d’aborder les chiffres autrement et d’en savoir davantage sur son audience.

Les vidéos n’ont plus rien à envier aux sites web car l’interface de Youtube Analytics reprend dans sa globalité l’interface de Google Analytics. Nous vous laissons découvrir ces nouvelles – grosses – mises à jour grâce à cette infographie créée spécialement par Google pour l’occasion. Retrouvez l’article complet sur le blog officiel de Youtube.

Eye-tracking : ce que l’on regarde en premier sur votre profil

Une étude d’eye-tracking menée par Mashable et une start-up spécialiste, a fait passer au crible les pages « profils » des principaux réseaux sociaux par 30 personnes. Mashable précise bien que les résultats ne sont pas à 100% sûr mais donne tout de même une trame du parcours que l’œil suit sur une page. Ainsi, nous retenons que la photo de profil est l’élément le plus important suivie de votre description, votre activité principale et enfin les gens que vous connaissez. Retrouvez tous les écrans de l’analyse ici.

Twitter lance sa « Self-serve ad platform »

Adage a annoncé que Twitter était en test d’un système qui, comme sur Facebook, permettra aux entreprises de gérer leurs propres campagne sur le réseau. Promoted tweets, comptes et trends : ses outils pourront être configurés par l’entreprise directement sans avoir à contacter Twitter. « Ceci est un pas important dans notre volonté à renforcer notre business plan » confesse la firme. Emarketer estime que le revenu publicitaire de Twitter s’élèvera à $139,5 millions en 2011, $45 millions de plus qu’en 2010 et approchera les $400 millions d’ici à 2013.

3 – Les insolites

Nous trouvions important de souligner… que le service StatCounter a récemment relevé que le navigateur de Google aurait dépassé, en terme d’usage, Firefox. Internet Explorer reste loin devant mais subit une très forte chute depuis début 2010.

Nous aimons… la dernière campagne print pour Carlton Mid par BBDO Melbourne, Australia.

Nous avons fait… notre liste au Père Noël sur Amazon via une application iPad spécialement créée pour les fêtes.

Nous voulons chacun… un t-shirt avec un Doodle imprimé dessus pour Noël. Ne vous en faites pas, grâce à ce site c’est maintenant possible !

Nous avons salué… la vidéo contre la discrimination du mariage homosexuel « It’s time », créée par Get Up! Action for Australia dans le cadre de la campagne annuelle de Movember.

Nous avons félicité… B-Reel et Wieden+Kennedy London car leur projet The Honda Experiment a été sacré « Site of the Month » par FWA. Ce site en HTML5, sur le modèle des Chrome Experiments, propose de replacer dans le bon ordre des pop-up afin de créer des réactions en chaîne.

Nous avons encore joué… à une expérience créée par B-Reel et W+K pour Nike. Nous ne vous en dirons pas plus…essayez plutôt.

Nous nous sommes ennuyés… devant le spot TV pour Google+.

Nous vous avons trouvé… la vidéo WTF de ces deux semaines. Toujours dans la lignée du Movember, voici une vidéo tournée pour avertir des risques du cancer des testicules.

Nous avons vu en avant première… le trailer de « The Social Network 2». Plus sérieusement, cette vidéo met en scène la vie quotidienne de personnes désespérées de vivre dans un monde où Facebook n’est plus.

Nous avons repéré… l’objet insolite Olly. Connecté à votre ordinateur, cette boite diffusera une odeur différente selon votre activité sur Internet !

Nous boirons dorénavant… de la Norte en boîte de nuit. La bière a inventé le « Photoblocker », un seau à glace qui détecte les flashs et les flashent en retour pour ne pas que nous soyons vu avec de l’alcool à la main. Et oui, on sait jamais que des âmes malintentionnées nous taguent sur des photos embarrassantes…

Nous avons presque pu acheter… des poches de sang dans les supermarchés au Brésil. Pour une campagne de sensibilisation pour le don du sang, l’hôpital Albert Einstein a fait appel à Z+, Sao Paulo. Le résultat : du sang en vente à coté des sodas dans les réfrigérateurs. Réactions en vidéo ici.

Nous avons dansé… avec les anglais sur les bords de la Tamise, pendant le concert du célèbre remixeur Deadmau5, à l’occasion de la sortie du nouveau Nokia Lumia 800 embarqué avec Windows.

Nous avons chanté… avec Mariah Carey ou plutôt son hologramme lors d’un mini-concert de Noël mis en place par T-Mobile, ben connu pour ses vidéos virales.

Co-écrit avec Iman Djamalil’Ayli

Bien que le web ne soit pas une branche scientifique à proprement parler, certaines notions pourraient être très utiles, comme la basique « démarche scientifique », qui se compose d’observations, d’expériences et de raisonnements.

Lorsque je vais parler des personnes travaillant sur le web, je ferai une généralité afin de rendre plus fluide la lecture, mais ce dont je parle n’est pas commun à tout le monde ! Il existe, et heureusement, des personnes ne s’arrêtant pas aux points abordés ci-après.

Beaucoup de tests, peu de compréhension

Quelque soit le domaine (développement web, tests utilisateurs, référencement…) nous sommes amenés à faire des tests, qui prennent plus ou moins de temps et sur lesquels on a plus ou moins de résultats. On étudie ces derniers afin de définir le test nous avantageant le plus, et on le garde. Or, il manque deux étapes dans ce processus, en prenant en compte la démarche scientifique : la création d’hypothèses après la compréhension même du problème, et la compréhension des résultats.

Un cas de départ assez global

Dans nos métiers, nous sommes souvent confrontés à des problèmes. « Pourquoi les utilisateurs n’achètent pas plus ? ». « Pourquoi j’ai une erreur PHP ? ». « Pourquoi je n’arrive pas à mieux me positionner sur Google ? ».

Toutes ces questions, pourtant basiques, reviennent tous les jours. Et lorsqu’il s’agit d’y répondre, la facilité consiste à trouver un plugin, trouver quelqu’un qui a déjà rencontré ce problème, ou tester dans tous les sens, sans réelle orientation.

Emettre des hypothèses

Dans la démarche scientifique, la première étape consiste à émettre des hypothèses. Selon les situations, il faut analyser l’environnement du problème, analyser des situations similaires qui n’ont pourtant pas ce problème. Ainsi, on peut avoir une idée de la source du problème et émettre des hypothèses.

Cela peut se faire en notant chaque hypothèse, ou bien en le faisant de tête pour des problèmes beaucoup plus simples, comme l’oubli d’un point virgule en développement par exemple.

Dans ces hypothèses, il ne faut pas oublier les situations liées à une cause indirecte. En effet, un problème n’est peut être le résultat d’une cause, qui est elle même le résultat d’une autre cause.

Tester ses hypothèses

Lorsque ces hypothèses sont établies, il faut ensuite les tester. Certaines peuvent déjà être supprimées grâce au rasoir d’Ockham, un principe énonçant que les hypothèses les plus simples sont les plus probables. Il faut aussi établir un périmètre de fonctionnement afin d’écarter certaines variables qui pourraient interagir avec le test, des valeurs de satisfaction qui vont permettre de comparer les résultats afin de déterminer si les différences sont significatives.  Ainsi, lors d’un test utilisateur sur un tunnel d’achat par exemple, si l’écart entre deux tests n’est que de quelques pourcents, un choix entre l’une ou l’autre des hypothèses n’est pas vraiment justifié.

Etablir un raisonnement

Lorsque les tests sont effectués, on aura alors une ou des situations répondant au mieux à nos problèmes. Pour des tests utilisateurs par exemple, cela aura permis au client d’améliorer son ROI (Return On Investisment) et au prestataire de répondre à la demande.

Sauf que, le plus souvent, la démarche s’arrête là, et aucun enseignement n’est retenu. Ainsi, lorsqu’une situation à priori différente se présentera, cette compréhension des problèmes précédents pourrait aider à résoudre les futures situations plus rapidement.

Ce raisonnement peut prendre du temps lorsqu’on n’y est pas habitué, mais on n’en ressort beaucoup plus riche lors de chaque expérience. Car il faut considérer une expérience comme quelque chose qu’on aura réussi, mais qui nous aura aussi permis d’en apprendre d’avantage.

Un cas concret

J’hésitais à prendre un exemple en développement mais je préfre que ce soit compréhensible pour tout le monde. Je vais donc vous donner un exemple d’un test utilisateur.

Le propriétaire d’un site marchand décide  de contacter une agence afin de tester différentes mises en page de son site car il aimerait que les clients achètent plus de produits. Sur les pages articles, une barre de filtres est disponible pour sélectionner la couleur, la taille et d’autres options. L’agence décide alors de tester deux mises en page : la première avec les filtres à gauche, la seconde avec les filtres à droite. Après un mois de test, on remarque que les clients achètent plus d’articles lorsque les filtres sont à gauche. L’agence conclut donc que cette disposition est plus efficace, ce qui ravit le client car cela lui permettra de gagner plus d’argent. Le problème est que cela ne nous dit pas pourquoi cette configuration a mieux fonctionné. Et c’est à partir de ce moment là que le raisonnement doit vraiment être fait.

La démarche, qui se rapproche alors de la démarche scientifique, peut sembler laborieuse, mais cela permettra d’en apprendre pour soi-même, mais cela servira surtout à plus long terme car les mêmes problèmes se présenteront plusieurs fois !

Au sommaire :

• Les goûts et les couleurs : la formation sur la symbolique des couleurs
• Tester l’ergonomie de son site même sans budget : les best practices
• Petite arithmétique de l’UX design : choisir, renoncer, construire étapes par étapes
• API et formulaires en HTML5
• Un bug à la fois : les problématiques d’un navigateur, Opera
• Les lighting Talks : 40 min, 10 intervenants, 10 speechs à mourir de rire !

Bonne lecture !

Les goûts et les couleurs

Une formation intéressante sur la symbolique des couleurs appliquée au web. La palette de couleurs est extrêmement importante pour l’expérience utilisateur, notamment sur les sites e-commerce où elle peut fortement favoriser l’acte d’achat. En fonction de leur spectre, les couleurs entrainent des réactions acquises et physiques différentes. Dans le premier cas, ces réactions dépendent de notre éducation et de notre culture. La réaction physique quant à elle entraine une accélération ou une réduction de notre métabolisme. C’est pour cela qu’il est communément admis que le rouge excite alors que le bleu apaise. La symbolique de chaque couleur en occident s’en est suivie, ainsi que des exemples de sites internet correspondants.

Quelques conseils en matière de sélection de couleurs ont été proposés : une couleur de base + une nuance correspondante + la couleur complémentaire correspondante. Et des outils pour faciliter cette tâche ont également été proposés tel que Kuler et Mypant.

Une question se pose ici finalement : peut-on stigmatiser chaque couleur à des sensations physiques même en ne restant que dans la symbolique des codes occidentaux ? Ne serait-ce pas comme l’a précisé un membre de l’assistance durant la session de questions/réponses : « un peu bullshit » ?

Tester l’ergonomie de son site même sans budget

Formation sur les best practices pour faire tester son site par des utilisateurs lambda sans avoir à passer par une agence spécialisée, car cela peut rapidement coûter très cher. « Do it yourself » ! Aussi bien durant la phase de maquettage ou de développement, car comme vous allez le voir, cela peut être « facile » avec de la méthode !

Tout d’abord, sélectionnez un panel d’utilisateurs pioché dans vos proches :

• La famille / des amis : pas vraiment optimal, car ces membres risquent d’être trop positifs dans leurs réponses pour vous faire plaisir.
• Des collègues : attention ici à ceux qui risqueraient de répondre sans vis-à-vis de leur propre intérêt. Un collègue intégrateur ayant tout intérêt à ne pas être négatif pour éviter toute modification de travail !
• Des étudiants : pratique, car toujours à la recherche d’argent !

Un lieu clos doit être choisi, ainsi qu’un logiciel d’enregistrement de la session tel que Camstudio. Sélectionnez ensuite un observateur : il aidera les utilisateurs si des problèmes techniques arrivent, pour répondre à ses questions, incitez celui-ci à parler à voix haute tout en lui proposant étapes par étapes le scénario. Il doit être présenté comme détaché du projet pour éviter de biaiser les réponses de l’utilisateur. Attention également à ne pas donner d’indices sur une fonctionnalité à l’utilisateur, exemple : « recherchez des billets de train »

Un scénario d’accompagnement de l’utilisateur doit être préparé en amont pour l’aider dans les tâches qu’il devra réaliser. Une tâche c’est un contexte et un objectif. Un scénario pour contextualiser un achat, une inscription par exemple. Et un objectif correspondant que l’utilisateur peut lui-même valider : « j’ai réussi à commander cette paire de chaussures » quitte à ce que cela soit faux ! Un bon démarrage peut être tout simplement la description de ce que voit l’utilisateur : type de site, fonctionnalité présente sur la page, etc. Prenez des notes après chaque session pour optimiser le debrief avec le chef de projet effectué en fin de la journée de test.

Finalement, le seul coût de l’opération est la rémunération de l’utilisateur, 40 euros semblent être une bonne moyenne, que cela soit en bon d’achat ou en cash suite avec une note de frais (tout dépend de votre comptabilité !). Pensez aussi que les lieux publics tels que le bon vieux Starbucks coffee et les tests utilisateurs à distance sont des options tout à fait envisageables ! On notera sur ce point des sites utiles tels que Appili en français (25^e par utilisateur) ou Youeye en anglais qui possédera bientôt une fonction de EyeTracking pour utiliser à distance la webcam de l’utilisateur.

Bref, faîtes des tests, que cela soit fait par vos soins, ou ceux d’une agence, cela vous évitera de toute façon des coûts bien plus importants par la suite et les éternels V3,V4,V5 !

Petite arithmétique de l’UX : choisir, renoncer, construire

Restons « User Centric » avec cette formation très intéressante pour « épurer » efficacement et avec pertinence votre site internet durant sa création ou sa refonte. On démontrera ici l’utilité de la méthode S.H.E pour « Shrink » (réduire) Hide (cacher) et Embody (personnifier).

Tout d’abord, il va falloir choisir le nombre de fonctionnalités pour éviter d’avoir des multi-tools « qui en jettent » et peu utiles au final pour l’utilisateur. Plus facile à dire qu’à faire, car dans cette étape de réduction on se confronte :

• À nous-mêmes, créateurs de site internet.
• À l’utilisateur, attaché par habitude à des fonctionnalités.
• À la concurrence : si elle fait beaucoup de choses, je ne peux pas en faire moins !

Comment faire alors ? Lister une fonctionnalité et comparer sa valeur à son coût en « Journée Homme ». Vous verrez dans le mapping ci-dessous le résultat du comparatif de chaque fonctionnalité : certaines auront beaucoup de valeur, mais seront très compliquées à mettre en œuvre (coût élevé), d’autres auront une valeur limitée et un cout élevé (poubelle), d’autres encore auront beaucoup de valeurs et seront très simples à mettre en place (the best ones !).

Pour réduire sa sélection on peut : prioriser, raconter une histoire, penser « mobile first » tout en gardant dans l’esprit que l’instinct ne doit pas être brimé dans cette démarche !

• Cacher permet de faciliter le travail d’attention sélective, certaines fonctionnalités sont évidentes dans cette démarche : menus déroulants, apparition d’éléments uniquement au survol.
• Personnalisez, simplifiez avec des icônes et en pensant à l’opposition entre l’agencement dans l’espace (un écran, x rubriques) VS l’empilage dans le temps (x écrans, 1 rubrique) dans le but d’optimiser l’expérience utilisateur.

Petite note de fin, « l’usabilité » d’un site est une affaire d’ergonomie alors que la simplification est une affaire d’UX design (User eXperience design).

HTML5

Deux formations distinctes ont été proposées : une sur les API HTML5 et une autre sur les nouvelles possibilités des formulaires.

Du coté des formulaires, l’intervenant a démarré sa session avec un parti-pris très clair sur les webkits qui sont des bibliothèques logicielles permettant aux développeurs d’intégrer facilement un moteur de rendu de pages Web dans leurs logiciels. En trois mots : « C’est à prohiber ! ». S’en est suivi un listing d’attributs pour améliorer l’expérience utilisateur dans un formulaire tel que :

• @autofocus : pour donner le focus d’un élément
• @placeholdfer : pour afficher un texte donnant un indice sur le contenu à rentrer (input et texte area)

Du coté des APIs on listera :

• Les Websockets : pour avoir une communication bidirectionnelle entre le serveur et le client.
• File API : possibilité de lire directement côté client le contenu des fichiers sans avoir à passer par le serveur
• vidéos API : avec les formats H264 (bourrés de brevets) et WebM (open source). La vidéo se comporte comme un élément HTML, libre à vous de lui donner toutes les compétences CSS ou SVG que vous souhaitez ! À noter un media framework pour synchroniser à une vidéo avec tout type de marqueurs : http://popcornjs.org/
• History API : pour gérer l’historique plus efficacement qu’en Ajax avec la méthode pushState.
• Le format JSON : pour transférer à peu près n’importe quel objet JavaScript valide en chaîne de caractère et de faire la transformation inverse.
• La technologie Apcash pour permettre l’utilisation du site lorsque l’on est hors ligne.
• Les incontournables Canvas : tueront-ils la technologie Flash dans le futur ?
• pdf.js : pour garantir l’intégration de format PDF sans l’utilisation de plug-in.
• La technologie WebGL : pour des rendus 3D plus que bluffants (ex : http://bodybrowser.googlelabs.com/ pour regarder le corps humain sous tous les niveaux. Toujours, en bêta test malheureusement…)

Le vrai défi du HTML5 a clairement été soulevé en fin de formation : une utilisation globale, répandue et stable. Bref, il faut le démocratiser !

Un bug à la fois

Un intervenant a sensibilisé l’assistance sur le problème de l’XML parsing du point de vue du navigateur Opera. Avec un message fort pour les intégrateurs : créer des hacks est une mauvaise politique et l’utilisation de librairy « funky » présente plus de risques que d’avantages ! Opera comme tout navigateur est confronté à un insight récurrent de la part des internautes : « si cela ne marche pas c’est la faute de mon navigateur, pas celle du site internet ! »

Les lighting Talks

Une très bonne surprise pour ma part, 10 intervenants présentent durant 4 min top chrono un point de vue, un fait en rapport au web.
@Karlpro remporte la compétition à l’applaudimètre avec son étonnante démonstration : comment faire un sac de laptop avec un jean !

Suivi par deux ex-aequo proposant pour l’un un fait absurde : Pas De Liens Sans Autorisation, ou comment informer que de nombreux sites obligent, selon leurs mentions légales, les internautes à les informer avant de poster un lien hypertexte ! Tel que Facebook, Google, Twitter… Le second ex-aequo nous propose le concept hilarant du G.A.O : les best practices de la Glande Assisté par Ordinateur. 25 min de travail, 5 min de pause !

Voilà pour le long debrief de cette première journée de formations à ParisWeb, deuxième session ce matin que vous pouvez suivre en live ici !

Cela vous est sans doute déjà arrivé : un beau matin, en vous connectant à l’un de vos sites favoris, vous vous apercevez que ce n’est plus comme avant et vous vous sentez troublé. Vous tâtonnez pour retrouver ce pour quoi vous êtes venus, et même pire, au-delà des problèmes liés à l’ergonomie, vous trouvez le tout vraiment très laid. Et oui… enterrer vos utilisateurs les plus fidèles est un des plus gros risques d’un redesign de votre site internet.

Bien entendu, plus un site comporte de fonctionnalités et de pages plus les risques sont importants. Mais même un site de plus petite envergure, peut se faire descendre par la critique s’il ne tient pas compte des attentes de ses visiteurs. C’est pourquoi nous vous proposons un billet inspiré de ce très bon article du site webdesignerdepot.

La question mérite d’être posée : pourquoi, quand et comment bien redesigner ?

Le guide suivant devrait vous aiguiller sur le droit chemin pour recréer et repenser votre site tout en satisfaisant vos utilisateurs. Et si jamais vous êtes actuellement dans le cas d’une refonte échouée, il n’est pas trop tard ! On pourra tout de même vous donner un coup de pouce.

Faire du neuf avec du vieux, le problème de la refonte

Quand vous décidez qu’une refonte est nécessaire pour votre site internet, il y a énormément de paramètres à prendre en compte, au-delà des simples aspects techniques.

Souvenez-vous que votre site est déjà régulièrement visité, et a sans doute des utilisateurs réguliers. Ces derniers ont des attentes particulières lorsqu’ils visitent votre site. Vous avez besoin d’avoir de bonnes raisons pour changer tel ou tel process/fonction/élément graphique. Vous devez en tenir compte aussi bien au début que tout le long du processus.

Communiquez avec vos utilisateurs actuels
Contrairement à une création ex-nihilo, un redesign de site possède déjà une base utilisateurs.  Faire participer ces derniers dès le début de votre remaniement ne pourra jouer qu’en votre faveur. Après tout, ce sont ces personnes qui utilisent votre site, et qui y sont déjà familières. Bien entendu, vous tomberez toujours sur d’irréductibles internautes, complètement fermé à toutes formes de changements, mais d’autres pourront vous donner un aperçu intéressant de comment ceci pourrait être amélioré, ou bien comment cela aurait besoin d’être modifié.

Il est important de tenir compte de la manière dont les internautes utilisent votre site avant la refonte. La façon dont vous voudriez qu’ils utilisent vos outils n’est pas forcément en accord avec la vraie utilisation qu’ils en font. Prenez cela en compte quand vous redesignez et prenez garde de ne pas briser les habitudes de navigation de vos utilisateurs sans une excellente raison.

Testez à la fois pour les futurs et les anciens utilisateurs
On pourrait croire qu’il faut tester votre nouveau design uniquement sur les futurs utilisateurs pour obtenir les meilleurs résultats. Ne connaissant pas le design, ils ne sont justement pas influencés par l’existant. C’est une bonne stratégie si vous redesignez quelque chose comme une fiche produit sur un site e-commerce (le but ici est d’attirer de nouveaux clients). Mais si vous réaménagez un site entier, vous avez besoin du feedback des gens qui utilisent actuellement votre site. La dernière chose dont vous avez besoin, c’est de faire fuir tous vos utilisateurs.

Vous pouvez par exemple laisser entendre que vous testez un nouveau site. Offrez leur le choix de le tester et soumettez-leur un questionnaire non-intrusif, ou un mécanisme similaire pour recueillir ce qu’ils en ont pensé.

Laissez les utilisateurs changer l’interface selon leurs propres envies
Ce point est particulièrement important pour les sites “outils”. Laisser les utilisateurs switcher entre la nouvelle et l’ancienne interface selon leur convenance est la meilleure façon de se prévenir des plaintes. Les sites de médias sociaux sont surement les meilleurs exemples pour illustrer cette facette (comme le fait Twitter avec la possibilité de retourner sur l’ancienne interface). Laisser-les changer à leur rythme, cela évitera les mauvaises surprises et la frustration.

Il est par contre important d’imposer une deadline pour effectuer ce switch. Faites-vous bien comprendre des utilisateurs : ils doivent assimiler qu’ils peuvent changer autant de fois qu’ils le veulent tant que la deadline n’est pas atteinte, mais qu’après, la nouvelle version s’appliquera à tout le monde. Cela évitera à quelques trainards de rester indéfiniment sur l’ancien site.

Facilitez l’envoi de feedback après la refonte
Il existe pléthore d’outils pour collecter les impressions des utilisateurs. Utilisez-les et trouvez ce que vos visiteurs aiment ou n’aiment pas. Ensuite, assurez-vous de relever tout ce qui est soulevé par plus d’une poignée de visiteurs. Rappelez-vous : pour chaque visiteur qui exprime un besoin ou un souci, il pourrait y en avoir des dizaines qui ressentent la même chose sans rien dire.

Exprimez clairement vos raisons
Il est important d’énoncer à vos utilisateurs quelles raisons vous ont poussé à la refonte. Beaucoup d’internautes qui ne sont pas familiarisés avec les aspects techniques liés au fonctionnement, pensent que la refonte existe pour des raisons purement esthétiques. Faites-leur savoir quelles fonctionnalités vous comptez ajouter ou bien ce que les améliorations d’interface utilisateur vont apporter. Un billet de blog, expliquant votre plan de redesign peut être un bon moyen d’ouvrir le dialogue.

Proposez un tutoriel expliquant les changements majeurs
Si vous changez le fonctionnement de votre site ou si vous procédez à des modifications drastiques des éléments des pages, cela serait une bonne idée d’offrir une vidéo, un schéma, ou n’importe quel autre support faisant le tour des nouvelles caractéristiques du site. Cela aidera les utilisateurs à s’adapter plus rapidement aux nouveautés et de ne pas se sentir perdus. De plus, cela donnera l’impression que vous vous souciez d’eux, et que vous voulez que leur expérience soit aussi bonne que possible.

Que faire si votre refonte a déjà échoué ?

Donc, vous venez de mettre en ligne votre design retravaillé, malheureusement à part des plaintes, rien de bon ne ressort, aussi bien de la part des anciens utilisateurs que des nouveaux venus.
Que devez-vous faire ? Devez-vous retourner sur l’ancienne version ?
Que faire si ce n’est pas une option, ou que vous avez investi des milliers d’euros et des mois dans le nouveau site ?

Tout est question de contrôle
La première chose que vous devez faire est de reconnaître que votre refonte n’a pas répondu aux attentes des internautes. Faites savoir aux gens que vous entendez leurs revendications et que vous vous souciez de leurs préoccupations. Que vous le fassiez grâce à Twitter, votre blog, ou tout autre support, dépend essentiellement de l’endroit depuis lequel vous pouvez atteindre le plus grand nombre de vos utilisateurs.

Identifier et traiter les plaintes
Cibler les plaintes spécifiques si vous le pouvez. Si tout le monde se plaint de combien telle ou telle fonction est difficile à trouver, répondez-y immédiatement. Il existe plusieurs façons de le faire : vous pouvez simplement poster sur votre blog ou envoyer un courriel contenant toutes les informations utiles. Vous pouvez également re-procéder à un changement dans l’ergonomie, l’arborescence ou le design pour rendre cette fonction plus facile d’accès. Si c’est vraiment un gros problème, faire un changement est probablement la meilleure solution.

N’ayez pas peur de revenir en arrière
S’il y a des plaintes énormes, ou si vous constatez une baisse de trafic fulgurante, n’ayez pas peur de downgrader tout ou partie de votre site. Du moins jusqu’à ce que des correctifs puissent être appliqués. Si le succès de votre site souffre à cause de la refonte, il n’y a aucun sens à continuer sur cette voie. Il est préférable de faire marche arrière en reconnaissant l’insatisfaction de vos visiteurs  (et donc montrer que vous placez l’expérience utilisateur avant tout) plutôt que d’insister aveuglément.

Surveillez attentivement

Chaque fois que vous lancez un nouveau design, il est important de suivre attentivement tout ce qui « entre » et « émane » de votre site.

Voici les points principaux à ne pas laisser de côté :

• Définissez des objectifs pour les différentes fonctions/pages de votre site (cette page doit avoir X taux de conversion, ne doit pas avoir un taux de rebond supérieur à X %, etc.) et assurez-vous régulièrement que le flux de visiteurs ne chute pas brutalement.
• Les différents outils d’analyse (Google Analytics pour n’en citer qu’un) peuvent vous aider dans ces tâches. Suite à l’analyse, ils permettent d’effectuer des changements proactifs sur votre site, anticipant ce que les visiteurs pourront éventuellement vous reprocher.
• Assurez-vous en permanence de recueillir les informations d’analyse de base pour vous donnez des repères sur l’évolution de ces données.
• Également surveillez le ton des messages postés sur les médias sociaux au sujet de votre restructuration. Si vous voyez beaucoup de plaintes, ou même beaucoup de confusion, il faut être proactif et ne pas hésiter à engager la conversation.
• Laisser couler est le meilleur moyen de provoquer un « bad buzz ». Il est important d’informer au mieux vos utilisateurs pour qu’ils sachent que les changements effectués sont fait en leur faveur et pas dans un but indéfini.

Co-écrit avec Nicolas Bayard.

Au cours de la chaîne de création d’un site internet (ou d’un projet web plus généralement) le webdesigner est amené à interagir avec d’autres métiers. Pour une fluidité dans les échanges, il est important de tenir compte des contraintes des autres intervenants qui vont utiliser votre travail.

Ceci nous amène à notre problématique : comment faciliter le workflow en tant que webdesigner ? À quels niveaux chacune de mes décisions va impacter la chaîne de création d’un site internet ?

Nous nous attarderons principalement sur les interactions avec le référenceur et l’intégrateur (celles avec les autres métiers étant plus réduites, voire inexistantes).

Prise en compte des collaborateurs

Vous remarquerez que souvent nous débordons du cadre du design pur et dur, cela reste pertinent avec le fait que le workflow d’un projet web constitue un ensemble, divisé en multiples interactions. Si le designer interagit avec d’autres personnes, la réciproque est aussi vraie. Certains des points abordés serviront donc également à d’autres rôles.

Interactions avec le référencement

Bien que le design n’impacte pas beaucoup le référencement, il est souvent amené à structurer l’information et à créer une navigation ergonomique. Dans ces cas précis, le designer doit faire attention à ne pas créer de points bloquants pour l’accessibilité et la navigation des internautes ainsi que des moteurs de recherche sur le site.

Cela peut passer par plusieurs aspects :

• L’utilisation de Splash Page (page d’accueil d’un site ne présentant qu’une image ou une animation Flash et un lien d’entrée sur un site Web).  La Splash Page possède un certain nombre d’inconvénients :
  • elle retarde d’une page l’accès à l’information pour les visiteurs, leur proposant une page parfois pauvre en contenu.
  • elle offre également une page d’accueil difficile à référencer pour les moteurs de recherche, car elle ne contient pas ou peu de contenu référençable. Dans le pire des cas, le lien d’entrée est incrusté dans le Flash et il est donc impossible pour les robots de suivre le lien.
  • enfin, si l’image est de grand format ou si l’introduction en Flash est complexe, la page risque d’être longue à charger.

• L’utilisation abusive d’Ajax dans l’interface. Beaucoup d’ergonomes et de développeurs essayent d’impressionner les internautes en utilisant massivement cette technologie pour fluidifier la navigation, mais c’est souvent une erreur, car le contenu Ajax (chargé dynamiquement donc) ne peut pas être lu, donc indexé par les moteurs de recherche. Pour pallier à ce problème il faudrait idéalement créer une alternative à ce contenu, doublant le travail de l’intégrateur.

• L’utilisation de Flash : de la même manière, par souci d’esthétisme ou de navigation, du Flash est parfois implémenté dans la page. Les moteurs de recherche ne pouvant pas lire cette technologie, il est déconseillé d’en abuser, et le cas échéant, créer une alternative (encore une fois, double travail à effectuer).

Interactions avec l’intégrateur

Sans nul doute, c’est envers l’intégrateur que le designer a le plus de responsabilités. En effet, c’est en grande partie du graphisme que va dépendre la charge d’intégration. Bien entendu, le but n’est pas de restreindre son imagination sous prétexte que l’intégrateur aura plus de travail, le principal étant de répondre aux objectifs du site. Cependant, amis designers, gardez en tête que :

• Vous vous devez d’être le plus minutieux possible ! Pas question de maquetter seulement deux pages et de se dire que le reste se déclinera aisément tout seul. Les meilleurs sites sont pensés et dessinés du header de la page d’accueil jusqu’au footer de la plus profonde des pages. Ce souci du détail vous vaudra les louanges des intégrateurs. En effet, le designer fournit souvent la maquette de la page d’accueil et des grandes entrées, mais rarement des pages plus profondes. Il ne faudra pas s’étonner si l’intégrateur comble par lui-même ces « blancs ». Il est donc important d’avoir un design poussé et validé avant de commencer l’intégration. Il est plus facile de retoucher un détail sur Photoshop plutôt que bidouiller « on the fly » pendant la phase de développement.

• Vous devez prendre en compte la charge de temps qui vous est attribuée ! Si vous êtes face à des deadlines assez courtes, ne vous lancez pas dans un webdesign et/ou une navigation trop sophistiqués. La création peut s’avérer très chronophage, et ainsi retarder un planning (pensez au chef de projet, avez-vous déjà essayé de tout décaler sur un Gantt ?). Au bout de la chaîne, ce sont souvent les intégrateurs/développeurs qui trinquent, en devant intégrer et/ou développer vos chefs-d’œuvre en un temps record afin de ne pas cumuler toujours plus de retard. La créativité à outrance joue souvent contre un planning serré. De plus, la simplicité et la sobriété peuvent être tout aussi importantes (pour ne prendre qu’Apple en exemple).

• Soulevons également le problème des typographies. Il est en effet souvent plus sympathique pour un designer d’utiliser des typographies exotiques afin de donner du relief à sa page et de titiller notre rétine en changeant de l’habituel Arial. Seulement voilà, même s’il existe actuellement beaucoup de techniques pour utiliser d’autres polices (font-face, cufont.js, etc.) que les typos web, aucune n’est parfaite, et cela causera toujours des soucis d’intégration selon la configuration et le navigateur de l’internaute. Et là encore on ne parle pas du temps supplémentaire que prendra l’intégrateur : pensez donc à voir avec lui si la police de votre choix est intégrable.

Enfin, voilà quelques détails souvent mis à la trappe mais primordiaux pour que le travail soit fait proprement et pour éviter toutes confusions et aller/retours inutiles :

• évitez d’être trop farfelu ou extravagant pour le design d’un site hyper dynamique qui contiendra de nombreuses pages différentes (site de e-commerce, site immobilier…). Le but de ces sites étant avant tout de convertir, le design ne doit pas prendre le dessus sur le produit. D’autant que le temps de chargement de ce genre de site est un critère déterminant.

• faites attention aux effets difficiles à intégrer et  à rendre cross browser (ombres portées, dégradés, coins arrondis, etc.)

• lorsque vous dessinez des boutons, faites bien attention à fournir à chaque fois les trois états possibles (normal, hover et active). En effet, cela n’incombe pas à l’intégrateur de deviner comment vous auriez dessiné les états manquants.

• triez et nommez vos calques ! Cela fait perdre du temps à l’intégrateur de se plonger dans le découpage d’une maquette où rien n’est nommé et où aucun calque n’est rangé.

Ces listes de conseils sont bien entendu non exhaustives et visent seulement à vous faire comprendre la synergie qu’il existe entre chaque membre d’un projet web.

Conseil ultime : apprenez le CSS !

Voila le point essentiel qui adoucira le passage de votre travail à celui de l’intégrateur. En effet, si vous n’êtes pas familiarisé à coder vos propres design, vous ne pouvez pas comprendre toutes les contraintes s’attachant à ce langage. Apprendre à intégrer changera votre façon d’aborder un design car vous aurez une meilleure compréhension de ce qui est possible ou complexe à réaliser pour l’intégrateur. De cette manière, la transition entre le design et le code se fera plus aisément. De plus, vous serez plus proches et pourrez mieux répondre aux attentes de l’intégrateur, maintenant que vous parlez tous deux le même langage. C’est un point crucial, vous donnant plus de valeur ajoutée et qui fera facilement la différence entre deux designers lors d’un projet web.

Nous finirons cette partie en insistant sur l’importance d’avoir une vision globale d’un projet et de son équipe. C’est en pensant un site internet comme une chaîne où chaque ressource est complémentaire qu’on en fait un lieu plus accessible, attractif et mieux conçu.

Co-écrit avec Nicolas Bayard

Facilité par l’émergence de nouvelles technologies favorisant la création de sites possédant une réelle identité graphique recherchée (HTML5/CSS3, Flash, Jquery…), le webdesign est devenu un outil de marketing efficace et  financièrement accessible.

A la base un outil de mise en forme simple visant à rendre un site « beau » et « agréable », le webdesign est désormais un outil puissant stimulant encore plus la concurrence : il faut avoir un design attirant et original à la « mode », tout en affichant une image de marque forte. Ainsi la majorité des entreprises ont changé leurs stratégies et adoptent une identité graphique recherchée en phase avec leur cible, ainsi que le message à véhiculer pour transformer le visiteur en acheteur.

Ce dossier n’est pas destiné à justifier l’utilisation d’un bon design (inévitable de nos jours), il s’agit plutôt de mettre en exergue les démarches à faire tant vis à vis du client que de l’internaute pour (re)proposer un webdesign adapté à un domaine d’activité.

Nous garderons aussi à l’esprit que le webdesign n’est pas qu’une façade colorée : c’est une activité en synergie avec d’autres métiers liés au web, et il y a donc des habitudes à prendre pour faciliter le workflow.

Gestion du client et prise en compte de l’internaute

Lorsque nous sommes face à une demande de webdesign, il s’agit souvent de proposer une orientation graphique qui plaît au client sans réellement prendre en compte l’internaute. Et si celui-ci est considéré, c’est bien souvent les goûts du client et du designer qui ont plus de poids que l’opinion de l’internaute.

Sensibiliser  et bien comprendre le client

Le client n’a pas forcément les mêmes connaissances que nous, son expérience est différente de la nôtre et il ne sait pas toujours vraiment ce qu’il veut. Il est de notre ressort de définir quel serait la meilleure façon de designer le site sans pour autant ignorer son opinion : si vous voulez faire mouche plus facilement avec vos premières propositions, il peut être très utile de rédiger un brief créatif à l’intention de votre client pour mieux cerner ses propres goûts et faire parfois apparaître de nouvelles problématiques qui ne s’étaient pas posées auparavant.

Ce brief permet de sonder l’esprit du client en posant des questions très simples :

• Quelles philosophie ou valeurs associez-vous à votre concept ?
• Quel est l’objectif (autre que faire des bénéfices) affiché par votre site ?
• Comment décririez-vous votre site en 3 idées ? En 3 adjectifs ? en 3 verbes ?
• A qui parle-t-on ?
• Quel est selon vous votre cœur de cible ?
• Quel serait l’objectif principal, en une phrase, d’un internaute qui utiliserait votre site ?
• Qu’attend en premier un individu, en une phrase, qui utilisera votre site ?
• Quels sont les points faibles, et les points forts de votre site?
• En quelques mots, en quoi votre site se distingue-t-il de ses concurrents ?

Bien entendu le client est toujours roi, mais même si une proposition de webdesign remplit les objectifs donnés et correspond au besoin, il faut garder à l’esprit que c’est le point de vue de l’utilisateur final qui déterminera si un projet web est un échec ou une réussite. C’est pour cela qu’il faut anticiper la réaction de l’internaute dès le moment où il arrive sur le site et sensibiliser le client sur l’importance de la prise en compte du futur utilisateur.

Il faut donc, dans un premier temps, faire comprendre au client que ce sont les goûts de l’internaute qui priment sur ses propres caprices : comment générer du trafic et augmenter les ventes si le visiteur ne s’identifie pas au site, ou pire, le trouve tout simplement laid ?

La rédaction d’un dossier d’étude vous aidera beaucoup dans cette démarche, outre prouver au client par a + b que votre choix est meilleur qu’un autre, il lui permettra aussi de prendre du recul sur son projet et favorisera l’émergence de nouvelles idées (tant au sein de l’équipe de création que du client).

Un dossier d’étude de webdesign classique se construit généralement par des analyses  graphiques et ergonomiques, suivies de recommandations. Pour avoir des bases plus solides, vous pouvez également aller au delà du simple benchmark graphique et analyser la direction artistique prise par vos concurrents pour satisfaire la cible, c’est à dire comment répondre graphiquement à une problématique donnée.

Analyser les gouts de l’internaute

Dans ce dossier, il est d’usage de faire quelques recherches sur la cible, mais celles-ci sont trop souvent centrées sur la tranche d’âge concernée et le type d’internautes (homme, femme, étudiant, cadre…).

Avant toute proposition de webdesign, il est donc préférable d’accompagner votre dossier d’un « profil idéal d’utilisateur » pour justifier vos choix d’orientation graphique.

L’objectif est de dresser un profil psychologique de l’internaute en utilisant des questions simples permettant de mieux cadrer sa personnalité et ses goûts. Soyez inventifs, communiquez sur votre image de marque, posez des questions inattendues et montrez que vous vous intéressez à leurs opinions ! Vous pouvez par exemple leur demander de décrire votre nouveau site en trois adjectifs, de lui associer une ou plusieurs couleurs, qu’est-ce que l’internaute attend du service qui va lui être proposé, qu’est ce qu’il aime (ou n’aime pas) voir et lire sur le site, et quels types de fonctionnalités il préfère voir mis en avant sur le site ? C’est en quelque sorte un brief créatif à l’intention de vos futurs visiteurs.

Le designer doit bien comprendre qui est la cible que désire viser le client et quels sont les besoins réels de l’internaute. Cela permettra au designer de savoir sur quels éléments il devra le plus se concentrer et ceux qu’il devra éviter. On évitera par exemple une identité graphique trop chargée et trop poussée quand c’est le profil même de l’utilisateur qui construit le contenu d’une page (c’est le cas de Facebook ainsi que LinkedIn).

Comme outil d’analyse, n’hésitez pas à proposer au client le lancement de sondages sur les réseaux sociaux afin de déterminer ce qu’attend l’internaute ou bien le lancement d’une version béta pour avoir des retours avant le lancement de la version finale.

Une fois les goûts de l’utilisateur cernés, le designer doit prendre en compte le contenu du site par rapport au message à faire passer à l’internaute : quel est l’intérêt de réaliser un webdesign hyper créatif et très à la mode si l’utilisateur ne trouve même pas ce qu’il est venu chercher ?

Il est ainsi très important de bien hiérarchiser l’information et mettre en exergue les éléments les plus importants aux yeux du visiteur pour l’encourager à explorer le reste du site. Même si ce point est plus apparenté à de l’ergonomie que du design pur, prendre en compte l’accessibilité et la navigation du site lorsque l’on réalise un webdesign évitera plus tard de perdre bêtement un visiteur ayant éprouvé des difficultés à naviguer. Essayez donc d’enrichir le site d’éléments de navigation intuitifs et évitez de surcharger la page d’une pléthore d’éléments graphiques qui ne feront qu’agacer l’internaute.

Au final, en analysant simplement ce qu’aiment voir et lire les internautes et en sensibilisant le client sur l’importance de diriger ses efforts vers l’expérience l’utilisateur, on peut plus facilement proposer des orientations graphiques originales qui rempliront les objectifs initiaux.

Rendez-vous la semaine prochaine pour la deuxième partie du dossier !

Ce dossier s’articulera sur trois parties  :

Partie I : Gestion du client et prise en compte de l’internaute
Partie II : Le webdesign : un travail d’équipe
Partie III : Faire du neuf avec du vieux, le problème de la refonte

Co-écrit avec Geoffrey Mathern

Nous avons maintenant défini le squelette de notre opération : nous avons un message dont le contenu est décliné sur différents supports plus ou moins liés entre eux et nous savons globalement ce que nous attendons de notre visiteur (voir les parties I et II du dossier : Introduction et définition et Le processus créatif).

Voyons maintenant comment nous organiser de manière concrète afin de lancer notre opération virale.

Plan de communication / Plan de lancement

On s’en doute, le lancement d’une campagne virale, ces quelques heures intenses, ce sont quasiment les plus importantes. Soit la sauce prend, soit elle retombe et vous aurez toute la peine du monde à la faire remonter. Chaque campagne possède une masse critique d’utilisateurs en dessous de laquelle cette dernière ne prendra pas. L’objectif est donc de déterminer quelle est cette masse critique, et comment l’atteindre le plus rapidement possible.

Il nous faut donc un plan de lancement. Vers quels interlocuteurs allons-nous nous diriger afin qu’ils soient les premiers touchés par la campagne ?

Le choix est à la fois assez simple sur le principe et plutôt complexe en réalité : il nous faut évidemment toucher des « influenceurs », puisque le début du « buzz » ne sera porté qu’à leur seule force. Il nous faut évidemment toucher la communauté de « fans » de votre marque, de votre produit, ou du secteur auquel vous appartenez. Oui mais comment les identifier ? Eh bien il n’y a pas de technique infaillible, il faut une connaissance accrue de son écosystème, quitte à s’y mettre à plusieurs pour n’oublier personne.

Rôles et interactions des canaux de communication

Essayons maintenant de représenter visuellement notre campagne et de matérialiser les flux de visiteurs afin de mieux comprendre comment on peut les attirer puis les retenir.

Si tous les média ont un rôle à jouer dans la campagne, tous ne rapportent pas directement du trafic et leur rôle principal est finalement assez différent.

Certaines auront en effet pour objectif de simplement toucher l’utilisateur pour le rediriger vers le support où se déroule principalement la campagne (bannières publicitaires, emailing), d’autres permettront d’informer le visiteur déjà au courant de l’opération des actualités de cette dernière (RSS, newsletter), de susciter l’interaction et le dialogue (Facebook) ou de favoriser le partage.

Il est donc primordial de bien définir le rôle intermédiaire de chacun des supports dans la stratégie de communication globale car une campagne mal équilibrée ne peut qu’échouer. Chacun des canaux couvre un ou plusieurs de ces rôles, à nous de bien les employer afin que l’alchimie opère.

Une bonne méthode pour concevoir un tel schéma sans trop se tromper est de simuler des scenarii utilisateurs réalistes.

Prévisualisation, micro-planning et organisation

Il est primordial de disposer de tous les éléments de votre campagne (images, textes, autorisations diverses, base et solution e-mailing, dispositifs techniques etc.) avant de la lancer. En effet, si son succès dépend de la synchronisation et de la complémentarité des différents dispositifs, on comprendra qu’un retard d’un côté ou de l’autre du projet pourrait avoir de lourdes conséquences sur son efficacité et donc sur l’atteinte de nos objectifs. Veillons donc à valider de manière définitive et sans réserve les différentes composantes de notre projet avant de publier quoi que ce soit.

Ainsi, il est bon de penser aux moindres détails du déroulement de la campagne et donc de la simuler de A à Z au moins une fois afin de n’oublier aucun élément caché (délai de validation d’une application mobile sur l’Apple Store par exemple).

Le diable se cache dans les détails, et une fois notre campagne lancée, nous aurons suffisamment de problèmes imprévisibles pour ne pas avoir à nous occuper des petits riens (mais qui au final feront de grands touts).

Dans la même veine il est de bon ton de faire une « Roadmap » détaillée de l’opération comportant toutes les actions devant être effectuées à date fixe par une personne désignée à l’avance (publier un nouveau contenu, activer une nouvelle fonctionnalité etc.).

Enfin, plaçons des marqueurs sur nos différents objectifs intermédiaires et finaux et activons les outils de tracking dont nous disposons afin de pouvoir suivre, mesurer et au besoin ajuster notre campagne en direct et à postériori.

Bon, tout semble bien calé. Allez, on respire un grand coup et on appuie sur le bouton rouge…

Ca y est, notre campagne est lancée.

Navigation dans le dossier

Nous avons vu la dernière fois la différence entre le buzz, phénomène non maîtrisé, et le marketing viral, opération orchestrée faite pour être rentable. Rentrons maintenant dans le vif du sujet en essayant de comprendre quelques unes des mécaniques d’une bonne campagne virale.

Principe de base

Il est important de comprendre le procédé élémentaire du marketing viral. Ca paraît bête à dire, mais qui dit viral dit transmission et donc plus prosaïquement partager le contenu en question avec ses proches. Et c’est là tout l’intérêt de l’opération. Eh oui.

La campagne de pub traditionnelle propose, qu’elle soit télé, radio, affichage ou presse, à la seule force de l’entreprise émettrice et auprès de l’ensemble de ses récepteurs, de véhiculer le message qu’elle souhaite faire passer. On comprend alors l’effort nécessaire pour atteindre une large cible. Les tarifs s’envolent (achat media) et les récepteurs sont souvent trop peu qualifiés.

Face à cela, le marketing viral propose de concevoir un message suffisamment fort et intéressant pour que chacune des personnes qui y sont exposées (les récepteurs) se transforment en émetteurs, touchant à leur tour leur cercle d’influence et agrandissant de fait la portée du message.

L’effort de transmission du message est ainsi partagé et donc en théorie moins couteux pour l’émetteur, même si concevoir un message créatif représente de l’argent. Mais le bénéfice ne s’arrête pas là. En l’incitant à agir pour la marque, on investit à un niveau beaucoup plus personnel le consommateur qui se sent ambassadeur et impliqué. Il sera donc sensiblement plus fidèle et se sentira plus proche de l’entreprise.

On comprend donc que le cœur du problème résidera dans le fait de susciter l’envie chez l’internaute de partager le contenu que nous lui proposons. Le succès de l’opération dépend en effet de ce paramètre. Et c’est là l’une des difficultés du marketing viral. Les caractéristiques qui favorisent le partage d’une information par un internaute peuvent en effet être analysées et optimisées, mais comme dans tout processus subjectif, il y a une part de hasard, de chance ou en tout cas de réussite.

Pour inciter l’utilisateur à partager quelque chose, on doit lui faire passer une émotion forte, car c’est cette émotion qu’il cherchera à faire partager à ses proches. Les émotions fortes ne sont pas pléthore et celle que nous retiendrons dépendra du projet et de son contexte mais en voici quelques unes : Le rire, la joie, la peur, la pitié, l’indignation, l’interrogation, la colère, la surprise…

Soyons clairs, si l’utilisateur partage une information, c’est toujours (ou presque) pour prouver à sa communauté qu’il est « au courant », qu’il est « in » ; en bref, pour se faire mousser, s’affirmer. En ce sens, plus le message sera percutant, inédit, plus la valeur de partage perçue par ce dernier sera conséquente, et donc plus il la partagera.

De même, plus le message sera présent, plus les internautes touchés de primo seront nombreux. Multiplier les canaux de communication ne peut donc être à ce titre que bénéfique. Mais encore faut-il choisir ceux sur lesquels nous serons susceptibles de croiser les récepteurs que nous voulons atteindre.

Enfin, demandons nous quelle(s) action(s) je voudrais que mon visiteur accomplisse après avoir consulté mon message. Qu’il se déplace en magasin pour acheter mon produit ? Qu’il parle de ma marque autour de lui ? Qu’il s’abonne à ma newsletter co-brandée ?

Essayons donc de mettre toutes les chances de notre côté et de concevoir un message efficace, de le diffuser sur les bons canaux et d’inciter notre cible à faire l’action que nous attendons d’elle.

Définir les canaux de communication

J’appelle canal de communication (au sens large) tout lieu (physique ou virtuel) où il peut y avoir interaction de quelque manière que ce soit entre l’utilisateur et l’entreprise. Il en existe 3 grandes familles :

• Paid media : Les espaces que nous devrons payer. Ce sont pour la plupart des media traditionnels sur lesquels les entreprises ont coutume de s’appuyer pour diffuser leur message.
• Owned media : Tous les espaces qui nous appartiennent, ceux sur lesquels ont à plus ou moins d’emprise. Ce sont en général ceux où l’on veut diriger le visiteur, là où le ROI se trouve.
• Earned media : Les espaces non payés qui ne nous appartiennent pas mais qui parlent de nous. Bien évidemment, le marketing viral appuie principalement sur ces leviers.

Quelques exemples de medias ci-dessous, même si évidemment la liste est loin d’être exhaustive :

Avec le marketing viral on entend « booster » les Earned media, mais on comprend vite que la maîtrise des flux de visiteurs entre chacun des canaux est capital. On touche ici du doigt l’une des problématiques majeures des entreprises en terme de marketing aujourd’hui : la multiplication des canaux sur lesquels elles communiquent rend difficile le tracking du visiteur/client quand il « saute » d’un media à l’autre.

On comprend également rapidement que chacun de ces canaux possède ses spécificités, ses forces et ses faiblesses en matière de « ROI client » (voir schéma des bénéfices ci-dessus). Aussi, on ne fera par exemple pas appel à une campagne e-mailing seule pour lancer un « buzz » : les fonctionnalités de partage ne sont pas si développée que sur un outil comme Twitter…

Nous reviendrons plus précisément dans la 3e partie de ce dossier sur les interactions entre ces différents canaux. Tentons tout de même de choisir les medias sur lesquels nous voulons (pouvons ?) communiquer…

… La liste est faite ? On enchaine.

Trouver un axe de communication, un angle puis un concept créatif

Attaquons maintenant le coeur de notre campagne : trouvons son concept créatif, celui qui suscitera le fameux effet tant convoité, le bien nommé effet « waouh ».

Il faut tout d’abord définir les grandes lignes de notre message, se demander de quoi nous voulons parler. Est-ce de la nouvelle politique écologique de l’entreprise ? De ses offres de Noël ? De sa nouvelle gamme de produits ? La réponse à cette question nous permettra d’orienter le message. Nous aurons ainsi établi notre axe de communication.

Avoir un axe de communication est un bon début mais n’est pas suffisant, il faut préciser les choses et trouver un angle, un éclairage particulier qui fera la personnalité de ce message.

Enfin, et en nous appuyant sur l’axe de communication et son angle d’approche, nous allons devoir trouver notre concept de communication, notre message final. Il reprend donc notre axe « orienté » et y intègre un saut créatif, ce à quoi les internautes vont adhérer et qui va provoquer de la sympathie et l’envie de partager.

Exemple d’axe de communication : Nos produits sont parmi les plus innovants du marché. (Fait)

Exemple d’angle associé : Nos concurrents sont toujours en retard sur nous. (Vision du fait sous un regard particulier)

Concept associé : Observer la concurrence se débattre ridiculement face à notre offre.

Cela vous rappelle quelque chose ? Les publicités télévisées de la banque CIC reprennent quasiment toutes ce schéma.

Une fois le concept de communication trouvé, nous tenons la quintessence de notre campagne et le plus dur est quasiment fait, mais trouver un bon concept peut demander énormément de temps.

Il n’y a pas de recette miracle pour trouver un bon concept de communication, mais les méthodes de brainstorming (association d’idées etc.) sont particulièrement efficaces.

Décliner le concept sur les média visés

On pourrait penser que cette étape est bénigne puisque l’on dispose déjà du message et de la liste des canaux sur lesquels on veut le diffuser, et pourtant elle constitue une phase primordiale dans la conception de la campagne.

Transposer notre message bêtement d’un média à l’autre fait perdre tout intérêt à l’opération. Il est important d’adapter au mieux notre concept au média sur lequel on le diffuse en utilisant ses spécificités et en étudiant les facteurs clés de succès des opérations qui s’y sont déjà déroulées (pour cela, je ne saurais trop vous conseiller l’achat du livre Internet Marketing 2011).

Nous l’avons vu, il est important de faire vivre une expérience à l’utilisateur, de lui raconter une histoire. On peut donc raconter plusieurs épisodes, plusieurs aspects de la même histoire en utilisant dans notre narration l’ensemble des outils qui sont mis à notre disposition sur les différents canaux. On obtient ainsi une communication diversifiée et immersive tout en gardant une cohérence de fond.

Il est cependant important, à part cas particulier, que chacun des médias se suffise à lui-même. Car si certains utilisateurs feront volontiers l’effort (sous notre impulsion), d’aller sur plusieurs canaux pour prendre connaissance de l’ensemble de l’opération, la plupart se contenteront d’un seul canal de notre projet. Il faut donc qu’ils comprennent de quoi il s’agit ou en tout cas que leur visite puisse être malgré tout mise à contribution et bénéfique.

Enfin, plus le maillage des différents canaux de votre campagne sera dense et incitatif, plus votre cible butinera de canal en canal et plus vous capterez son attention.

C’est normalement le moment de repartir dans un cycle projet classique (bench-conseil/conception/réalisation/recettage) pour chacun des canaux, mais ce n’est pas l’objet de ce dossier, nous ferons donc l’impasse dessus.

Facultatif : découpage de la campagne en phases

Certaines histoires bien ficelées sont même découpées en plusieurs grandes phases qui ponctuent, animent et donnent de l’intérêt au récit. Si cette étape n’est pas indispensable pour toutes les campagnes virales, certaines en font usage, dévoilant au fil d’un planning prévu en amont de nouveaux épisodes régulièrement jusqu’à la conclusion.

L’intérêt est réel : on ne parle jamais autant de quelque chose qu’en attendant impatiemment d’en découvrir la suite. Et ça nous donne un pretexte pour lui demander son e-mail.

Ainsi, un découpage « classique » d’une campagne virale pourrait être le suivant :

Lors de la phase de teasing on cherche à provoquer l’étonnement chez le visiteur, qui va diffuser l’information dans le but principal de faire partager son étonnement et de chercher une réponse. On n’identifie pas du tout la marque émettrice ni le but du message, on cherche juste à « braquer les projecteurs » sur le projet.

La phase de reveal consiste à révéler l’émetteur et/ou le but du message une fois que l’on dispose de toute l’attention de notre cible et à effectuer la transition vers notre phase de fidélisation. Cette phase est généralement très courte (de quelques heures à quelques jours).

La phase de fidélisation a pour but de susciter l’adhésion du visiteur et de le faire accomplir l’action que nous voulions finalement le voir accomplir (acheter ?).

L’une des difficultés de ce phasing est de capitaliser efficacement sur les visiteurs de la période de teasing qu’il faut pouvoir recontacter lors des phases suivantes car s’ils ne reviennent pas, ce sont des visites qui n’auront pas directement servi à atteindre notre objectif (dans le meilleur des cas ils auront diffusé plus ou moins le message).

La transition entre les différentes phases est par ailleurs un moment sensible. Il faut qu’elle soit à la fois visible et compréhensible par le visiteur, qu’elle rencontre l’adhésion du public et en aucun cas qu’elle suscite une déception. Certaines campagnes de ce type ont connu bien davantage de succès durant leur période de teasing que durant leur phase de fidélisation et n’ont ainsi pas rempli leur objectif final (voir la campagne 24 secondes chrono).

Encore une fois, ce type de découpage n’est pas obligatoire et n’est pas adapté à toutes les opérations virales. Si le projet n’est pas « phasé », nous demanderons simplement en même temps à l’utilisateur de partager l’information et d’accomplir l’action finale voulue (acheter un produit, s’inscrire à une newsletter etc.).

Conclusion et suite du dossier

Pfiou, voilà une grosse partie de la conception de notre campagne achevée :

• Nous avons notre concept de communication général.
• Nous avons la liste des différents canaux sur lesquels nous relayerons notre message.
• Nous avons les déclinaisons de notre message sur tous les canaux et les éléments ont été produits.
• Nous avons éventuellement le phasing macro de notre campagne.

Mardi prochain, nous rentrerons encore un peu plus dans les détails et nous préparerons le lancement effectif de notre campagne. Beaucoup d’éléments « logistiques » sont encore à régler : Plan de lancement, dashboards de suivi, organisation interne et répartition des tâches, gestion des imprévus en amont… Un beau programme en perspective.

Navigation dans le dossier