FLORIAN HARMAND

Université de Cergy-Pontoise / Infographie Année 2010 / 2011

Entreprise : Nurun

Tuteur : Mikael Bauvez

MéMOIRe De FIN De FORMAtION

2SOMMAIReRemerciements - 2

Introduction - 3

PARtIe I

1. L’eNtRePRISe ► 6A/ Poupées Russes - 7

B/ Nurun - 7

C/ Marché et concurrence - 9

D/ Fonctionnement - 9

2. RÔLe et MISSIONS ► 103. OUtILS & ORGANISAtION ► 12

PARtIe II

1. UtILISeR Le WeB ► 17A/ Etat des lieux - 17

B/ Explications - 17

C/ Digital Utility - 18

2. PeNSeR Le WeB ► 22A/ Design - 22

B/ Design Thinking - 23

C/ Pensée Intégrative - 24

D/ Infographie - 25

3. PRAtIQUeR Le WeB ► 30A/ Minimum syndical - 30

B/ Construction - 30

C/ Démarche qualité - 32

D/ SEO - 32

Conclusion générale - 34

Sources - 36

Glossaire - 37

ANNeXeS

3Remerciements

Avant toute chose, je tiens à remercier toutes les personnes de Nurun avec qui j’ai pu travail-ler pendant ces douze derniers mois dans une ambiance plus qu’agréable. J’ai beaucoup appris auprès de chacun d’eux et je les remercie pour leur patience et leur disponibilité. Des remercie-ments tous particuliers à :

Mikael Bauvez : mon tuteur qui m’aura formé, épaulé et aiguillé dans mes missions lors de cette année d’alternance. Il fut pour moi un supérieur idéal, ferme compréhensif, amical et professionnel. Je le remercie donc pour tout ce qu’il m’a appris, montré et fait découvrir durant mon passage à Nurun.

Bertrand Brosset : mon collègue intégrateur pendant une grande partie de l’année, qui aura toujours été disponible et présent pour m’aider lorsque mes compétences ne suffisaient pas.

Ariel Dorol et Dimitri Kurc : les stagiaires inté-grateurs estivaux, qui m’auront plus appris que moi je ne leur aurais appris si on parle en terme de développement pur...

Je remercie également mes camarades de Li-cence Professionnel Communication et Média pour leur professionnalisme et leur volontariat. Je garderai donc de bons souvenirs des projets menés à leurs cotés.

Enfin, je remercie les enseignants et interve-nants qui auront pu m’apporter quelque chose lors de cette année d’étude.

4Introduction

Ce mémoire ne sera pas un compte rendu du travail d’intégrateur, des bugs que j’ai pu résoudre ou des pages web que j’ai pu intégrer lors de cette année. Il ne traitera que très peu des conséquences de mon travail pour l’entre-prise et pour les clients de l’entreprise. Au lieu de cela, j’ai choisi de me positionner dans cette vocation que j’ai embrassé, celle du web et du « digital », dans une dimension plus vaste que celle de l’intégration pure.

Au cours de cette année, mon travail, mes études et mes recherches personnelles m’ont permis de découvrir de nombreuses notions et concepts, plus ou moins liés au monde du web, mais sur-tout, tous d’une importance majeure quant à la qualité future des produits et services numé-riques de demain. Ce mémoire de fin de forma-tion ressemblera donc plus à un échantillon de « mémoires », au sens littéraire du terme, c’est-à-dire à un témoignage et à une réflexion person-nelle sur un environnement donné et sur une période donnée : l’environnement étant le web et ses supports, l’époque, ou plutôt le fragment d’époque, étant cette année d’alternance au cours de laquelle j’ai pu observer l’évolution de théories émergentes concernant autant le web que le fonctionnement global de notre société.

Initié par l’armée, structuré par un scientifique, développé par les communautés du monde entier et enfin instrumentalisé par les marketers, le web en tant qu’application d’Internet, n’a que très peu évolué depuis sa création. En effet, la structure de 1991, inventée par Berners-Lee, n’a toujours pas été abandonnée. Elle n’a fait qu’évoluer jusque sa cinquième version. Passant entre toutes les mains, des plus novices aux plus

expérimentées, c’est l’usage du web et la façon dont il est exploité qui varie en permanence, non sa syntaxe originelle.

Dans quelle mesure les comportements des ac-teurs actuels du web détermineront-ils la qualité des services et produits numériques de demain ?

Le web étant omniprésent et quasi-libre d’accès, toute personne connectée en est acteur et influe sur son évolution, par un apport direct ou bien par un comportement particulier. Cette implica-tion de l’internaute au sein des dynamiques du web est un facteur clef de ce que l’on appelle le web 2.0. Ce terme regroupe des pratiques « nouvelles », tant du coté des concepteurs que des utilisateurs des produits et de services numériques. On parle de mise en réseaux, de partage, d’interactivité et d’implication du coté de l’utilisateur. Du coté des concepteurs, on use de technologies souples et réactives afin d’opti-miser l’expérience de l’utilisateur. L’utilisateur est de plus en plus au centre du procédé de conception. Cette interdépendance étroite entre le futur utilisateur et le concepteur en devient parfois une collaboration implicite, rarement avouée. Les comportements des deux partis sont donc extrêmement déterminant quant à la qualité du produit ou service conçu. Les mœurs et habitudes prises par ces deux acteurs de la dynamique du web sont donc les fondements du web d’après, du web de demain.

Mais dans la suite de ce mémoire, nous étu-dierons l’influence précise de ces acteurs, les théories émergentes concernant la création d’applications web (du coté des concepteurs comme du coté des utilisateurs) et nous obser-verons également des cas concrets.

5En ce qui concerne le corps de ce mémoire, nous examinerons les trois phases principales de la création web dans lesquelles des évolu-tions ou régressions apparaissent. Nous serons donc amenés à voir comment :

► Utiliser le web : cette composante vient en premier car l’utilisateur, dans les nouvelles pratiques du web, est au premier plan dans le procédé de conception d’un produit ou service web.

► Penser le web : plus que jamais aujourd’hui, l’ergonomie et l’aspect d’une application web sont primordiaux car après deux décennies d’usage du web, l’internaute commence à s’habituer à certains standards de navigation et à une certaine élégance graphique. On par-lera également de design et de l’évolution des méthodologies et pratiques qui lui sont propres.

► Pratiquer le web : cette partie traitera plus des concepteurs, des personnes qui créent et intègrent en vue de maximiser la qualité des applications web, tant dans la performance technique que dans l’accessibilité et la facilité de navigation.

Ce mémoire contiendra sûrement des termes conservés dans la langue anglaise. Bien que je n’apprécie pas particulièrement les mots anglais dans un mémoire français, certaines notions sont plus parlantes dans leur langue originelle. Une traduction française sera toutefois propo-sée.

Avant d’entrer dans le vif du sujet de ce mé-moire, la première partie sera consacrée à l’en-treprise dans laquelle j’ai travaillé pendant cette année d’alternance et au rôle que j’y ai joué.

Bonne lecture.

6

PARtIe I

71 - L’eNtRePRISe Il y a plus d’un an, ma vie professionnelle com-mençait. J’effectuais mon stage de fin d’étude au Nord Est de l’Angleterre, dans un petit stu-dio de création web du nom de Twisted Studio. L’effectif était de huit personnes : 3 associés, 1 employé, 1 free-lance et 3 stagiaires. Mon poste était celui d’infographiste/flasheur stagiaire. Un poste à mi-chemin entre le graphiste pur et le développeur web. On m’avait chargé de développer des jeux à portée commerciale, qui maximiseraient l’interaction consommateur/vendeur sur les lieux de vente. Le client interagit alors grâce à son téléphone portable avec des écrans supportant l’application.

