Mémoire de licence FH

of 40

Mémoire de licence FH

by mrharmand

on Jan 19, 2026

Report

Category:

Design

Download: 0

Comment: 0

3,490

views

Comments

Description

Partie 1 : forme de rapport de stage
Partie 2 : Dans quelle mesure les comportements des acteurs
actuels du web détermineront-ils la qualité
des services et produits numériques de demain ?

Download Mémoire de licence FH

Transcript

1. FLORIAN HARMAND mémoire de fin de formationUniversité de Cergy-Pontoise / InfographieAnnée 2010 / 2011Entreprise : NurunTuteur : Mikael Bauvez

2. SOMMAIRE PARTIE II2Remerciements - 21. UTILISER LE WEBIntroduction - 3 ► 17 A/ Etat des lieux - 17PARTIE I B/ Explications - 171. L’ENTREPRISEC/ Digital Utility - 18►6 2. PENSER LE WEBA/ Poupées Russes - 7 ► 22B/ Nurun - 7 A/ Design - 22C/ Marché et concurrence - 9 B/ Design Thinking - 23D/ Fonctionnement - 9C/ Pensée Intégrative - 242. RÔLE ET MISSIONS D/ Infographie - 25► 103. PRATIQUER LE WEB3. OUTILS & ► 30ORGANISATIONA/ Minimum syndical - 30► 12B/ Construction - 30 C/ Démarche qualité - 32 D/ SEO - 32 Conclusion générale - 34 Sources - 36 Glossaire - 37 ANNEXES

3. Remerciements3Avant toute chose, je tiens à remercier toutesles personnes de Nurun avec qui j’ai pu travail-ler pendant ces douze derniers mois dans uneambiance plus qu’agréable. J’ai beaucoup apprisauprès de chacun d’eux et je les remercie pourleur patience et leur disponibilité. Des remercie-ments tous particuliers à :Mikael Bauvez : mon tuteur qui m’aura formé,épaulé et aiguillé dans mes missions lors decette année d’alternance. Il fut pour moi unsupérieur idéal, ferme compréhensif, amical etprofessionnel. Je le remercie donc pour tout cequ’il m’a appris, montré et fait découvrir durantmon passage à Nurun.Bertrand Brosset : mon collègue intégrateurpendant une grande partie de l’année, qui auratoujours été disponible et présent pour m’aiderlorsque mes compétences ne suffisaient pas.Ariel Dorol et Dimitri Kurc : les stagiaires inté-grateurs estivaux, qui m’auront plus appris quemoi je ne leur aurais appris si on parle en termede développement pur...Je remercie également mes camarades de Li-cence Professionnel Communication et Médiapour leur professionnalisme et leur volontariat.Je garderai donc de bons souvenirs des projetsmenés à leurs cotés.Enfin, je remercie les enseignants et interve-nants qui auront pu m’apporter quelque choselors de cette année d’étude.

4. Introductionexpérimentées, c’est l’usage du web et la façon4dont il est exploité qui varie en permanence,Ce mémoire ne sera pas un compte rendunon sa syntaxe originelle.du travail d’intégrateur, des bugs que j’ai purésoudre ou des pages web que j’ai pu intégrerDans quelle mesure les comportements des ac-lors de cette année. Il ne traitera que très peuteurs actuels du web détermineront-ils la qualitédes conséquences de mon travail pour l’entre- des services et produits numériques de demain ?prise et pour les clients de l’entreprise. Au lieude cela, j’ai choisi de me positionner dans cette Le web étant omniprésent et quasi-libre d’accès,vocation que j’ai embrassé, celle du web et dutoute personne connectée en est acteur et influe« digital », dans une dimension plus vaste quesur son évolution, par un apport direct ou biencelle de l’intégration pure.par un comportement particulier. Cette implica-tion de l’internaute au sein des dynamiques duAu cours de cette année, mon travail, mes étudesweb est un facteur clef de ce que l’on appelleet mes recherches personnelles m’ont permis dele web 2.0. Ce terme regroupe des pratiquesdécouvrir de nombreuses notions et concepts,« nouvelles », tant du coté des concepteursplus ou moins liés au monde du web, mais sur- que des utilisateurs des produits et de servicestout, tous d’une importance majeure quant à lanumériques. On parle de mise en réseaux, dequalité future des produits et services numé- partage, d’interactivité et d’implication du cotériques de demain. Ce mémoire de fin de forma- de l’utilisateur. Du coté des concepteurs, on usetion ressemblera donc plus à un échantillon dede technologies souples et réactives afin d’opti-« mémoires », au sens littéraire du terme, c’est-à- miser l’expérience de l’utilisateur. L’utilisateurdire à un témoignage et à une réflexion person- est de plus en plus au centre du procédé denelle sur un environnement donné et sur une conception. Cette interdépendance étroite entrepériode donnée : l’environnement étant le web le futur utilisateur et le concepteur en devientet ses supports, l’époque, ou plutôt le fragmentparfois une collaboration implicite, rarementd’époque, étant cette année d’alternance au avouée. Les comportements des deux partiscours de laquelle j’ai pu observer l’évolution de sont donc extrêmement déterminant quant à lathéories émergentes concernant autant le webqualité du produit ou service conçu. Les mœursque le fonctionnement global de notre société.et habitudes prises par ces deux acteurs de ladynamique du web sont donc les fondementsInitié par l’armée, structuré par un scientifique,du web d’après, du web de demain.développé par les communautés du mondeentier et enfin instrumentalisé par les marketers,Mais dans la suite de ce mémoire, nous étu-le web en tant qu’application d’Internet, n’a que dierons l’influence précise de ces acteurs, lestrès peu évolué depuis sa création. En effet, lathéories émergentes concernant la créationstructure de 1991, inventée par Berners-Lee,d’applications web (du coté des concepteursn’a toujours pas été abandonnée. Elle n’a faitcomme du coté des utilisateurs) et nous obser-qu’évoluer jusque sa cinquième version. Passant verons également des cas concrets.entre toutes les mains, des plus novices aux plus

5. En ce qui concerne le corps de ce mémoire, Bonne lecture. 5nous examinerons les trois phases principalesde la création web dans lesquelles des évolu-tions ou régressions apparaissent. Nous seronsdonc amenés à voir comment :► Utiliser le web : cette composante vienten premier car l’utilisateur, dans les nouvellespratiques du web, est au premier plan dans leprocédé de conception d’un produit ou serviceweb.► Penser le web : plus que jamais aujourd’hui,l’ergonomie et l’aspect d’une application websont primordiaux car après deux décenniesd’usage du web, l’internaute commence às’habituer à certains standards de navigationet à une certaine élégance graphique. On par-lera également de design et de l’évolution desméthodologies et pratiques qui lui sont propres.► Pratiquer le web : cette partie traitera plusdes concepteurs, des personnes qui créent etintègrent en vue de maximiser la qualité desapplications web, tant dans la performancetechnique que dans l’accessibilité et la facilité denavigation.Ce mémoire contiendra sûrement des termesconservés dans la langue anglaise. Bien que jen’apprécie pas particulièrement les mots anglaisdans un mémoire français, certaines notionssont 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 cetteannée d’alternance et au rôle que j’y ai joué.

6. 6PARTIE I

