Formation conception de support interactif - 01 - introduction

IAFACTORYINFORMATION ARCHITECTURE DESIGN
support de formation
conception, intro
MATERIALIZE YOUR NEXT SUCCESS
1 / 128support de formation | intervention Julien MUCKENSTURM IAFACTORY | conseil en architecture de l’information | www.iafactory.fr | contact@iafactory.fr |

Conception de projet numérique…
Objectif : transposer les problématiques communicationnelles en interface
fonctionnelle à destination d’un utilisateur final : zoom sur la conception.
Recommandation
Appel d’Offre
20 H
Recommandation
Evolution Cadrage
Mise en ligne
Animation
Conception
Prototypage / Test
ProductionRecette

Notre parcours initiatique… PROGRAMME
GESTION DE PROJET CONCEPTION COMMUNICATION
modulemodulemodule
• principes généraux,
• outils en conception,
• audit de support digital.
b h k ti l• benchmark concurrentiel.

Les tendances qui influencent la conception…
Votre vision du web ?
réalité augmentée
réseaux sociaux
interface 3D
univers virtuel
webservice
e-commerce
blogs sites communautaires et collaboratif
interface 3D
interface riche
e commerce
vidéo et partage de vidéo vod
f

Note d’histoire (rappel) : la fin du bricolage
Réaliser un site Internet n’est pas / plus une simple question de façonnage :
+ technique, + marketing, + social : multiples problématiques adressées.
 Quelques étapes clés…
• D’abord une affaire de bricoleurs avec les sites vitrines statiques,
• Les projets se technicisent avec les sites administrables dynamiques (portails de contenus),
• Puis prennent une dimension commerciale avec les sites transactionnels (sites marchands),
• Pour devenir un phénomène social avec les sites communautaire (web2…).
- 50 %
Des projets + complexes qui obligent à la pluridisciplinarité :
ingénierie, marketing, architecture, design, sociologie…!

Un périmètre d’intervention de + en + important
Des demandes qui adressent des problématiques plus larges et plus
complexes, auxquelles il convient d’adresser des réponses…
Demande…
aujourd’huiaujourd hui
Demande…
il y a 10 ans

d é
De NOUVELLES exigences…
Des produits numériques +
complexes à concevoircomplexes à concevoir…
cathédralecabanon

RIA_Interface riche ?
De nouvelles modalités de présentation / des technos à maturité (flash, ajax)
 Assistance 1/2
Aid h i Aide au choix
 Validation à la volée
 Formulaire extensible Formulaire extensible
 Navigation par affinage
 Liens lourds
 Panneaux flottants
 Personnalisation
labs.google.com/suggest
labs.google.com/suggest

 Assistance 2/2
 Liens lourds
www.ikea.fr
www.ikea.fr

 Assistance
Aid h i 1/2 Aide au choix 1/2
 Liens lourds
www.darty.com
y

 Assistance
Aid h i 2/2 Aide au choix 2/2
 Liens lourds
http://vad.auchan.fr

 Assistance
 Liens lourds
http://www.rememberthemilk.com/signup/
g

 Assistance
 Liens lourds
http://www.zohocrm.com/crm/login.sas
g

 Assistance
 Navigation par affinage 1/2
 Liens lourds
www.grosbill.com
g

 Assistance
 Navigation par affinage 2/2
 Liens lourds
www.shopoon.fr

 Assistance
 Liens lourds 1/2
http://news.yahoo.com
y

 Assistance
 Liens lourds 2/2
www.amazon.com

 Assistance
 Liens lourds
 Panneaux flottants 1/3
http://fr.playstation.com
y

 Assistance
 Liens lourds
http://tech.yahoo.com/
y

 Assistance
 Liens lourds
www.fnacmusic.com

 Assistance
 Liens lourds
www.netvibes.com

Sans oublier…
 Navigation par tag (youtube, dailymotion)
id Widgets
 Configurateurs et moteurs de filtre
www.netvibes.com

L’utilisateur au cœur du dispositif ?

// de NOUVEAUX concepts qui émergent
UX user experience
Placer
l’ tili tl’utilisateur
au centre
d di itifdu dispositif

Des sites nouvelles générations