Cette année, en arrivant à Nurun, j’intégrai la succursale parisienne du groupe, qui compte à elle seule plus de 150 employés. Les raisons pour lesquelles j’ai choisi Nurun sont multiples.

Tout d’abord, après une expérience dans une pe-tite structure, je voulais gouter au web à grande échelle et, en l’occurrence, en région parisienne. Cela impliquait également de traiter avec des clients de renommée internationale. Ensuite, depuis mes débuts dans le domaine du web et jusqu’à présent, j’ai toujours voulu conserver un profil technique et artistique, j’ai donc choisi ce poste de développeur web pour aller de paire, à mon sens, avec ma licence d’infographie. Enfin, le fait de travailler dans cette grande structure était pour moi l’occasion d’observer des stra-tégies marketing et des travaux de gestion de projet à grande échelle. J’ai en effet beaucoup appris de mes discussions et travaux avec les nombreux chefs de projets pour lesquels j’ai travaillé.

8A/ Poupées russes

Nurun, fondée en 1995, est une agence web spécialisée dans le marketing, la stratégie digi-tale et le branding. Elle appartient aujourd’hui à Québecor Média.

Québecor Média, fondée en 2000, est une entreprise de communication de masse (télé-communication, télédiffusion, édition presse). Québécor Média appartient elle-même au groupe Québecor.

Québécor est un grand groupe de média (presse, télévision, télécommunication, internet) québé-cois, basé à Montréal.

B/ Nurun

Nurun se définit comme une agence digitale globale (son côté québécois fait qu’on y adopte vite les termes d’outre-atlantique comme par exemple le « digital » au lieu du « numérique »).

Ses activités consistent d’abord à élaborer une stratégie marketing pour ses clients afin de ren-

forcer leur présence numérique et ainsi faire émerger la marque ou la consolider. On peut en partie appeler cela du branding, qui consiste à asseoir la puissance d’une marque par son iden-tité. Mais au delà d’une simple prise en charge marketing, Nurun va tenter de générer de l’utili-té. C’est ce qu’on appelle la digital utility, l’utilité tangible d’un produit ou service numérique. Ce concept sera développé davantage dans la partie II de ce mémoire.

Souvent, Nurun s’engage à refondre le site du client ou s’attèle à sa création complète. J’ai notamment assisté à de nombreuses créations de sites au service d’un client qui désirait lancer un nouveau type de produit. Nurun semble être particulièrement douée sur ce terrain.

Ensuite interviennent les actions purement marketing afin de promouvoir un produit/service existant, ou parfois fraîchement créé. Campagnes adWords, bannières Flash, jeux concours, sites de lancement, etc ...

Des moyens d’analyse sont mis en place pour mesurer les retombées de la campagne marke-ting : c’est le Retour Sur l’Investissement (dit ROI, Return On Investissement). Nurun mai-trise en effet divers outils d’analyse des retom-bées d’une campagne marketing (Analytics).

Enfin, la Search Engine Optimization (dit SEO, L’Optimisation pour les Moteurs de Recherche) est également prise en charge par Nurun, établie au début du projet puis révisée suite au ROI. La partie IV de ce mémoire y est consacrée.

9Pour y voir plus clair quant au ton adopté par l’entreprise, voici le crédo de Nurun, la poli-tique en théorie appliquée :

NOTRE MÉTIER, C’EST LA « DIGITAL UTILITY »

Nous sommes persuadés que la meilleure façon de communiquer les bénéfices de votre marque, c’est d’utiliser le digital pour en imaginer de nouveaux.

Quand un client nous soumet un brief mar-keting, nous nous donnons les moyens de le reformuler du vrai point de vue du consom-mateur. La recherche de l’utilité digitale va alors nous permettre de communiquer sur de véritables solutions pour les consomma-teurs qui en seront vite les ambassadeurs. La bonne information au bon moment, des ex-périences en ligne efficaces, la prise en compte pertinente du phénomène social, des outils digi-taux sur mesure au service des promesses de la marque : autant de moyens qui permettent à Nurun de s’appuyer sur sa culture et son métier du digital pour aider ses clients

à améliorer le quotidien de leurs consomma-teurs et à nouer des liens durables avec eux. Notre métier, c’est la « Digital Utility ». Notre mission, c’est de contribuer à rendre les marques vraiment utiles dans la vie de tous les jours.

Nurun, comme énoncé plus haut, est une entre-prise québécoise à l’origine, et c’est à Montréal que se trouve son siège social. Elle possède des succursales dans tout l’hémisphère nord, dans les villes suivantes : Atlanta, Barcelone, Madrid, Milan, Montréal, Nancy, Paris, Qué-bec, Shanghai, Toronto et Turin. Cela offre des opportunités de collaboration à l’international sur les projets. J’ai notamment travaillé à de nombreuses reprises avec l’équipe italienne de L’Oréal Paris Italie et j’ai dû remanier des codes créés par des développeurs chinois !

10C/ Marché & concurrence

Nurun œuvre sur le marché du « digital » à l’échelle nationale (France) et internationale. Ses clients proviennent de tous les secteurs, du privé comme du public (où il faut répondre à l’appel d’offre).

Nurun fait partie de ce qu’on appelle les mammouths sur le marché français (et même international). Elle lutte sur des appels d’offres contre d’autres grands groupes tels que Fullsix, EURO-RSCG, Publicis et autres consorts.

Les clients de Nurun viennent de nombreux domaines : automobile, industrie, banques, assu-rances, finances, cosmétique et mode, produits de grande consommation, médias et divertisse-ment, services, télécommunication, voyages et loisirs, …

Voici quelques exemples de clients et les do-maines dans lesquels Nurun est intervenue :

► Corporate : promouvoir le groupe

► E-commerce : vente en ligne

► Stratégie marketing

D/ Fonctionnement

Nurun est une agence web très complète, on y compte 24 métiers différents, et les services sont nombreux : pôle Créatif, pôle Innovation, pôle Administration Réseaux, pôle Développe-ment (intégration, flash, serveur, mobile), pôle Communication, etc …

La succursale parisienne compte environ 150 employés. C’est le pôle développement que j’ai intégré en rejoignant la cellule de maintenance, qui doit assurer des tâches de développement Flash comme de développement web classique.

D’un point de vue hiérarchique, j’étais sous la responsabilité de Mikael Bauvez, mon tuteur, chef de la cellule de maintenance mais aussi

11développeur iPad entre autres. Deux autres responsables se chargent respectivement de la cellule Flash et de la cellule Intégration et Web-mastering. Un chef des opérations englobe les deux cellules. Lors de mes travaux, je collaborais avec des chefs de projet (eux-même en contact avec les clients), des administrateurs réseaux, des webmasters, des intégrateurs, des flasheurs mais aussi avec des chargés de communication et des responsables de la présence sociale.

2 - Rôle et missions

Voici une liste non-exhaustives des tâches que j’ai du accomplir à Nurun :

► Le développement de modules interactifs de type diaporama, carrousel ou encore environ-nement interactif. Ces modules sont générale-ment des applications Flash et plus rarement de l’HTML dynamisé par Javascript.

► Des évolutions d’existant tels que des changements de collections (e-boutique dans l’habillement), des changements de visuels, de contenus éditoriaux.

► L’intégration de pages HTML pour des sites web, des pages Facebook ou encore des news letters.

► La recherche de bugs, du moins grave au pire cas possible, que ce soit sur une version test ou une version en ligne. Cela consiste à réparer des pages mal affichées, à résoudre des erreurs 404 de pages non référencées, etc... La phase de re-cherche est ici prédominante en terme de temps face à la phase de résolution du problème.

► De la veille technologique, inévitable dans une agence web. Google est en général notre meilleur ami lorsqu’un problème nous bloque. De plus, nombres d’employés intéressés natu-rellement par les nouveautés technologiques écument le web et font généralement partager leurs découvertes sur les réseaux sociaux.

