050 zoning - storyboarding

Antoine Visonneau – [email protected]

SCÉNARIOS STORYBOARDS

ZONINGAntoine visonneau – [email protected]

METHODES


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


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


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



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



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


<< retour à la liste


Vos coordonnées

Dossier contact S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour

44600 SAINT NAZAIRE

Horaires : n/c



Tel : 02 40 53 88 73

Fax : 02 40 00 87 63



1) Rechercher 2) Trouver 3) Contacter Imprimer



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



Vos coordonnées

Dossier contact S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour

44600 SAINT NAZAIRE

Horaires : n/c



Tel : 02 40 53 88 73

Fax : 02 40 00 87 63





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.


Merci ! S.I.A NAZAIRIENNE S.A.Route de la Côte d'Amour

44600 SAINT NAZAIRE

Horaires : n/c



Tel : 02 40 53 88 73

Fax : 02 40 00 87 63



1) Rechercher 2) Trouver 3) Contacter

IDENTITÉ VISUELLE


Imprimer



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.


Fiche personaScénario 1

Objectif:…….

Le persona a accompli son objectif

Ecran 3Ecran 3

Ecran 2ECRAN 1

Scénario +/ = 5 écrans


Objectif:…….


Ecran 3Ecran 3

Ecran 2ECRAN 1



Objectif:…….


Ecran 3Ecran 3

Ecran 2ECRAN 1


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 …


• ~ 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 ?


Objectif de convergence

Benchmark

Personas avec

objectifs

Concept

créatif

3 points de vue

USER AUTEUR

MARKETING


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


pourquoi dessiner ?

Croquis au marqueur

20 itérations / heure

Wireframe powerpoint

2 itérations / heure

Graphisme dans Photoshop

0.3 itérations / heure


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


Storyboard dessiné


Storyboard powerpoint


Graphic design


Design processDescription des étapes

Storyboard

Dessiné

Storyboard

Powerpoint

Graphic design

Personas &

scénarios

Utilisateur et objectif Approche « user experience »


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


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)


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 [email protected] 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


Valeur max

Valeur moindre

Identité visuelle

# 1

# 2

# 3pub

Ligne de flottaison

ValorisationLigne de flotaison


"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


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


•PRODUCT DEMO•USP•CALL TO ACTION•PUSH•UPSELL – CROSS SELL•REBONDS

Narration dans la pageVendre


ZONINGsur les autres supports

(exemple de projets CRMA)


MUStructure narrative

Gobelins CRMA 2008Wahiba Khadri, Béatrice Lartigue, Pierre Thirion, Erik Escoffier, Simon Doury


MUFiche activité



MUZoning : table interactive



TEIGOZoning : dale tactile

Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron


TEIGOZoning : iPhone

Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

Antoine Visonneau – [email protected] Promotion CRMA 2008 equipe Teigo : Adrien Felsmann, Myriam Penot,Damien Odet, David Miège, Léo Chéron

TEIGOZoning : iPhone


TEENIZWireframe d’un projet graphique

Gobelins CRMA 2010 - Soiny DUVAL - Elsa PRIETO - Bertrand RICHE - Lucie SEBILLE


TEENIZWireframe d’un projet graphique

Gobelins CRMA 2010Soiny DUVALElsa PRIETOBertrand RICHELucie SEBILLE

050 zoning - storyboarding

Design

rseau peugeot consulter

fiche vhicule contacter

recherche vos critres

cliquer sur

vhicule intressant

vhicule en particulier

vhicules disponibles

dtails dun vhicule