Quelques interfaces… innovantes du moment
www.etsy.com www.apple.com
http://browsegoods.com
www.oskope.comwww.writemaps.com
www.netvibes.com
www deezer fr www tenbyten org
http://musicovery.com
y
www.shopoon.fr
pp
www.underunder.com
www.wikio.fr
www.deezer.fr www.tenbyten.org
www.bbc.co.uk/home/beta
http://marumushi.com/apps/newsmap/cfm
www.samsung.fr
h // lwww philps fr f
http://fr wilogo com
www.gucci.com
http://maps.google.com
Applications Google en ligne…
www.philps.fr
www.burton.com
www.fiat.co.uk
www.facebook.fr
http://fr.wilogo.com
www.viadeo.com
www.thefwa.comwww.a-to-s.co.uk
www.2advanced.com
www.myheritage.fr
www.peroniitaly.com
y g f
Fredcavazza.net - Richcommerce.fr - Ergolab.fr - JdnCulture web : incontournable 

[juste] Concevoir une expérience

Conception de projet numérique…
Objectif : transposer les problématiques communicationnelles en interface
fonctionnelle à destination d’un utilisateur final : zoom sur la conception.
Recommandation
Appel d’Offre
Recommandation
Evolution Cadrage
Mise en ligne
Animation
Conception
ProductionRecette

Conception fonctionnelle, Ecriture interactive ?
écriture interactive
Conception fonctionnelle
écriture interactive
= linéaire tourner des pages
= écrire pour le web
= maillage et hypertexte
= interaction
= design d’interactiong
= concevoir pour le web
Concevoir une expérience

Concevoir une expérience ?
expériencep
réussie

Expérience réussie !
les humains réalisent des miracles

Concevoir une expérience ?
expérience
tératée

Expérience ratée !
les humains commettent des erreurs

Parfois c’est compliqué…

Pourtant il existe des solutions
L’ i ?L’aviez-vous vue ?

Mais certaines sont meilleures que d’autres
E iEncore mieux

Regardez c’est un canard !
Q ? V i l ê h ?Que voyez-vous ? Voit-on tous la même chose ?
Pareil pour une interface…

Conclusion
Pas une conception juste…
juste une conception

La conception centrée utilisateur
CCU pour les intimes

Concevoir une expérience réussie ?
Viva
la conception
t é tili tcentrée utilisateur

La conception centrée utilisateur
Comprendre et spécifier le
contexte d’utilisation
CADRAGE
1
contexte d utilisation
Fin
TECHNIQUES D’ENQUÊTES
Comprendre et spécifier
les exigences utilisateurs
aiergo
Norme iso
13407
2
et organisationnelles
ergo
On focalise sur
i t !13407
4
Évaluer les solutions en
fonction des exigences
prédéfinies
ai
ce point !
3 Produire des solutions de
conception
ai
TESTS

Ergonomie VS AI
Architecture de l'information et ergonomie sont des domaines par
définition très proches et qui se confondent souvent. Ils entretiennent en
effet des dépendances étroites et leur pratique vise un même objectifeffet des dépendances étroites et leur pratique vise un même objectif
global, à savoir prendre en compte l'utilisateur dans la conception d'une
interface. Les deux approches se différencient cependant :
Ergonomie
Architecture d’information
Conception Centrée Utilisateur

Ergonomie VS AI
Ergonomie
• Modèle du processeur humain (ergonomie cognitive)
P h l gi i l
Architecture d’information
• « L'art et la science d'organiser et de cataloguer des
applications, des logiciels, des sites Web, des intranets
• Psychologie - sociale
pp , g , ,
pour en faciliter l'utilisation et le repérage. »
• Entretiens, focus groupes, analyse de l’organisation du travail,
expression des besoins, parcours utilisateur
• Évaluation des applications, des interfaces : via des grilles
d’évaluation ou des tests utilisateurs
• Organisation des contenus à l’écran
- Libellés, mode d’accès, de recherche
- Scénarios d’utilisation, structures
d évaluation ou des tests utilisateurs.
Conception
Évaluation

le rôle dele rôle de
l’ergonome ?l ergonome ?

C i d tConnaissance des processus mentaux
= cognition

ÉÉtude ou observation des différents cas d’utilisation
= rencontres, entretiens, observation in situ

Pas
Ok
Ok
Évaluation

Via des tests utilisateurs

Via eye trackingy g

