Cours (E) Gobelins Master 2 MICNI

CONCEPTION

E. Design d’interface et design d’interaction

Master 2 : Management et Ingénierie de la Communication Numérique Interactive

Janvier 2010 Ecole des GobelinsDavid Raichman Senior UX Designer @ OgilvyInteractive

Conception | Design d’interface et design d’interaction

Les cours de conception

A. Introduction au design d’expérience utilisateur (UXD)

B. Les livrables de l’UXD

C. De la recherche utilisateur au design fonctionnel

D. Framework fonctionnel et stratégie des contenus

E. Design d’interface et design d’interaction

F. Utilisabilité


1. Introduction2. Typologie des interfaces

3. Wireframes

4. Design d’interaction

6. Références

C. Design d’interface et design d’interaction


1. Introduction / Situation de la problématique

?

?


1. Introduction / Principe de l’IHM

Homme Ordinateur

Interface

Input Utilisateur

Output Système


1. Introduction / De l’information à l’interaction
























1. Introduction / Echelle d’iconicité

Iconicité maximale

Objet lui-même

Iconicité minimale

Relations topographiques



Objet lui-même

Schéma anatomique

Iconicité maximale

Iconicité minimale




Objet lui-même

Schéma anatomique

Iconicité maximale

Iconicité minimale

Schéma de principe

Relations topographiques Relations topologiques



Objet lui-même

Schéma anatomique


Iconicité maximale

Iconicité minimale

Schéma de principe

Relations topologiques

Schéma de formulation

Relations logiques



Objet lui-même

Schéma anatomique


Iconicité maximale

Iconicité minimale

Schéma de principe



Relations logiquesSchéma en espace complexe



Objet lui-même

Schéma anatomique


Iconicité maximale

Iconicité minimale

Schéma de principe



Relations logiquesSchéma en espace complexe

Visualisation de données


1. Introduction

2. Typologie des interfaces

3. Wireframes4. Design d’interaction

6. Références



2. Typologie des interfaces / Implementation-centred

+ -

Facile à construire Apprentissage long

- Public expert


2. Typologie des interfaces / Implementation-centred

+ -

Facile à construire Apprentissage long

- Public expert


+ -

intuitive contextuelle

aucun apprentissage

utopique

2. Typologie des interfaces / Métaphoriques


+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique


w w w . s o u t h w e s t . c o m

http://www.southwest.com

http://www.southwest.com


+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique



+ -


aucun apprentissage

utopique



2. Typologie des interfaces / Idiomatiques

+ -

modulaireinteropérable

apprentissagecourt

interaction riche



+ -


apprentissagecourt

interaction riche

w w w . n i c k a d . c o m

http://www.nickad.com









+ -


apprentissagecourt

interaction riche



i n p u t o u t p u t

primitivespointage, clic, drag, touche pressée

curseur, texte

composéesdouble-clic,

drag’n’drop, sélectioncheckbox, surbrillance

idiomesnaviguer, dessiner, acheter

changer de section, trier


1. Introduction


3. Wireframes

4. Design d’interaction6. Références



3. Wireframes / Définition

Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture

d’information et d’ergonomie.»Ils servent de référence pour le design graphique et pour le développement du projet digital.

Ils contiennent différents niveaux de précision selon le contexte.


3. Wireframes

Degré de précision


3. Wireframes / Degré de précision

Interactif

Low résolution Hi résolution

Statique



Interactif


SketchingStatique



Interactif


SketchingStatique



Interactif


SketchingStatique

Prototype papier



Interactif


SketchingStatique

Prototype papier



Interactif


Sketching

Statique

Prototype papier



Interactif


Sketching

Statique

Prototype papier

Ecrans (psd, jpg...)



Interactif


Sketching

Statique

Prototype papier

Ecrans (psd, jpg...)



Interactif


Sketching

Statique

Prototype papier

Ecrans



Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital (HTML, Flash...)



Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital (HTML, Flash...)



Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital



Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital

Wireframes



Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital

WireframesNIDO Home Moments Health Matters Our Range

Hi Lynn | My account | Log Out | Help

NIDO Website - 1.1.1 Diary

My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker

Contact Us Privacy Terms & privacy Copyrights Send to a friend

John’s Family Diary

Oscar Angelica

Family & Friends

Your highlights Slideshow

You have new comments !

> View all

You have: 6 family members, 14 friends

3

Erin has accepted your invitation

Health MattersSpotting & Treating Food Allergies