7. 1 - L’ENTREPRISETout d’abord, après une expérience dans une pe- 7tite structure, je voulais gouter au web à grandeIl y a plus d’un an, ma vie professionnelle com-échelle et, en l’occurrence, en région parisienne.mençait. J’effectuais mon stage de fin d’étudeCela impliquait également de traiter avec desau Nord Est de l’Angleterre, dans un petit stu- clients de renommée internationale. Ensuite,dio de création web du nom de Twisted Studio. depuis mes débuts dans le domaine du web etL’effectif était de huit personnes : 3 associés, 1jusqu’à présent, j’ai toujours voulu conserver unemployé, 1 free-lance et 3 stagiaires. Mon posteprofil technique et artistique, j’ai donc choisi ceétait celui d’infographiste/flasheur stagiaire. poste de développeur web pour aller de paire, àUn poste à mi-chemin entre le graphiste pur mon sens, avec ma licence d’infographie. Enfin,et le développeur web. On m’avait chargé de le fait de travailler dans cette grande structuredévelopper des jeux à portée commerciale, qui était pour moi l’occasion d’observer des stra-maximiseraient l’interaction consommateur/tégies marketing et des travaux de gestion devendeur sur les lieux de vente. Le client interagit projet à grande échelle. J’ai en effet beaucoupalors grâce à son téléphone portable avec des appris de mes discussions et travaux avec lesécrans supportant l’application.nombreux chefs de projets pour lesquels j’aitravaillé.Cette année, en arrivant à Nurun, j’intégrai lasuccursale parisienne du groupe, qui compteà elle seule plus de 150 employés. Les raisonspour lesquelles j’ai choisi Nurun sont multiples.

8. A/ Poupées russesforcer leur présence numérique et ainsi faire8 émerger la marque ou la consolider. On peutNurun, fondée en 1995, est une agence weben partie appeler cela du branding, qui consiste àspécialisée dans le marketing, la stratégie digi-asseoir la puissance d’une marque par son iden-tale et le branding. Elle appartient aujourd’hui à tité. Mais au delà d’une simple prise en chargeQuébecor Média.marketing, Nurun va tenter de générer de l’utili- té. C’est ce qu’on appelle la digital utility, l’utilitéQuébecor Média, fondée en 2000, est unetangible d’un produit ou service numérique. Ceentreprise de communication de masse (télé-concept sera développé davantage dans la partiecommunication, télédiffusion, édition presse). II de ce mémoire.Québécor Média appartient elle-même augroupe Québecor. Souvent, Nurun s’engage à refondre le site du client ou s’attèle à sa création complète. J’aiQuébécor est un grand groupe de média (presse, notamment assisté à de nombreuses créationstélévision, télécommunication, internet) québé-de sites au service d’un client qui désirait lancercois, basé à Montréal. 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).B/ Nurun Enfin, la Search Engine Optimization (dit SEO, L’Optimisation pour les Moteurs de Recherche)Nurun se définit comme une agence digitale est également prise en charge par Nurun, établieglobale (son côté québécois fait qu’on y adopteau début du projet puis révisée suite au ROI. Lavite les termes d’outre-atlantique comme par partie IV de ce mémoire y est consacrée.exemple le « digital » au lieu du « numérique »).Ses activités consistent d’abord à élaborer unestratégie marketing pour ses clients afin de ren-

9. Pour y voir plus clair quant au ton adopté par à améliorer le quotidien de leurs consomma-9l’entreprise, voici le crédo de Nurun, la poli-teurs et à nouer des liens durables avec eux.tique en théorie appliquée : Notre métier, c’est la « Digital Utility ». NotreNOTRE MÉTIER, C’EST LA « DIGITALmission, c’est de contribuer à rendre les marquesUTILITY »vraiment utiles dans la vie de tous les jours.Nous sommes persuadés que la meilleure façon Nurun, comme énoncé plus haut, est une entre-de communiquer les bénéfices de votre marque,prise québécoise à l’origine, et c’est à Montréalc’est d’utiliser le digital pour en imaginer deque se trouve son siège social. Elle possèdenouveaux.des succursales dans tout l’hémisphère nord, dans les villes suivantes : Atlanta, Barcelone,Quand un client nous soumet un brief mar-Madrid, Milan, Montréal, Nancy, Paris, Qué-keting, nous nous donnons les moyens de le bec, Shanghai, Toronto et Turin. Cela offre desreformuler du vrai point de vue du consom- opportunités de collaboration à l’internationalmateur. La recherche de l’utilité digitale vasur les projets. J’ai notamment travaillé à dealors nous permettre de communiquer surnombreuses reprises avec l’équipe italienne dede véritables solutions pour les consomma- L’Oréal Paris Italie et j’ai dû remanier des codesteurs qui en seront vite les ambassadeurs. créés par des développeurs chinois !La bonne information au bon moment, des ex-périences en ligne efficaces, la prise en comptepertinente du phénomène social, des outils digi-taux sur mesure au service des promesses dela marque : autant de moyens qui permettent àNurun de s’appuyer sur sa culture et son métierdu digital pour aider ses clients

10. C/ Marché & concurrence► E-commerce : vente en ligne10Nurun œuvre sur le marché du « digital » àl’échelle nationale (France) et internationale.Ses clients proviennent de tous les secteurs, duprivé comme du public (où il faut répondre àl’appel d’offre).Nurun fait partie de ce qu’on appelle lesmammouths sur le marché français (et mêmeinternational). Elle lutte sur des appels d’offrescontre d’autres grands groupes tels que Fullsix,EURO-RSCG, Publicis et autres consorts.► Stratégie marketingLes clients de Nurun viennent de nombreuxdomaines : automobile, industrie, banques, assu-rances, finances, cosmétique et mode, produitsde grande consommation, médias et divertisse-ment, services, télécommunication, voyages etloisirs, …Voici quelques exemples de clients et les do-maines dans lesquels Nurun est intervenue :D/ Fonctionnement► Corporate : promouvoir le groupe 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

11. développeur iPad entre autres. Deux autres ► De la veille technologique, inévitable dans 11responsables se chargent respectivement de laune agence web. Google est en général notrecellule Flash et de la cellule Intégration et Web- meilleur ami lorsqu’un problème nous bloque.mastering. Un chef des opérations englobe lesDe plus, nombres d’employés intéressés natu-deux cellules. Lors de mes travaux, je collaborais rellement par les nouveautés technologiquesavec des chefs de projet (eux-même en contactécument le web et font généralement partageravec les clients), des administrateurs réseaux,leurs découvertes sur les réseaux sociaux.des webmasters, des intégrateurs, des flasheursmais aussi avec des chargés de communication Par la suite, au sein de la cellule de maintenance,et des responsables de la présence sociale.j’ai pu avoir accès à de nouvelles responsabilités telles que : ► La restructuration et l’ergonomie du site de2 - Rôle et missions gestion interne de Nurun. En effet, cette pla- teforme, permettant à l’ensemble des employésVoici une liste non-exhaustives des tâches que de créer de nouvelles tâches, commençait à êtrej’ai du accomplir à Nurun :obsolète et très peu pratique. Réalisée en Flash, elle était de plus très peu modulable et l’ajout► Le développement de modules interactifs de d’une tâche spécifique pouvait mettre une jour-type diaporama, carrousel ou encore environ- née à intégrer. La refonte en HTML, CSS etnement interactif. Ces modules sont générale-Javascript permettra un meilleur dynamisme,ment des applications Flash et plus rarement deune meilleure modularité et un accès plus rapidel’HTML dynamisé par Javascript.à l’information grâce à une expérience utilisa- teur repensée. Ce travail aura été effectué avec► Des évolutions d’existant tels que des deux autres intégrateurs. Mon rôle à aura étéchangements de collections (e-boutique dansde concevoir le système de gestion : expériencel’habillement), des changements de visuels, de utilisateur, zoning, maquette. Cela sort du déve-contenus éditoriaux. loppement web pour lequel j’ai été embauché, ce qui n’est pas pour me déplaire.► L’intégration de pages HTML pour des sitesweb, des pages Facebook ou encore des news Sur la page suivante, les maquettes incomplètesletters. du système de gestion.► La recherche de bugs, du moins grave au pirecas possible, que ce soit sur une version test ouune version en ligne. Cela consiste à réparer despages mal affichées, à résoudre des erreurs 404de pages non référencées, etc... La phase de re-cherche est ici prédominante en terme de tempsface à la phase de résolution du problème.