Par la suite, au sein de la cellule de maintenance, j’ai pu avoir accès à de nouvelles responsabilités telles que :

► La restructuration et l’ergonomie du site de gestion interne de Nurun. En effet, cette pla-teforme, permettant à l’ensemble des employés de créer de nouvelles tâches, commençait à être obsolète et très peu pratique. Réalisée en Flash, elle était de plus très peu modulable et l’ajout d’une tâche spécifique pouvait mettre une jour-née à intégrer. La refonte en HTML, CSS et Javascript permettra un meilleur dynamisme, une meilleure modularité et un accès plus rapide à l’information grâce à une expérience utilisa-teur repensée. Ce travail aura été effectué avec deux autres intégrateurs. Mon rôle à aura été de concevoir le système de gestion : expérience utilisateur, zoning, maquette. Cela sort du déve-loppement web pour lequel j’ai été embauché, ce qui n’est pas pour me déplaire.

Sur la page suivante, les maquettes incomplètes du système de gestion.

12A

CC

UeIL

CAtéG

ORIeS

13► La passation aux nouveaux stagiaires arrivés dans la cellule : explication et description des méthodes et outils de travail et des processus de développement sur les différents comptes clients.

Ces deux dernières tâches, qui eurent lieu durant la période juillet/août, ont été pour moi les plus intéressantes. En effet, je n’avais pas encore effectué de tâches de conception ni de gestion au sein de mon entreprise. Seulement dans le cadre universitaire. De nature plutôt curieuse, j’avais déjà fait le choix d’être un infographiste à l’université et un technicien en entreprise. A cela s’ajoute dorénavant quelques aptitudes de conception et de gestion, domaine vers lequel je souhaite me diriger.

3 - Outils & organisationA Nurun, un développeur multimédia inté-grant la cellule de maintenance est appelé Ticket Man : le type qui fait les tickets. Le terme est quelque peu péjoratif et le poste est surement au plus bas de l’échelle. Toutefois, la plupart des intégrateurs et flasheurs de Nurun sont passés par là et c’est à ce poste que l’on fait ses armes dans tous les langages du web, et sur la totalité des systèmes de gestion de sites web. Ainsi, bien qu’on ne code rarement une page entière et que les missions (tickets) sont généralement des mises à jours ou des corrections de bugs, on fait un tour d’horizon de ce qui se fait de mieux - et de pire - dans le monde du web.

► Request Tracker

Un ticket est généralement une mission courte (ou estimée courte par les chefs de projets). Ils sont centralisés par le logiciel de suivi de pro-

blèmes Request Tracker, développé par Best Practical Solutions. Le logiciel est Open Source (code accessible et droit à la redistribution). Il comporte une base de données qui stocke les tickets, quelque soit leur état. La base de don-nées et toutes les autres technologies ayant servies au développement de RT sont libres ou Open Source. RT permet aux chefs de projets (ou autres employés) de Nurun de créer des tickets lorsqu’ils détectent des bugs, ou désirent effectuer des modifications légères sur le site d’un client de son porte-feuille (ensemble des clients dont il a la charge).

Un ticket man sélectionne les tickets par ordre d’importance ou par ordre chronologique dans la file des tickets. Une fois le ticket prioritaire identifié, le ticket man se l’assigne. Un ticket peut avoir différents statuts :

Nouveau : personne n’a encore touché à ce ticket. Ouvert : un ticket man s’est assigné le ticket.Fer-mé : le problème est résolu, on ferme le ticket. Rejeté : la demande n’est pas appropriée. Stagnant : le ticket man manque d’informa-tions ou est dans l’impossibilité temporaire de résoudre le ticket.

Pour finir, chaque changement de statut est commenté et est archivé afin de recréer une trame de l’avancement du ticket. Des pièces jointes peuvent être incluses : le brief avec des schémas, du contenu éditorial ou encore des visuels à intégrer.

► JIRA (de Gojira, le nom japonais de Godzilla !)

Nurun a choisi un logiciel de gestion de suivi à part pour gérer toutes les modifications à

14effectuer sur les différents comptes de L’Oréal. En effet, L’Oréal (la célèbre marque de cos-métiques) est le plus grand client de Nurun. Ce client est décomposé en L’Oréal Paris (la chaîne, qui existe dans de nombreux pays à travers le monde) et en L’Oréal Corporate ( le groupe L’Oréal). Sur ce logiciel, les projets et les différentes sous-tâches des projets apparaissent clairement. Le système diffère quelque peu de RT.

Une fois un ticket créé, le ticket man se l’assigne. Ensuite, il doit déclarer le début de son inter-vention et le ticket passe à l’état in progress, en progrès. Une fois le ticket résolu, le ticket man annonce la fin de son intervention. Le système de commentaires, d’historique et de pièces jointes est le même que pour RT.

► Gestion de l’emploi du temps

Comme précisé plus haut, un ticket man tra-vaille en général en autonomie. Les tickets étant pris par ordre d’urgence ou chronologiquement. Toutefois, il arrive que le chef de cellule, mon tuteur Mikael Bauvez en l’occurence, planifie des tâches un peu plus longues et les attribue à un ticket man. Par exemple : création de mo-dules interactifs, d’un jeu concours, etc ...

Une feuille de temps doit être remplie pour que les chefs de projets aient un retour du temps passé sur chaque tâche. Cette feuille de temps est une partie du logiciel Changepoint, déve-loppé par Compuware (entreprise américaine de développement de logiciels de gestion). On y place les tâches effectuées et on indique ensuite le temps passé sur chaque tâche.

► Les systèmes de gestions de sites

Différents outils sont utilisés à Nurun pour hé-berger les sites web des clients et pour effectuer des modifications, voici les principaux :

- Tortoise SVN : c’est un système de gestion des versions (SVN). De nombreuses mises à jour sont effectuées chaque mois et cet outil permet d’éviter les conflits de sources. On emprunte les fichiers nécessaires, on les modifie puis on les transfert sur le SVN. Ainsi, la personne qui intervient ensuite possèdera des sources à jour.

- Site Manager : développé par Microsoft pour l’Oréal Paris, ce logiciel permet de gérer l’inté-gralité des contenus de l’Oréal. Ainsi, un chef de projet peut modifier du contenu web sans passer par un intégrateur.

- Content Manager : ce type de logiciel per-met de télécharger puis de mettre en ligne des fichiers. Il est utilisé sur les comptes L’Oréal Paris et Kérastase. Un système de verrouillage de fichier permet d’avoir la main sur le fichier afin que personne d’autre ne tente d’intervenir dessus en même temps.

- Hudson (renommé Jenkins aujourd’hui) : c’est un outil qui se couple avec un gestionnaire de version (SVN). Il permet le déploiement d’un même site d’un serveur à un autre. Sur la plu-part des sites de l’Oréal Paris, les versions de sites passent d’abord en Intégration puis en Validation et enfin en Production.

Enfin, en terme de gestion, les sites non gérés par les technologies citées ci-dessus sont simple-ment hébergés sur des serveurs classiques et les modifications se font par téléchargement puis

15retour en ligne du fichier via le File Transfert Protocol (FTP), le moyen classique de mettre des pages HTML en ligne. Le logiciel utilisé est FileZilla.

Les logiciels utilisés sont généralement les mêmes que dans toute agence web. A savoir :

► Notepad ++ : un éditeur supportant la plu-part des formats du web. Il existe de nombreux éditeurs web (Dreamweaver, Smultron sur Mac) mais Notepad ++ est à mon sens le plus rapide et le plus pratique. Il est utilisé pour l’édition des fichiers HTML, XML, CSS, Javascript et PHP (différents langages web).