Via l’évaluation experte
et les critères d’évaluation de Bastien et Scapin (INRIA)
p
• 1. Guidage • 4. Adaptabilitég
1.1. Incitation
1.2. Groupement / Distinction entre Items
1.3. Feedback Immédiat
1.4. Lisibilité
4. Adaptabilité
4.1. Flexibilité
4.2. Prise en compte de l’expérience de l’utilisateur
1.4. Lisibilité
• 2. Charge de Travail
2.1. Brièveté, concision, actions minimales
• 5. Gestion des Erreurs
5.1. Protection contre les erreurs
5.2. Qualité des messages d’erreurs
5.3. Corrections des erreurs
2.2. Densité informationnelle
• 3. Contrôle explicite
3.1. Actions explicites
• 6. Homogénéité / Cohérence
7 Signifiance des Codes et Dénominations
p
3.2. Contrôle utilisateur
• 7. Signifiance des Codes et Dénominations
• 8. Compatibilité

l’ergonome doitl ergonome doit-
il concevoir ?il concevoir ?

l’architecte del’architecte de
l’informationl information

…des défis qui appellent de NOUVEAUX métiers
Architecte d’information
L’architecte d’information
I t ti i t i t t d j t l blé ti f ti ll
Appel d’Offre
Recommandation
• Intervention : intervient en amont des projets sur les problématiques fonctionnelles
• Tâche quotidiennes : audit, recommandation, conception, scénarisation
• Ses qualités : imaginatif, pluridisciplinaire, très bonne culture du média, comprend vite
• Perspectives d’évolutions : je cherche…
• Outils de prédilection : papier crayon, powerpoint, illustrator… brainstorm
Cadrage
Animation
Evolution
• Facturation jour/homme : entre 900 et 1100 € HT
• Rémunération : 25 à 50 K€ selon profil et exégèse
• Profil : très hétérogène, sciences humaines (communication, sociologie), arts graphiques
Mise en ligne Conception
Recette Production

AIergo
UX
architecture
D i d’i f ti D i d’i t tid’informationDesign d’information Design d’interaction
designmarketing
tech

Design d’information & design d’interaction
D i d’i f i D i d’i iDesign d’information Design d’interaction
Design = Concevoir = écrireDesign = Concevoir = écrire
Une autre culture

design d’information ?

http://utangente.free.fr/index2.html

Un métier de passionné

Concevoir une interface…
C’est passionnant !La conception est au carrefour de la chaîne interactive et canalise les nœuds du métier…
ergo N’oubliez pas de
prévoir des
instructions avant
de proposer une
•Le coût du projet
•La performance du site
•Les prix que l’on peut remporter
Il faut développer
la dimension
p p
fonctionnalité
designmarketing
la dimension
visuelle pour mieux
valoriser la marque
UX gg
Je trouve que les
services ne sont
pas assez valorisés
tech
Ce menu en
DHTML nécessite
2 jours de plus !
user experience
tech p

Travailler avec tout le monde…
CONSEIL
Commercial
Stratégie
Conduite de projet
Directeur de projet Chef de projet Consultant média Planneur stratégique
Nouveau ! Nouveau !
CRÉATION
Directeur artistique Graphiste Intégrateur html Flasheur
Design d’interaction
Design graphique
Intégration html
TECHNOLOGIE
Ingénierie informatique
Développement
R & D
Directeur de projet tech. Chef de projet tech. Développeur Expert techno

Concevoir une interface…
C’est exigeant…
• composer avec les exigences de l’annonceur
• comprendre les enjeux marketing
• être multi problématiques
• disposer d’une solide culture web
ît l t d d t h i• connaître les standards techniques
• se tenir au courant des nouveautés
d l ti i bl• pour proposer des solutions viables
>>> rapidement
>>> à moindre coûts
>>> réalisables techniquement
ti f i t l b i>>> satisfaisant les besoins users
>>> et performantes

Point de départ…

Conception, par où commencer (RAPPEL !)
Rassembler les informations recueillies dans la phase de cadrage.
4 sources INCONTOURNABLES qui vont guider votre conception !
Stratégie Besoins Benchmark AuditStratégie
• objectif
• cibles
• positionnement
Besoins
• utilisateurs finaux
• contributeurs
• BU marketing, etc.
Benchmark
• analyse concurrentielle
• bonnes pratiques
• killer app.
Audit existant
• points forts
• points faibles
• axes d’optimisation
ce que le client veut ce qu’attend l’utilisateur ce que font les autres ce qui est à conserver (ou pas)
LA BASE POUR CONCEVOIR

PERSONASPERSONAS

Approche par persona
Quels sont les grands profils attendus ?
La définition des utilisateurs
 En terme de CSP et de cible marketing
 En terme d’age et de mode de vie
 En terme de capacité à utiliser un service
E t d ité à tili i t t En terme de capacité à utiliser internet
 En terme de capacité à utiliser l’informatique
 En terme de recherche de qualité de service
