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

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

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

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

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

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

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

Everyday | 2 comments

TELL MY FRIENDS NOW !

Edit friends list

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

Erin has accepted your invitation

Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments

Edit friends list

NIDO Home Moments Health Matters Our Range

Oscar Angelica

Your Friends (14)

Edit my pro!le

Recently added

View all

Mary, Ellen, Peter

Comments

Edit friends list

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

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

Les sites RenaultFR ｜ EN ｜

Mémoriser mes

informations

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

Texte descriptif produit version longue2

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é :

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

Chèques cadeauxEvenements

Produits web > Renault >Twingo 2008 > Montre mixte

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste

Montre mixte

135,00!

Quantité 1couleur

Ajouter au panier

Lien vers 4.a

en stock

Prix :

Disponibilité :

Professionnel

Version : 1.3 (31/01/08)

Produits webRenault

Renault merchandising

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste

Montre mixte

135,00!

Quantité 1couleur

Ajouter au panier

Lien vers 4.a

en stock

Prix :

Disponibilité :

Professionnel

Version : 1.3 (31/01/08)

Produits webRenault

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

mon panierma liste

Montre mixte

135,00!

Quantité 1couleur

Ajouter au panier

Lien vers 4.a

en stock

Prix :

Disponibilité :

Professionnel

Version : 1.3 (31/01/08)

Produits webRenault

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

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

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

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

Chute de cheveux

la reposusse

découvrir

Santé

Témoignages

Produits

du sommeil

Vos astuces forme

Créer mon agenda

Votre pharmacie

Naturactive

code poste OK

HEADER

COL 1 COL 2 COL 3

Chute de cheveux

la reposusse

découvrir

Santé

Témoignages

Produits

du sommeil

Vos astuces forme

Créer mon agenda

Votre pharmacie

Naturactive

code poste OK

MARQUE

INFORMATIONS DʼACTUALITÉ

PÉDAGOGIQUE

ACCOMPAGNEMENT

INFORMATIONS DE FOND

PARTICIPATIF

ACCOMPAGNEMENT

THEMES

MARQUE

PÉDAGOGIQUE

PARTICIPATIF

Chute de cheveux

la reposusse

découvrir

Santé

Témoignages

Produits

du sommeil

Vos astuces forme

Créer mon agenda

Votre pharmacie

Naturactive

code poste OK

HEADER

COL 1 COL 2 COL 3

Chute de cheveux

la reposusse

découvrir

Santé

Témoignages

Produits

du sommeil

Vos astuces forme

Créer mon agenda

Votre pharmacie

Naturactive

code poste OK

MARQUE

PÉDAGOGIQUE

ACCOMPAGNEMENT

PARTICIPATIF

ACCOMPAGNEMENT

THEMES

MARQUE

PÉDAGOGIQUE

PARTICIPATIF

Chute de cheveux

la reposusse

découvrir

Santé

Témoignages

Produits

du sommeil

Vos astuces forme

Créer mon agenda

Votre pharmacie

Naturactive

code poste OK

HEADER

COL 1 COL 2 COL 3

Chute de cheveux

la reposusse

découvrir

Santé

Témoignages

Produits

du sommeil

Vos astuces forme

Créer mon agenda

Votre pharmacie

Naturactive

code poste OK

MARQUE

PÉDAGOGIQUE

ACCOMPAGNEMENT

PARTICIPATIF

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

offline online online

3. Wireframes

Synthèse

3. Wireframes / Synthèse

Sketching

produits

navigation principale + recherche +panier

branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites

arit (z

produits

branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites

arit (z

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

Lunettes Homme Quicksilver

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

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

Bagagerie

Objets d’images

Montre Bike Casio

Sportswear

Renault F1 Team

mon panierma liste

Jouets

Miniature

Professionnel

ue / v

produits

branded headerlogo

navigation

secondaire

accès

utilisateurs

footer

accès autre sites

Hiérarchie visuelle

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

Bagagerie

Objets d’images

Montre Bike Casio

Sportswear

Renault F1 Team

mon panierma liste

Jouets

Miniature

Professionnel

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

Bagagerie

Objets d’images

Montre Bike Casio

Sportswear

Renault F1 Team

mon panierma liste

Jouets

Miniature

Professionnel

résolution écran

1024 px

768 px

Mémoriser mes

informations

Identifiant

Mot de passe

>Inscrivez-vous

DEJA INSCRIT ?

Bagagerie

Objets d’images

Montre Bike Casio

Sportswear

Renault F1 Team

mon panierma liste

Jouets

Miniature

Professionnel

résolution écran

1024 px

768 pxzone utile

1000 px630 p

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

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

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‣ Charte d’interaction (statique ou

interactive)

version : 24/11/08

auteur : David Raichman

1.0 Interface générale

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).

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

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).

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

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

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 +

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

WIREFRAME DIGITAL PROTOTYPE DIGITAL

- wording

- fonctions spécifiques

DESSIN PAPIER

D’INTERFACE

STORYBOARD + MOTION DESIGN PROTOTYPE DIGITAL

- interactions

- transition et orientation de l’utilisateur

WIREFRAME ANIMÉ

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://www.slideshare.net/davethepreacher

Cours (E) Gobelins Master 2 MICNI

Design

cours master BC commun

BANDE TRADUITE - Orques Et Gobelins

Info Gobelins 2

Cours Informatique Master STEP

CONCOURS D’ENTRÉE GOBELINS PHOTOGRAPHIE ET VIDEO 2019

Cours Consolidation Master 2 CCA

Présentation du master Les cours du master Les débouchés

Cours Master Fsbtairi

cours master SSI.pdf

Orques et Gobelins - The Ninth Age

Cours Catia Master GI

09 pyjarama gobelins

Cours Master Audit Bancaire.ppt

Master Mecatronique Cours Fabrication Akourri

06 floraison gobelins

Warhammer Armées - V8 - Orques & Gobelins

2021 - Ecole de l'image GOBELINS

Cours Master Analyse Financiere

cours de master CCA

Curriculum Vitae détaillé - IMMD€¦ · SPSS) Cours Master 2 21 HTD ... distribution Stratégies internationales de distribution Cours Cours Master 1 Master 2 23 HTD 32 ... Diop-Sall