► Eclipse IDE : un environnement de déve-loppement basé sur Java (un langage de déve-lopement très répandu). Il est utilisé pour éditer puis re-compiler les projets complexes en Ac-tion Script 3 (le langage de programmation des applications Flash).

► Flash CS3 : un logiciel phare de la suite Adobe, qui permet la création de bannières ani-mées, d’environnements interactifs, de diapora-mas et autres projets multimédia. Il comprend une interface graphique et une console pour coder en Action Script. Il est utilisé pour éditer les projets Flash.

► Photoshop CS3 : le logiciel incontournable d’Adobe, utilisé pour la retouche d’image, la création puis le découpage de maquettes entre autres.

► Illustrator CS3 : non installé sur mon poste à l’origine, j’ai fait la demande de ce logiciel de création graphique d’Adobe afin de réaliser la maquette du futur système de gestion interne.

► Microsoft Outlook : le système de messa-gerie de Microsoft, pratique pour archiver les nombreux mails reçus chaque jour.

► Litmus : un logiciel de test de News Letter, afin de vérifier si les différentes boîtes mail (Hotmail, Gmail, Yahoo, …) en supportent l’intégration.

16MOSAÏQUe DeS OUtILSPhotoshop CS3 ▼

Illustrator CS3 ▼

Flash CS3 ▼

Eclipse IDE ▼

Notepad ++ ▼

Litmus ▼

Content Manager ▼

Tortoise SVN ▼

Hudson ▼

17

PARtIe II

181 - UtILISeR Le WeBA/ État des lieux

Trop souvent, les marketers voient le monde du digital, du numérique, comme une transposition dématérialisée des médias dits traditionnels comme la presse, la télévision et l’affichage. Le web en devient un à côté de ces médias. L’usage du web n’a que très peu évolué ces dix dernières années en ce qui concerne la demande du client aux marketers : « on passe notre campagne mar-keting en ligne ». Ainsi, le web se voit inondé de bannières Flash et de mini-sites promotionnels : il en devient un vulgaire panneau d’affichage, mais moins couteux qu’un vrai panneau d’affi-chage. La seule nouveauté côté client est son attirance pour les réseaux sociaux ! De plus, le représentant du client en contact avec l’entre-prise a souvent sur lui le poids de la hiérarchie et des habitudes de son entreprise, ce qui limite souvent les prises d’initiatives et innovations qu’a le droit de se permettre l’agence web.

D’après de récents sondages anglo-saxons, les marques accordent en moyenne moins de 10% de leur budget publicitaire au marketing digital. Autre statistique : plus de 45% du visionnage de média aujourd’hui s’effectue sur le web, les smart phones et tablettes ayant rendu les utilisa-teurs encore plus nomades dans leur consulta-tion du web. D’où vient cet écart de pourcentage ? D’une part du fait que le client paye et que cela peut parfois suffire aux marketers. D’autre part, de la méconnaissance des marketers des possibilités du web aujourd’hui, de ce qu’il peut vraiment procurer à l’utilisateur.

Pourquoi cet aparté marketing ? Car le marke-ting appliqué au web de façon irraisonnée est

une mauvaise pratique. Car le marketing est de la communication à portée commerciale. Car le web est inadéquat au support des messages tra-ditionnels des stratégies marketing valables sur les médias traditionnels.

B/ Explications

Les lois marketing deviennent obsolètes face au web. Les internautes ont développé de nou-veaux comportements : la liberté de choisir le contenu consulté, la possibilité/le réflexe de filtrer l’information pour aller à l’essentiel, la diversité des sources et des opinions et par conséquent, l’habitude de comparer.

Frédéric Filloux, consultant média et écrivain français, posait cette question dans un article dans le quotidien américain The Washington Post :

« Why is digital advertising so lousy ? »

soit en Français :

«Pourquoi la publicité sur le web est-elle si dégueulasse ? »

Il y trouve deux raisons :

1 – Un mauvais design : bannières, pop-up, mini-sites. Il cite notamment Apple qui créé des pubs coutant des milliers d’euros alors que Steve Jobs, son CEO, prône la refonte des stan-dards de la publicité sur le web.

2 – Un manque d’innovation flagrant en terme de marketing digital, l’éternelle transposition des messages des médias traditionnels.

19Tim Manners, analyste web, met en évidence un autre problème qu’il formule ainsi :

« Digital sells but doesn’t tell »

soit en français :

« Le web vend mais ne parle pas [au consomma-teur] ». Il ne procure pas l’émotion au consom-mateur comme peuvent le faire les médias traditionnels.

Manners remet donc en cause les iAds d’Apple, présentées il y a peu par Steve Jobs avec pour slogan « Emotion + Interactivity ». iAd reprend le concept ancestral du mini-site, mais transposé sur iPhone et iPad. Ainsi, on aurait des sortes de mini-applications. L’histoire se répète.

Le digital selon les analystes (et non selon les marketers) ne crée donc pas l’émotion chez le consommateur. Ce que l’on appelle le story-tel-ling émotionnel, l’histoire émotionnelle d’une marque, est diffusé par les médias traditionnels, le canal le plus puissant étant la vidéo, en terme de construction de marque.

Les slogans ne résolvent pas les problèmes d’aujourd’hui. L’intérêt du digital, et ce que recherche l’utilisateur (consciemment ou incon-sciemment), c’est une réponse quasi-instantanée à ses problèmes, à ses questions, à son besoin du moment, parmi le flot perpétuel d’informations qui lui parvient.

Le digital consistera alors en un bénéfice fonc-tionnel, qui prouvera l’engagement de la marque auprès de ses clients. Tim Manners résume en trois mots l’impérative caractéristique d’un ser-vice ou produit digital :

« Make it usefull !» / « Rendez-le utile !»

On parle de digital utility, l’utilité du digital.

C/ Digital Utility

Commençons par un cas pratique : le succès digital du Johnson’s Babycenter. Johnson’s est à la base une marque de produits pour bébés et jeunes enfants. Le fait est que Johnson’s n’a pas créé un site de promotion de couche à l’instar de Pampers. Le site de Johnson’s, appelé Baby-center, est un site qui accompagne les jeunes ou futurs parents dans les évènements importants tels que la grossesse, l’accouchement, les soins du bébé. On y trouve des tutoriels vidéos pour changer des couches, les besoins nutritionnels des jeunes enfants entre 0 et 9 ans et autres conseils. La partie « Shop » est secondaire ou du moins le semble. Ainsi, Johnson’s a créé un site qui rend service aux jeunes et futurs parents, ce qui a fait augmenter largement leur nombre de visiteurs quotidiens, et par conséquent le nombre de ventes de produits pour bébés. Johnson’s a créé de l’utilité !

Pour citer une dernière fois l’analyste américain Tim Manners :

« Provide me value first, then I’ll listen to your pitch » / Montrez moi ce que vous valez, j’écou-terai ce que vous avez à dire après.

L’utilisateur souhaite spontanément expérimen-ter.

Sur la page suivante, le site Babycenter.

20BABYCeNteR : UN VRAI PRODUIt DIGItAL

21Trois termes importants doivent être définis lorsqu’on parle d’utilité digitale :

► La stratégie digitale : l’intersection de la marque (le business), des participants et de la technologie est l’endroit où il est intéressant de développer un nouveau marché, de commu-niquer ou de créer des services utiles. C’est le Value Positionning, c’est localiser la valeur.

Représentation graphique : La stratégie digitale

► Un produit digital : c’est un produit utile, prouvant l’engagement de la marque auprès des utilisateurs. C’est le cas de Johnson’s Babycenter ou encore de Nike+iPod, l’application de suivi de jogging.

► L’expérience utilisateur (UX) : le client est désormais appelé participant, car il est au centre du processus de création et ses retours sont d’une importance majeure.

