Ergonomie & Architecture de l ’information

1. Ergonomie & Architecture de l ’information Christophe Marand. Tout droit reservés. Version : 1.1 - février 2008

2. Programme Jour 1 (matin) • 3 stratégies de com • améliorer son image de marque • accroître ses ventes • optimiser ses relations clients • L’ergonomie, préambule • Situer l’architecture de l’information dans le projet • Les méthodes de l’ergonomie en phase amont • Audit de site [+ ACTIVITE] • Création de personas[+ ACTIVITE]

3. Programme Jour 1 (après midi) • Les méthodes de l’ergonomie en phase de préconception • Tests utilisateurs • Tri par cartes [+ ACTIVITE]

4. Programme Jour 2 (matin) • Les composants de l’A.I. : organiser, nommer, classer, système de recherche • Comment classer, selon quels critères, pertinence des critères selon le contexte • Les modes de recherche : les différentes stratégies pour chercher l’info (interpage, intrapage, articulation moteur/site) • Organiser l’information à l’écran

5. Programme Jour 2 (après midi) • La Navigation • Les différents mode de navigation : principale, secondaire, locale, contextuelle • La mise en page de la navigation • L’affordance • Ergonomie des textes et des animations • Autour de l ’ergonomie • La publicité, ce qu’elle change • Google, le référencement et l’A.I. • Les contraintes diverses qui impactent l’ergonomie & l’A.I. • Stratégie projet, niveau de décision, et resistances

6. Pauses Plus qu ’une heure ...

7. Les stratégies d'information et de communication INTERNET MARKETING Parution: Octobre 2007 Prix: 45€ Elenbi Editions ISBN :978-2-914901-12-3 632 pages

8. Tendances 1. Les communautés : nouveau levier de la relation client 2. Bouche-à-oreille et influenceurs 3. Advergaming : Bienvenue dans le 7e media 4. Le web 2.0, effet de mode ou révolution ? 5. Sommes-nous tous égaux devant le marketing viral ? 6. Vidéo et rich media, ce qui a changé 7. Le mobile : un avenir prometteur porté par les technologies 8. Media on demand, ou la fin de la réclame ?

9. Stratégie 1 : AMÉLIORER SON IMAGE DE MARQUE Stratégie 2 : ACCROÎTRE SES VENTES Stratégie 3 : OPTIMISER SES RELATIONS CLIENTS 3 axes stratégiques de communication

10. Stratégie 1 : AMÉLIORER SON IMAGE DE MARQUE METTRE EN PLACE DES OPÉRATIONS DE NOTORIÉTÉ INVENTER DES DISPOSITIFS PARTICIPATIFS GAGNER EN PRÉSENCE ET EN VISIBILITÉ Stratégie 2 : ACCROÎTRE SES VENTES Stratégie 3 : OPTIMISER SES RELATIONS CLIENTS 3 axes stratégiques de communication

11. 1. Améliorer son image de marque 1.1. METTRE EN PLACE DES OPÉRATIONS DE NOTORIÉTÉ • Développer sa notoriété auprès d’une cible de jeunes urbains actifs en jouant sur la complémentarité entre deux dispositifs online - Nissan • Développer sa notoriété grâce à un dispositif original et décalé - Trobizar • Mettre en place une opération d’e-mailing vidéo géolocalisée - Le 118 000 • Lancer une nouvelle gamme en créant un univers interactif original • Lancer une marque via un dispositif viral - Dodge, www.lesyndromedubelier.com • Mettre en place une stratégie globale de marque grâce à une plateforme interactive - 1664 • Une refonte de site qui permet d’allier renouvellement de l’image de marque et hausse des ventes - Club Med • Le lancement d ’un jeu concours associé à un evenement sportif pour refleter les valeurs d ’une marque - Le Coq Sportif, http://www.singforrugby.com/

12. 1. Améliorer son image de marque 1.2. INVENTER DES DISPOSITIFS PARTICIPATIFS • Créer le buzz grâce à un dispositif interactif et participatif (Superman returns) • Conquérir un nouveau public grâce à un blog de marque au contenu éthique et informatif (Saab) • Créer un site de la beauté engagée pour enrichir ses relations clients (Clarins) • Créer le buzz grâce à un lancement virtuel sur Second Life (Jean Paul Gaultier) • Reconquérir une cible grâce à une opération de détournement de soi (StarHack) • Créer un bouche à oreille exponentiel autour du lancement d’une chaîne internationale (France 24) • Créer le buzz autour du lancement d’un produit via un débat participatif en ligne (Syriana)