12. 12 ACCUEIL CA TÉGORIES

13. ► La passation aux nouveaux stagiaires arrivés blèmes Request Tracker, développé par Best13dans la cellule : explication et description des Practical Solutions. Le logiciel est Open Sourceméthodes et outils de travail et des processus (code accessible et droit à la redistribution). Ilde développement sur les différents comptescomporte une base de données qui stocke lesclients. tickets, quelque soit leur état. La base de don- nées et toutes les autres technologies ayantCes deux dernières tâches, qui eurent lieu durantservies au développement de RT sont libres oula période juillet/août, ont été pour moi les plus Open Source. RT permet aux chefs de projetsintéressantes. En effet, je n’avais pas encore (ou autres employés) de Nurun de créer deseffectué de tâches de conception ni de gestion tickets lorsqu’ils détectent des bugs, ou désirentau sein de mon entreprise. Seulement dans le effectuer des modifications légères sur le sitecadre universitaire. De nature plutôt curieuse,d’un client de son porte-feuille (ensemble desj’avais déjà fait le choix d’être un infographiste clients dont il a la charge).à l’université et un technicien en entreprise. Acela s’ajoute dorénavant quelques aptitudes de Un ticket man sélectionne les tickets par ordreconception et de gestion, domaine vers lequel je d’importance ou par ordre chronologique danssouhaite me diriger. la file des tickets. Une fois le ticket prioritaire identifié, le ticket man se l’assigne. Un ticket3 - Outils & organisationpeut avoir différents statuts :A Nurun, un développeur multimédia inté-grant la cellule de maintenance est appelé Nouveau : personne n’a encore touché à ce ticket.Ticket Man : le type qui fait les tickets. LeOuvert : un ticket man s’est assigné le ticket.Fer-terme est quelque peu péjoratif et le poste estmé : le problème est résolu, on ferme le ticket.surement au plus bas de l’échelle. Toutefois, la Rejeté : la demande n’est pas appropriée.plupart des intégrateurs et flasheurs de Nurun Stagnant : le ticket man manque d’informa-sont passés par là et c’est à ce poste que l’ontions ou est dans l’impossibilité temporaire defait ses armes dans tous les langages du web,résoudre le ticket.et sur la totalité des systèmes de gestion desites web. Ainsi, bien qu’on ne code rarementPour finir, chaque changement de statut estune page entière et que les missions (tickets) commenté et est archivé afin de recréer unesont généralement des mises à jours ou des trame de l’avancement du ticket. Des piècescorrections de bugs, on fait un tour d’horizon jointes peuvent être incluses : le brief avec desde ce qui se fait de mieux - et de pire - dans leschémas, du contenu éditorial ou encore desmonde du web.visuels à intégrer.► Request Tracker► JIRA (de Gojira, le nom japonais de Godzilla !)Un ticket est généralement une mission courte(ou estimée courte par les chefs de projets). IlsNurun a choisi un logiciel de gestion de suivisont centralisés par le logiciel de suivi de pro-à part pour gérer toutes les modifications à

14. effectuer sur les différents comptes de L’Oréal. ► Les systèmes de gestions de sites14En effet, L’Oréal (la célèbre marque de cos-métiques) est le plus grand client de Nurun. Différents outils sont utilisés à Nurun pour hé-Ce client est décomposé en L’Oréal Paris (la berger les sites web des clients et pour effectuerchaîne, qui existe dans de nombreux pays à des modifications, voici les principaux :travers le monde) et en L’Oréal Corporate ( legroupe L’Oréal). Sur ce logiciel, les projets et les - Tortoise SVN : c’est un système de gestion desdifférentes sous-tâches des projets apparaissent versions (SVN). De nombreuses mises à jourclairement. Le système diffère quelque peu desont effectuées chaque mois et cet outil permetRT.d’éviter les conflits de sources. On emprunte les fichiers nécessaires, on les modifie puis onUne fois un ticket créé, le ticket man se l’assigne. les transfert sur le SVN. Ainsi, la personne quiEnsuite, il doit déclarer le début de son inter- intervient ensuite possèdera des sources à jour.vention et le ticket passe à l’état in progress, enprogrès. Une fois le ticket résolu, le ticket man- Site Manager : développé par Microsoft pourannonce la fin de son intervention. Le système l’Oréal Paris, ce logiciel permet de gérer l’inté-de commentaires, d’historique et de pièces gralité des contenus de l’Oréal. Ainsi, un chefjointes est le même que pour RT. de projet peut modifier du contenu web sans passer par un intégrateur.► Gestion de l’emploi du temps - Content Manager : ce type de logiciel per-Comme précisé plus haut, un ticket man tra-met de télécharger puis de mettre en ligne desvaille en général en autonomie. Les tickets étantfichiers. Il est utilisé sur les comptes L’Oréalpris par ordre d’urgence ou chronologiquement. Paris et Kérastase. Un système de verrouillageToutefois, il arrive que le chef de cellule, mon de fichier permet d’avoir la main sur le fichiertuteur Mikael Bauvez en l’occurence, planifieafin que personne d’autre ne tente d’intervenirdes tâches un peu plus longues et les attribue dessus en même temps.à un ticket man. Par exemple : création de mo-dules interactifs, d’un jeu concours, etc ...- Hudson (renommé Jenkins aujourd’hui) : c’est un outil qui se couple avec un gestionnaire deUne feuille de temps doit être remplie pour queversion (SVN). Il permet le déploiement d’unles chefs de projets aient un retour du tempsmême site d’un serveur à un autre. Sur la plu-passé sur chaque tâche. Cette feuille de temps part des sites de l’Oréal Paris, les versions deest une partie du logiciel Changepoint, déve-sites passent d’abord en Intégration puis enloppé par Compuware (entreprise américaine Validation et enfin en Production.de développement de logiciels de gestion). On yplace les tâches effectuées et on indique ensuiteEnfin, en terme de gestion, les sites non gérésle temps passé sur chaque tâche. 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