22Pour en finir avec Tim Manners, voici les quatre grands principes et notions clefs de l’utilité digi-tale énoncés par l’analyste il y a plus d’un an déjà lors d’une conférence TED :

1 – Le digital n’est pas un canal, un simple vecteur de message. C’est un média qui tend à prouver l’engagement de la marque auprès du consommateur et ainsi lui faire adopter ses va-leurs. On ne déverse pas un message sur l’utili-sateur mais on lui apporte un produit ou service réellement utile dans sa vie de tous les jours.

2 – Une expérience et non un message (G.M. O’Connel, fondateur de Modem Media). L’UX est au centre de la stratégie digitale. Il est donc nécessaire d’avoir un retour quant à la façon dont les services mis en place interagissent avec l’utilisateur. Créer une UX originale et de qua-lité ouvre vers plus d’échanges sociaux, vers de nouveaux comportements.

3 – Lancer un prototype de marque. Trouver un positionnement, une idée, un slogan, etc … et passer le tout en ligne n’est pas de la straté-gie digitale. Les marques varient en fonction du comportement des utilisateurs et le positionne-ment en fonction du marché et de la concur-rence. La vivacité et l’adaptabilité en temps réel sont donc primordiales dans le marketing digital. Il est judicieux de lancer au plus tôt la marque, le produit ou le service en version béta afin que les gens testent, discutent, émettent des retours voire des suggestions. On peut par exemple citer Google + et sa console de retours positionnée en bas à droite de l’interface, per-mettant de signaler des bugs, des défauts ergo-nomiques, etc … Ainsi la marque doit coller au plus près de ce que l’utilisateur attend qu’elle lui apporte.

4 – Utiliser le Crowdsourcing pour trouver l’idée géniale. Le crowdsourcing est, en manage-ment, le fait d’utiliser la créativité, l’intelligence et le savoir-faire de chacun à des fins marketing. C’est un échange d’idées avec les gens intéressés par la marque, elle est animée par son public. Que voulez-vous ? Avez-vous de meilleures idées ? Telles sont les questions induisant du crowdsourcing. Des outils prévus à cet effet existent déjà, afin de capter les retours des utilisateurs. Cette pratique controversée peut récompenser ses participants par des micro-paiements. Une autre limite du crowdsourcing est la définition de ce que l’on appelle l’expert. La question étant de savoir si le participant pos-sède ou non le savoir ou l’expérience nécessaire pour donner une expertise de qualité.

Enfin, il faut se poser la question : est-ce que je m’en servirais ? L’association de l’histoire émotionnelle de la marque et de l’utilité digitale est la clef d’un lancement de produit ou d’une construction de marque réussis.

232 - PeNSeR Le WeBDans le chapitre précédent, nous avons vu que le consultant média Frédéric Filloux expliquait la nullité de la communication sur le web par un mauvais design ou du moins, une absence de démarche design. Nous allons donc nous inté-resser au design en tant que méthode créative puis en tant que gage d’esthétisme, le design graphique et le design web.

A/ Design

Le design, en trois définitions :

[Puriste] le design : c’est la conception d’un objet esthétique, fonctionnel et conforme aux impératifs industriels (web en ce qui nous concerne).

[Poétique] Le design est du dessin à dessein, une création esthétique visant à remplir une fonction.

[Simpliste] Le design, c’est rendre les choses plus pratiques, plus belles et plus vendables !

Le design est né au beau milieu du XIXe siècle, en pleine révolution industrielle. Son père pour-rait être William Morris, qui dans des ateliers en marge des manufactures industrielles, concevait des objets de qualité, esthétiques et surtout fonctionnels. Il est le co-fondateur du mouve-ments Arts & Crafts, de l’art et de l’artisanat, de l’esthétique et de la technique. Suivront de nombreux grands hommes tels que le Corbusier (fonctionnalisme, Bauhaus), Raymond Loewy (« la laideur se vend mal ») et bien d’autres. En Angleterre, on parle d’Isambard Kingdom Brunel, ingénieur en industrie civile, qui révo-

lutionna les transports de son pays. Il est à l’initiative de nombreux ponts britanniques de grande taille ainsi que de la ligne Great Western Railway, qui rallia par voie ferrée l’est de l’An-gleterre au centre de Londres. Avant la fin de la construction de cette ligne, il proposa même une extension menant jusqu’au port de Bristol afin de continuer le voyage en bateau jusqu’à … New-York !

Quelque furent leurs rapports à l’esthétique, à la technique ou à la fonctionnalité, tous ces pionniers du design avaient tous un point com-mun : le fait d’œuvrer dans la création d’objets changeant le quotidien. Avec le temps mais déjà à l’époque de William Morris, les objets dits « design » sont devenus de moins en moins accessibles au grand public. Empruntant tant à l’art qu’à la technologie de pointe, ces objets se sont faits de plus en plus coûteux et aujourd’hui, les objets design ont perdu leur sens originel, et réunissent rarement les trois composantes essentielles : esthétique, fonctionnalisme et fai-sabilité technique. Une chaise rose bonbon en plastique recyclé peut être présentée comme « design ». Le design ne se préoccupe plus que de l’image et de la mode, c’est un outil de consommation. Il en résulte souvent la création de quelques objets à petite échelle alors que les précurseurs du design pensaient les choses à grande échelle ou en grand nombre, et ce pour changer le monde.

Heureusement, depuis quelques années, la son-nette d’alarme a été tirée concernant le design. C’est d’ailleurs dans le domaine du web que, devant sa propre dégénérescence, certains ana-lystes et consultants médias prônent un retour à la pensée design, et non au design. En anglais, c’est le design thinking.

24B/ Design thinking

Le design thinking est une méthodologie pour résoudre des problèmes et ainsi générer de l’innovation. Pour certains, c’est appliquer les méthodologies et les questions originelles du design à n’importe qu’elle situation. Voici les points essentiels (le processus complet en annexe) du design thinking énoncés par Tim Brown, CEO d’IDEO :

► Le design doit être centré sur l’humain, afin de lui changer la vie, de la lui faciliter.

► Le design n’est pas que de l’ergonomie. Il doit s’adapter à la culture des utilisateurs concernés et au contexte (économique, climatique, social). On commence donc l’étude par les personnes, non par les technologies disponibles ou maitri-sées. Tout procédé de création part d’un besoin humain.

► Le prototypage accélère l’innovation. Il est nécessaire de confronter son prototype de pro-duit au monde, à son environnement, pour en apprécier son utilité (et non sa simple viabilité). Il faut penser en faisant, et non réfléchir à quoi faire.

► De la consommation à la participation. La relation passive du consommateur par rapport au créateur du produit tend à s’effacer. Le client devient participant. Il ressent ainsi l’engagement des créateurs du produit à le satisfaire.

Le projet Beveridge 4.0, en référence à l’éco-nomiste anglais William Beveridge qui tenta de mettre en place un Etat Providence en Angle-terre durant la seconde Guerre Mondiale, met en place une collaboration des designers et des

citoyens d’un quartier anglais afin d’en augmen-ter la qualité de vie. Comme le proclame Tim Brown : « Le design est une chose trop impor-tante pour être exclusivement confiée à des designers ». Il doit être placé entre les mains de tous.

D’un point de vue Maslovien, on pourrait presque dire que le design thinking influe sur la base de la pyramide ! En effet, si le design thinking tend à améliorer notre quotidien, il influerait sur les besoins physiologiques et de sécurité en priorité !

Le web répond aux impératifs de la pensée de-sign par le fait qu’il jouit d’une forte adaptabilité, de moyens de gérer la participation d’une com-munauté et d’une logique de version et d’évolu-tivité des produits et contenus. Le design est né durant l’essor de l’ère industrielle. Le renouveau du design naitra de l’essor du digital.