13. 1. Améliorer son image de marque 1.3. GAGNER EN PRÉSENCE ET EN VISIBILITÉ • Rajeunir son image de marque, recruter et fidéliser grâce à un dispositif e-commerce - Descamps 307 • Comment le web apporte une réponse complémentaire au spot TV sur un produit de grande consommation -Pattex 313 • Développer une présence de marque dans l’espace mobile - Fauchon 317 • Proposer un service complémentaire sur téléphone mobile - Le Revenu 323 • Lancer un produit sur une cible jeune via une campagne publicitaire événementielle - Coca Cola Burn 327 • Trouver un positionnement différenciant pour un site complémentaire à un magazine papier - Studio Magazine 331

14. Stratégie 1 : AMÉLIORER SON IMAGE DE MARQUE Stratégie 2 : ACCROÎTRE SES VENTES Stratégie 3 : OPTIMISER SES RELATIONS CLIENTS 3 axes stratégiques de communication

15. Stratégie 1 : AMÉLIORER SON IMAGE DE MARQUE Stratégie 2 : ACCROÎTRE SES VENTES INCITER À L’ACHAT ET RECRUTER DÉVELOPPER SES VENTES EN LIGNE SE DIFFÉRENCIER Stratégie 3 : OPTIMISER SES RELATIONS CLIENTS 3 axes stratégiques de communication

16. Stratégie 2 : Accroître ses ventes 1. INCITER À L’ACHAT ET RECRUTER • Trouver des moyens innovants pour recruter de nouveaux sociétaires : pourquoi choisir l’emailing ? - MAIF • Recruter grâce à l’achat de mots-clés sur Google - Total • Mettre en oeuvre une stratégie e-crm pour recruter et mobiliser - UMP • Augmenter son chiffre d’affaire grâce au search marketing - Ouest France • Recruter une base de donnée opt-in via une opération mêlant mécanique de parrainage viral et rich media- SFR – La pyramide des cadeaux • Inciter à l’achat et recruter grâce à un site communautaire - Planet Vertbaudet • Créer le buzz dans le secteur du luxe via une mécanique énigmatique centrée sur un site événementiel et un dispositif media multi-leviers - Lancôme

17. Stratégie 2 : Accroître ses ventes 2. DÉVELOPPER SES VENTES EN LIGNE • Améliorer ses performances via une campagne d’e-mailing - EasyJet • Mettre en place un dispositif de marketing direct pratiqué de l’aval vers l’amont - Expedia • Créer un dispositif de lancement basé sur un site e-commerce aux objectifs de notoriété - L’Avion • Recréer de l’intérêt pour une marque grâce à un dispositif interactif ludique - SNCF • Créer un site de e-commerce grand public efficace sans négliger la proximité client - Boostore • Mettre en place une plateforme d’achat sur mesure d’assurances voyage sur Internet - Europ - Assistance • Réaliser un transfert de référencement en amont de la refonte d’un site - King Jouet