> How to know if your child is at risk

!

you have new comments!3

Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments

Show me All entries Only highlightsStarting from !rst day | today

12MAY

Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !

Everyday | 2 comments new

11MAY



10MAY

Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...

Everyday | 2 comments

08MAY



06MAY



TELL MY FRIENDS NOW !

Edit friends list

05MAY





Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital

WireframesNIDO Home Moments Health Matters Our Range


NIDO Website - 1.1.1 Diary




Oscar Angelica

Family & Friends


You have new comments !

> View all

You have: 6 family members, 14 friends

3

Erin has accepted your invitation



!


Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY



NIDO Home Moments Health Matters Our Range





Oscar Angelica





Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments


12MAY



11MAY



10MAY



08MAY



06MAY




Edit friends list

05MAY





Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital

Wireframes


3. Wireframes / Questions à se poser

‣Quels sont les objectifs du wireframe ?‣ Communiquer les décisions structurelles aux équipes

créative, de développement

‣ Servir de prototype pour des tests utilisateurs...

‣Quelle est l’audience ?‣ Créatifs (document de design)

‣ Développeurs (document de spécification)

‣ Client (document de présentation)


3. Wireframes

Exemples


3. Wireframes / Exemple de spécifications

RENAULT-MERCHANDISING.COM

© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU

ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES

Les sites RenaultFR ｜ EN ｜

Mémoriser mes

informations

OK

Identifiant

Mot de passe

>Mot de passe oublié ?

>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste

2 articles5 articles

1.3.1.3 fiche produit web version non loggé

goRECHERCHER UN PRODUIT toutes catégories

Montre mixte

135,00!

Quantité 1couleur

Boîtier alliage, cadran blanc. Mouvement 2 aiguilles. Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans.

Ajouter au panier

1 Image taille normale

1

2

Texte descriptif produit version longue2

3 4

3

4

5

Propriété du produit Au minimum il y a 0 liste déropulante de propriété.Au maximum, il y a 2 listes déroulantes de propriétés.Le qualificatif de la propriété dépend du produit (taille, couleur...)

Champ de saisie quantité

5Vignette vues produit pouvant aller de 0 à 3Chaque vignette est une réduction de d’une image de taille normale. Si pas de vues différentes, on affichera 0 vignettes.

Lien vers 4.a

en stock

Prix :

Disponibilité :

7

6

7

6 Affiche soit “en stock” soit (a) “épuisé" soit en cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas.

77 11 421 691 Personnel du groupe Renault

Professionnel

Auteur : David Raichman

Projet : Renault-merchandising.com

Version : 1.3 (31/01/08)

Produits webRenault

Twingo 2008Dacia 2008

Noël

Chèques cadeauxEvenements

Produits web > Renault >Twingo 2008 > Montre mixte





Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste




Montre mixte

135,00!

Quantité 1couleur


Ajouter au panier


1

2


3 4

3

4

5




Lien vers 4.a

en stock

Prix :

Disponibilité :

7

6

7



Professionnel



Version : 1.3 (31/01/08)

Produits webRenault


Noël



Renault merchandising







Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste




Montre mixte

135,00!

Quantité 1couleur


Ajouter au panier


1

2


3 4

3

4

5




Lien vers 4.a

en stock

Prix :

Disponibilité :

7

6

7



Professionnel



Version : 1.3 (31/01/08)

Produits webRenault


Noël







Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste




Montre mixte

135,00!

Quantité 1couleur


Ajouter au panier


1

2


3 4

3

4

5




Lien vers 4.a

en stock

Prix :

Disponibilité :

7

6

7



Professionnel



Version : 1.3 (31/01/08)

Produits webRenault


Noël



Renault merchandising



Louis Vuitton Mobile Japon


























3. Wireframes

Contraintes technologiques


3. Wireframes / Contraintes technologiques

‣ Travailler avec une technologie imposée

‣ Trouver la technologie qui répond au cahier des charges de mon design d’interface



Audiovisuel Informationnel

Applicatif

Desktop, bornes, autres...

Social

Transactionnel

Blogs

News

Mondes virtuels

Publicitaire, Evt, Portfolio...

Films, doc interactifs

Jeux en ligne

RDA : Rich Desktop Application

RIA : Rich Internet Application

RMA : Rich Mobile Application

HTML/CSS, Ajax (javascript)Flash, Silverlight.Net, Java... Flex/A

IR, .N

et, SD

K...

Director, Java...