25Dans le domaine du web comme dans de nom-breux autres domaines impliquant des business, les solutions actuelles deviennent obsolètes. Le monde est confronté à des problèmes clima-tiques, démographiques, monétaires. Le web subit l’obsolescence des moyens marketing, l’infobésité, les problèmes de gestion des don-nées personnelles et des problèmes de qualité de produits. Face à ces nouveaux problèmes, nous devons trouver des solutions nouvelles et donc nous offrir de nouveaux choix. On parle de pensée intégrative.

C/ Pensée intégrative

Pour certains analystes et autres intellectuels, nos inférences (processus de réflexion menant à une décision) sont cloisonnées par les modèles que nous a inculqué notre société. Admettre que ces modèles sont exactes comme on nous l’a enseigné, c’est éviter l’inquiétude de penser que ces modèles ne sont pas optimaux, et qu’il y a une meilleure idée ailleurs.

La pensée intégrative est un processus de ré-flexion divergent, en opposition au processus habituel convergent. On va généralement faire en sorte d’approcher la solution optimale. La pensée intégrative prône un autre comporte-ment consistant à aller chercher une solution ailleurs. Face à deux choix incompatibles, le compromis est impensable, il y a une solution meilleure.

L’iPad serait-il un enfant de la pensée intégrative ? Est-il l’autre solution que le choix « ordinateur portable ou smartphone » ? L’iPad ne permet pas de travailler cela est certain : entamer la saisie d’un long texte est impensable sur un cla-vier similaire à celui de l’iPhone, bien que plus

étendu. C’est un appareil de consommation de média. Frédéric Filloux, dans un article pour Slate.fr, singe le patron d’Apple :

« Voici donc l’iPad, construit sur le principe propre à Steve Jobs: je me fiche des études de marché; je ne demande pas au client ce qu’il veut, mais je conçois ce qui le fera rêver. Le dé-sir, l’envie, avant la rationalité consommatrice. »

D’une utilité relative, il y a des chances pour que l’iPad soit un produit de la pensée intégrative (ou a pire, un coup de chance de Steve Jobs), il n’est en aucun cas en accord avec les principes du design thinking, vue son utilité relative.

En combinant la pensée design et la pensée intégrative, nous nous donnerions la possibi-lité d’accéder à de nouveaux choix et donc à de nouvelles solutions pour résoudre les pro-blèmes et répondre aux besoins. Le but étant de créer des produits esthétiques, pratiques et innovants en tenant compte du contexte et des impératifs techniques. Cela est valable dans la stratégie digitale comme dans l’élaboration de scenarii utilisateurs. Un jour, les standards mis en place seront obsolètes. Selon Roger Martin, chercheur à la Rotman School of Management de Toronto, admettre qu’un modèle n’est pas optimal est le premier pas vers le progrès.

26D/ Infographie

Le design web, plus que dans les autres do-maines, est en perpétuel changement, étant donné qu’il est en partie lié aux avancées tech-nologiques. Les tendances dans ce domaine sont souvent fixées par les travaux des agences web et par les expérimentations des graphistes ou développeurs sortant des sentiers battus. Les créations originales sont vite propagées, quand elles sont remarquées, grâce aux réseaux sociaux et aux nombreux awards du web : site du jour, FWA. La création web permet également des ponts artistiques avec d’autres domaines (le motion design, la communication évènemen-tielle) et d’autres technologies (smart-phones, QR code).

La tendance est à l’épuration et à la sobriété. Cette tendance a incontestablement été lancée par Apple et l’iPhone. Son interface simple, ergonomique et intuitive a inspiré les web desi-gners. Le web sur ordinateur a donc tiré des leçons des applications sur smartphone.

Cette tendance à la simplification et au mini-malisme était déjà une tendance que j’observais dans les arts graphiques ces trois dernières années. En effet, de nombreux artistes web ou print se sont dirigés vers des graphismes mini-malistes et épurés.

Ces représentations minimales sont générale-ment appréciées par le public, qui s’y retrouve et aime aller à l’essentiel. J’ai appelé ce phénomène l’éxergie graphique, faute de terme existant.

C’est à la base un terme de thermodynamique : si l’éxergie d’un système est égal à zéro, alors ce système est en équilibre thermodynamique.

L’éxergie graphique serait donc, par analogie, le seuil minimal de représentation graphique pour atteindre le niveau d’expressivité maximal.

Dans la suite, des infographies et posters mini-malistes mais très efficaces.

27eXeRGIAN : POSteRS

Albert Exergian est à la tête de l’agence de graphisme autrichienne Exergian. Sa série de posters minimalistes a reçu un accueil très favorable, que ce soit de la part des profes-sionnels du domaine où du grand public.

28eXeRGIAN : tRAVAUX

Identité graphique d’un cabinet d’architecture autrichien.

29SAUL BASS : AFFICHe

Saul Bass est un des premiers graphistes a avoir créé des graphismes minimalistes au milieu du XXe siècle, notamment pour des affiches et génériques de films d’Alfred Hitch-cock ou d’Otto Preminger («Anatomy of a murder» ci-dessus).

30NICK tASSONe : AFFICHeS

Graphiste plus actuel, Nick Tassone (US) suit le courant minimaliste avec une série d’affiches de films inspirés de Stephen King.

313 - PRAtIQUeR Le WeBJ’ai choisi ce verbe pour souligner l’aspect pra-tique de cette dernière partie. Les personnes qui « construisent » les sites web et autres applica-tions web sont responsables de la qualité de ces services. Ces personnes sont les développeurs web et les intégrateurs. Leur mission est de faire en sorte que les produits qu’ils réalisent soient stables, modulables, rapides à charger, appau-vrissables, adaptatifs et référencés naturelle-ment. Un travail rigoureux de ces techniciens spécialisés contribue chaque jour à l’élévation de la qualité des services présents sur le web.

A/ Minimum syndical

Avant d’entrer dans la partie technique, je tenais à faire référence à ce qu’on pourrait appeler « le minimum syndical » lorsqu’on entreprend la création d’un site web. Ce sont les principaux points à optimiser :

► L’architecture de l’information : c’est sure-ment la pierre angulaire de la création web. C’est une démarche d’organisation de l’information sous une forme pertinente. Elle implique la constitution de règles de regroupement et de libellés optimisant l’expérience de l’utilisateur. On y détaille aussi les règles de navigation pour chaque type de navigation (globale, secondaire, contextuelle, etc …).

► L’ergonomie : c’est concevoir des interfaces en fonctions des acquis des utilisateurs, de leur contexte physiologique et de leur perception afin de maximiser leur expérience du site.

► L’accessibilité : comme son nom l’indique, c’est rendre accessible le site au plus grand

nombre, aux mal-voyants comme aux per-sonnes valides.

► La standardisation : dans le sens technolo-gique. C’est faire en sorte d’utiliser des technolo-gies libres, répandues et compatibles entre elles comme les serveurs Apache, les script PHP, les bases de données MySQL, etc …

► Les méthodes de mesures : afin de voir l’impact des efforts fournis, et de comparer les résultats effectifs aux résultats attendus. Google Analytics est un exemple de suivi du trafic d’un site.

Ce qui suit sera centré sur la partie technique de la création de sites web. Elle devrait toutefois être compréhensible de tout un chacun.

B/ Construction

Souvent comparée à l’architecture, la création de site web en reprend certaines règles, à com-mencer par des bases solides et le respect des techniques enseignées. Nous allons donc passer en revue les points techniques garantissant un web stable et pertinent, un web de qualité.

Tout d’abord, il est important de séparer le fond de la forme. Le web est principalement consti-tué de deux langages essentiels, l’HTML et le CSS. Le premier sert à organiser le contenu et le second à le mettre en forme. Il est convenu de les coder séparément pour que l’écriture de l’un n’influence pas l’écriture de l’autre. L’HTML, le fond, doit être codé avant le CSS, la forme.

