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 Mingassonactiveside@gmail.comLinkedin.com/in/mingasson

http://design.activeside.net

emailréseau

site