‣ Quel est le support final ?‣ Ecran ordinateur, mobile, écran tactile, TV ...

‣ La résolution d’affichage

‣Quelle technologie ?‣ Flash

‣ HTML/CSS/Ajax

‣ SDK Iphone...



3. Wireframes

Gabarits, zoning et grilles


3. Wireframes / Gabarits, zoning et grilles

Un gabarit (ou squelette ou layout) est la structure visuelle persistante qui définit la charpente d’une interface.La variations d’un gabarit définissent en partie les états d’une interface.

Les gabarits constituent le fondement des wireframes.

La méthode de construction d’un gabarit s’appelle le zoning.


3. Wireframes / Gabarits, zoning et grilles (exemple)

Créer votre agenda santé

Au coeur de l’actualité

Le stress est-il communicatif ?

Benoit Monté psychologue

répond à toutes nos questions...

Chute de cheveux

Comment feiner la chute de ou favoriser

la reposusse

Lutter contre les rhumes à répétition

Le témoignage d’une internaute à

découvrir

PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie

Santé

Beauté / Bien-être

Témoignages

Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition

Voir tous les sujets

MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage


StressSommeilRhumeMinceurMénopause


Produits

AromathérapiePhytaroma

Améliorer son confort respiratoire

Phytothérapie Elusanes

Résoudre les troubles passagers

du sommeil

Dermo-nutritionDoriance Anti-âge

Lutter contre le photo-vieillissement

En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !

Partout avec vous, même sur votre mobile

1

2

3

Vos astuces forme

Les conseils d’un phytothérapeute

Vos conseils santé naturelle tout au long de l’année

Créer mon agenda

Connaissance & plantes

Le test du moisDécouvrez votre profil minceur

Menez vous une vie stressante ?

oui pas spécialement pas du tout

Consultez plus de 150 articles de référence sur la phytothérapie

Posez des questions santé, forme et bien-être, des experts répondent à vos questions

?

Votre pharmacie

Naturactive

code poste OK

Trouvez les produits Naturactive, les plus proces de chez vous

rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive

HEADER

COL 1 COL 2 COL 3

NAV








Chute de cheveux


la reposusse



découvrir


Santé


Témoignages







Produits





du sommeil





1

2

3

Vos astuces forme



Créer mon agenda







?

Votre pharmacie

Naturactive

code poste OK



HEADER

COL 1 COL 2 COL 3

NAV






Chute de cheveux


la reposusse



découvrir


Santé


Témoignages







Produits





du sommeil





1

2

3

Vos astuces forme



Créer mon agenda







?

Votre pharmacie

Naturactive

code poste OK



MARQUE

INFORMATIONS DʼACTUALITÉ

PÉDAGOGIQUE

ACCOMPAGNEMENT

INFORMATIONS DE FOND

PARTICIPATIF

CRM

ACCOMPAGNEMENT

THEMES

MARQUE

PÉDAGOGIQUE

PARTICIPATIF








Chute de cheveux


la reposusse



découvrir


Santé


Témoignages







Produits





du sommeil





1

2

3

Vos astuces forme



Créer mon agenda







?

Votre pharmacie

Naturactive

code poste OK



HEADER

COL 1 COL 2 COL 3

NAV






Chute de cheveux


la reposusse



découvrir


Santé


Témoignages







Produits





du sommeil





1

2

3

Vos astuces forme



Créer mon agenda







?

Votre pharmacie

Naturactive

code poste OK



MARQUE


PÉDAGOGIQUE

ACCOMPAGNEMENT


PARTICIPATIF

CRM

ACCOMPAGNEMENT

THEMES

MARQUE

PÉDAGOGIQUE

PARTICIPATIF








Chute de cheveux


la reposusse



découvrir


Santé


Témoignages







Produits





du sommeil





1

2

3

Vos astuces forme



Créer mon agenda







?

Votre pharmacie

Naturactive

code poste OK



HEADER

COL 1 COL 2 COL 3

NAV






Chute de cheveux


la reposusse



découvrir


Santé


Témoignages







Produits





du sommeil





1

2

3

Vos astuces forme



Créer mon agenda







?

Votre pharmacie

Naturactive

code poste OK



MARQUE


PÉDAGOGIQUE

ACCOMPAGNEMENT


PARTICIPATIF

CRM

ACCOMPAGNEMENT

THEMES

MARQUE

PÉDAGOGIQUE

PARTICIPATIF


3. Wireframes / Grid design

