La conception web expliquée aux entreprises communicantes
Conférence e-Cercle3 mars 2011 / Ecole de l’image des Gobelins
Matthieu MingassonDirecteur du Design Expérience Utilisateur / Ogilvy Interactive
INTRODUCTION
DESIGN TECHNOLOGIE
CONTENU
FORME
FOND
FONCTION
INTRODUCTION
DESIGN TECHNOLOGIE
CONTENU
LOGIQUE DOCUMENTAIRE
LOGIQUE INFORMATIQUE
LOGIQUE GRAPHIQUE
(séparation)
INTRODUCTION
DESIGN TECHNOLOGIE
CONTENU
FORME
FOND
FONCTION
LOGIQUE WEB(intégration)
INTRODUCTION
CONTENUpertinence du fond
1
CONTENU
Logique documentaireLogique de fluxLogique hybride
CONTENU
Première page de l’histoire du web, par Tim Berners-Lee
A l’origine du web: une approche documentaire.
CONTENU
Yahoo.com, version 1997
CONTENU
A l’origine du web: une approche documentaire.
Le réseau internet, version 1996
CONTENU
Logique documentaire
Total.com / products & services IEEEXplore.com / Journals & magazines
CONTENU
Algorithme de la pertinence
Google, version 1997 “Page Rank” de Google pour un réseau simple
CONTENU
Standardisation des flux
XHTML : structuration sémantique CSS : structuration de la forme
CONTENU
Logique de flux
Quora Dell Communities
CONTENU
Logique hybride
Wikipedia Amazon
CONTENU
Management & workflow des contenus
CONTENU
Toutes les entreprises sont des sources massives d’information.
CONTENU
Générer des informations
≠Publier des contenus
!
CONTENU
Capitaliser sur les connaissances
Source : http://communicationnation.blogspot.com/2011/02/connected-company.html
Organisation par division Organisation par connection
CONTENU
a. Définition des principes
Préparation EditionPlannification
b. Audit des ressources
c. Stratégie des contenus
d. Production des contenus
itérations
Publication
d. Publication et partage
Intégrer le processus
CONTENU
Designer la pensée
FOCUS
FOCUS
CONSUMER
FACTS
Oute
r F
ocus In
ner F
ocus
FEELINGS
Consumerworld
Everyday world
Brandcentric
Corporatecentric
Knowing about coffee
Learning about better
health
Making NESCAFE every day
Lifestyles Conversations about
NESCAFE
The planet and the
environment
My personal moments
CO
FF
EE
PE
DIA
NH
W
SU
STA
INA
BIL
ITY
CO
FF
EE
LO
VE
RS
NE
SC
AF
E P
RO
DU
CT
S
NE
SC
AF
É S
TO
RIE
S
MY
NE
SC
AF
É
Enjoying coffee every
day
NESCAFE & Agriculture, environment & economic
impact
About NESCAFE
ServicesNESCAFE Research
and nutrition
NESCAFE products
and recipes
NESCAFE stories (all the cool
stuff about the brand)
lundi 14 décembre 2009
DESIGNutilisabilité de la forme
2
DESIGN
Modalités de lecture
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
DESIGN
Codex : naissance de la “maquette”
DESIGN
Ecran(s) : ni volumen ni codex
..?
DESIGN
Formats défilants
DESIGN
Formats défilants
DESIGN
Composants d’une interface web: maquette, objet, contexte
DESIGN
Maquette
Maquettes
DESIGN
Objet
Objets
DESIGN
Contexte
Contextes
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
...
DESIGN
Adapter les composants à l’attention de l’utilisateur
Déc
ouve
rte
Compar
aiso
n
Reche
rche
Lect
ure
d’article
Vision
nage
de vidéo
Créat
ion
de co
mpte
Tran
sact
ion
Téléch
argem
ent
Degré d’attention requis par tâche / Degré de disponibilité de l’attention
Att
en
tio
n v
s. d
isp
onib
ilité
Conta
ct
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
DESIGN
Exemples
DESIGN
Modèle: portail d’actualité
Modèle: magazine
Modèle: blog magazine spécialisé
Modèle: aggrégateur d’actualité
Modèle: lecteur de blogs
Modèle: lecteur de flux
Portails d’actualité
DESIGN
Bouygues
Areva
Technip
LVMHLa Poste Orange
Sites corporate: les cancres :-(
Accor
Air Liquide
Sites corporate: la moyenne, sans plus... :-/Lafarge
DESIGN
Sites corporate : deux cas au-dessus du lot... :-)
PPR Française des Jeux
DESIGN
Evolution des pratiquesexemple: Grid Design (design de grille)
DESIGN
Grille typographique
Bauhaus / exercice de grille Construction d’une grille de maquette
DESIGN
Grid Design / 960px / 12 columns
DESIGN
Grid Design / 12 cols
DESIGN
Grid Design / 12 cols
TECHNOLOGIEintelligence de la fonction
3
TECHNOLOGIE
Boucle des usages et des technologies
Usages
TechnologieTechnologie
Usages
Usages
Technologie
Usages
TechnologieTechnologie
UsagesUsages
Technologie
TEMPS
TECHNOLOGIE
Réseaux sociaux
APIW3C
BlogsUsages
Technologie
Usages
TechnologieTechnologie
Usages
Technologie
TEMPSUsages
?
Web“Squared”
(temps réel)
2
TECHNOLOGIE
TECHNOLOGIE
Designer avec la technologie
TECHNOLOGIE
Changement de paradigme
Paradigme de l’artisanat Paradigme de l’industrie
TECHNOLOGIE
Ceci n’est pas une idée
TECHNOLOGIE
Trois exemples réussis d’intégration Design-Technologie
Giveaminute Technologie : Google Map APIhttp://giveaminute.info
Nike Snowboarding Technologie : HTML5 http://www.nikesnowboarding.com
Krrb Technologie : RubyOnRail / Javascript http://krrb.com
CONCLUSION
DESIGN
TECHNOLOGIE
CONTENU
CONCLUSION
UTILISABILITÉ
PERTINENCE
INTELLIGENCE
DESIGN
TECHNOLOGIE
CONTENU
CONCLUSION
UTILISABILITÉ
PERTINENCE
INTELLIGENCE
UTILITÉ VIABILITÉSERVICE BUSINESS
DESIGN
TECHNOLOGIE
CONTENU
DESIGND’EXPERIENCE UTILISATEUR
DESIGN WEB-NATIF
UTILITÉSERVICE BUSINESS
MERCI DE VOTRE ATTENTION
Continuons la discussion...
Matthieu [email protected]/in/mingasson
http://design.activeside.net
emailréseau
site
