View
967
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
Antoine Visonneau – antoine@ooda.fr
SCÉNARIOS STORYBOARDS
ZONINGAntoine visonneau – antoine@ooda.fr
METHODES
Antoine Visonneau – antoine@ooda.fr
Scénario # 1
Accueil (recherche simple)
Liste des résultats
Auto-biographie
Contacter concessionnaire
Merci
Marc, 43 ans cadre Objectif : trouver rapidement un véhicule d’occasion
Antoine Visonneau – antoine@ooda.fr
Marketing - Flash
Push
marketing
Recherche par points de vente
Trouvez votre véhicule
Nous recherchons pour vous
Vous souhaitez être alerté par mail dès qu’un véhicule correspond à vos critères de recherche ? Créer une alerte e-mail
Cette semaine : 355 occasions de la semaine vous attendent dans le réseau Peugeot> Consulter les Occasions de la semaine
Visualisez les points de vente et leur stock par département :
54023 véhicules disponibles. Mise à jour : mercredi 16 Janvier.
Vous recherchez un véhicule en particulier ? renseigner plus de critères
Imprimer
Sélectionnez un ou plusieurs critères puis appuyez sur rechercher.
Département
Rechercher
Énergie
Budget
Modèle
Département
Push
marketing
Marc arrive sur la page d’accueil. Dans le bloc de recherche, il renseigne plusieurs critères et clique sur Rechercher
IDENTITÉ VISUELLE
Trouvez votre véhicule Le Label ODL Le guide d’achatTrouvez votre concessionnaire
Antoine Visonneau – antoine@ooda.fr
Liste des résultatsPour visualiser les détails d’un véhicule, cliquer sur la ligne correspondante. Pour trier la liste, cliquez sur l’intitulé correspondant. Pour ajouter des véhicules à votre sélection, cochez les cases correspondantes aux véhicules de votre choix puis appuyez sur ‘ajouter à ma sélection’. La comparaison s’effectue depuis votre sélection
Ajouter à ma sélection 1 2 3 4 5 6 7 Suite
237Résultats de la recherche :
Nouvelle recherche
Créer une alerte mail
Véhicules
Votre Sélection contient
Consulter la sélection
0 véhicule(s)
1) Rechercher 2) Trouver 3) Contacter
Affiner la recherche
757,20026 0002007Xline 1.4e206Peugeot12757,20026 0002007Xline 1.4e206Peugeot13757,20026 0002007Xline 1.4e206Peugeot14
Peugeot
Peugeot
PeugeotPeugeot
PeugeotPeugeotPeugeotPeugeotPeugeotCitroen
Smart
Peugeot
Marque
757,20026 0002007Xline 1.4e2064
757,20026 0002007Xline 1.4e2066757,20026 0002007Xline 1.4e2067
757,20026 0002007Xline 1.4e20615
757,20026 0002007Xline 1.4e20611
757,20026 0002007Xline 1.4e20610757,20026 0002007Xline 1.4e2069
757,20026 0002007Xline 1.4e2068
757,20026 0002007Xline 1.4e2065
75234506 00020071.6 HDi110 C4 Picasso3
929,29023 0001998Smart&PureCabrio2
757,20026 0002007Xline 1.4e2061
DptPrixKmAnnéeVersionModèlePn Vos critères :
Prix inférieur à 30,00e, 3 portes,
5 vitesses, première main
Imprimer
Il consulte la liste des résultats, et identifie un véhicule intéressant. Il clique sur la ligne correspondante
IDENTITÉ VISUELLE
Trouvez votre véhicule Le Label ODL Le guide d’achatTrouvez votre concessionnaire
Antoine Visonneau – antoine@ooda.fr
Fiche Véhicule
Contacter le concessionnaireAjouter à ma sélection Envoyer à un ami
CITROEN C4 Picasso 1.6 HDi110 Pack Ambiance FAP 5420 km Garanti 23450 €
Descriptif Carrosserie : Monospace Mise en circulation : 28/08/2007 Nombre de portes : 5 Nombre de places : 5 Couleur : Gris Clair Métal Origine : Achat Direct
S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour
44600 SAINT NAZAIRE
Horaires : n/c
Contact : Patrick PERROT
Patrick @sinazair.peugeot.fr
Tel : 02 40 53 88 73
Fax : 02 40 00 87 63
www.sinazair.peugeot.fr
Contacter le concessionnaire
1) Rechercher 2) Trouver 3) Contacter Imprimer
Votre Sélection contient
Consulter la sélection
0 véhicule(s)
Motorisation Énergie : Diesel Boîte : Manuelle 5 rapports Puissance fiscale : 6 cv Puissance DIN : 110 ch Cylindrée (cm3) : 1560 Consommation (en l/100km) : 5,9 Consommation urbaine : 7,3 Consommation extra urbaine : 5,1
Équipements Peinture métal, Pack Nord, Clim automatique, Régulateur de vitesse, Pack électrique, Radio CD, 6 Airbags, ESP
Marc arrive sur fiche véhicule ou Autobiographie. Il regarde les photos, lit les détails de la fiche. Intéressé, il clique sur Contacter le concessionnaire.
IDENTITÉ VISUELLE
Trouvez votre véhicule Le Label ODL Le guide d’achatTrouvez votre concessionnaire
<< retour à la liste
Antoine Visonneau – antoine@ooda.fr
Vos coordonnées
Dossier contact S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour
44600 SAINT NAZAIRE
Horaires : n/c
Contact : Patrick PERROT
Patrick @sinazair.peugeot.fr
Tel : 02 40 53 88 73
Fax : 02 40 00 87 63
www.sinazair.peugeot.fr
Contacter le concessionnaire
1) Rechercher 2) Trouver 3) Contacter Imprimer
Votre Sélection contient
Consulter la sélection
0 véhicule(s)
Monsieur Madame Mademoiselle
PrénomNom
E-mailMessage
CITROENC4 Picasso1.6 HDi110 Pack Ambiance FAP5420 km Garanti23450 €
Reprise de votre véhicule
Si vous avez un véhicule à reprendre, renseignez les informations suivantes
Il renseigne ses coordonnées et fait défiler la page avec l’ascenseur
IDENTITÉ VISUELLE
Trouvez votre véhicule Le Label ODL Le guide d’achatTrouvez votre concessionnaire
Antoine Visonneau – antoine@ooda.fr
Vos coordonnées
Dossier contact S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour
44600 SAINT NAZAIRE
Horaires : n/c
Contact : Patrick PERROT
Patrick @sinazair.peugeot.fr
Tel : 02 40 53 88 73
Fax : 02 40 00 87 63
www.sinazair.peugeot.fr
Contacter le concessionnaire
Votre Sélection contient
Consulter la sélection
0 véhicule(s)
Monsieur Madame Mademoiselle
PrénomNom
E-mailMessage
Vous souhaitez : plus d’information essayer un véhicule un rendez-vous
CITROENC4 Picasso1.6 HDi110 Pack Ambiance FAP5420 km Garanti23450 €
Reprise de votre véhicule
Si vous avez un véhicule à reprendre, renseignez les informations suivantes
Département
Énergie
Budget
Modèle
(suite de la fiche véhicule)
Envoyer
Il termine de renseigner le dossier contact puis clique sur envoyer.
Antoine Visonneau – antoine@ooda.fr
Merci ! S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour
44600 SAINT NAZAIRE
Horaires : n/c
Contact : Patrick PERROT
Patrick @sinazair.peugeot.fr
Tel : 02 40 53 88 73
Fax : 02 40 00 87 63
www.sinazair.peugeot.fr
Contacter le concessionnaire
1) Rechercher 2) Trouver 3) Contacter
IDENTITÉ VISUELLE
Trouvez votre véhicule Le Label ODL Le guide d’achatTrouvez votre concessionnaire
Imprimer
Votre Sélection contient
Consulter la sélection
0 véhicule(s)
Votre demande a été envoyée avec succès.
Votre concessionnaire (rappel du concessionnaire) vous contactera dans les 3 jours.
(Récapitulatif du véhicule & de la demande)
imprimer
Le message lui confirme que sa demande a été envoyée. Il a terminé, il referme le navigateur.
Antoine Visonneau – antoine@ooda.fr
Fiche personaScénario 1
Objectif:…….
Le persona a accompli son objectif
Ecran 3Ecran 3
Ecran 2ECRAN 1
Scénario +/ = 5 écrans
Fiche personaScénario 2
Objectif:…….
Le persona a accompli son objectif
Ecran 3Ecran 3
Ecran 2ECRAN 1
Scénario +/ = 5 écrans
Fiche personaScénario 3
Objectif:…….
Le persona a accompli son objectif
Ecran 3Ecran 3
Ecran 2ECRAN 1
Scénario +/ = 5 écrans
Mot de passe
Oublié ?
Principe de
L’inscription
Principe de
La recherche
avancée
Ecran supplémentaires
Scénario 3
Scénario 2
Scénario 1
Format du document
Etc …
Antoine Visonneau – antoine@ooda.fr
• ~ 2 ou 3 - 4 scénarios différents pour montrer les aspects importants du projet.
• Dans l’optique de pouvoir juste montrer 1 ou 2 ou 3 fonctionnalités supplémentaires; il n’est pas nécessaires d’ajouter des scénarios. On peut procéder par “écrans supplémentaires”
Ecrans supplémentaires ?
Antoine Visonneau – antoine@ooda.fr
Objectif de convergence
Benchmark
Personas avec
objectifs
Concept
créatif
3 points de vue
USER AUTEUR
MARKETING
Antoine Visonneau – antoine@ooda.fr
Design pattern
Navigation :
Comment passer d’une page à l’autre ?
Comment revenir en arrière ?
Zoning Quelle est la spécificité de chaque page ? En quoi le design est optimal pour sa fonction ?
Comment assurer la continuité de l’expérience utilisateur ?
Moteur de recherche
Liste des résultats
Fiche produit
Motif recurrent
Antoine Visonneau – antoine@ooda.fr
pourquoi dessiner ?
Croquis au marqueur
20 itérations / heure
Wireframe powerpoint
2 itérations / heure
Graphisme dans Photoshop
0.3 itérations / heure
Antoine Visonneau – antoine@ooda.fr
3 Prototyper : visualiser la cinématique
Une visualisation dynamique : mettre en scène l’utilisateur dans son contexte permet de visualiser l’interface au travers des actions nécessaires à la réalisation des objectifs.
Ex. scénario
Antoine Visonneau – antoine@ooda.fr
Storyboard dessiné
Antoine Visonneau – antoine@ooda.fr
Storyboard powerpoint
Antoine Visonneau – antoine@ooda.fr
Graphic design
Antoine Visonneau – antoine@ooda.fr
Design processDescription des étapes
Storyboard
Dessiné
Storyboard
Powerpoint
Graphic design
Personas &
scénarios
Utilisateur et objectif Approche « user experience »
Antoine Visonneau – antoine@ooda.fr
Multiplier les approchesPour un design optimal
Personas &
storyboards
Zoning Arborescence
Approche Top bottom
(du haut vers le bas)
Approche Bottom up
(du bas vers le haut)
Utilisateur
& usage
Architecture de
l’information
Antoine Visonneau – antoine@ooda.fr
Multiplier les approchesPour un design optimal
Approche Top Bottom
(du haut vers le bas)
SPECS
Storyboard
E3
Storyboard
E2
Storyboard
E1
Storyboard
E4
descriptions
UML
Règles de gestion
Liste des Fonctions
PERSONAS
UCD
ARBO Userflow
iterations
Architecturer
Rationnaliser
Optimiser
Décrire
L’utilisateur atteind son objectif Approche Bottom up
(du bas vers le haut)
Antoine Visonneau – antoine@ooda.fr
Identité visuelle
NavigationInfo & Fonctions
Contenu
Niv 2
Actions et navigation (pagination…)
Contenu
Niv 3
Contenu
principal
Titre
ZoningÉléments d’organisation de l’écran
• Navigation
• Titre
• Instructions
• Contenu
• Action/Validation en bas à droite
• Définir une zone de fonction dans la page ou Positionner les fonctions proches du sujet qu’elles affectent
Suivre le sens de lecture : départ en haut à gauche et arrivée en bas à droite.
Évolution : quelles évolutions possibles 1an, 5ans ? Le socle ergonomique sera-t-il capable d’absorber ces évolutions ?
Clarté de la séparation Navigation/Contenu : •La navigation change peu, modifiée par les développeurs. •Le contenu change beaucoup, modifié par les utilisateurs.
ZoningÉléments d’organisation de l’écran
Antoine Visonneau antoine@ooda.frInteraction design
Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectusLobortis 10.01.2009Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectus. Duis sed mi vel odio congue commodo. Quisque eget magna volutpat nulla interdum euismod. Nullam velit. Integer sem. Maecenas quis tellus. Maecenas ut est pharetra ipsum imperdiet molestie. Ut eu libero. Praesent pretium. Etiam velit velit, facilisis et, dignissim eu, viverra at, est. Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet nunc. Vestibulum vitae velit eu lacus nonummy feugiat. Donec ac libero eu lorem bibendum fermentum. Suspendisse tempor tellus eget purus. Maecenas in orci at felis adipiscing imperdiet. Nunc adipiscing massa ac leo. Aliquam vel lorem vel augue pretium pharetra. Sed eu sapien vitae enim blandit consectetuer. Quisque id lorem quis ligula volutpat elementum. Morbi lobortis. Vestibulum elit. Integer vehicula adipiscing lectus. Proin tellus nibh, commodo vel, rutrum at, facilisis a, justo. Quisque in arcu. Phasellus ac quam non est molestie condimentum. Cras at nibh. Aliquam a purus. Quisque ultricies sapien sed turpis. Morbi tristique.
Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet nunc.
LOREM IPSUM dolor sit amet, consectetuer adipiscing elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectusLOBORTIS 10.01.2009
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas faucibus porttitor massa. Nullam mollis posuere lectus. Duis sed mi vel odio congue commodo. Quisque eget magna volutpat nulla interdum euismod. Nullam velit. Integer sem. Maecenas quis tellus. Maecenas ut est pharetra ipsum imperdiet molestie. Ut eu libero. Praesent pretium. Etiam velit velit, facilisis et, dignissim eu, viverra at, est. Sed lobortis. Integer vestibulum. Proin augue. Nam accumsan ligula sit amet
elementum. Morbi lobortis. Vestibulum elit. Integer vehicula adipiscing lectus. Proin tellus nibh, commodo vel, rutrum at, facilisis a, justo. Quisque in arcu. Phasellus ac quam non est molestie condimentum. Cras at nibh. Aliquam a purus. Quisque ultricies sapien sed turpis. Morbi tristique.
Vestibulum vitae velit eu lacus nonummy feugiat. Donec ac libero eu lorem bibendum fermentum. Suspendisse tempor tellus eget purus. Maecenas in orci at felis adipiscing imperdiet. Nunc adipiscing massa ac leo. Aliquam vel lorem vel augue pretium pharetra. Sed eu sapien vitae enim blandit consectetuer. Quisque id lorem quis ligula volutpat
“Maecenas in orci at felis adipiscing imperdiet. Nunc adipiscing massa Romulus
Mise en scène des motsMultiplier les points d’entrées pour l’oeil
Antoine Visonneau antoine@ooda.frInteraction design
Valeur max
Valeur moindre
Identité visuelle
# 1
# 2
# 3pub
Ligne de flottaison
ValorisationLigne de flotaison
Antoine Visonneau antoine@ooda.frInteraction design
"JE VEUX PLUS DE LA MÊME CHOSE"L'espace utile est très faible…si chaque élément est navigable, cela revient à agrandir l'espace de la page.
# 1
# 2
# 3pub
Narration dans la pageExploration en profondeur
Antoine Visonneau antoine@ooda.frInteraction design
A la moitié, tu relances ta page […] je mets les programmes TV tout en bas pour qu'il aille les chercher
“
Narration dans la pageCréer du rythme
Antoine Visonneau antoine@ooda.frInteraction design
•PRODUCT DEMO•USP•CALL TO ACTION•PUSH•UPSELL – CROSS SELL•REBONDS
Narration dans la pageVendre
Antoine Visonneau – antoine@ooda.fr
ZONINGsur les autres supports
(exemple de projets CRMA)
Antoine Visonneau – antoine@ooda.fr
MUStructure narrative
Gobelins CRMA 2008Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury
Antoine Visonneau – antoine@ooda.fr
MUFiche activité
Gobelins CRMA 2008Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury
Antoine Visonneau – antoine@ooda.fr
MUZoning : table interactive
Gobelins CRMA 2008Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury
Antoine Visonneau – antoine@ooda.fr
Gobelins CRMA 2008Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury
Antoine Visonneau – antoine@ooda.fr
TEIGOZoning : dale tactile
Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
Antoine Visonneau – antoine@ooda.fr
TEIGOZoning : dale tactile
Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
Antoine Visonneau – antoine@ooda.fr
TEIGOZoning : dale tactile
Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
Antoine Visonneau – antoine@ooda.fr
TEIGOZoning : iPhone
Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
Antoine Visonneau – antoine@ooda.fr
TEIGOZoning : iPhone
Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
Antoine Visonneau – antoine@ooda.fr Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
TEIGOZoning : iPhone
Antoine Visonneau – antoine@ooda.fr Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
TEIGOZoning : iPhone
Antoine Visonneau – antoine@ooda.fr Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron
TEIGOZoning : iPhone
Antoine Visonneau – antoine@ooda.fr
TEENIZWireframe d’un projet graphique
Gobelins CRMA 2010 - Soiny DUVAL - Elsa PRIETO - Bertrand RICHE - Lucie SEBILLE
Antoine Visonneau – antoine@ooda.fr
TEENIZWireframe d’un projet graphique
Gobelins CRMA 2010Soiny DUVALElsa PRIETOBertrand RICHELucie SEBILLE
Antoine Visonneau – antoine@ooda.fr
TEENIZWireframe d’un projet graphique
Gobelins CRMA 2010Soiny DUVALElsa PRIETOBertrand RICHELucie SEBILLE
Recommended