‣ Les grilles créent un environnement structurant pour organiser spatialement l’interface

‣ Les gilles optimisent le workflow conception/réalisation








3. Wireframes / Grid design (exemple)








3. Wireframes / Grid design en html - css

Utiliser un framework Grille/CSS pour une méthode de coneption/réalisation simultanée

http://www.thegridsystem.org

http://www.blueprintcss.org






3. Wireframes

Contenus


3. Wireframes / Contenus


3. Wireframes / Typologie des contenus

Type de contenu Description Utiliser pour Ne pas utiliser pour Exemple

Réel Véritable contenunavigation design, protoypage et tests uilisateurs

une présentation client. Risque de discussion sur le contenu et non sur le wireframe

David Raichman,

50 rue monge,

75005 Paris

DummyContenu inventé qui ressemble au contenu réel

prototypes et test utilisateur, design graphique.

une présentation client. Risque de discussion sur le contenu et non sur le wireframe

Pierre Leroy,

120 rue Moreau,

92320 Levallois

SymboliqueSérie de symboles X pour les lettres, 9 pour les chiffres

décrire des champs de formulaire

une présentation client. Trop abstrait

XXXXXXXXX,

999 XXX, XXXXXXX

XXXXXXX, XX, 99


3. Wireframes / Typologie des contenus

Type de contenu Description Utiliser pour Ne pas utiliser pour Exemple

Labels

Description du contenu + info supplémentaire.

Entre crochets

le développementun public non technique

[Nom-30], [Prenom-20]

[NumeroRue-2],

[NomRue-60],

[CodePostal-5],[Ville]

Latin Texte en latindesign graphique et présentation client

le développement et les formulaires.

Lorem ipsum,

Dolor sit amet,

999 dui. Aliqua

GraphiqueTexte représenté par des lignes plus ou moins épaisses

design graphique (premier jet) ou en complément du texte réel trop pauvre

le développement et les formulaires et présentation client


3. Wireframes

Outils


3. Wireframes / Outils

‣ Papier‣ Papier

‣ Stylo, crayons, couleurs...

‣ Digital‣ Logiciels dédiés

‣ Logiciels détournés



Keynote Omnigraffle Axure Viso Powerpoint Flash Dream

Création de wireframe

Prise en main

Prototypage rapide

Export HTML

Interactivité

Spécifique conception

non oui oui non

Keynote Omnigraffle Axure Viso Powerpoint Flash Dream


Prise en main

Prototypage rapide

Export HTML

Interactivité


non oui oui non

Keynote Omnigraffle Axure Powerpoint Flash Dream


Prise en main

Prototypage rapide

Export HTML

Interactivité


non oui oui non non non non

Visio



offline online online




3. Wireframes

Synthèse


3. Wireframes / Synthèse

Sketching

Sketching



produits

navigation principale + recherche +panier

branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites

Gab

arit (z

on

ing

)

produits


branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites

Gab

arit (z

on

ing

)



Wire

frame




Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?

Lunettes Homme Quicksilver

Team

Polaire Histoire & collection

Bagagerie

Logan Berline DACIA 2005 1/43

Objets d’images

Montre Bike Casio

Sportswear

Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature

Renault SportRenaultDacia

Renault F1 Team


mon panierma liste



Jouets


Miniature

100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester







Personnel du groupe Renault

Professionnel

voir la fiche produit+ voir la fiche produit+

voir la fiche produit+voir la fiche produit+

voir la fiche produit+


LogoWire

frame




Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?


Team


Bagagerie


Objets d’images

Montre Bike Casio

Sportswear



Renault F1 Team


mon panierma liste



Jouets


Miniature









Professionnel





Logo



Desig

n g

rap

hiq

ue / v

isu

el

Desig

n g

rap

hiq

ue / v

isu

el



produits


branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites

Hiérarchie visuelle






Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?


Team


Bagagerie


Objets d’images

Montre Bike Casio

Sportswear



Renault F1 Team


mon panierma liste



Jouets


Miniature









Professionnel





Logo






Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?


Team


Bagagerie


Objets d’images

Montre Bike Casio

Sportswear



Renault F1 Team


mon panierma liste



Jouets


Miniature









Professionnel





Logo

résolution écran

1024 px

768 px






Mémoriser mes

informations

OK

Identifiant

Mot de passe


>Inscrivez-vous

DEJA INSCRIT ?


Team


Bagagerie


Objets d’images

Montre Bike Casio

Sportswear



Renault F1 Team


mon panierma liste



