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

1. Conférence e-Cercle
3 mars 2011 / Ecole de l’image des Gobelins
La conception web
expliquée aux entreprises
communicantes
Matthieu Mingasson
Directeur du Design Expérience Utilisateur / Ogilvy Interactive

2. INTRODUCTION

3. INTRODUCTION
CONTENU
FOND
DESIGN FORME FONCTION TECHNOLOGIE

4. INTRODUCTION
CONTENU
LOGIQUE
DOCUMENTAIRE
(séparation)
DESIGN LOGIQUE LOGIQUE TECHNOLOGIE
GRAPHIQUE INFORMATIQUE

5. INTRODUCTION
CONTENU
FOND
LOGIQUE WEB
(intégration)
DESIGN FORME FONCTION TECHNOLOGIE

6. CONTENU
pertinence du fond
1

7. CONTENU
Logique documentaire
Logique de flux
Logique hybride

8. CONTENU
A l’origine du web: une approche
documentaire.
Première page de l’histoire du web, par Tim Berners-Lee

9. CONTENU
Yahoo.com, version 1997

10. CONTENU
A l’origine du web: une approche
documentaire.
Le réseau internet, version 1996

11. CONTENU
Logique documentaire
Total.com / products & services IEEEXplore.com / Journals & magazines

12. CONTENU
Algorithme de la pertinence
Google, version 1997 “Page Rank” de Google pour un réseau simple

13. CONTENU
Standardisation des flux
XHTML : structuration sémantique CSS : structuration de la forme

14. CONTENU
Logique de flux
Quora Dell Communities

15. CONTENU
Logique hybride
Wikipedia Amazon

16. CONTENU
Management & workflow
des contenus

17. CONTENU
Toutes les entreprises sont des sources
massives d’information.

18. CONTENU
!
Générer des informations
≠
Publier des contenus

19. CONTENU
Capitaliser sur les connaissances
Organisation par division Organisation par connection
Source : http://communicationnation.blogspot.com/2011/02/connected-company.html

20. CONTENU
Intégrer le processus
Préparation Plannification Edition Publication
a. Définition des principes
itérations
b. Audit des ressources
c. Stratégie des contenus
d. Production des contenus
d. Publication et partage

21. CONTENU
Designer 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. DESIGN
utilisabilité de la forme
2

23. DESIGN
Modalités de lecture

24. DESIGN
Volumen
Du verbe latin Volere: rouler, dérouler.
En anglais: Scroll.
Ref. : http://www.slideshare.net/Mitternacht/la-macrotypographie-de-la-page-web-5499736

25. DESIGN
Codex : naissance de la “maquette”

26. DESIGN
Ecran(s) : ni volumen ni codex
..?

27. DESIGN
Formats
défilants

28. DESIGN
Formats défilants

29. DESIGN
Composants d’une
interface web:
maquette, objet, contexte

30. DESIGN
Maquette
Maquettes

31. DESIGN
Objet
Objets

32. DESIGN
Contexte
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. 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
vi
C 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. DESIGN
Adapter les composants à l’attention de l’utilisateur
Exemple d’évolution des composants en fonction du contexte : Amazon
Contexte de découverte Contexte de transaction

35. DESIGN
Exemples

36. DESIGN
Portails d’actualité
Modèle: portail d’actualité Modèle: blog magazine spécialisé Modèle: lecteur de blogs
Modèle: magazine Modèle: aggrégateur d’actualité Modèle: lecteur de flux

37. DESIGN
Sites corporate: les cancres :-(
La Poste Orange LVMH
Sites corporate: la moyenne, sans plus... :-/
Lafarge Areva Air Liquide
Bouygues Accor Technip

38. DESIGN
Sites corporate : deux cas au-dessus du lot... :-)
PPR Française des Jeux

39. DESIGN
Evolution des pratiques
exemple: Grid Design (design de grille)

40. DESIGN
Grille typographique
Bauhaus / exercice de grille Construction d’une grille de maquette

41. DESIGN
Grid Design / 960px / 12 columns

42. DESIGN
Grid Design / 12 cols

43. DESIGN
Grid Design / 12 cols

44. TECHNOLOGIE
intelligence de la fonction
3

45. TECHNOLOGIE
Boucle des usages et
des technologies

46. TECHNOLOGIE
Usages
Usages
Usages
Usages
Usages
Usages
TEMPS
Technologie
Technologie
Technologie
Technologie
Technologie
Technologie

47. TECHNOLOGIE
Réseaux ?
sociaux
Blogs
Usages
Usages
Usages
Usages
TEMPS
Technologie
Technologie
Technologie
Technologie
W3C
API
2
Web
“Squared”
(temps réel)

48. TECHNOLOGIE
Designer avec la
technologie

49. TECHNOLOGIE
Changement de paradigme
Paradigme de l’artisanat Paradigme de l’industrie

50. TECHNOLOGIE
Ceci n’est pas une idée

51. TECHNOLOGIE
Trois exemples réussis d’intégration
Design-Technologie
Krrb Giveaminute Nike Snowboarding
Technologie : RubyOnRail / Javascript Technologie : Google Map API Technologie : HTML5
http://krrb.com http://giveaminute.info http://www.nikesnowboarding.com

52. CONCLUSION

53. CONCLUSION
CONTENU
PERTINENCE
DESIGN UTILISABILITÉ
INTELLIGENCE
TECHNOLOGIE

54. CONCLUSION
CONTENU
PERTINENCE
DESIGN UTILISABILITÉ UTILITÉ SERVICE BUSINESS VIABILITÉ
INTELLIGENCE
TECHNOLOGIE

55. DESIGN WEB-NATIF
CONTENU
DESIGN
DESIGN D’EXPERIENCE SERVICE BUSINESS
UTILITÉ
UTILISATEUR
TECHNOLOGIE

56. MERCI DE VOTRE ATTENTION
Continuons la discussion...
Matthieu Mingasson
email activeside@gmail.com
réseau Linkedin.com/in/mingasson
site http://design.activeside.net