15. retour en ligne du fichier via le File Transfert ► Microsoft Outlook : le système de messa-15Protocol (FTP), le moyen classique de mettre gerie de Microsoft, pratique pour archiver lesdes pages HTML en ligne. Le logiciel utilisé est nombreux mails reçus chaque jour.FileZilla. ► Litmus : un logiciel de test de News Letter,Les logiciels utilisés sont généralement les afin de vérifier si les différentes boîtes mailmêmes que dans toute agence web. A savoir :(Hotmail, Gmail, Yahoo, …) en supportent l’intégration.► 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 rapideet le plus pratique. Il est utilisé pour l’édition desfichiers 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 éditerpuis re-compiler les projets complexes en Ac-tion Script 3 (le langage de programmation desapplications Flash).► Flash CS3 : un logiciel phare de la suiteAdobe, qui permet la création de bannières ani-mées, d’environnements interactifs, de diapora-mas et autres projets multimédia. Il comprendune interface graphique et une console pourcoder en Action Script. Il est utilisé pour éditerles projets Flash.► Photoshop CS3 : le logiciel incontournabled’Adobe, utilisé pour la retouche d’image, lacréation puis le découpage de maquettes entreautres.► Illustrator CS3 : non installé sur mon posteà l’origine, j’ai fait la demande de ce logiciel decréation graphique d’Adobe afin de réaliser lamaquette du futur système de gestion interne.

16. MOSAÏQUE DES OUTILS 16Photoshop CS3 ▼ Notepad ++ ▼Litmus ▼Illustrator CS3 ▼Content Manager ▼Flash CS3 ▼ Tortoise SVN ▼Eclipse IDE ▼ Hudson ▼

17. 17PARTIE II

18. 1 - UTILISER LE WEBune mauvaise pratique. Car le marketing est de 18 la communication à portée commerciale. Car leA/ État des lieuxweb est inadéquat au support des messages tra- ditionnels des stratégies marketing valables surTrop souvent, les marketers voient le monde du les médias traditionnels.digital, du numérique, comme une transpositiondématérialisée des médias dits traditionnels B/ Explicationscomme la presse, la télévision et l’affichage. Leweb en devient un à côté de ces médias. L’usageLes lois marketing deviennent obsolètes facedu web n’a que très peu évolué ces dix dernières au web. Les internautes ont développé de nou-années en ce qui concerne la demande du client veaux comportements : la liberté de choisiraux marketers : « on passe notre campagne mar- le contenu consulté, la possibilité/le réflexeketing en ligne ». Ainsi, le web se voit inondé de de filtrer l’information pour aller à l’essentiel,bannières Flash et de mini-sites promotionnels la diversité des sources et des opinions et par: il en devient un vulgaire panneau d’affichage, conséquent, l’habitude de comparer.mais moins couteux qu’un vrai panneau d’affi-chage. La seule nouveauté côté client est sonFrédéric Filloux, consultant média et écrivainattirance pour les réseaux sociaux ! De plus, le français, posait cette question dans un articlereprésentant du client en contact avec l’entre-dans le quotidien américain The Washingtonprise a souvent sur lui le poids de la hiérarchiePost :et des habitudes de son entreprise, ce qui limitesouvent les prises d’initiatives et innovations« Why is digital advertising so lousy ? »qu’a le droit de se permettre l’agence web. soit en Français :D’après de récents sondages anglo-saxons, lesmarques accordent en moyenne moins de 10%«Pourquoi la publicité sur le web est-elle side leur budget publicitaire au marketing digital.dégueulasse ? »Autre statistique : plus de 45% du visionnagede média aujourd’hui s’effectue sur le web, lesIl y trouve deux raisons :smart phones et tablettes ayant rendu les utilisa-teurs encore plus nomades dans leur consulta-1 – Un mauvais design : bannières, pop-up,tion du web. D’où vient cet écart de pourcentage mini-sites. Il cite notamment Apple qui créé? D’une part du fait que le client paye et que des pubs coutant des milliers d’euros alors quecela peut parfois suffire aux marketers. D’autre Steve Jobs, son CEO, prône la refonte des stan-part, de la méconnaissance des marketers des dards de la publicité sur le web.possibilités du web aujourd’hui, de ce qu’il peutvraiment procurer à l’utilisateur. 2 – Un manque d’innovation flagrant en terme de marketing digital, l’éternelle transpositionPourquoi cet aparté marketing ? Car le marke-des messages des médias traditionnels.ting appliqué au web de façon irraisonnée est

19. Tim Manners, analyste web, met en évidence un« Make it usefull !» / « Rendez-le utile !»19autre problème qu’il formule ainsi : On parle de digital utility, l’utilité du digital.« Digital sells but doesn’t tell » C/ Digital Utilitysoit en français : Commençons par un cas pratique : le succès« Le web vend mais ne parle pas [au consomma-digital du Johnson’s Babycenter. Johnson’s est àteur] ». Il ne procure pas l’émotion au consom-la base une marque de produits pour bébés etmateur comme peuvent le faire les médias jeunes enfants. Le fait est que Johnson’s n’a pastraditionnels. créé un site de promotion de couche à l’instar de Pampers. Le site de Johnson’s, appelé Baby-Manners remet donc en cause les iAds d’Apple,center, est un site qui accompagne les jeunes ouprésentées il y a peu par Steve Jobs avec pour futurs parents dans les évènements importantsslogan « Emotion + Interactivity ». iAd reprendtels que la grossesse, l’accouchement, les soinsle concept ancestral du mini-site, mais transposédu bébé. On y trouve des tutoriels vidéos poursur iPhone et iPad. Ainsi, on aurait des sortes de changer des couches, les besoins nutritionnelsmini-applications. L’histoire se répète. des jeunes enfants entre 0 et 9 ans et autres conseils. La partie « Shop » est secondaire ou duLe digital selon les analystes (et non selon les moins le semble. Ainsi, Johnson’s a créé un sitemarketers) ne crée donc pas l’émotion chez lequi rend service aux jeunes et futurs parents,consommateur. Ce que l’on appelle le story-tel-ce qui a fait augmenter largement leur nombreling émotionnel, l’histoire émotionnelle d’une de visiteurs quotidiens, et par conséquent lemarque, est diffusé par les médias traditionnels,nombre de ventes de produits pour bébés.le canal le plus puissant étant la vidéo, en terme Johnson’s a créé de l’utilité !de construction de marque. Pour citer une dernière fois l’analyste américainLes slogans ne résolvent pas les problèmes Tim Manners :d’aujourd’hui. L’intérêt du digital, et ce querecherche l’utilisateur (consciemment ou incon-« Provide me value first, then I’ll listen to yoursciemment), c’est une réponse quasi-instantanéepitch » / Montrez moi ce que vous valez, j’écou-à ses problèmes, à ses questions, à son besoin duterai ce que vous avez à dire après.moment, parmi le flot perpétuel d’informationsqui lui parvient.L’utilisateur souhaite spontanément expérimen- ter.Le digital consistera alors en un bénéfice fonc-tionnel, qui prouvera l’engagement de la marqueSur la page suivante, le site Babycenter.auprès de ses clients. Tim Manners résume entrois mots l’impérative caractéristique d’un ser-vice ou produit digital :

20. BABYCENTER : UN VRAI PRODUIT DIGITAL 20

21. Trois termes importants doivent être définis 21lorsqu’on parle d’utilité digitale :► La stratégie digitale : l’intersection de lamarque (le business), des participants et de latechnologie est l’endroit où il est intéressant dedévelopper un nouveau marché, de commu-niquer ou de créer des services utiles. C’est leValue 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 desutilisateurs. C’est le cas de Johnson’s Babycenterou encore de Nike+iPod, l’application de suivide jogging.► L’expérience utilisateur (UX) : le client estdésormais appelé participant, car il est au centredu processus de création et ses retours sontd’une importance majeure.