Jouets


Miniature









Professionnel





Logo

résolution écran

1024 px

768 pxzone utile

1000 px630 p

xp

remier scroll


‣Utilisez une variation de couleurs pour rendre-compte de la hiérarchie éditoriale

‣Utilisez un logiciel de votre choix pour l’exercice (Photoshop, powerpoint, Visio, Illustrator...)

Rétro-wireframer le site http://news.bbc.co.uk

3. Wireframes / Exercice

http://news.bbc.co.uk

http://news.bbc.co.uk


1. Introduction


3. Wireframes

4. Design d’interaction6. Références



4. Design d’interaction / Définition

Le design d’interaction est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur.

Dans le contexte web et mobile, la discipline s’intéresse au comportement des gabarits et des composants d’interface.


Formalisation



4. Design d’interaction / Formalisation

Drag and Drop

‣ Codes visuels montrant le potentiel d’interaction



‣ Codes visuels montrant le potentiel d’interaction

Déplacements au click et motion design



‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique



‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique



‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique‣ Charte d’interaction (statique ou

interactive)




interactive)

version : 24/11/08

auteur : David Raichman

1.0 Interface générale

5

3

1

Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out).

2

1 Terre

•rollOver : •press :

Comportement local - cas hors France

Sur toute la terre, en dehors des région, le curseur passe en état spécial main

Le curseur main diminue de taille de 10%. Si une fenêtre est ouverte (élément 5, ci-contre) lorsqu’on déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte.

La rotation de la terre se fait uniquement selon l’axe de ci-dessus.




interactive)

version : 24/11/08

auteur : David Raichman

1.0 Interface générale

5

3

1

Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out).

2

1 Terre

•rollOver : •press :

Comportement local - cas hors France

Sur toute la terre, en dehors des région, le curseur passe en état spécial main

Le curseur main diminue de taille de 10%. Si une fenêtre est ouverte (élément 5, ci-contre) lorsqu’on déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte.

La rotation de la terre se fait uniquement selon l’axe de ci-dessus.




interactive)




interactive)‣Wireframe animé


4. Design d’interaction / Design patterns

En conception UX, les design pattern désignent des

motifs d’interaction popularisés et standardisés. »Les design pattern sont des idiomes que les utilisateurs ont l’habitude d’utiliser.

http://interface.fh-potsdam.de/infodesignpatterns/news.php

http://developer.yahoo.com/ypatterns



http://developer.yahoo.com/ypatterns/



4. Design d’interaction / Formalisation (exemple)

Cas : Vuitton, Hennessy black, Mattel


4. Design d’interaction / Exercice

Storyboarder un tunnel d’achat d’un e-commerce HTML/Ajax

‣Wireframer les étapes suivantes (papier, crayons)-Récapitulatif du panier d’achat-Création du compte-Renseignement des adresses

‣La partie «adresse» doit permettre à l’utilisateur d’être livré à des adresses différentes pour chaque produit


Protoypes



4. Design d’interaction / Introduction aux prototypes

A quoi servent les prototypes ?

SHARED COMMUNICATION

WORKING THROUGH A DESIGN

SELLING YOUR IDEA INTERNALLY

GAUGING TECHNICAL FEASIBILITY

USABILITY TESTING




‣ Communiquer avec l’équipe, le client‣ Graphistes

‣ Développeurs (spécifications du motion design...)

‣ Montrer un concept interactif en action

‣ Mettre en évidence des aspects fonctionnels, techniques ...

‣ Design‣ Tester un principe d’interface

‣ Construire par itération




‣ Evaluer la logique de l’interface‣ Mettre à l’épreuve les spécifications (cas non traités, erreurs

logiques....)

‣ Déceler les points techniques critiques (faisabilité)

‣ Tester l’utilisabilité de l’interface‣ Repérage des zones principales de l’interface

‣ Utilisation des composants d’interface

‣ Wording (label, instructions...)

‣ Architecture d’information (logique de navigation, organisation des contenus...)

‣ Efficacité du design graphique




Wireframes

Design d’interactionPrototypage

Optimisations

Test

Design visuel




‣ Optimiser le temps et les ressources‣ Anticiper les problèmes ergonomiques...

‣ Anticiper les problèmes logiques....

‣ Anticiper les problème techniques....

... Avant le graphisme et le développement


4. Design d’interaction / Typologie des prototypes

Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital



Interactif


Sketching

Statique

Prototype papier

Ecrans

Prototype digital