En ce qui concerne l’écriture du contenu, il se doit d’être structuré sémantiquement, grâce aux balises HTML appropriées. Il existe en effet une

32commencent à émerger tels que les Mediaque-ries. Ce sont des conditions de taille d’interface qui chargent différentes mise en page afin de s’adapter à la résolution de l’écran supportant le site.

Techniquement, on parle également d’interfaces « appauvrissables ». Ce terme prends à contre-pied celui d’interfaces Rich. Le Rich Media désignant des applications regroupant plusieurs média tels que le son, l’image et la vidéo. Ce sont généralement des environnements très in-teractifs, souvent réalisés en Flash. Leur défaut réside dans le fait que Flash n’est pas supporté sur tous les appareils et qu’il est lourd à exécu-ter. De plus, sans souris, une interface Rich est rarement manipulable. Une interface appauvris-sable est capable de s’adapter à des contextes de navigation défaillants du coté de l’utilisateur, comme une connexion mauvaise ou encore un blocage des scripts Javascript (qui permettent de dynamiser un site web), en perdant certains éléments graphiques ou en mettant en place une navigation alternative à l’originale.

Enfin, il est bon de déléguer et de mutualiser les parties de la création du site qui peuvent l’être. Les Systèmes de Gestion de Contenu tels que Wordpress ou encore Joomla permettent de déployer en peu de temps un site fonctionnel. De nombreux modules sont disponibles tels que des galeries photos, des systèmes de votes, etc …

hiérarchie de balisage qui permet de faire res-sortir des éléments importants et de pondérer le contenu textuel. Les pages codées sont certes lues par des humains, mais ce sont des machines qui les référencent et les interprètent. Cette organisation sémantique est toutefois facilitée avec la généralisation des Systèmes de Gestion de Contenu, qui automatisent la création des balises appropriées. Il faut tout de même bien choisir les termes employés. Plus le poids du terme est élevé dans la hiérarchie, plus son exac-titude comptera dans le référencement du site.

Ensuite, devant la multiplication des supports, il faut se diriger vers un développement pluri-média avant un développement spécifique. En effet, les employés travaillent souvent devant leur ordinateur de bureau et ont en permanence besoin d’un accès web pour y consulter des ressources, l’écran de bureau est un standard toujours bien établi d’une part. D’autre part, les chiffres concernant les mobiles sont en hausse permanente :

► 50% des possesseur de mobile ont accès à internet.

► Un « mobinaute » se connecte en moyenne 3,4 fois par jour.

► 25 % des mobinautes ont déjà effectué un achat via leur mobile

Sondage d’avril 2011 par GroupM et SFR Régie

Les technologies existent pour gérer ces nom-breux contextes de navigation. Une grande par-tie des propriété CSS valides actuellement sont souvent omises. Des moyens d’adaptation de la forme du produit au terminal de l’utilisateur

33sémantique optimisée.

Le référencement des pages Google s’effectue par le Google Bot, qui vient effectuer un crawl (parcourir) sur les pages du site, en repérant l’index dans un premier lieu. On peut créer un site map, une liste des pages du site, afin de faci-liter le crawl du Google Bot, et donc améliorer les résultats de son passage. A l’inverse, l’accès au page que l’on ne souhaite pas référencer peut être interdit au Google Bot en le précisant dans un fichier robot.txt.

Le plus important est de remplir et d’utiliser les balises avec soin. Il en existe de quatre types :

► fondamentales (html, head, body)

► entête (title, méta),

► structure (a, p, hn, ul, table),

► média (img, script, embed, object).

Ces facteurs peuvent entraver fortement le référencement :

► Une arborescence incohérente

► Les images (pas de prise en compte par le Bot)

► L’absence de balises sémantiques

► Le contenu dupliqué

► Les redirections inadaptées

► Du contenu affiché selon l’adresse IP

C/ Démarche qualité

J’ai jugé bon d’ajouter en cette fin de partie des conseils donnés par Elie Sloïm, patron de TEMESIS, lors d’une conférence du Paris Web 2010, concernant les choses à ne pas faire dans une démarche qualité :

► Éviter le rejet global : d’une technologie, d’une conformité et de l’accessibilité. Obtenir un site qui marche est à la portée de beaucoup d’agences. Cela n’en fera pas un site de qualité.

► Éviter la surqualité : le fait d’être très bon dans un domaine particulier n’est pas forcément un atout pour une agence web, bien qu’il l’est pour des experts consultants spécialisés : en référencement par exemple. Il est conseillé à une agence de monter ses niveaux d’expertise de façon homogène et non d’entretenir une qualité principale.

► Éviter le rejet technologique : passer à coté d’une technologie, c’est priver l’utilisateur d’une expérience optimisée.

► Éviter l’exclusion et le déplacement de contenu : c’est par exemple l’externalisation d’une partie des contenus du site, comme les vidéos sur Youtube par exemple.

D/ SEO

Le dernier paragraphe de cette partie sera consacrée à la SEO, l’optimisation d’un site pour les moteurs de recherche. Cette partie très technique est toutefois très importante. Un site bien référencé naturellement ne sera pas seule-ment un atout pour se positionner sur Google, mais ce sera également le gage d’une structure

34Pour conclure, en terme de référencement, l’im-portant est de respecter les normes en rigeur. Le W3C, le World Wide Web Consortium, est un organisme qui fixe les standards en terme de balisage web et d’application des styles CSS. Il propose des outils tels que le W3C Valida-tor pour vérifier si le code est valide, c’est à dire qu’il respecte ces normes. Un autre outil, moins connu, est le WCAG, qui permet de rendre compte de l’accessibilité d’un site. Grâce à ces deux outils, les développeur ont donc les moyens de coder proprement et ainsi de garan-tir la qualité de leurs créations web.

► Les splash screen, ils sont à éviter.

Ces éléments bloquent les moteurs :

► Le Flash

► Les plugin

► Les scripts JS et Ajax

► Les formulaires

► Les robot.txt configurés

Quelle est la vision d’un moteur ?

► Pas d’images

► Pas de CSS

► Pas de JS

► De haut en bas

► Pas de formats spéciaux, i-frames et plugins

► Pas de cookies

35En conception, on pense dorénavant expérience utilisateur (UX). Les études préliminaires à la création d’un produit ne peuvent être menées sans prendre en compte ce « participant ». A l’avenir, on concevra les choses en grand. Les produits digitaux devront être utiles, rendre des tâches plus simples et rapides. Nous devons apprendre à positionner la valeur, à trouver l’en-droit propice à un nouveau marché. Grâce à la pensée design, nous devons prendre en compte le contexte de navigation de l’utilisateur (no-madisme, appareil supportant le produit), son environnement (wi-fi inaccessible, climat) et sa physiologie (position debout, main occupées, handicap). La pensée intégrative appliquée tend à nous faire rechercher des solutions nouvelles et nous apprend à ne pas nous contenter de compromis. Elle nous incite à sortir des mo-dèles et des conventions que notre milieu nous a inculqué. Aussi, après vingt ans d’usage du web, on ne peut plus tromper l’internaute en terme d’interface. Il s’est habitué à des standards et à une qualité graphique minimum.

En management, les agence web de toutes tailles se doivent d’adapter leur démarche quali-té à notre époque. On ne peut plus se contenter aujourd’hui du site qui marche. Il doit être va-lide, accessible, ergonomique et surtout, utiliser toutes les technologies disponibles pour assurer sa fonction et ainsi optimiser l’expérience de l’internaute et du mobinaute. Les agences web doivent monter leurs niveaux d’aptitudes de tous les domaines du web simultanément. L’ho-mogénéité des critères de la démarche qualité en permet l’évolution globale. On ne fournira bientôt plus un produit mais un prototype de produit, destiné à évoluer selon les résultats des mesures et avis des utilisateurs.