22. Pour en finir avec Tim Manners, voici les quatre 4 – Utiliser le Crowdsourcing pour trouver 22grands principes et notions clefs de l’utilité digi- l’idée géniale. Le crowdsourcing est, en manage-tale énoncés par l’analyste il y a plus d’un an déjà ment, le fait d’utiliser la créativité, l’intelligencelors d’une conférence TED :et le savoir-faire de chacun à des fins marketing. C’est un échange d’idées avec les gens intéressés1 – Le digital n’est pas un canal, un simple par la marque, elle est animée par son public.vecteur de message. C’est un média qui tend àQue voulez-vous ? Avez-vous de meilleuresprouver l’engagement de la marque auprès duidées ? Telles sont les questions induisant duconsommateur et ainsi lui faire adopter ses va-crowdsourcing. Des outils prévus à cet effetleurs. On ne déverse pas un message sur l’utili- existent déjà, afin de capter les retours dessateur mais on lui apporte un produit ou service utilisateurs. Cette pratique controversée peutréellement utile dans sa vie de tous les jours.récompenser ses participants par des micro- paiements. Une autre limite du crowdsourcing2 – Une expérience et non un message (G.M. est la définition de ce que l’on appelle l’expert.O’Connel, fondateur de Modem Media). L’UXLa question étant de savoir si le participant pos-est au centre de la stratégie digitale. Il est doncsède ou non le savoir ou l’expérience nécessairenécessaire d’avoir un retour quant à la façonpour donner une expertise de qualité.dont les services mis en place interagissent avecl’utilisateur. Créer une UX originale et de qua- Enfin, il faut se poser la question : est-ce quelité ouvre vers plus d’échanges sociaux, vers de je m’en servirais ? L’association de l’histoirenouveaux comportements.émotionnelle de la marque et de l’utilité digitale est la clef d’un lancement de produit ou d’une3 – Lancer un prototype de marque. Trouver construction de marque réussis.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 ducomportement des utilisateurs et le positionne-ment en fonction du marché et de la concur-rence. La vivacité et l’adaptabilité en tempsréel sont donc primordiales dans le marketingdigital. Il est judicieux de lancer au plus tôt lamarque, le produit ou le service en version bétaafin que les gens testent, discutent, émettentdes retours voire des suggestions. On peut parexemple citer Google + et sa console de retourspositionnée en bas à droite de l’interface, per-mettant de signaler des bugs, des défauts ergo-nomiques, etc … Ainsi la marque doit coller auplus près de ce que l’utilisateur attend qu’elle luiapporte.

23. 2 - PENSER LE WEBlutionna les transports de son pays. Il est à23 l’initiative de nombreux ponts britanniques deDans le chapitre précédent, nous avons vu quegrande taille ainsi que de la ligne Great Westernle consultant média Frédéric Filloux expliquaitRailway, qui rallia par voie ferrée l’est de l’An-la nullité de la communication sur le web pargleterre au centre de Londres. Avant la fin deun mauvais design ou du moins, une absence dela construction de cette ligne, il proposa mêmedémarche design. Nous allons donc nous inté- une extension menant jusqu’au port de Bristolresser au design en tant que méthode créativeafin de continuer le voyage en bateau jusqu’à …puis en tant que gage d’esthétisme, le designNew-York !graphique et le design web. Quelque furent leurs rapports à l’esthétique,A/ Designà la technique ou à la fonctionnalité, tous ces pionniers du design avaient tous un point com-Le design, en trois définitions :mun : le fait d’œuvrer dans la création d’objets changeant le quotidien. Avec le temps mais[Puriste] le design : c’est la conception d’un déjà à l’époque de William Morris, les objetsobjet esthétique, fonctionnel et conformedits « design » sont devenus de moins en moinsaux impératifs industriels (web en ce qui nous accessibles au grand public. Empruntant tant àconcerne). l’art qu’à la technologie de pointe, ces objets se sont faits de plus en plus coûteux et aujourd’hui,[Poétique] Le design est du dessin à dessein,les objets design ont perdu leur sens originel,une création esthétique visant à remplir une et réunissent rarement les trois composantesfonction.essentielles : esthétique, fonctionnalisme et fai- sabilité technique. Une chaise rose bonbon en[Simpliste] Le design, c’est rendre les choses plastique recyclé peut être présentée commeplus pratiques, plus belles et plus vendables !« design ». Le design ne se préoccupe plus que de l’image et de la mode, c’est un outil deLe design est né au beau milieu du XIXe siècle,consommation. Il en résulte souvent la créationen pleine révolution industrielle. Son père pour-de quelques objets à petite échelle alors que lesrait être William Morris, qui dans des ateliers en précurseurs du design pensaient les choses àmarge des manufactures industrielles, concevaitgrande échelle ou en grand nombre, et ce pourdes objets de qualité, esthétiques et surtoutchanger le monde.fonctionnels. Il est le co-fondateur du mouve-ments Arts & Crafts, de l’art et de l’artisanat, Heureusement, depuis quelques années, la son-de l’esthétique et de la technique. Suivront denette d’alarme a été tirée concernant le design.nombreux grands hommes tels que le Corbusier C’est d’ailleurs dans le domaine du web que,(fonctionnalisme, Bauhaus), Raymond Loewydevant sa propre dégénérescence, certains ana-(« la laideur se vend mal ») et bien d’autres. lystes et consultants médias prônent un retourEn Angleterre, on parle d’Isambard Kingdom à la pensée design, et non au design. En anglais,Brunel, ingénieur en industrie civile, qui révo- c’est le design thinking.

24. B/ Design thinkingcitoyens d’un quartier anglais afin d’en augmen- 24ter la qualité de vie. Comme le proclame TimLe design thinking est une méthodologie pourBrown : « Le design est une chose trop impor-résoudre des problèmes et ainsi générer detante pour être exclusivement confiée à desl’innovation. Pour certains, c’est appliquerdesigners ». Il doit être placé entre les mains deles méthodologies et les questions originellestous.du design à n’importe qu’elle situation. Voiciles points essentiels (le processus complet enD’un point de vue Maslovien, on pourraitannexe) du design thinking énoncés par Timpresque dire que le design thinking influe surBrown, CEO d’IDEO : la base de la pyramide ! En effet, si le designthinking tend à améliorer notre quotidien, il► Le design doit être centré sur l’humain, afin influerait sur les besoins physiologiques et dede lui changer la vie, de la lui faciliter. sécurité en priorité !► Le design n’est pas que de l’ergonomie. Il doits’adapter à la culture des utilisateurs concernéset 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 besoinhumain.► Le prototypage accélère l’innovation. Il estnécessaire de confronter son prototype de pro-duit au monde, à son environnement, pour enapprécier son utilité (et non sa simple viabilité).Il faut penser en faisant, et non réfléchir à quoifaire.► De la consommation à la participation. Larelation passive du consommateur par rapportau créateur du produit tend à s’effacer. Le clientdevient participant. Il ressent ainsi l’engagementLe web répond aux impératifs de la pensée de-des créateurs du produit à le satisfaire. sign par le fait qu’il jouit d’une forte adaptabilité,de moyens de gérer la participation d’une com-Le projet Beveridge 4.0, en référence à l’éco-munauté et d’une logique de version et d’évolu-nomiste anglais William Beveridge qui tenta detivité des produits et contenus. Le design est némettre en place un Etat Providence en Angle-durant l’essor de l’ère industrielle. Le renouveauterre durant la seconde Guerre Mondiale, metdu design naitra de l’essor du digital.en place une collaboration des designers et des