Temps +

Ress

ources



‣ Prototype papier‣ Dessiné uniquement à la main

‣ Mixte : intégration de certains éléments imprimés par (images, menus....)









‣ Prototype digital‣ Codé (HTML, Flash...)

‣ Non-codé (Powerpoint, Keynote, Axure...)



‣ Passer trop de temps sur le rendu du prototype‣ Les logiciels incitent souvent à parfaire le motion

design ou le graphisme alors qu’ils ne seront peut être pas gardés après test !

‣ Souvent, un protoype rudimentaire peut être suffisant pour tester la même chose qu’un prototype plus abouti ! ... et donnera les mêmes résultats.

‣ Croire à la réutilisabilité du code‣ Très rare ou récupération d’une petite partie, sauf

framework spécifique ou méthode agile


4. Design d’interaction / Critères d’un bon prototype

‣ Création‣ A quelle vitesse le prototype peut-il être créé “from

scratch” ?

‣ Duplication‣ Peut-on dupliquer rapidement les bases de l’interface du

prototype afin de décliner les différents états ?

‣ Modification‣ Le prototype est-il facilement modifiable, réajustable pour

des tests ultérieurs ?

‣ Réalisme‣ Le prototype présente-il un degré de réalisme visuel et

interactif nécessaire pour ce que l’on souhaite tester ?


APPLICATIF

AUDIOVISUEL

INFORMATIONNEL

STANDARD

NON-STANDARD

- étapes multiples

- orienté tâche

- navigation non-standard

PROTOTYPE PAPIER

TEST

WIREFRAME DIGITAL PROTOTYPE DIGITAL

- wording

- fonctions spécifiques

DESSIN PAPIER

D’INTERFACE

TEST

STORYBOARD + MOTION DESIGN PROTOTYPE DIGITAL

- interactions

- transition et orientation de l’utilisateur

WIREFRAME ANIMÉ

TEST

4. Design d’interaction / Arbre de décision


4. Design d’interaction / Prototypes papiers

‣ Le matériel‣ Support dur de taille supérieure au prototype

‣ Papier blanc

‣ Différentes tailles et couleurs de stylo et effaçables

‣ Papier transparent de couleur (jaune, rose..) (permet de faire du highlighting)

‣ Papier transparent incolor (pour les formulaires)

‣ Ciseaux

‣ Scotch transparent (pour attacher les différents composants)

‣ Pâte à fixe (pour poser les différents états de l’interface)



‣ Support‣ On peut utiliser une impression faite à partir de l’interface

réelle (OS, Navigateur, Carcasse d’un appareil mobile..)

‣ Les éléments d’interface‣ Boutons et check box

‣ Onglets

‣ Menu déroulant

‣ Sélection et highlight

‣ Boite expandable






‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant








‣ Onglets

‣ Menu déroulant





Les prototypes papiers supposent deux personnes : celui qui doit simuler le

comportement de l’interface en fonction des actions de l'utilisateur et le testeur.


4. Design d’interaction / Exemples de prototypes

‣ Logiciel de présentation (non-codés)‣ Etude de cas : Europcar, Tag

‣ Programmation (codé)‣ AJAX (Mattel)

‣ Flash (Mattel/Amex)

‣ Mixtes (ScreenCast, Non-codés, codé) (Sanford, Mattel)


1. Introduction


3. Wireframes


6. Références



6. Références / Bibliographie

Tidwell, Designing Interfaces, 2005, O’Reilly

Warfel, Prototyping, 2009, Rosenfeld

Hoekman, Designing the moment : web interface design concept in action, 2008, New Riders

Hoekman, Designing the Obvious: A Common Sense Approach to Web Application Design, 2007, New Riders

Saffer, Designing Gestural Interfaces, 2008, O’Reilly

Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley

Elam K., Grid Systems, 2004, Princeton Architectural Press

Snyder, Paper Prototyping, 2003, Morgan Kaufmann


6. Références / Webographie

http://wireframes.linowski.ca/ (Wireframes)

http://webwithoutwords.com/ (Wireframes)

http://developer.yahoo.com/ypatterns/ (Design patterns)

http://www.iconfinder.net/ (Design d’interface)

http://www.thegridsystem.org/ (Grid Design)

http://wireframes.linowski.ca

http://wireframes.linowski.ca

http://webwithoutwords.com

http://webwithoutwords.com



http://www.iconfinder.net

http://www.iconfinder.net



http://www.slideshare.net/davethepreacher