Qui se ressemble s’assembleQui se ressemble s assemble…
… à défaut d’être plus précis

La définition des besoins
Définir des besoins génériquesDéfinir des besoins génériques
(communs aux utilisateurs)
Définir des besoins spécifiquesDéfinir des besoins spécifiques
(à une typologie d’utilisateurs, ou à des contextes de consultation particuliers)

Étude des utilisateurs
Une question d’attitude
Les profiles et les besoins permettent de dresser une
caricature des attentes comportementales
 Chaque profile représente des valeurs
 Ces valeurs déterminent l’attitude du profile
 Ses attentes, ses besoins
Scénario
,
 Sa disponibilité
comportemental
du Persona 1A chaque profile un scénario

Je gagne un temps
précieux pour le
Les personas
précieux pour le
même prix !
Des caricatures
Gagner du temps
A partir des éléments statistiques de
l’annonceur : définir un profil et un
scénario de consultation
Recherche avancée
Gagner du temps
L’opportuniste
Laurent 35 ans architecte
-----------------------------------------------------
--------------
Téchnophile convaincu, Laurent est
moderne et veut profiter au maximum des
til d i ti t
scénario de consultation
caricatural :
 Définition et personnification du profile
Comparer les prix
nouveaux outils de communication et
d’internet.
Il cherche sur le site de la poste un moyen
de commander en ligne pour éviter de
perdre trop de temps dans ses
déplacements. Il trouve tout de suite
l’espace TPE et s’inscrit a un abonnement
qu’il juge pratique et selon lui c’est le but
Définition et personnification du profile
 Ses principes, ses valeurs, ses attentes
 Aptitudes et attitude sur le net Acheter vite
Connaître ses bénéfices
qu l juge p at que et selo lu c est le but
de la technologie.
Grâce à la news letter qui ne présente pas
que des produits pro, il décide d’acheter
des prêt à poster de sa région natale à
usage personnel qu’il passera dans les frais
de sa société personnelle Micro BNC
puisque le site offre des factures pro avec
l g ti d l TVA t bilité
 Centres d’intérêts, contenue cibles
 Besoins, fonctions cibles
Services pratiques
la gestion de la TVA pour sa comptabilité.
Une approche marketing et ergonomique !
 Contexte d’utilisation, scénario cible Personnaliser pour
gagner du temps

Exemples de scénario
Rechercher
Recherche avancée Recherche Acheter
StyleCatégories
Affiner Authentification
Produit
StyleCatégories
En savoir plus
Les avis
L fi h d it
joindre au caddie
Confirmation livraison
Acheter
La fiche produit
Plus de photos
Disponibilité
Achat effectué
Acheter

Personas (profil d’utilisateur type ~ cible)

Profil utilisateur | les prospects
J li G
PROFIL
• Prospect
Affi ité ll l
Julie Gonzague
• Affinité nulle avec la marque
• Connaissance nulle des produits
• Pas bricoleuse
BESOINBESOIN
• Pas de besoin précis
• Phase de découverte
• Besoin identifié : connaître la marque
• Explorer les solutions Somfy
C’est chouette les stores qui s’ouvrent seul
,, C’est chouette les stores qui s’ouvrent seul.
Je crois qu’ils font ça chez Somfy.
Allons voir sur leur site… ,,

É il D
PROFIL
• Prospect
F ibl ffi ité l
Émile Duquesne
• Faible affinité avec la marque
• Connaissance nulle des produits
• Pas bricoleur
BESOINBESOIN
• Besoin d’accompagnement
• Phase d’apprentissage
• Besoin identifié : projet de portail
• Obtenir de l’info sur la motorisation de portail
Je me demande vraiment si je vais pouvoir
,, Je me demande vraiment si je vais pouvoir
trouver des infos pour mon projet de portail.
Tiens, Google me propose Somfy… ,,

Ch l H l
PROFIL
• Prospect
B i d l
Charles Hual
• Bonne connaissance de la marque
• Faible connaissance des produits
• Bricoleur du dimanche (faible)
BESOINBESOIN
• Besoin d’être orienté
• Phase d’affinage, de concrétisation
• Besoin identifié : faire porter son projet
• Trouver une solution d’assistance pour la
motorisation d’une porte de garage
J’aimerais réaliser mon projet de porte de
,, J’aimerais réaliser mon projet de porte de
garage avec Somfy. Pas tout seul par
contre. Que peut-on me proposer ? ,,