25. Dans le domaine du web comme dans de nom- étendu. C’est un appareil de consommation de25breux autres domaines impliquant des business,média. Frédéric Filloux, dans un article pourles solutions actuelles deviennent obsolètes. LeSlate.fr, singe le patron d’Apple :monde est confronté à des problèmes clima-tiques, démographiques, monétaires. Le web« Voici donc l’iPad, construit sur le principesubit l’obsolescence des moyens marketing,propre à Steve Jobs: je me fiche des études del’infobésité, les problèmes de gestion des don- marché; je ne demande pas au client ce qu’ilnées personnelles et des problèmes de qualité veut, mais je conçois ce qui le fera rêver. Le dé-de produits. Face à ces nouveaux problèmes, sir, l’envie, avant la rationalité consommatrice. »nous devons trouver des solutions nouvelles etdonc nous offrir de nouveaux choix. On parleD’une utilité relative, il y a des chances pour quede pensée intégrative.l’iPad soit un produit de la pensée intégrative(ou a pire, un coup de chance de Steve Jobs), ilC/ Pensée intégrative n’est en aucun cas en accord avec les principesdu design thinking, vue son utilité relative.Pour certains analystes et autres intellectuels,nos inférences (processus de réflexion menant à En combinant la pensée design et la penséeune décision) sont cloisonnées par les modèlesintégrative, nous nous donnerions la possibi-que nous a inculqué notre société. Admettre lité d’accéder à de nouveaux choix et donc àque ces modèles sont exactes comme on nousde nouvelles solutions pour résoudre les pro-l’a enseigné, c’est éviter l’inquiétude de penser blèmes et répondre aux besoins. Le but étantque ces modèles ne sont pas optimaux, et qu’il yde créer des produits esthétiques, pratiques eta une meilleure idée ailleurs.innovants en tenant compte du contexte et desimpératifs techniques. Cela est valable dans laLa pensée intégrative est un processus de ré- stratégie digitale comme dans l’élaboration deflexion divergent, en opposition au processus scenarii utilisateurs. Un jour, les standards mishabituel convergent. On va généralement faire en place seront obsolètes. Selon Roger Martin,en sorte d’approcher la solution optimale. La chercheur à la Rotman School of Managementpensée intégrative prône un autre comporte- de Toronto, admettre qu’un modèle n’est pasment consistant à aller chercher une solution optimal est le premier pas vers le progrès.ailleurs. Face à deux choix incompatibles, lecompromis est impensable, il y a une solutionmeilleure.L’iPad serait-il un enfant de la pensée intégrative? Est-il l’autre solution que le choix « ordinateurportable ou smartphone » ? L’iPad ne permetpas de travailler cela est certain : entamer lasaisie d’un long texte est impensable sur un cla-vier similaire à celui de l’iPhone, bien que plus

26. D/ Infographie L’éxergie graphique serait donc, par analogie, le 26 seuil minimal de représentation graphique pourLe design web, plus que dans les autres do-atteindre le niveau d’expressivité maximal.maines, est en perpétuel changement, étantdonné qu’il est en partie lié aux avancées tech- Dans la suite, des infographies et posters mini-nologiques. Les tendances dans ce domainemalistes mais très efficaces.sont souvent fixées par les travaux des agencesweb et par les expérimentations des graphistesou développeurs sortant des sentiers battus. Lescréations originales sont vite propagées, quandelles sont remarquées, grâce aux réseaux sociauxet aux nombreux awards du web : site du jour,FWA. La création web permet également desponts artistiques avec d’autres domaines (lemotion 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éepar Apple et l’iPhone. Son interface simple,ergonomique et intuitive a inspiré les web desi-gners. Le web sur ordinateur a donc tiré desleçons des applications sur smartphone.Cette tendance à la simplification et au mini-malisme était déjà une tendance que j’observaisdans les arts graphiques ces trois dernièresannées. En effet, de nombreux artistes web ouprint 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 etaime aller à l’essentiel. J’ai appelé ce phénomènel’é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, alorsce système est en équilibre thermodynamique.

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

28. EXERGIAN : TRAVAUX 28Identité graphique d’un cabinet d’architecture autrichien.

29. SAUL BASS : AFFICHE29Saul Bass est un des premiers graphistes a avoir créé des graphismes minimalistes aumilieu 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).

30. NICK TASSONE : AFFICHES 30Graphiste plus actuel, Nick Tassone (US) suit le courant minimaliste avec une séried’affiches de films inspirés de Stephen King.

31. 3 - PRATIQUER LE WEB nombre, aux mal-voyants comme aux per- 31 sonnes valides.J’ai choisi ce verbe pour souligner l’aspect pra-tique de cette dernière partie. Les personnes qui► La standardisation : dans le sens technolo-« construisent » les sites web et autres applica-gique. C’est faire en sorte d’utiliser des technolo-tions web sont responsables de la qualité de ces gies libres, répandues et compatibles entre ellesservices. Ces personnes sont les développeurscomme les serveurs Apache, les script PHP, lesweb et les intégrateurs. Leur mission est de faire bases de données MySQL, etc …en sorte que les produits qu’ils réalisent soientstables, modulables, rapides à charger, appau- ► Les méthodes de mesures : afin de voirvrissables, adaptatifs et référencés naturelle-l’impact des efforts fournis, et de comparer lesment. Un travail rigoureux de ces techniciensrésultats effectifs aux résultats attendus. Googlespécialisés contribue chaque jour à l’élévationAnalytics est un exemple de suivi du trafic d’unde la qualité des services présents sur le web.site.A/ Minimum syndicalCe qui suit sera centré sur la partie technique de la création de sites web. Elle devrait toutefoisAvant d’entrer dans la partie technique, je tenais être compréhensible de tout un chacun.à faire référence à ce qu’on pourrait appeler « leminimum syndical » lorsqu’on entreprend laB/ Constructioncréation d’un site web. Ce sont les principauxpoints à optimiser : Souvent comparée à l’architecture, la création de site web en reprend certaines règles, à com-► L’architecture de l’information : c’est sure-mencer par des bases solides et le respect desment la pierre angulaire de la création web. C’est techniques enseignées. Nous allons donc passerune démarche d’organisation de l’information en revue les points techniques garantissant unsous une forme pertinente. Elle implique laweb stable et pertinent, un web de qualité.constitution de règles de regroupement et delibellés optimisant l’expérience de l’utilisateur. Tout d’abord, il est important de séparer le fondOn y détaille aussi les règles de navigation pourde la forme. Le web est principalement consti-chaque type de navigation (globale, secondaire,tué de deux langages essentiels, l’HTML et lecontextuelle, etc …).CSS. Le premier sert à organiser le contenu et le second à le mettre en forme. Il est convenu de► L’ergonomie : c’est concevoir des interfaces les coder séparément pour que l’écriture de l’unen fonctions des acquis des utilisateurs, de leurn’influence pas l’écriture de l’autre. L’HTML, lecontexte physiologique et de leur perception fond, doit être codé avant le CSS, la forme.afin de maximiser leur expérience du site. En ce qui concerne l’écriture du contenu, il se► L’accessibilité : comme son nom l’indique, doit d’être structuré sémantiquement, grâce auxc’est rendre accessible le site au plus grandbalises HTML appropriées. Il existe en effet une

