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).
Conférence e-Cercle: la conception web expliquée aux entreprises communicantes
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
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
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
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
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
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)
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