Conférence e-Cercle: la conception web expliquée aux entreprises communicantes

5,268 views

Published on

Support de présentation de la conférence donnée dans le cadre du think tank e-Cercle qui réunit les responsables internet des entreprises du CAC40 - Auditorium de l'école des Gobelins, le 3 mars 2011.

Introduction:
La conception web est par nature hybride. Une bonne conception web est la rencontre équilibrée entre des disciplines d'origines différentes mais complémentaires: le contenu (le web est sémantique avant toute chose), la technologie (rien ne vit sur le web sans le support technologique), le design (à l'inverse de l'informatique traditionnelle, le web est une interface grand public). Il est donc impossible de traiter séparément les problématiques qui composent la réalisation d'une plate-forme web (qu'elle soit corporate ou non).
Vouloir les séparer conduit nécessairement à une baisse de qualité : si l'on aborde la conception d'un point de vue purement technologique, on aboutira à une interface informatique inutilisable pour le grand public et sans pertinence sémantique. Une approche purement graphique se fera au détriment du fond et de la fonction. Enfin, lorsque seule les problématiques de l'organisation et de la publication des contenus sont abordées, le résultat est réduit à la mise en ligne d'une base de donnée documentaire.
Cette présentation vise donc à explorer les principes généraux de conception sur les trois grands secteurs que sont le contenu, le design et la technologie. Nous verrons en conclusion que ces trois dimensions doivent en réalité être dirigées vers un double objectif : la viabilité du business (pour l'entreprise) et la qualité du service (pour l'utilisateur).

Published in: Design, Technology, Business

Conférence e-Cercle: la conception web expliquée aux entreprises communicantes

  1. 1. Conférence e-Cercle3 mars 2011 / Ecole de l’image des GobelinsLa conception webexpliquée aux entreprisescommunicantesMatthieu MingassonDirecteur du Design Expérience Utilisateur / Ogilvy Interactive
  2. 2. INTRODUCTION
  3. 3. INTRODUCTION CONTENU FOND DESIGN FORME FONCTION TECHNOLOGIE
  4. 4. INTRODUCTION CONTENU LOGIQUE DOCUMENTAIRE (séparation) DESIGN LOGIQUE LOGIQUE TECHNOLOGIE GRAPHIQUE INFORMATIQUE
  5. 5. INTRODUCTION CONTENU FOND LOGIQUE WEB (intégration) DESIGN FORME FONCTION TECHNOLOGIE
  6. 6. CONTENUpertinence du fond1
  7. 7. CONTENULogique documentaireLogique de fluxLogique hybride
  8. 8. CONTENUA l’origine du web: une approchedocumentaire.Première page de l’histoire du web, par Tim Berners-Lee
  9. 9. CONTENUYahoo.com, version 1997
  10. 10. CONTENUA l’origine du web: une approchedocumentaire.Le réseau internet, version 1996
  11. 11. CONTENU Logique documentaireTotal.com / products & services IEEEXplore.com / Journals & magazines
  12. 12. CONTENU Algorithme de la pertinenceGoogle, version 1997 “Page Rank” de Google pour un réseau simple
  13. 13. CONTENU Standardisation des fluxXHTML : structuration sémantique CSS : structuration de la forme
  14. 14. CONTENU Logique de fluxQuora Dell Communities
  15. 15. CONTENU Logique hybrideWikipedia Amazon
  16. 16. CONTENUManagement & workflowdes contenus
  17. 17. CONTENUToutes les entreprises sont des sourcesmassives d’information.
  18. 18. CONTENU !Générer des informations≠Publier des contenus
  19. 19. CONTENUCapitaliser sur les connaissancesOrganisation par division Organisation par connectionSource : http://communicationnation.blogspot.com/2011/02/connected-company.html
  20. 20. CONTENU Intégrer le processusPréparation Plannification Edition Publicationa. Définition des principes itérations b. Audit des ressources c. Stratégie des contenus d. Production des contenus d. Publication et partage
  21. 21. CONTENUDesigner la pensée CONSUMER FOCUS Everyday Consumer world world Knowing Learning The planet Enjoying Lifestyles Conversations My personal about coffee about better and the coffee every about moments health environment day NESCAFE NESCAFE PRODUCTS NESCAFÉ STORIES COFFEE LOVERS SUSTAINABILITY COFFEEPEDIA MY NESCAFÉOuter Focus Inner Focus NHW FACTS FEELINGS About NESCAFE NESCAFE & Making NESCAFE NESCAFE Services NESCAFE Research Agriculture, NESCAFE products stories (all and environment every day and recipes the cool nutrition & economic stuff about impact the brand) Corporate Brand centric centric FOCUS lundi 14 décembre 2009
  22. 22. DESIGNutilisabilité de la forme2
  23. 23. DESIGNModalités de lecture
  24. 24. DESIGNVolumenDu verbe latin Volere: rouler, dérouler.En anglais: Scroll.Ref. : http://www.slideshare.net/Mitternacht/la-macrotypographie-de-la-page-web-5499736
  25. 25. DESIGNCodex : naissance de la “maquette”
  26. 26. DESIGNEcran(s) : ni volumen ni codex ..?
  27. 27. DESIGNFormatsdéfilants
  28. 28. DESIGNFormats défilants
  29. 29. DESIGNComposants d’uneinterface web:maquette, objet, contexte
  30. 30. DESIGNMaquetteMaquettes
  31. 31. DESIGNObjetObjets
  32. 32. DESIGNContexte Exemples de contextes: Découverte Comparaison Recherche d’information Lecture d’article Visionnage de vidéo Création de compte Transaction Prise de contact Téléchargement ...Contextes
  33. 33. D Attention vs. disponibilité éc ou ve rt e C om pa ra DESIGN is on Re ch er ch e Le ct ur e d’V ar is Degré d’attention requis par tâche / tic io le nn ag e de viC dé ré o at io n de co m pt e Tr an sa ct io n Té lé ch Degré de disponibilité de l’attention ar ge m en t C on ta Adapter les composants à l’attention de l’utilisateur ct
  34. 34. DESIGN Adapter les composants à l’attention de l’utilisateurExemple d’évolution des composants en fonction du contexte : AmazonContexte de découverte Contexte de transaction
  35. 35. DESIGNExemples
  36. 36. DESIGN Portails d’actualitéModèle: portail d’actualité Modèle: blog magazine spécialisé Modèle: lecteur de blogsModèle: magazine Modèle: aggrégateur d’actualité Modèle: lecteur de flux
  37. 37. DESIGNSites corporate: les cancres :-(La Poste Orange LVMHSites corporate: la moyenne, sans plus... :-/Lafarge Areva Air LiquideBouygues Accor Technip
  38. 38. DESIGN Sites corporate : deux cas au-dessus du lot... :-)PPR Française des Jeux
  39. 39. DESIGNEvolution des pratiquesexemple: Grid Design (design de grille)
  40. 40. DESIGN Grille typographiqueBauhaus / exercice de grille Construction d’une grille de maquette
  41. 41. DESIGNGrid Design / 960px / 12 columns
  42. 42. DESIGNGrid Design / 12 cols
  43. 43. DESIGNGrid Design / 12 cols
  44. 44. TECHNOLOGIEintelligence de la fonction3
  45. 45. TECHNOLOGIEBoucle des usages etdes technologies
  46. 46. TECHNOLOGIE Usages Usages Usages Usages Usages Usages TEMPSTechnologie Technologie Technologie Technologie Technologie Technologie
  47. 47. TECHNOLOGIE Réseaux ? sociaux Blogs Usages Usages Usages Usages TEMPSTechnologie Technologie Technologie Technologie W3C API 2 Web “Squared” (temps réel)
  48. 48. TECHNOLOGIEDesigner avec latechnologie
  49. 49. TECHNOLOGIEChangement de paradigmeParadigme de l’artisanat Paradigme de l’industrie
  50. 50. TECHNOLOGIECeci n’est pas une idée
  51. 51. TECHNOLOGIE Trois exemples réussis d’intégration Design-TechnologieKrrb Giveaminute Nike SnowboardingTechnologie : RubyOnRail / Javascript Technologie : Google Map API Technologie : HTML5http://krrb.com http://giveaminute.info http://www.nikesnowboarding.com
  52. 52. CONCLUSION
  53. 53. CONCLUSION CONTENU PERTINENCE DESIGN UTILISABILITÉ INTELLIGENCE TECHNOLOGIE
  54. 54. CONCLUSION CONTENU PERTINENCE DESIGN UTILISABILITÉ UTILITÉ SERVICE BUSINESS VIABILITÉ INTELLIGENCE TECHNOLOGIE
  55. 55. DESIGN WEB-NATIF CONTENU DESIGNDESIGN D’EXPERIENCE SERVICE BUSINESS UTILITÉ UTILISATEUR TECHNOLOGIE
  56. 56. MERCI DE VOTRE ATTENTION Continuons la discussion... Matthieu Mingasson email activeside@gmail.comréseau Linkedin.com/in/mingasson site http://design.activeside.net

×