32. hiérarchie de balisage qui permet de faire res-commencent à émerger tels que les Mediaque- 32sortir des éléments importants et de pondérerries. Ce sont des conditions de taille d’interfacele contenu textuel. Les pages codées sont certes qui chargent différentes mise en page afin delues par des humains, mais ce sont des machiness’adapter à la résolution de l’écran supportantqui les référencent et les interprètent. Cette le site.organisation sémantique est toutefois facilitéeavec la généralisation des Systèmes de Gestion Techniquement, on parle également d’interfacesde Contenu, qui automatisent la création des « appauvrissables ». Ce terme prends à contre-balises appropriées. Il faut tout de même bien pied celui d’interfaces Rich. Le Rich Mediachoisir les termes employés. Plus le poids dudésignant des applications regroupant plusieursterme est élevé dans la hiérarchie, plus son exac- média tels que le son, l’image et la vidéo. Cetitude comptera dans le référencement du site. sont généralement des environnements très in- teractifs, souvent réalisés en Flash. Leur défautEnsuite, devant la multiplication des supports,réside dans le fait que Flash n’est pas supportéil faut se diriger vers un développement pluri-sur tous les appareils et qu’il est lourd à exécu-média avant un développement spécifique. Enter. De plus, sans souris, une interface Rich esteffet, les employés travaillent souvent devant rarement manipulable. Une interface appauvris-leur ordinateur de bureau et ont en permanence sable est capable de s’adapter à des contextesbesoin d’un accès web pour y consulter des de navigation défaillants du coté de l’utilisateur,ressources, l’écran de bureau est un standardcomme une connexion mauvaise ou encore untoujours bien établi d’une part. D’autre part, les blocage des scripts Javascript (qui permettentchiffres concernant les mobiles sont en hausse de dynamiser un site web), en perdant certainspermanente : éléments graphiques ou en mettant en place une navigation alternative à l’originale.► 50% des possesseur de mobile ont accès àinternet.Enfin, il est bon de déléguer et de mutualiser les parties de la création du site qui peuvent l’être.► Un « mobinaute » se connecte en moyenneLes Systèmes de Gestion de Contenu tels que3,4 fois par jour. Wordpress ou encore Joomla permettent de déployer en peu de temps un site fonctionnel.► 25 % des mobinautes ont déjà effectué un De nombreux modules sont disponibles telsachat via leur mobileque des galeries photos, des systèmes de votes, etc …Sondage d’avril 2011 par GroupM et SFR RégieLes technologies existent pour gérer ces nom-breux contextes de navigation. Une grande par-tie des propriété CSS valides actuellement sontsouvent omises. Des moyens d’adaptation dela forme du produit au terminal de l’utilisateur

33. C/ Démarche qualité sémantique optimisée.33J’ai jugé bon d’ajouter en cette fin de partieLe référencement des pages Google s’effectuedes conseils donnés par Elie Sloïm, patron de par le Google Bot, qui vient effectuer un crawlTEMESIS, lors d’une conférence du Paris Web (parcourir) sur les pages du site, en repérant2010, concernant les choses à ne pas faire dans l’index dans un premier lieu. On peut créer unune démarche qualité :site map, une liste des pages du site, afin de faci-liter le crawl du Google Bot, et donc améliorer► Éviter le rejet global : d’une technologie, les résultats de son passage. A l’inverse, l’accèsd’une conformité et de l’accessibilité. Obtenir au page que l’on ne souhaite pas référencer peutun site qui marche est à la portée de beaucoupêtre interdit au Google Bot en le précisant dansd’agences. Cela n’en fera pas un site de qualité. un fichier robot.txt.► Éviter la surqualité : le fait d’être très bonLe plus important est de remplir et d’utiliserdans un domaine particulier n’est pas forcément les balises avec soin. Il en existe de quatreun atout pour une agence web, bien qu’il l’esttypes :pour des experts consultants spécialisés : enréférencement par exemple. Il est conseillé à ► fondamentales (html, head, body)une agence de monter ses niveaux d’expertisede façon homogène et non d’entretenir une ► entête (title, méta),qualité principale.► structure (a, p, hn, ul, table),► Éviter le rejet technologique : passer à cotéd’une technologie, c’est priver l’utilisateur d’une ► média (img, script, embed, object).expérience optimisée.Ces facteurs peuvent entraver fortement le► Éviter l’exclusion et le déplacement de référencement :contenu : c’est par exemple l’externalisationd’une partie des contenus du site, comme les► Une arborescence incohérentevidéos sur Youtube par exemple.► Les images (pas de prise en compte par leD/ SEOBot)Le dernier paragraphe de cette partie sera► L’absence de balises sémantiquesconsacrée à la SEO, l’optimisation d’un sitepour les moteurs de recherche. Cette partie très► Le contenu dupliquétechnique est toutefois très importante. Un sitebien référencé naturellement ne sera pas seule- ► Les redirections inadaptéesment un atout pour se positionner sur Google,mais ce sera également le gage d’une structure► Du contenu affiché selon l’adresse IP

34. ► Les splash screen, ils sont à éviter.Pour conclure, en terme de référencement, l’im- 34 portant est de respecter les normes en rigeur.Ces éléments bloquent les moteurs :Le W3C, le World Wide Web Consortium, est un organisme qui fixe les standards en terme► Le Flash de balisage web et d’application des styles CSS. Il propose des outils tels que le W3C Valida-► Les plugin tor pour vérifier si le code est valide, c’est à dire qu’il respecte ces normes. Un autre outil,► Les scripts JS et Ajax moins connu, est le WCAG, qui permet de rendre compte de l’accessibilité d’un site. Grâce► Les formulairesà ces deux outils, les développeur ont donc les moyens de coder proprement et ainsi de garan-► Les robot.txt configurés tir la qualité de leurs créations web.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

35. Conclusion généraleEn conception, on pense dorénavant expérience35 utilisateur (UX). Les études préliminaires à laLes clients et leur service communication n’ontcréation d’un produit ne peuvent être menéespas assimilé que le web n’est pas un média tradi-sans prendre en compte ce « participant ». Ationnel. Il ne délivre pas un message mais procure l’avenir, on concevra les choses en grand. Lesune expérience. Bien qu’il y ait eu des succès deproduits digitaux devront être utiles, rendre desbrand-building sur le web et que des méthodestâches plus simples et rapides. Nous devonssont en train d’émerger, ce n’est toujours pas leapprendre à positionner la valeur, à trouver l’en-média le plus efficace dans cette discipline. La droit propice à un nouveau marché. Grâce à lastratégie digitale vient renforcer efficacementpensée design, nous devons prendre en comptela marque existante et prouve son engagement le contexte de navigation de l’utilisateur (no-auprès de l’utilisateur. Ces recherches ont donc madisme, appareil supportant le produit), sonrépondu à mes interrogations par rapport auenvironnement (wi-fi inaccessible, climat) et safait que Nurun ne suit uniquement des marquesphysiologie (position debout, main occupées,existantes. La plupart des clients n’ont pas dehandicap). La pensée intégrative appliquée tendconnaissance des business web et doivent doncà nous faire rechercher des solutions nouvellesêtre éduqués, afin qu’ils comprennent l’impor- et nous apprend à ne pas nous contenter detance de procurer une expérience nouvelle au compromis. Elle nous incite à sortir des mo-consommateur, au lieu de l’abreuver de mes-dèles et des conventions que notre milieu nous asages qu’ils voient déjà le reste du temps dansinculqué. Aussi, après vingt ans d’usage du web,les médias traditionnels.on ne peut plus tromper l’internaute en terme d’interface. Il s’est habitué à des standards et àComme nous l’avons vu, les concepteurs sontune qualité graphique minimum.autant coupables que les clients de la régressiondu web, si ce n’est plus, car ils connaissent le En management, les agence web de toutesdomaine. Leurs problèmes qualitatifs peuvent tailles se doivent d’adapter leur démarche quali-provenir à la fois d’un mauvais management,té à notre époque. On ne peut plus se contenterde mauvaises méthodes de conception et deaujourd’hui du site qui marche. Il doit être va-mauvaises pratiques techniques. Un dernier élé-lide, accessible, ergonomique et surtout, utiliserment pouvant entrainer de mauvaises pratiquestoutes les technologies disponibles pour assurersont les facteurs liés coût et temps, parfois peusa fonction et ainsi optimiser l’expérience decompatibles avec les exigences du client. De lal’internaute et du mobinaute. Les agences webmême façon que pour la stratégie marketing, la doivent monter leurs niveaux d’aptitudes derelation envers le client doit être pédagogique. tous les domaines du web simultanément. L’ho- mogénéité des critères de la démarche qualitéAu cours de ce dossier, nous avons parcouru lesen permet l’évolution globale. On ne fournirafondamentaux de la qualité web et nous avons bientôt plus un produit mais un prototype depu observer que dans tous ces domaines, rigu-produit, destiné à évoluer selon les résultats deseur, bon sens et créativité sont indissociables. mesures et avis des utilisateurs.