Conclusion généraleLes clients et leur service communication n’ont pas assimilé que le web n’est pas un média tradi-tionnel. Il ne délivre pas un message mais procure une expérience. Bien qu’il y ait eu des succès de brand-building sur le web et que des méthodes sont en train d’émerger, ce n’est toujours pas le média le plus efficace dans cette discipline. La stratégie digitale vient renforcer efficacement la marque existante et prouve son engagement auprès de l’utilisateur. Ces recherches ont donc répondu à mes interrogations par rapport au fait que Nurun ne suit uniquement des marques existantes. La plupart des clients n’ont pas de connaissance des business web et doivent donc être éduqués, afin qu’ils comprennent l’impor-tance de procurer une expérience nouvelle au consommateur, au lieu de l’abreuver de mes-sages qu’ils voient déjà le reste du temps dans les médias traditionnels.

Comme nous l’avons vu, les concepteurs sont autant coupables que les clients de la régression du web, si ce n’est plus, car ils connaissent le domaine. Leurs problèmes qualitatifs peuvent provenir à la fois d’un mauvais management, de mauvaises méthodes de conception et de mauvaises pratiques techniques. Un dernier élé-ment pouvant entrainer de mauvaises pratiques sont les facteurs liés coût et temps, parfois peu compatibles avec les exigences du client. De la même façon que pour la stratégie marketing, la relation envers le client doit être pédagogique.

Au cours de ce dossier, nous avons parcouru les fondamentaux de la qualité web et nous avons pu observer que dans tous ces domaines, rigu-eur, bon sens et créativité sont indissociables.

36Enfin, techniquement, la tendance est au retour à la rigueur. Cela commence par la fin des « mou-tons à cinq pattes ». Les profils doivent tendre à se spécialiser. Un intégrateur ne se chargera pas de développement PHP complexe, le web designer ne codera pas. Les outils de validation doivent être utilisés à chaque version du pro-duit. L’écriture web doit être maitrisée devant l’automatisation des processus de recherche afin de diluer le chaos d’informations présent sur la toile. Nous concevons aussi ces produits pour que les machines trouvent ce que les humains cherchent.

Les standards et technologies libres doivent être utilisées car sur le web, les standards techniques n’empêchent pas la prise d’initiatives et l’origi-nalité mais les renforcent.

De la combinaison de la rigueur technique et de l’originalité dans les processus de conception pourrait donc naitre un web de meilleur qualité. Il nous suffit d’utiliser nos acquis et de prendre du recul par rapport aux modèles établis pour nous ouvrir à des nouvelles méchaniques de conception. L’opportunité quotidienne est donc entre nos mains pour produire un web plus clair, plus stable et surtout, plus innovant.

37

Web UX

http://www.web-ux.org/

Mediaqueries

http://www.mediaqueri.es

SOURCeSPour écrire ce mémoire, je me suis inspiré des articles que j’ai pu lire au cours de cette année, des conférences que j’ai pu visionner, de mes observations personnelles sur divers projets uni-versitaires ou professionnels et enfin des notes et blogs générés par mon entreprise, Nurun.

DFRL

http://www.digitalforreallife.com/

OWNI

http://owni.fr/#aujourd-hui

TED Talks

http://www.ted.com/talks

Interview de Roger Martin

http://www.ted.com/talks

Paris Web et sa chaîne Daily Motion

http://www.paris-web.fr/

Wikipédia

http://fr.wikipedia.org/

Slate

http://www.slate.fr/

The Washington Post

http://www.washingtonpost.com/

38

MySQL : c’est un système de gestion de base de données libre très répandu.

PHP : ou Hypertext Preprocessor, est un lan-gage de programmation de scripts permettant la création de pages dynamiques via un serveur HTTP.

Rich Media : des applications qui regroupent différents médias et possèdent une certaine interactivité.

SWF : format de publication de Flash qui peut être lu grâce à Flash Player, présent sur 95 % des navigateurs.

XML : Extensible Markup Language, c’est un langage de balisage qui sert surtout à stocker des données en structure arborescente.

Glossaire technique Action Script 3.0 : l’Action Script 3 (as3) est le langage de programmation utilisé pour des ap-plications comme Adobe Flash et Adobe Flex. Il permet de créer des applications interactives en animant des MovieClip (éléments graphiques) et en incorporant des médias tels que le son ou la vidéo. Ces applications répondent également aux évènements souris et clavier de l’utilisateur. Son usage actuel est contesté, étant donné qu’il n’est pas pris en charge sur de nombreux appa-reils Apple.

Adobe Flash : anciennement Macromedia Flash, c’est un logiciel dont le lecteur fonctionne sur la plupart des navigateurs. Il permet la créa-tion d’animations, de jeux et d’applications Rich Media. Son langage de programmation est l’Action Script 3.

Apache : c’est un serveur HTTP (le protocole standard du web qui permet d’interpréter l’HT-ML) très répandu et libre.

Eclipse : c’est un IDE (Environnement de Développement Intégré) écrit en Java fonc-tionnant sur un système de plugins (modules d’extension) permettant de créer des projets de développement.

HTML : l’HyperText Markup Language est le langage de balisage permettant d’écrire de hypertexte, le format de données du web.

Javascript : c’est un langage de programmation de scripts qui permet d’ajouter de l’interactivité aux pages web classiques (HTML/CSS). Il est assez proche de l’Action Script 3 et a d’ailleurs les mêmes origines que ce dernier.

39

ANNeXeS

40sessions de brainstorming. Pas de jugements, beaucoup de débats. Mener un problème à la fois en brainstorming.

► Prototypage

Combiner, étendre et affiner les idées. Créer plusieurs versions. Recueillir les retours des différents groupes test. Présenter les idées au client. Rester objectif et avoir du recul. Tou-jours garder le prototype actuel prêt pour une présentation.

► Objectifs

Garder en tête les objectifs initiaux. Mettre de côté les affects et les préjugés. Éviter les com-promis. La solution la plus pratique n’est pas toujours la meilleure. Choisir des idées fortes.

► Implémentation

Faire une description des tâches. Planifier les tâches. Déterminer les ressources affectées aux tâches. Assigner les tâches. Exécuter les tâches. Recetter le produit.

► Apprentissage

Mutualiser les retours des consommateurs. Dé-terminer si la solution résout les objectifs. Dis-cuter des choses à améliorer. Jauger le succès du projets et effectuer des mesures. Effectuer de la documentation.

DeSIGN tHINKINGProcédé créatif

Le design thinking est à la fois un procédé créa-tif et une méthode de résolution de problèmes. Les ateliers créatifs originels de design thinking reprennent en fait les règles de brain storming classique que l’on trouve par exemple dans le procédé de création publicitaire. Pas de juge-ments, premiers jets d’idées, on garde toutes les idées, ... On encourage de plus les phases de prototypage. Le procédé est organisé en sept étapes, bien qu’un ordre de raisonnement soit établi, le suivi de cet ordre n’est pas obligatoire et ces étapes peuvent être traitées indépendam-ment, répétées plusieurs fois. Voici donc ces sept phases et les actions qu’elles comportent :

► Définition

Définir le problème à résoudre S’accorder sur le public visé. Traiter les problèmes dans leur ordre de priorité. Déterminer les critères d’ac-complissement du projet. Etablir un glossaire des termes clefs.

► Recherche

Réviser l’historique du problème et les obstacles existants. Collecter les exemples de tentatives antérieures de résolution du problème. Lister les différents acteurs du projet et leurs avis. Dis-cuter du projet avec le public cible.

► Idéation

Identifier les besoins et motivations des uti-lisateurs finaux. Générer autant d’idées que possible pour résoudre ces besoins. Créer des