Ch l R h
PROFIL
• Prospect
B i d l
Charles Rocher
• Bonne connaissance des produits
• Excellent bricoleur
BESOINBESOIN
• Besoin d’acheter vite
• Phase d’achat
• Besoin identifié : acheter un produit
• Trouver le moyen d’acheter le plus rapidement
possible.
Je veux acheter le feu orange 24 V
,, Je veux acheter le feu orange 24 V.
C’est le meilleur.
Quel est le moyen le plus rapide ? ,,

Profil utilisateur | les clients
Ch l R h
PROFIL
• Client
B i d l
Charles Rocher
• Pas plus bricoleur que ça
BESOINBESOIN
• Besoin d’information technique
• Phase de support
• Besoin identifié : service post-achat
Ê• Être rassuré
J’ai des informations précises à relever
,, J’ai des informations précises à relever
sur l’un de mes produits Somfy. J’aimerais
trouver un mode d’emploi. ,,

M i R l d
PROFIL
• Client
B i d l
Marie Roland
• Pas bricoleuse
BESOINBESOIN
• Besoin de service
• Phase de support
• Besoin identifié : service après-vente
• Assistance technique
Ma télécommande Telis Soliris est défaillante
,, Ma télécommande Telis Soliris est défaillante.
Je veux la remplacer rapidement.
Allons voir sur le site de Somfy. ,,

L Pl
PROFIL
• Client
B i d l
Laurent Planton
• Bricoleur
BESOINBESOIN
• Besoin de conseil
• Phase d’optimisation
• Besoin identifié : améliorer un existant
• Conseil
Je cherche à optimiser mon installation
,, Je cherche à optimiser mon installation
d’automatisme de volet roulant Somfy.
Ce serait bien d’avoir quelques conseils… ,,

L i M l
PROFIL
• Client
B i d l
Lucien Menyl
• Excellent bricoleur
BESOINBESOIN
• Besoin de promo
• Phase d’achat
• Besoin identifié : trouver la promo du moment
• Acheter un produit
J’ai repéré un kit de motorisation de portail
,, J’ai repéré un kit de motorisation de portail.
Je veux l’acheter, mais avant, je veux comparer
et savoir si je peux bénéficier d’une promo…,,

Ensuite
BRAINSTORMBRAINSTORM

Notez toutes vos idées… dessinez (avant) PENDANT (après) la réunion ;)
L’art du Mindmap

L’art du Mindmap

Le crobar

Ensuite
• énumérer
• lister les fonctionnalités
• inventorier lister les contenus
catégoriser le to t
En fonction de la typologie de site
Corporate, e-commerce, portail éditorial…
• catégoriser le tout
• structurer

Trier, ordonner vos idées…
Procéder par exemple par post-it
Faîtes réagir vos collègues / amis
« ta logique n’est pas ma logique »

Pourquoi est-il indispensable de catégoriser ?
Organiser pour mémoriser…
ou favoriser le travail de mémorisation de l’utilisateur !

Parce qu’on mémorise mieux les parties d’un tout…

Bonne pratique
Structurer des contenus
et des fonctionnalités

Quelques exemples d’arborescence

Mauvaise pratique
Mélanger les arbos de contenus
vs symobiliser les processus

Mélange des genres…

Penser mécanique

Le mécano

Micro
Micro
Macro Micro
Micro
Micro
Micro
Micro
Macro Micro
Micro
Micro
Micro
Micro
Micro

Du macro au micro
une vision lointaine, expérimentale et
conceptuelle du projet...
Commencer avec
Crobar
conceptuel

Du macro au micro
une vision macro du projet, de l’interface
et des contenus…
Commencer avec
Zoningg
macro

Du macro au micro
une vision micro de l’interface
et de la navigation, hiérarchisée et précise :
Avancer qualitativement
Storyboardy
détaillé

Juste un mot sur l’écriture pour le web

Ecrire pour le web !

écrire pour le web

Merci pour votre attention
LA PROCHAINE FOIS : les outils en conception.

http://blog.iafactory.fr
SPEAKING ABOUT INFORMATION ARCHITECTURE

Formation conception de support interactif - 01 - introduction

Recommandé

Recommandé

Contenu connexe

Similaire à Formation conception de support interactif - 01 - introduction

Similaire à Formation conception de support interactif - 01 - introduction (20)

Plus de iafactory

Plus de iafactory (7)

Dernier

Dernier (14)

Formation conception de support interactif - 01 - introduction