Conférence e-Cercle3 mars 2011 / Ecole de l’image des GobelinsLa conception webexpliquée aux entreprisescommunicantesMatth...
INTRODUCTION
INTRODUCTION                    CONTENU                     FOND   DESIGN   FORME             FONCTION   TECHNOLOGIE
INTRODUCTION                          CONTENU                          LOGIQUE                        DOCUMENTAIRE        ...
INTRODUCTION                      CONTENU                       FOND                LOGIQUE WEB                    (intégr...
CONTENUpertinence du fond1
CONTENULogique documentaireLogique de fluxLogique hybride
CONTENUA l’origine du web: une approchedocumentaire.Première page de l’histoire du web, par Tim Berners-Lee
CONTENUYahoo.com, version 1997
CONTENUA l’origine du web: une approchedocumentaire.Le réseau internet, version 1996
CONTENU        Logique documentaireTotal.com / products & services   IEEEXplore.com / Journals & magazines
CONTENU              Algorithme de la pertinenceGoogle, version 1997             “Page Rank” de Google pour un réseau simple
CONTENU        Standardisation des fluxXHTML : structuration sémantique   CSS : structuration de la forme
CONTENU        Logique de fluxQuora                     Dell Communities
CONTENU            Logique hybrideWikipedia                     Amazon
CONTENUManagement & workflowdes contenus
CONTENUToutes les entreprises sont des sourcesmassives d’information.
CONTENU  !Générer des informations≠Publier des contenus
CONTENUCapitaliser sur les connaissancesOrganisation par division                                                  Organis...
CONTENU         Intégrer le processusPréparation          Plannification             Edition              Publicationa. Dé...
CONTENUDesigner la pensée                                                                                 CONSUMER        ...
DESIGNutilisabilité de la forme2
DESIGNModalités de lecture
DESIGNVolumenDu verbe latin Volere: rouler, dérouler.En anglais: Scroll.Ref. : http://www.slideshare.net/Mitternacht/la-ma...
DESIGNCodex : naissance de la “maquette”
DESIGNEcran(s) : ni volumen ni codex                                 ..?
DESIGNFormatsdéfilants
DESIGNFormats défilants
DESIGNComposants d’uneinterface web:maquette, objet, contexte
DESIGNMaquetteMaquettes
DESIGNObjetObjets
DESIGNContexte            Exemples de contextes:            Découverte            Comparaison            Recherche d’infor...
D               Attention vs. disponibilité          éc            ou              ve                rt                  e...
DESIGN            Adapter les composants à l’attention de l’utilisateurExemple d’évolution des composants en fonction du c...
DESIGNExemples
DESIGN         Portails d’actualitéModèle: portail d’actualité   Modèle: blog magazine spécialisé   Modèle: lecteur de blo...
DESIGNSites corporate: les cancres :-(La Poste                 Orange                 LVMHSites corporate: la moyenne, san...
DESIGN      Sites corporate : deux cas au-dessus du lot... :-)PPR                               Française des Jeux
DESIGNEvolution des pratiquesexemple: Grid Design (design de grille)
DESIGN             Grille typographiqueBauhaus / exercice de grille   Construction d’une grille de maquette
DESIGNGrid Design / 960px / 12 columns
DESIGNGrid Design / 12 cols
DESIGNGrid Design / 12 cols
TECHNOLOGIEintelligence de la fonction3
TECHNOLOGIEBoucle des usages etdes technologies
TECHNOLOGIE                                                                   Usages                                      ...
TECHNOLOGIE                                                            Réseaux        ?                                   ...
TECHNOLOGIEDesigner avec latechnologie
TECHNOLOGIEChangement de paradigmeParadigme de l’artisanat   Paradigme de l’industrie
TECHNOLOGIECeci n’est pas une idée
TECHNOLOGIE              Trois exemples réussis d’intégration              Design-TechnologieKrrb                         ...
CONCLUSION
CONCLUSION                             CONTENU                             PERTINENCE   DESIGN   UTILISABILITÉ            ...
CONCLUSION                             CONTENU                             PERTINENCE   DESIGN   UTILISABILITÉ            ...
DESIGN WEB-NATIF               CONTENU                DESIGNDESIGN       D’EXPERIENCE   SERVICE BUSINESS                  ...
MERCI DE VOTRE ATTENTION        Continuons la discussion...        Matthieu Mingasson email activeside@gmail.comréseau Lin...
Prochain SlideShare
Chargement dans…5
×

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

5 508 vues

Publié le

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).

Publié dans : Design, Technologie, 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

×