36. Enfin, techniquement, la tendance est au retour36à la rigueur. Cela commence par la fin des « mou-tons à cinq pattes ». Les profils doivent tendreà se spécialiser. Un intégrateur ne se chargerapas de développement PHP complexe, le webdesigner ne codera pas. Les outils de validationdoivent être utilisés à chaque version du pro-duit. L’écriture web doit être maitrisée devantl’automatisation des processus de recherche afinde diluer le chaos d’informations présent sur latoile. Nous concevons aussi ces produits pourque les machines trouvent ce que les humainscherchent.Les standards et technologies libres doivent êtreutilisées car sur le web, les standards techniquesn’empêchent pas la prise d’initiatives et l’origi-nalité mais les renforcent.De la combinaison de la rigueur technique etde l’originalité dans les processus de conceptionpourrait donc naitre un web de meilleur qualité.Il nous suffit d’utiliser nos acquis et de prendredu recul par rapport aux modèles établis pournous ouvrir à des nouvelles méchaniques deconception. L’opportunité quotidienne estdonc entre nos mains pour produire un webplus clair, plus stable et surtout, plus innovant.

37. SOURCES 37Pour écrire ce mémoire, je me suis inspiré des Web UXarticles que j’ai pu lire au cours de cette année,des conférences que j’ai pu visionner, de meshttp://www.web-ux.org/observations personnelles sur divers projets uni-versitaires ou professionnels et enfin des notes Mediaquerieset blogs générés par mon entreprise, Nurun. http://www.mediaqueri.esDFRLhttp://www.digitalforreallife.com/OWNIhttp://owni.fr/#aujourd-huiTED Talkshttp://www.ted.com/talksInterview de Roger Martinhttp://www.ted.com/talksParis Web et sa chaîne Daily Motionhttp://www.paris-web.fr/Wikipédiahttp://fr.wikipedia.org/Slatehttp://www.slate.fr/The Washington Posthttp://www.washingtonpost.com/

38. Glossaire technique38Action Script 3.0 : l’Action Script 3 (as3) est leMySQL : c’est un système de gestion de baselangage de programmation utilisé pour des ap- de données libre très répandu.plications comme Adobe Flash et Adobe Flex. Ilpermet de créer des applications interactives enPHP : ou Hypertext Preprocessor, est un lan-animant des MovieClip (éléments graphiques) gage de programmation de scripts permettantet en incorporant des médias tels que le son ou la création de pages dynamiques via un serveurla vidéo. Ces applications répondent égalementHTTP.aux évènements souris et clavier de l’utilisateur.Son usage actuel est contesté, étant donné qu’ilRich Media : des applications qui regroupentn’est pas pris en charge sur de nombreux appa-différents médias et possèdent une certainereils Apple.interactivité.Adobe Flash : anciennement Macromedia SWF : format de publication de Flash qui peutFlash, c’est un logiciel dont le lecteur fonctionne être lu grâce à Flash Player, présent sur 95 %sur la plupart des navigateurs. Il permet la créa-des navigateurs.tion d’animations, de jeux et d’applicationsRich Media. Son langage de programmation estXML : Extensible Markup Language, c’est unl’Action Script 3.langage de balisage qui sert surtout à stockerdes données en structure arborescente.Apache : c’est un serveur HTTP (le protocolestandard du web qui permet d’interpréter l’HT-ML) très répandu et libre.Eclipse : c’est un IDE (Environnement deDéveloppement Intégré) écrit en Java fonc-tionnant sur un système de plugins (modulesd’extension) permettant de créer des projets dedéveloppement.HTML : l’HyperText Markup Language estle langage de balisage permettant d’écrire dehypertexte, le format de données du web.Javascript : c’est un langage de programmationde scripts qui permet d’ajouter de l’interactivitéaux pages web classiques (HTML/CSS). Il estassez proche de l’Action Script 3 et a d’ailleursles mêmes origines que ce dernier.

39. 39ANNEXES

40. DESIGN THINKINGsessions de brainstorming. Pas de jugements, 40 beaucoup de débats. Mener un problème à laProcédé créatiffois en brainstorming.Le design thinking est à la fois un procédé créa-► Prototypagetif et une méthode de résolution de problèmes.Les ateliers créatifs originels de design thinking Combiner, étendre et affiner les idées. Créerreprennent en fait les règles de brain stormingplusieurs versions. Recueillir les retours desclassique que l’on trouve par exemple dans ledifférents groupes test. Présenter les idées auprocédé de création publicitaire. Pas de juge- client. Rester objectif et avoir du recul. Tou-ments, premiers jets d’idées, on garde toutesjours garder le prototype actuel prêt pour uneles idées, ... On encourage de plus les phases présentation.de prototypage. Le procédé est organisé en septétapes, bien qu’un ordre de raisonnement soit► Objectifsétabli, le suivi de cet ordre n’est pas obligatoireet ces étapes peuvent être traitées indépendam-Garder en tête les objectifs initiaux. Mettre dement, répétées plusieurs fois. Voici donc cescôté les affects et les préjugés. Éviter les com-sept phases et les actions qu’elles comportent : promis. La solution la plus pratique n’est pas toujours la meilleure. Choisir des idées fortes.► Définition ► ImplémentationDéfinir le problème à résoudre S’accorder surle public visé. Traiter les problèmes dans leurFaire une description des tâches. Planifier lesordre de priorité. Déterminer les critères d’ac- tâches. Déterminer les ressources affectées auxcomplissement du projet. Etablir un glossairetâches. Assigner les tâches. Exécuter les tâches.des termes clefs.Recetter le produit.► Recherche► ApprentissageRéviser l’historique du problème et les obstaclesMutualiser les retours des consommateurs. Dé-existants. Collecter les exemples de tentativesterminer si la solution résout les objectifs. Dis-antérieures de résolution du problème. Listercuter des choses à améliorer. Jauger le succès dules différents acteurs du projet et leurs avis. Dis- projets et effectuer des mesures. Effectuer de lacuter du projet avec le public cible.documentation.► IdéationIdentifier les besoins et motivations des uti-lisateurs finaux. Générer autant d’idées quepossible pour résoudre ces besoins. Créer des