18. Stratégie 2 : Accroître ses ventes • 3. SE DIFFÉRENCIER • Inciter à l’achat grâce à la créativité d’une campagne de publicité en ligne - La Redoute • Créer le buzz grâce à une vidéo virale sur mobile - British Airways • Lancer un produit via un dispositif vidéo - Microsoft LifeCam • Mettre en place un portail Rich Media Mobile - M-Stars • Reconquérir une cible via un discours décalé - Manix (http://www.tropdeplaisir.net/) • Passer d’une stratégie media à une stratégie bi-media print/Internet - Gpe France Agricole • Créer une complémentarité entre tendance 2.0 d’information participative et valeur éditoriale - LCI.fr • Lancer un produit via un dispositif mix-media bannière/TV -Mac Donald’s

19. 3 axes stratégiques de communication • Stratégie 1 : AMÉLIORER SON IMAGE DE MARQUE • Stratégie 2 : ACCROÎTRE SES VENTES • Stratégie 3 : OPTIMISER SES RELATIONS CLIENTS

20. Stratégie 1 : AMÉLIORER SON IMAGE DE MARQUE Stratégie 2 : ACCROÎTRE SES VENTES Stratégie 3 : OPTIMISER SES RELATIONS CLIENTS 1. ETABLIR LE DIALOGUE 2. MENER DES PROGRAMMES RELATIONNELS 3. AMÉLIORER SA CONNAISSANCE CLIENT 3 axes stratégiques de communication

21. Strat. 3 : Optimiser ses relations clients 1. ETABLIR LE DIALOGUE • Cibler en précision grâce à un dispositif mobile incluant MMS et Internet mobile - Sony Ericsson • Accompagner le lancement d’un site Internet d’une visite guidée en vidéo - SFR • Promouvoir une image innovante grâce à une application virale rich media sur mobile - Brune • Collecter des contacts prospects à travers un discours pédagogique - Futuroscope • Recruter des prospects qualifiés via une campagne d’e-mailing - Pierre&Vacances • Séduire et créer le buzz via une opération multi-canal basée sur l’autodérision - Comité Régional du Tourisme Paris Ile de France • Toucher une nouvelle cible grâce à un dispositif Web et mobile ludique et décalé - Le Crédit Lyonnais

22. Strat. 3 : Optimiser ses relations clients 2. MENER DES PROGRAMMES RELATIONNELS • Développer une préférence de marque grâce à un dispositif Internet fondé sur le divertissement et une forte interactivité - Mikado • Mettre en place un dispositif de fidélisation via une campagne automatisée - L’Homme Moderne • Mettre en place d’une stratégie de fidélisation segmentée sur l’ensemble de sa base grâce à une campagne d’e-mailing automatique - Aquarelle • Entretenir ses relations clients et recruter grâce à un site Internet centré sur l’utilisateur - Gaz de France • Accompagner ses clients jusqu’à l’acte d’achat - Ikea • Développer sa notoriété via un concours vidéo communautaire en ligne - Pinnacle Systems • Construire du relationnel autour d’une marque via un site relais et des jeux-concours - Mon Chéri • Accompagner et fidéliser une cible via une plateforme de services - Microsoft Technet

23. Strat. 3 : Optimiser ses relations clients 3. AMÉLIORER SA CONNAISSANCE CLIENT • Acquérir et qualifier des prospects grâce à une loterie en ligne gratuite - Kingoloto • Optimiser le trafic de son site grâce à un référencement basé sur une analyse de la demande - Touring Club Suisse • Améliorer son médiaplanning pour optimiser ses performances online - BNP Paribas • Recruter via une opération de lancement en deux temps - Nespresso • Mettre en place un dispositif allant de la conquête à la fidélisation - Nvidia

24. Architecture & déco Arts Design & illustr Education Fashion Beauté Hair Chaussures Vetements Cinéma & théatre Nourriture & boisson Santé Internet Jeux Marketing & publicité Musique Organisations publiques et à but non lucratif Photo Catalogue de produits Services Vente Sports Techno automobile Tourisme Les différents secteurs

25. Activité : caractéristiques • Sondage : nb d ’heures passées sur Internet par semaine ? • Objectif de l ’activité : élargir son champ de veille • Activité : • 1. Choisir 3 sites (dont au moins un site de marque international) dans 3 secteurs peu habituels • 2. Par comparaison, quels sont les codes que vous pouvez identifier ? • 3. Analyser si possible les raisons de ces differences (contexte d’utilisation, rôle des differents publics, ...)

26. Les 4 phases du projet SIGNATURE DU BON DE COMMANDE

27. Centré utilisateur pour que le site réponde à sa demande là ne pas oublierl ’internaute là et là

28. De l ’ergonomie à l ’ergonomie WEB Ergonomie IHM Informatique Web

29. Bible posée sur un lutrin lecture debout… fatigue et besoin de trouver un appui… l’appui : la bible... La réponse est dans la situation de lecture Source AlainGIBOIN (INRIA), Module IHM, ESSI

30. Lecture debout, les mains appuyés sur la bible Les marges sont là pour permettre de s’appuyer sans gêner la lecture Source AlainGIBOIN (INRIA), Module IHM, ESSI

31. Pourquoi cette mise en page ? • Réponse : pour adapter l’objet à son utilisateur • Adaptation à l’utilisateur = Ergonomie Source AlainGIBOIN (INRIA), Module IHM, ESSI

32. En 1954, VRAI ou FAUX? • John F. Kennedy disait « I love you » à Marylin Monroe. • John Travolta est né. • Paul Fitts modélisait l'acte de « pointer », à la fois dans le vrai monde, par exemple avec une main ou un doigt, et sur les ordinateurs, par exemple avec une souris.

33. En 1954, VRAI ou FAUX? • [FAUX] John F. Kennedy disait « I love you » à Marylin Monroe. • [VRAI] John Travolta est né. • [VRAI] Paul Fitts modélisait l'acte de « pointer »

34. La loi de FITTS • Une cible est plus facile à atteindre lorsqu ’elle est grande et proche. • Exemple :http://www.basecamphq.com/ • Contre Exemple : http://www.uzik.com/003/evasion/evasion2.html

35. D, distance séparant le point de départ du centre de la cible T, temps moyen pris pour effectuer le mouvement L, largeur de la cible mesurée selon l'axe de mouvement.

36. Ergonomie : les livrables LIVRABLES • Analyse des taches • Scenario utilisateur • Specification fonctionnelle • Zoning • Maquette fonctionnelle • Prototype papier • Diagramme de flux Réalisé par un / une • Ergonome pur • Ingénieur fonctionel • Concepteur fonctionnel / Concepteur interactif • Designer multimédia (ou Web designer) • Designer d ’information / d ’interaction

37. L ’ergonomie Web optimiser l'expérience utilisateur en appliquant la bonne méthode et les bonnes règles 

38. De la conception à la réalisation • Un site web est un mille feuille

39. REALISATION CONCEPTION AVANT VENTE

40. Une interface est composée de plusieurs couches • Chacune de ses couches se recouvre et interagit. • Au début du web, la couche de présentation était un pb.A présent, la couche d ’interaction est la plus importante Source : http://www.knemeyer.com/dk.cfm?a=cms,c,323

41. De tout temps, l ’homme... Galileo’s diagram Diagram in schoolboek 2001 Source : Gerrit C. van der Veer, FEW-Informatica-IMSE, The Nederlands

42. Le mot « Architecture » dans « Architecture de l ’information » • « Nous faconnons des immeubles : en retour il nous faconnent. » Winston Churchill • Chaque batiment à son sens propre. • L ’architecture, le design, la construction, le mobilier, les habitants, et le lieu : tout joue un rôle majeur dans l ’experience globale que l ’on va vivre. • Tous les éléments doivent fonctionner ensemble. Dans un batiment réussi, l ’ensemble est superieur à la somme de ses composants

43. Le mot « Architecture » dans « Architecture de l ’information » • Les sphères d ’information sont de nature multidimensionnelles. • Comme les batiments, les sites internet ont des architectures qui nous font réagir. Source : Gerrit C. van der Veer, FEW-Informatica-IMSE, The Nederlands

44. Comparaison Livre / Site • Structure • Couverture, titre, auteur, chapitres, sections, pages, encarts, numéro de pages, sommaire, index, header/footer • Page d ’accueil, barre de nav, liens, pages de contenus, encarts, plan du site, zone de recherche, footer • Dimensions • Page en 2D présentée de façon linéaire, navigation séquentielle • Information multidimensionnelle, avec navigation hypertextuelle • Frontières • Finie, avec un début et une fin • Intangible, frontières floues

45. 1. Organize Loi n°2« Organization makes a system of many appear fewer. » Source : http://www.lawsofsimplicity.com/

46. 2. Reduce ! « The simplest way to achieve simplicity is through thoughtful reduction. »John Maeda Source : http://www.lawsofsimplicity.com/

47. 3. Complementaire Loi n°5« Simplicity and complexity need each other. » How simple can you make it? How complex does it have to be? Source : http://www.lawsofsimplicity.com/

48. Les méthodes de conception (& d ’ergo) • En phase amont (proposition) > ANALYSE • Audit de site / audit ergonomique • Conduite d ’entretien • Création de personas • En phase de préconception > ARCHITECTURE • Tests utilisateurs (PARTICIPATIF) • Tri par cartes • En phase de conception > PRESENTATION • Réalisation de plans de site • Réalisation de flux d ’interaction • Réalisation de zoning et de maquettes / prototypage • Tests utilisateurs (PARTICIPATIF)

49. Tri par carte / principes • Ouvert : les catégories sont libres • Fermé : les catégories sont données • tri avec expert avant pour déterminer les catégories • catégories tirées d ’un catalogue existant • Avec des utilisateurs représentatifs de la cible du site • Définir le champ • sur tout le site • sur la partie la plus cruciale (ex. le catalogue) • Des cartes avec ou sans photo

50. Organiser l ’information : 3 étapes http://www.ergolab.net/articles/tri-de-cartes-ergonomie-web.html