Your SlideShare is downloading. ×
Interface Design Crma 2009
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Interface Design Crma 2009

2,445
views

Published on

Cours Ecole des Gobelins CRMA - année 2009-2010

Cours Ecole des Gobelins CRMA - année 2009-2010

Published in: Design, Technology, Business

1 Comment
10 Likes
Statistics
Notes
  • After you got all the information on Fioricet, another point on your agenda should be the price for it. http://www.fioricetsupply.com resolves this problem. Now you can make the decision to buy.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,445
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
366
Comments
1
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design d’interface W i r e f r a m e & P r o t o t y p e s Octobre 2009 - David Raichman - Senior UX Designer @ OgilvyInteractive
  • 2. SOMMAIRE Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  • 3. SOMMAIRE Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 4. SOMMAIRE Design d’interface ! Prototypes ! Objectifs ! Enjeux ! Outils et techniques ! Tests utilisateurs
  • 5. SOMMAIRE Design d’interface ! Références ! Bibliographie ! Webographie
  • 6. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  • 7. INTRODUCTION > Enjeux Industrialisation du digital ! Nouveau paradigme métiers Années 90 + Graphiste(s) Développeur(s) Chef de projet
  • 8. INTRODUCTION > Enjeux Industrialisation du digital ! Nouveau paradigme métiers Années 2000 : naissance de l’UX + + + + Graphiste User research Architecte Ergonome Développeur expert d’information + Chef de projet Designer Designer d’interface d’interaction
  • 9. INTRODUCTION > Enjeux Industrialisation du digital ! Nouveau paradigme métiers Années 2000 : naissance de l’UX + + + + Graphiste User research Architecte Ergonome Développeur expert d’information + Chef de projet Designer Designer d’interfaceDesigner UX d’interaction
  • 10. INTRODUCTION > Enjeux Industrialisation du digital ! Nouveau paradigme métiers ! Nouvelle méthodologie ! Techniques et outils de conception à inventer ! Nouvelle vague d’applications de conception ! Détournement des logiciels de réalisation graphique, bureautique, ingénierie... ! Prise en compte les contraintes de planning/budget/ faisabilité/utilisabilité
  • 11. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  • 12. INTRODUCTION > Processus de conception et UCD UCD = User Centred Design ! Faire participer les utilisateurs dans le processus de conception ! Profiler les utilisateurs (Personas) ! Scénariser les parcours utilisateurs ! Focaliser sur les tâches des utilisateurs ! Conduire des tests utilisateurs
  • 13. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... C O N C E P T I O N Design d’interface Design d’Interaction Design visuel R É A L I S AT I O N
  • 14. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... C O N C E P T I O N Design d’interface Design d’Interaction Design visuel R É A L I S AT I O N
  • 15. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... C O N C E P T I O N Design d’interface Design d’Interaction Design visuel R É A L I S AT I O N
  • 16. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... C O N C E P T I O N Design d’interface Design d’Interaction Design visuel R É A L I S AT I O N
  • 17. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... C O N C E P T I O N Design d’interface Design d’Interaction Design visuel R É A L I S AT I O N
  • 18. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... Optimisations C O N C E P T I O N Design d’interface Test Utilisateur Design d’Interaction Prototypage Optimisations Design visuel R É A L I S AT I O N Test Utilisateur Prototypage
  • 19. INTRODUCTION > Processus de conception et UCD ... S T R AT É G I E Besoins utilisateurs Objectifs ... Spécifications fonctionnelles Architecture d’information ... Optimisations C O N C E P T I O N Design d’interface PÉRIMÈTRE DU COURS Test Utilisateur Design d’Interaction Prototypage Optimisations Design visuel R É A L I S AT I O N Test Utilisateur Prototypage
  • 20. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  • 21. INTRODUCTION > Interfaces et design d’information Interactions Homme - Ordinateur Input Utilisateur Interface Homme Ordinateur Output Système
  • 22. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 23. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 24. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 25. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 26. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 27. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 28. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 29. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 30. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 31. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 32. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 33. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 34. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  • 35. INTRODUCTION > Interfaces et design d’information Echelle d’iconicité Re lat ion st op Iconicité maximale og rap hiq Objet lui-même ue s Iconicité minimale
  • 36. INTRODUCTION > Interfaces et design d’information Echelle d’iconicité Re lat ion st op Iconicité maximale og rap hiq Objet lui-même ue s Schéma anatomique Iconicité minimale
  • 37. INTRODUCTION > Interfaces et design d’information Echelle d’iconicité Re lat ion st op Iconicité maximale og rap hiq Objet lui-même ue Re s top latio olo ns Schéma anatomique giq ues Schéma de principe Iconicité minimale
  • 38. INTRODUCTION > Interfaces et design d’information Echelle d’iconicité Re lat ion st op Iconicité maximale og rap hiq Objet lui-même ue Re s top latio olo ns Schéma anatomique giq ues Schéma de principe Re lat ion Schéma de formulation sl og iqu es Iconicité minimale
  • 39. INTRODUCTION > Interfaces et design d’information Echelle d’iconicité Re lat ion st op Iconicité maximale og rap hiq Objet lui-même ue Re s top latio olo ns Schéma anatomique giq ues Schéma de principe Re lat ion Schéma de formulation sl og iqu es Schéma en espace complexe Iconicité minimale
  • 40. INTRODUCTION > Interfaces et design d’information Echelle d’iconicité Re lat ion st op Iconicité maximale og rap hiq Objet lui-même ue Re s top latio olo ns Schéma anatomique giq ues Schéma de principe Re lat ion Schéma de formulation sl og iqu es Schéma en espace complexe Visualisation de données Iconicité minimale
  • 41. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  • 42. INTRODUCTION > Typologie des interfaces Implementation-centred + - Facile à construire Apprentissage long - Public expert
  • 43. INTRODUCTION > Typologie des interfaces Implementation-centred + - Facile à construire Apprentissage long - Public expert
  • 44. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 45. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 46. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique w w w. s o u t h w e s t . c o m ( 1 9 9 9 ) + - intuitive contextuelle aucun apprentissage utopique
  • 47. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 48. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 49. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 50. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 51. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 52. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 53. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  • 54. INTRODUCTION > Typologie des interfaces user-centred / Idiomatique + - modulaire apprentissage interopérable court interaction riche
  • 55. INTRODUCTION > Typologie des interfaces w w w. n i c k a d . c o m user-centred / Idiomatique + - modulaire apprentissage interopérable court interaction riche
  • 56. INTRODUCTION > Typologie des interfaces user-centred / Idiomatique + - modulaire apprentissage interopérable court interaction riche
  • 57. INTRODUCTION > Typologie des interfaces user-centred / Idiomatique i n p u t o u t p u t naviguer, dessiner, idiomes changer de section, trier acheter double-clic, composées checkbox, surbrillance drag’n’drop, sélection primitives pointage, clic, curseur, texte drag, touche pressée
  • 58. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 59. WIREFRAME > Définition et usages Le challenge lipsum Lor “Se em natu d ut p s e ersp rror ic iati sit iatis volu und om s und pta e o natunis is e tem mn is is volu s err te “ Lorem te pta or s iati tem it om s und natunis is e volu s err te iati “Sed pta or s s ut tem it omn unde natus perspicia na is is error sit vo tis un volutus err te luptatede omnis ist pta or s tem it iat is un m“ e omnis de lipsum lipsum natus iste iatis un Lorem volup error sit tatem omnis de natus iste volup error sit tatem iatis un omnis de natus iste volup error sit “Sed ut perspiciatis unde omnis iste tatem natus error sit voluptatem “ iatis unde iatis unde iatis unde omnis iste omnis iste omnis iste natus error sit natus error sit natus error sit voluptatem voluptatem voluptatem lipsum xxxxxxx •xxxxxxxx •xxx xxxxxxx •xxxxxxxx xxxxxxx •xxxxxx •xxxxxxxx xxxxxxx ? •xxxxxxx xxxxxxx xxxxxxx RECHERCHE xxxxxxx MA SELECTION CONTACT ACCUEIL PLAN DU SITE MENTIONS LEGALES CREDITS AUTRES SITES 3.0 4.0 5.0 PEAU YEUX KLORANE 3.1 4.1 5.1 ACTUALITES GAMME GAMME GAMME GAMME GAMME GAMME 5.2 NOS ENGAGEMENTS FICHE PLANTE 5.3 LA RECHERCHE FICHE PLANTE 5.4 LA PHYTOFILIERE 3.1.1 4.1.1 5.5 FICHE PRODUIT FICHE PRODUIT DECOUVRIR FICHE PRODUIT FICHE PRODUIT FICHE PRODUIT FICHE PRODUIT PLANTES REGION QUESTIONS/ QUESTIONS/ REPONSES REPONSES 3.2 4.2 FICHES CONSEIL FICHES CONSEIL
  • 60. WIREFRAME > Définition et usages 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.
  • 61. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Statique
  • 62. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Statique
  • 63. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Sketching Statique
  • 64. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Sketching Statique
  • 65. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Sketching Statique
  • 66. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Statique
  • 67. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Statique
  • 68. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Sketching Statique
  • 69. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Ecrans Sketching Sketching (psd, jpg...) Statique
  • 70. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Ecrans Sketching Sketching (psd, jpg...) Statique
  • 71. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Sketching Ecrans Statique
  • 72. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype digital papier (HTML, Flash) Low résolution Hi résolution Sketching Sketching Ecrans Statique
  • 73. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype digital papier (HTML, Flash) Low résolution Hi résolution Sketching Sketching Mockup Statique
  • 74. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Sketching Ecrans Statique
  • 75. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution Sketching Ecrans Statique
  • 76. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique
  • 77. WIREFRAME > Définition et usages Hi Lynn | My account | Log Out | Help Degré de précision NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Interactif Angelica Prototype Show me All entries Starting from rst day | today Only highlights Prototype papier digital Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! Mary, Ellen, Peter Everyday | 2 comments new View all 11 Lorem ipsum et diliagt gentris sed etiam unique valor, Comments MAY melior paritus. Et uni soesu terrae submitta... 3 you have new comments! Si meliora est vede meccum ! Everyday | 2 comments new Your highlights Slideshow Lorem ipsum et diliagt gentris sed etiam Wireframes 10 MAY unique valor, melior paritus. Et uni soesu Low résolution Health Matters terrae submitta... Hi résolution Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, Ecrans MAY melior paritus. Et uni soesu terrae submitta... Sketching Si meliora est vede meccum ! Statique Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend
  • 78. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique
  • 79. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique
  • 80. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Mockup Statique
  • 81. WIREFRAME > Définition et usages Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique
  • 82. WIREFRAME > Définition et usages Les 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 les tests utilisateurs ! Quelle est l’audience ? ! Créatifs (document de design) ! Développeurs (document de spécification) ! Client (document de présentation)
  • 83. WIREFRAME > Définition et usages Les questions à se poser ! Le degré de précision est-il adapté au contexte ? ! Low-res / Hi-res ? ! Papier ou digital ? ! Statique, animé ou interactif ? ! Combien d’écrans ?
  • 84. 2 Texte descriptif produit version longue FR EN Les sites Renault WIREFRAME > Définition et usages Propriété du produit RENAULT-MERCHANDISING.COM 3 Au minimum il y a 0 liste déropulante de propriété. Au maximum, il y a 2 listes déroulantes Spécifications de propriétés. Le qualificatif de la propriété dépend du ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES produit (taille, couleur...) ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Produits web Renault Produits web > Renault >Twingo 2008 > Montre mixte DEJA INSCRIT ? 4 Champ de saisie quantité Twingo 2008 Identifiant 1.3.1.3 fiche produit web Dacia 2008 version non loggé Mot de passe 1 Image taille normale Noël 1 Montre mixte Vignette vues produit pouvant aller de 0 à 3 Mémoriser mes 5 Chaque vignette est une réduction de d’une Chèques cadeaux informations image de taille normale. Si pas de vues Boîtier alliage, cadran blanc. Evenements différentes, on affichera 0 vignettes. Mouvement 2 aiguilles. 2 Bracelet PU noir. LIvré sous OK 2 Texte descriptif produit version longue FR EN Les sites Renault étui cartonné. Garantie 2 ans. >Mot de passe oublié ? 6 Affiche soit “en stock” soit (a) “épuisé" soit en >Inscrivez-vous cours d’approvisionnement. (b). Si (a) ou (b) Propriété du produit RENAULT-MERCHANDISING.COM Quantité 3 couleur 1 4 3 Au minimummon a 0 listene s’affiche pas. alors “ajouter à il y panier’ déropulante de propriété. Au maximum, il y a 2 listes déroulantes de propriétés. ACCUEIL NOTRE ACTIVITE NOS PRODUITS 77 11 421 691 NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES Prix : 135,00! Personnel du groupe 7 LienLe qualificatif de la propriété dépend du vers 4.a produit (taille, couleur...) Disponibilité : en stock 6 Renault ma liste mon panier 5 RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles 7 Ajouter au panier Produits web Renault Produits web > Renault >Twingo 2008 > Montre mixte DEJA INSCRIT ? 4 Champ de saisie quantité Twingo 2008 Dacia 2008 Professionnel Identifiant Noël Mot de passe 1 Montre mixte Vignette vues produit pouvant aller de 0 à 3 Mémoriser mes 5 Chaque vignette est une réduction de d’une Chèques cadeaux informations image de taille normale. Si pas de vues Boîtier alliage, cadran blanc. Evenements différentes, on affichera 0 vignettes. © RENAULT MERCHANDISING Mouvement 2 aiguilles. 2 NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU OK Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans. >Mot de passe oublié ? 6 Affiche soit “en stock” soit (a) “épuisé" soit en >Inscrivez-vous cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas. couleur 3 Quantité 1 4 77 11 421 691 Prix : 135,00! Personnel du groupe 7 Lien vers 4.a Disponibilité : en stock 6 Renault 5 7 Ajouter au panier Professionnel Auteur : David Raichman Projet : Renault-merchandising.com © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Version : 1.3 (31/01/08)
  • 85. 2 Texte descriptif produit version longue FR EN Les sites Renault WIREFRAME > Définition et usages Propriété du produit RENAULT-MERCHANDISING.COM 3 Au minimum il y a 0 liste déropulante de propriété. Au maximum, il y a 2 listes déroulantes Spécifications de propriétés. Le qualificatif de la propriété dépend du ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES produit (taille, couleur...) ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Produits web Renault Produits web > Renault >Twingo 2008 > Montre mixte DEJA INSCRIT ? 4 Champ de saisie quantité Twingo 2008 Identifiant 1.3.1.3 fiche produit web Dacia 2008 version non loggé Mot de passe 1 Image taille normale Noël 1 Montre mixte Vignette vues produit pouvant aller de 0 à 3 Mémoriser mes 5 Chaque vignette est une réduction de d’une Chèques cadeaux informations image de taille normale. Si pas de vues Boîtier alliage, cadran blanc. Evenements différentes, on affichera 0 vignettes. Mouvement 2 aiguilles. 2 Bracelet PU noir. LIvré sous OK 2 Texte descriptif produit version longue FR EN Les sites Renault étui cartonné. Garantie 2 ans. >Mot de passe oublié ? 6 Affiche soit “en stock” soit (a) “épuisé" soit en >Inscrivez-vous cours d’approvisionnement. (b). Si (a) ou (b) Propriété du produit RENAULT-MERCHANDISING.COM Quantité 3 couleur 1 4 3 Au minimummon a 0 listene s’affiche pas. alors “ajouter à il y panier’ déropulante de propriété. Au maximum, il y a 2 listes déroulantes de propriétés. ACCUEIL NOTRE ACTIVITE NOS PRODUITS 77 11 421 691 NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES Prix : 135,00! Personnel du groupe 7 LienLe qualificatif de la propriété dépend du vers 4.a produit (taille, couleur...) Disponibilité : en stock 6 Renault ma liste mon panier 5 RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles 7 Ajouter au panier Produits web Renault Produits web > Renault >Twingo 2008 > Montre mixte DEJA INSCRIT ? 4 Champ de saisie quantité Twingo 2008 Dacia 2008 Professionnel Identifiant Noël Mot de passe 1 Montre mixte Vignette vues produit pouvant aller de 0 à 3 Mémoriser mes 5 Chaque vignette est une réduction de d’une Chèques cadeaux informations image de taille normale. Si pas de vues Boîtier alliage, cadran blanc. Evenements différentes, on affichera 0 vignettes. © RENAULT MERCHANDISING Mouvement 2 aiguilles. 2 NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU OK Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans. >Mot de passe oublié ? 6 Affiche soit “en stock” soit (a) “épuisé" soit en >Inscrivez-vous cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas. couleur 3 Quantité 1 4 77 11 421 691 Prix : 135,00! Personnel du groupe 7 Lien vers 4.a Disponibilité : en stock 6 Renault 5 7 Ajouter au panier Professionnel Auteur : David Raichman Projet : Renault-merchandising.com © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Version : 1.3 (31/01/08)
  • 86. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 87. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 88. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 89. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 90. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 91. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 92. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 93. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 94. WIREFRAME > Définition et usages Etude de cas ! Louis Vuitton Mobile
  • 95. WIREFRAME > Définition et usages Etude de cas ! Hennessy Black
  • 96. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 97. WIREFRAME > Contraintes technologiques Deux approches ! Travailler avec une technologie imposée ! Trouver la technologie qui répond au cahier des charges de mon design d’interface
  • 98. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... N M ew on s de s vi rtu el s Audiovisuel Informationnel
  • 99. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... mouvements 2D/3D travelling, panoramique trajectoire, rotation, zoom... transitions 2D/3D fade, iris, wipe... filtres 2D/3D blur, glow, bevel... réponse sonore pan stéréo, filtres, intensité... N M ew on s de s vi rtu el s Audiovisuel Informationnel
  • 100. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... N M ew on s de s vi rtu el s Audiovisuel Informationnel
  • 101. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So a M ew og ns c on ia s s a l de ct io s nn vi rtu el el s Audiovisuel Informationnel
  • 102. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So a M ew og ns c on ia s s a l de ct io s nn vi rtu el el s Audiovisuel Informationnel
  • 103. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So a M ew og ns c on ia s s a l de ct io s nn vi rtu el el s Audiovisuel Informationnel
  • 104. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So a M ew og ns c on ia s s a l de ct io s nn vi rtu el el s Audiovisuel Informationnel
  • 105. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 106. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 107. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 108. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 109. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 110. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 111. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 112. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 113. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 114. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 115. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 116. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 117. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 118. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 119. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 120. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 121. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 122. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 123. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns u c bl on x ia s s s, a ic en l de ct ita do io s lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 124. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux c bl on ia s s s, a ic en l d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 125. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application HTML/CSS, Ajax (javascript) Tr Bl N So Je Fi Pu a M ew og lm ns ux c bl on ia s s s, a ic en l d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 126. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Flash, Silverlight HTML/CSS, Ajax (javascript) Tr Bl N So Je Fi Pu a M ew og lm ns ux c bl on ia s s s, a ic en l d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 127. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application .Net, Java... Flash, Silverlight HTML/CSS, Ajax (javascript) Tr Bl N So Je Fi Pu a M ew og lm ns ux c bl on ia s s s, a ic en l d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 128. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application Flex/AIR, .Net, SDK... RMA : Rich Mobile Application RIA : Rich Internet Application .Net, Java... Flash, Silverlight HTML/CSS, Ajax (javascript) Tr Bl N So Je Fi Pu a M ew og lm ns ux c bl on ia s s s, a ic en l d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 129. WIREFRAME > Contraintes technologiques Technologies Applicatif Desktop, bornes, autres... Director, Java... RDA : Rich Desktop Application Flex/AIR, .Net, SDK... RMA : Rich Mobile Application RIA : Rich Internet Application .Net, Java... Flash, Silverlight HTML/CSS, Ajax (javascript) Tr Bl N So Je Fi Pu a M ew og lm ns ux c bl on ia s s s, a ic en l d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel
  • 130. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 131. WIREFRAME > Gabarits, zoning et grilles Les questions à se poser ! Quel est le support final ? ! Ecran ordinateur, mobile, écran tactile, TV ... ! La résolution d’affichage ! Quelle technologie ? ! Flash ! HTML/CSS/Ajax ! SDK Iphone...
  • 132. WIREFRAME > Gabarits, zoning et grilles Les questions à se poser ! Quel est le genre ? ! informationnel > penser “navigation” ! applicatif > penser “outils” et “actions” ! audiovisuel > penser “motion design” ! Quelle est la hiérarchie d’information ? ! Contraintes éditoriales ! Titraille ! Images, illustrations...
  • 133. WIREFRAME > Gabarits, zoning et grilles Les questions à se poser ! Quel est le genre ? ! informationnel > penser “navigation” ! applicatif > penser “outils” et “actions” ! audiovisuel > penser “motion design” ! Quelle est la hiérarchie d’information ? ! Contraintes éditoriales ! Titraille ! Images, illustrations...
  • 134. WIREFRAME > Gabarits, zoning et grilles Les questions à se poser ! Quel est le genre ? ! informationnel > penser “navigation” ! applicatif > penser “outils” et “actions” ! audiovisuel > penser “motion design” ! Quelle est la hiérarchie d’information ? ! Contraintes éditoriales ! Titraille ! Images, illustrations...
  • 135. WIREFRAME > Gabarits, zoning et grilles Définition « 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.
  • 136. WIREFRAME > Gabarits, zoning et grilles HEADER Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels Santé Créer votre agenda santé Digestion difficile En quelques clics, complétez votre profil santé Circulation et profitez de conseils personnalisés pour Fatigue garder la forme ! Stress Sommeil Partout avec vous, même sur votre mobile Maux de tête Etat grippal Douleurs articulaires Feminité Equilibre Vitalité Maux de l’hiver Confort respiratoire Podcast Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie Voir tous les sujets Vos conseils santé naturelle tout au long de Au coeur de l’actualité 1 l’année Beauté / Bien-être 2 Vos astuces forme Minceur Chute des cheveux 3 Les conseils d’un phytothérapeute Beauté des cheveux Dermo-nutrition Bronzage Créer mon agenda COL 1 COL 2 COL 3 Voir tous les sujets Le stress est-il Chute de Lutter contre les communicatif ? cheveux rhumes à répétition Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes psychologue chute de ou favoriser d’une internaute à répond à toutes nos la reposusse découvrir Stress questions... Consultez plus de 150 articles de Sommeil référence sur la phytothérapie Rhume Minceur Produits Posez des questions santé, forme et ? Ménopause bien-être, des experts répondent à vos Voir tous les sujets questions Votre pharmacie Le test du mois Naturactive Découvrez votre profil minceur Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Doriance Anti-âge Phytaroma Elusanes Améliorer son Résoudre les Lutter contre le Trouvez les produits confort respiratoire troubles passagers photo-vieillissement Naturactive, les plus du sommeil proces de chez vous oui pas spécialement pas du tout
  • 137. WIREFRAME > Gabarits, zoning et grilles MARQUE HEADER Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels Santé Créer votre agenda santé Digestion difficile En quelques clics, complétez votre profil santé Circulation et profitez de conseils personnalisés pour Fatigue garder la forme ! Stress Sommeil Partout avec vous, même sur votre mobile Maux de tête Etat grippal Douleurs articulaires Feminité CRM Equilibre Vitalité Maux de l’hiver ACCOMPAGNEMENT Confort respiratoire Podcast INFORMATIONS D!ACTUALITÉ Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie INFORMATIONS DE FOND PÉDAGOGIQUE Voir tous les sujets Vos conseils santé naturelle tout au long de Au coeur de l’actualité 1 l’année Beauté / Bien-être PARTICIPATIF 2 Vos astuces forme Minceur Chute des cheveux Les conseils d’un phytothérapeute Beauté THEMES 3 des cheveux Dermo-nutrition Bronzage Créer mon agenda COL 1 COL 2 COL 3 Voir tous les sujets Le stress est-il Chute de Lutter contre les communicatif ? cheveux rhumes à répétition Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes psychologue chute de ou favoriser d’une internaute à répond à toutes nos la reposusse découvrir Stress questions... Consultez plus de 150 articles de Sommeil PÉDAGOGIQUE référence sur la phytothérapie Rhume Minceur ACCOMPAGNEMENT et Produits Posez des questions santé, forme ? Ménopause bien-être, des experts répondent à vos Voir tous les sujets questions Votre pharmacie Le test du mois MARQUE Naturactive Découvrez votre profil minceur Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Phytaroma Elusanes Doriance Anti-âge PARTICIPATIF Améliorer son Résoudre les Lutter contre le Trouvez les produits confort respiratoire troubles passagers photo-vieillissement Naturactive, les plus du sommeil proces de chez vous oui pas spécialement pas du tout
  • 138. WIREFRAME > Gabarits, zoning et grilles MARQUE HEADER Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels Santé Créer votre agenda santé Digestion difficile En quelques clics, complétez votre profil santé Circulation et profitez de conseils personnalisés pour Fatigue garder la forme ! Stress Sommeil Partout avec vous, même sur votre mobile Maux de tête Etat grippal Douleurs articulaires Feminité CRM Equilibre Vitalité Maux de l’hiver ACCOMPAGNEMENT Confort respiratoire Podcast INFORMATIONS D!ACTUALITÉ Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie INFORMATIONS DE FOND PÉDAGOGIQUE Voir tous les sujets Vos conseils santé naturelle tout au long de Au coeur de l’actualité 1 l’année Beauté / Bien-être PARTICIPATIF 2 Vos astuces forme Minceur Chute des cheveux Les conseils d’un phytothérapeute Beauté THEMES 3 des cheveux Dermo-nutrition Bronzage Créer mon agenda COL 1 COL 2 COL 3 Voir tous les sujets Le stress est-il Chute de Lutter contre les communicatif ? cheveux rhumes à répétition Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes psychologue chute de ou favoriser d’une internaute à répond à toutes nos la reposusse découvrir Stress questions... Consultez plus de 150 articles de Sommeil PÉDAGOGIQUE référence sur la phytothérapie Rhume Minceur ACCOMPAGNEMENT et Produits Posez des questions santé, forme ? Ménopause bien-être, des experts répondent à vos Voir tous les sujets questions Votre pharmacie Le test du mois MARQUE Naturactive Découvrez votre profil minceur Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Phytaroma Elusanes Doriance Anti-âge PARTICIPATIF Améliorer son Résoudre les Lutter contre le Trouvez les produits confort respiratoire troubles passagers photo-vieillissement Naturactive, les plus du sommeil proces de chez vous oui pas spécialement pas du tout
  • 139. WIREFRAME > Gabarits, zoning et grilles MARQUE HEADER Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels Santé Créer votre agenda santé Digestion difficile En quelques clics, complétez votre profil santé Circulation et profitez de conseils personnalisés pour Fatigue garder la forme ! Stress Sommeil Partout avec vous, même sur votre mobile Maux de tête Etat grippal Douleurs articulaires Feminité CRM Equilibre Vitalité Maux de l’hiver ACCOMPAGNEMENT Confort respiratoire Podcast INFORMATIONS D!ACTUALITÉ Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie INFORMATIONS DE FOND PÉDAGOGIQUE Voir tous les sujets Vos conseils santé naturelle tout au long de Au coeur de l’actualité 1 l’année Beauté / Bien-être PARTICIPATIF 2 Vos astuces forme Minceur Chute des cheveux Les conseils d’un phytothérapeute Beauté THEMES 3 des cheveux Dermo-nutrition Bronzage Créer mon agenda COL 1 COL 2 COL 3 Voir tous les sujets Le stress est-il Chute de Lutter contre les communicatif ? cheveux rhumes à répétition Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes psychologue chute de ou favoriser d’une internaute à répond à toutes nos la reposusse découvrir Stress questions... Consultez plus de 150 articles de Sommeil PÉDAGOGIQUE référence sur la phytothérapie Rhume Minceur ACCOMPAGNEMENT et Produits Posez des questions santé, forme ? Ménopause bien-être, des experts répondent à vos Voir tous les sujets questions Votre pharmacie Le test du mois MARQUE Naturactive Découvrez votre profil minceur Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Phytaroma Elusanes Doriance Anti-âge PARTICIPATIF Améliorer son Résoudre les Lutter contre le Trouvez les produits confort respiratoire troubles passagers photo-vieillissement Naturactive, les plus du sommeil proces de chez vous oui pas spécialement pas du tout
  • 140. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques
  • 141. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme
  • 142. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
  • 143. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres. proximité
  • 144. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
  • 145. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres. ! La loi de similitude : si la distance ne permet pas de regrouper des blocs, nous nous attacherons ensuite à repérer les plus similaires d’entre eux.
  • 146. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres. ! La loi de similitude : si la distance ne permet pas de regrouper des blocs, nous nous attacherons ensuite à repérer les plus similaires d’entre eux. Similitude
  • 147. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres. ! La loi de similitude : si la distance ne permet pas de regrouper des blocs, nous nous attacherons ensuite à repérer les plus similaires d’entre eux.
  • 148. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.
  • 149. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme. Continuité
  • 150. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.
  • 151. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme ! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
  • 152. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme ! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte. Clôture
  • 153. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme ! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
  • 154. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme ! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
  • 155. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même Ces lois agissent en même temps et forme sont parfois contradictoires. ! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
  • 156. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme
  • 157. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter)
  • 158. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques zone optique primaire zone secondaire ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) Axe d’orientation zone faible zone terminale
  • 159. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter)
  • 160. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques logo search field(s) zone OK cat Bt 1 cat Bt 2 cat Bt n Cart zone ! Gestalt théorie : psychologie de la forme Breadcrumbs zone ! Le digramme de Gutenberg (à discuter) Browsing Contents area area Footer
  • 161. WIREFRAME > Gabarits, zoning et grilles zone optique primaire Considérations ergonomiques logo search field(s) zone OK zone secondaire cat Bt 1 cat Bt 2 cat Bt n Cart zone ! Gestalt théorie : psychologie de la forme Breadcrumbs zone ! Le digramme de Gutenberg (à discuter) Browsing Contents area area Axe d’orientation zone faible Footer zone terminale
  • 162. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) un contre-exemple
  • 163. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter)
  • 164. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) Les cinq zones accessibles de l’écran
  • 165. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) Zones accessibles
  • 166. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter)
  • 167. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) ! Flux de lecture
  • 168. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) ! Flux de lecture
  • 169. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) ! Flux de lecture
  • 170. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) ! Flux de lecture
  • 171. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) ! Flux de lecture
  • 172. WIREFRAME > Gabarits, zoning et grilles Considérations ergonomiques ! Gestalt théorie : psychologie de la forme ! Le digramme de Gutenberg (à discuter) ! Flux de lecture
  • 173. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid) ! Créer un environnement structurant pour organiser spatialement l’interface
  • 174. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid) ! Créer un environnement structurant pour organiser spatialement l’interface ! Optimiser le workflow conception/ réalisation
  • 175. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid) sources : http://www.markboulton.co.uk
  • 176. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid) sources : http://www.markboulton.co.uk
  • 177. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid) sources : http://www.markboulton.co.uk
  • 178. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid)
  • 179. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid)
  • 180. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid)
  • 181. WIREFRAME > Gabarits, zoning et grilles Grilles (Grid)
  • 182. WIREFRAME > Gabarits, zoning et grilles Le courant «Grid design» ! Utiliser un framework Grille/CSS pour un process de coneption/réalisation simultané http://www.blueprintcss.org http://www.thegridsystem.org
  • 183. WIREFRAME > Gabarits, zoning et grilles HTML / CSS : contraintes spécifiques ! Concevoir en prenant compte des spécificités du HTML/CSS ! Travailler avec un CMS : gabarits pré- existants
  • 184. WIREFRAME > Gabarits, zoning et grilles HTML / CSS : contraintes spécifiques http://developer.yahoo.com/yui/grids/builder/
  • 185. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 186. WIREFRAME > Contenus Quel types de contenus utiliser ? Type de Description Utiliser pour Ne pas utiliser pour Exemple contenu une présentation David Raichman, navigation design, protoypage client. Risque de Réel Véritable contenu et tests uilisateurs discussion sur le 50 Bd de Port Royal, contenu et non sur le wireframe 75005 Paris une présentation Pierre Leroy, Contenu inventé qui prototypes et test utilisateur, client. Risque de Dummy ressemble au design graphique. discussion sur le 120 rue Moreau, contenu réel contenu et non sur le wireframe 92320 Levallois XXXXXXXXX, Série de symboles X décrire des champs de pour les lettres, 9 une présentation Symbolique formulaire client. Trop abstrait 999 XXX, XXXXXXX pour les chiffres XXXXXXX, XX, 99
  • 187. WIREFRAME > Contenus Quel types de contenus utiliser ? Type de Description Utiliser pour Ne pas utiliser pour Exemple contenu [Nom-30], [Prenom-20] Description du contenu + info un public non [NumeroRue-2], Labels supplémentaire. le développement technique [NomRue-60], Entre crochets [CodePostal-5],[Ville] Lorem ipsum, Texte en latin design graphique et le développement et Latin présentation client les formulaires. Dolor sit amet, 999 dui. Aliqua Texte représenté par design graphique (premier le développement et Graphique des lignes plus ou jet) ou en complément du les formulaires et moins épaisses texte réel trop pauvre présentation client
  • 188. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 189. WIREFRAME > Outils Deux approches ! Papier ! Papier ! Stylo, crayons, couleurs... ! Digital ! Logiciels dédiés ! Logiciels détournés
  • 190. WIREFRAME > Outils Applis (populaires) pour les wireframes Keynote Omnigraffle Axure Visio Viso Powerpoint Flash Dream Création de wireframe Prise en main Prototypage rapide Export HTML Interactivité Spécifique non non non non non conception oui oui
  • 191. WIREFRAME > Outils Applis (nouvelles) pour les wireframes offline online online
  • 192. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 193. WIREFRAME > Composants d’interface Définition « Un composant d'interface est un élément de base d'une interface graphique avec lequel un utilisateur peut interagir» La variations d’un gabarit et des composants d’interface définissent totalement les états d’une interface.
  • 194. WIREFRAME > Composants d’interface Composants usuels Les éléments d'affichage simple o Étiquette (Label) o Icône Les boutons o Bouton poussoir (button) + Boutons de barre d'outils o Case à cocher (Check box) o Bouton radio (Radio button) Les menus o Menu de commande (Command menu) o Menu contextuel (Context menu) o Menu circulaire, (Pie menu) Les conteneurs o Barre d'outils (Toolbar) o Cadre (Frame) o Onglet (Tabs) o Barre de défilement (Scrollbar) o Tiroir (informatique) (drawer) sous Mac OS X, un panel déroulant attaché à une fenêtre Les listes o Liste arborescente (Tree view) o Vue tabulaire Tableau (Grid view) o Boîte combinée (Combo box)
  • 195. o Menu circulaire, (Pie menu) Les conteneurs WIREFRAME >d'outils (Toolbar) o Barre Composants d’interface o Cadre (Frame) Composants usuels o Onglet (Tabs) o Barre de défilement (Scrollbar) o Tiroir (informatique) (drawer) sous Mac OS X, un panel déroulant attaché à une fenêtre Les listes o Liste arborescente (Tree view) o Vue tabulaire Tableau (Grid view) o Boîte combinée (Combo box) Les champs utilisateur o Zone de texte (Text box ou Edit Field) o Zone de mot de passe (Password Field) o Zone de sélection numérique (Spin Box) o Curseur (Slider) À ne pas confondre avec le curseur de souris Les aides au retour utilisateur o Barre de progression (Progress bar) o Barre d'état (Status bar) o Bulle d'aide (Tooltip) Les fenêtres (Window) o Fenêtre simple o Fenêtre modale (Modal window) o Boîte de dialogue (Dialog box) o Palette (flottante) (Utility window)
  • 196. WIREFRAME > Composants d’interface Considérations ergonomiques ! Loi de Fitt ! Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande. OK OK
  • 197. WIREFRAME > Composants d’interface Considérations ergonomiques ! Loi de Fitt ! Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande. ! Loi de Hicks ! Le temps de prise de décision d’un utilisateur augmente en fonction du nombre de possibilités qui lui sont offertes.
  • 198. WIREFRAME > Composants d’interface Considérations ergonomiques ! Loi de Fitt ! Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande. ! Loi de Hicks A B C ! Le temps de prise de décision d’un utilisateur augmente en fonction du nombre de possibilités qui lui sont offertes.
  • 199. WIREFRAME > Composants d’interface Considérations ergonomiques ! Loi de Fitt ! Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande. ! Loi de Hicks ! Le temps de prise de décision d’un utilisateur augmente en fonction du nombre de possibilités qui lui sont offertes.
  • 200. WIREFRAME > Composants d’interface Considérations ergonomiques ! Visibilité ! Un composant d’interface doit être perçu comme préhensible. Le rollover est insuffisant !
  • 201. WIREFRAME > Composants d’interface Considérations ergonomiques ! Visibilité ! Un composant d’interface doit être perçu comme préhensible. Le rollover est insuffisant ! ! Affordance ! La forme du composant doit donner des indices sur son utilisation
  • 202. WIREFRAME > Composants d’interface Considérations ergonomiques ! Feedback ! Toute interaction effective avec un composant d’interface doit être marquée par un changement d’état de celui-ci. item 1 item 1 item 2 item 2 item 3 item 3 item 4 item 4
  • 203. WIREFRAME > Composants d’interface Bibliothèques de composant
  • 204. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 205. WIREFRAME > Design d’interaction Définition « Le design d’interaction appliqué au secteur logiciel et web est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur » La discipline s’intéresse au comportement des gabarits et des composants d’interface.
  • 206. WIREFRAME > Design d’interaction Formalisation Drag and Drop
  • 207. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction Drag and Drop
  • 208. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction Déplacements au click et motion design
  • 209. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction ! Scénario d’interaction statique
  • 210. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction ! Scénario d’interaction statique
  • 211. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction ! Scénario d’interaction statique ! Charte d’interaction (statique ou interactive)
  • 212. WIREFRAME > Design d’interaction Formalisation 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 ! Codes visuels montrant le potentiel Comportement local - cas hors France •rollOver : •press : d’interaction 5 1 ! Scénario d’interaction statique 3 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 La rotation de la terre se fait uniquement selon l’axe de ci- dessus. referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte. ! Charte d’interaction (statique ou interactive) 2 version : 24/11/08 auteur : David Raichman
  • 213. WIREFRAME > Design d’interaction Formalisation 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 ! Codes visuels montrant le potentiel Comportement local - cas hors France •rollOver : •press : d’interaction 5 1 ! Scénario d’interaction statique 3 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 La rotation de la terre se fait uniquement selon l’axe de ci- dessus. referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte. ! Charte d’interaction (statique ou interactive) 2 version : 24/11/08 auteur : David Raichman
  • 214. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction ! Scénario d’interaction statique ! Charte d’interaction (statique ou interactive)
  • 215. WIREFRAME > Design d’interaction Design pattern « En conception UX, les design pattern désignent des motifs d’interaction popularisés et standardisés. »
  • 216. WIREFRAME > Design d’interaction Formalisation ! Codes visuels montrant le potentiel d’interaction ! Scénario d’interaction statique ! Charte d’interaction (statique ou interactive) ! Wireframe animé
  • 217. WIREFRAME > Design d’interaction Design pattern « 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/
  • 218. Design d’interface ! Wireframe ! Définition et usages ! Contraintes technologiques ! Gabarits, zoning et grilles ! Contenus ! Outils ! Composants d’interface ! Design d’interaction ! Exercices et annexe
  • 219. WIREFRAME > Exercices et annexe Retro-wireframing ! Pour inspiration... ! http://webwithoutwords.com/ ! Retro-wireframer les sites suivants : ! http://news.bbc.co.uk/ ! http://www.natl.tv/ ! http://www.sfr.fr/ ! http://www.nytimes.com/ ! http://www.gotmilk.com/#/home/
  • 220. WIREFRAME > Exercices et annexe Synthèse
  • 221. WIREFRAME > Exercices et annexe Synthèse Sketching Sketching
  • 222. WIREFRAME > Exercices et annexe Synthèse accès autre sites logo branded header Gabarit (zoning) Gabarit (zoning) navigation principale + recherche +panier navigation produits accès secondaire utilisateurs footer
  • 223. WIREFRAME > Exercices et annexe FR EN Les sites Renault Synthèse RENAULT-MERCHANDISING.COM Logo Wireframe Wireframe ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU
  • 224. Design graphique / visuel Design graphique / visuel WIREFRAME > Exercices et annexe Synthèse
  • 225. WIREFRAME > Exercices et annexe Hiérarchie visuelle accès autre sites logo branded header navigation principale + recherche +panier navigation produits accès secondaire utilisateurs footer
  • 226. WIREFRAME > Exercices et annexe Zone visible d’écran : cas web FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU
  • 227. WIREFRAME > Exercices et annexe 1024 px résolution écran FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team 768 px Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU
  • 228. WIREFRAME > Exercices et annexe 1024 px résolution écran FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM 1000 px ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team 768 px Sportswear Team Sportswear Identifiant premier scroll Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images zone utile Jouets 630 px 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU
  • 229. WIREFRAME > Exercices et annexe Lignes directrices pour le design d’icône ! Eviter la 3D ! Sauf pour représenter une idée spécifique : cube, terre... ! Sauf dans le cas où le framework graphique utilise un style iconique 3D ! Plus l’icône est petite, plus la 3D est à éviter (16 x 16 px > 64 x 64 px) ! Etre le plus général possible ! Eviter de représenter un concept général avec une image spécifique
  • 230. WIREFRAME > Exercices et annexe Lignes directrices pour le design d’icône ! Simplifier les formes ! Ne garder que les traits caractéristiques minimaux. Par exemple une orange est réductible à sa forme, couleur et tige ! Diminuer le nombre de couleurs ! Si elles ne servent pas à représenter l'idée, les couleurs et effet de lumières parasitent la compréhension des icônes.
  • 231. WIREFRAME > Exercices et annexe Lignes directrices pour le design d’icône ! Standards et utilisation ! Avant le design d’icône, se demander si elle existe déjà comme standard afin de la réutiliser. ! Eviter d’utiliser une icône dans un contexte différent de celui où elle est communément utilisée.
  • 232. Design d’interface ! Prototypes ! Objectifs ! Enjeux ! Outils et techniques ! Tests utilisateurs
  • 233. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! Communiquer avec l’équipe ! Graphistes ! Développeurs (spécifications du motion design...) ! Communiquer avec le client ! Montrer un concept interactif en action ! Mettre en évidence des aspects fonctionnels, techniques ...
  • 234. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! 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é (ergonomie) 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
  • 235. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! Optimiser l’interface pour l’utilisateur ! Conception itérative UCD Design Test utilisateur Prototype et évaluation
  • 236. PROTOTYPES > Objectifs A quoi servent les prototypes ?
  • 237. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! Optimiser le temps et les ressources
  • 238. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! Optimiser le temps et les ressources ! Anticiper les problèmes ergonomiques...
  • 239. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! Optimiser le temps et les ressources ! Anticiper les problèmes ergonomiques... ! Anticiper les problèmes logiques....
  • 240. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! Optimiser le temps et les ressources ! Anticiper les problèmes ergonomiques... ! Anticiper les problèmes logiques.... ! Anticiper les problème techniques....
  • 241. PROTOTYPES > Objectifs A quoi servent les prototypes ? ! 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
  • 242. Design d’interface ! Prototypes ! Objectifs ! Enjeux ! Outils et techniques ! Tests utilisateurs
  • 243. PROTOTYPES > Enjeux Typologie des prototypes Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans Statique
  • 244. PROTOTYPES > Enjeux Typologie des prototypes Interactif Prototype Prototype papier digital es u rc Low résolution s so Hi résolution Re + ps Tem Sketching Ecrans Statique
  • 245. PROTOTYPES > Enjeux Typologie des prototypes ! Prototype papier ! Dessiné uniquement à la main ! Mixte : intégration de certains éléments imprimés par (images, menus....)
  • 246. PROTOTYPES > Enjeux Typologie des prototypes ! Prototype papier ! Dessiné uniquement à la main ! Mixte : intégration de certains éléments imprimés par (images, menus....)
  • 247. PROTOTYPES > Enjeux Typologie des prototypes ! 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)
  • 248. PROTOTYPES > Enjeux Les pièges du prototype digital ! 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
  • 249. PROTOTYPES > Enjeux Les pièges du prototype papier ! Vouloir tout prototyper en papier ! Essayer de prototyper en papier un genre qui ne s’y prête pas (typiquement audiovisuel) ! Passer du temps à simuler des comportements réalisables plus rapidement avec un logiciel de présentation (PowerPoint, Keynote...) ! Prototyper des standards fonctionnels (sites peu complexes avec structure, navigation classique)
  • 250. PROTOTYPES > Enjeux 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 ?
  • 251. PROTOTYPES > Enjeux Critères d’un bon prototype ! Réalisme ! Le prototype présente-il un degré de réalisme visuel et interactif nécessaire pour ce que l’on souhaite tester ?
  • 252. PROTOTYPES > Enjeux Paramètres ! Ce que l’on cherche à tester ! archi d’info, ergonomie du design graphique, wording, optimalité du parcours utilisateur... ! Le genre de l’interface ! informationnel, applicatif, audiovisuel, ergonomie standard, non-standard...
  • 253. PROTOTYPES > Enjeux Arbre de décision prototype / genre TEST UTILISATEURS NON-STANDARD PROTOTYPE PAPIER - étapes multiples - orienté tâche INFORMATIONNEL - navigation non-standard APPLICATIF STANDARD WIREFRAME DIGITAL PROTOTYPE DIGITAL DESSIN PAPIER - wording D’INTERFACE - fonctions spécifiques AUDIOVISUEL TEST UTILISATEURS STORYBOARD + MOTION DESIGN WIREFRAME ANIMÉ PROTOTYPE DIGITAL - interactions - transition et orientation de l’utilisateur TEST UTILISATEURS
  • 254. Design d’interface ! Prototypes ! Objectifs ! Enjeux ! Outils et techniques ! Tests utilisateurs
  • 255. PROTOTYPES > Outls et techniques 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)
  • 256. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 257. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 258. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 259. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 260. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 261. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 262. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 263. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 264. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 265. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 266. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 267. PROTOTYPES > Outls et techniques ! 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
  • 268. PROTOTYPES > Outls et techniques ! 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
  • 269. PROTOTYPES > Outls et techniques ! 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
  • 270. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 271. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 272. PROTOTYPES > Outls et techniques Prototypes papiers ! 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
  • 273. PROTOTYPES > Outls et techniques Prototypes papiers ! 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 ! Curseurs
  • 274. PROTOTYPES > Outls et techniques Prototypes papiers ! 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 ! Curseurs
  • 275. PROTOTYPES > Outls et techniques Prototypes papiers ! 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 ! Curseurs
  • 276. PROTOTYPES > Outls et techniques Prototypes papiers ! 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 Les prototypes papiers supposent un rôle ! Boutons et check testeur : c’est lui qui doit hyperactif du box ! Onglets le comportement de l’interface en simuler fonction des actions de l'utilisateur ! ! Menu déroulant ! Sélection et highlight ! Boite expandable ! Curseurs
  • 277. PROTOTYPES > Outls et techniques Prototypes papiers ! 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 ! Curseurs
  • 278. PROTOTYPES > Outls et techniques Prototypes digitaux ! Logiciel de présentation (non-codés) ! Etude de cas : Europcar, Tag ! Programmation (codé) ! HTML (Nido) ! AJAX (Mattel) ! Flash (Mattel/Amex) ! Mixtes (ScreenCast, Non-codés, codé) (Sanford, Mattel)
  • 279. PROTOTYPES > Outls et techniques Applications pour le protoypage offline offline online
  • 280. Design d’interface ! Prototypes ! Objectifs ! Enjeux ! Outils et techniques ! Tests utilisateurs
  • 281. PROTOTYPES > Test utilisateurs Fondements ! Phases ! Identification des éléments à tester ! Identification du public cible ! Recrutement du panel ! Rédaction du test : scénario du test, questionnaires ! Montage du Lab ! Test ! Analyses ! Rapport
  • 282. PROTOTYPES > Test utilisateurs Fondements ! Redaction du test ! Questionnaire ! Guide d’entretien ! Exemple
  • 283. PROTOTYPES > Test utilisateurs Fondements ! Recrutement du panel ! Segmentation du public ! Constitution de groupes ! Combien d’utilisateurs ?
  • 284. PROTOTYPES > Test utilisateurs Protocoles ! Questionnaires ! Tri de carte ! Test de perception / Eyetracking ! Test de mémorisation ! Analyse du parcours utilisateur ! Capture vidéo de l’écran, actions de l’ustilisateur ! HeatMap ! Feedback oral de l’utilisateur enregistré (thinking aloud) Il est possible de combiner plusieurs protocoles
  • 285. PROTOTYPES > Test utilisateurs Dispositif et Outils : montage du Lab ! Matériel ! Caméras / webcam ! Micro ! Eyetracker ! Logiciels ! Camtasia Studio ! ScreenFlow ! Snapz Pro
  • 286. PROTOTYPES > Test utilisateurs Dispositif et Outils : montage du Lab ! Logiciels (suite) ! www.clicktale.com ! crazyegg.com ! www.feng-gui.com
  • 287. Design d’interface ! Références ! Bibliographie ! Webographie
  • 288. RÉFÉRENCES > Bibliographie Design d’interface Tidwell, Designing Interfaces, 2005, O’Reilly Saffer, Designing Gestural Interfaces, 2008, O’Reilly 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 Stone, Jarett, Woodroffe, Minocha, User Interface Design and Evaluation, 2005, Morgan Kaufmann Elam K., Grid Systems, 2004, Princeton Architectural Press Lidwell, Holden, Butler, Universal Principles of Design, 2003, Rockport Raskin, The Humane Interface, 2007, Addison-Wesley
  • 289. RÉFÉRENCES > Bibliographie Design d’interaction Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley Sharp, Interaction Design: Beyond Human-Computer Interaction, Wiley Saffer, Designing for interaction, 2007, New Riders Moggridge, Designing Interactions, MIT Press, 2006
  • 290. RÉFÉRENCES > Bibliographie Prototypage et Utilisabilité Snyder, Paper Prototyping, 2003, Morgan Kaufmann Boucher, Ergonomie web : pour des sites web efficaces, 2007, Eyrolles Baccino, Mesure de l'Utilisabilité des Interfaces, 2005, Hermès Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders
  • 291. Design d’interface ! Références ! Bibliographie ! Webographie
  • 292. RÉFÉRENCES > Webographie Prototypage et Utilisabilité Design d’interface, Design d’interaction, UX Interfaces audiovisuelles http://wireframes.linowski.ca/ http://www.everydayflash.com/blog/ http://www.uie.com/ http://www.yellowpimento.com/ http://deeplinking.net/ http://www.thefwa.com/ http://www.interaction-design.org/ http://www.iconwerk.de/ Interfaces riches http://www.uxmag.com/ http://www.fredcavazza.net/ http://www.archive.org http://www.interfaces-riches.com/ http://www.pixelsumo.com/ http://www.moma.org/exhibitions/2008/elasticmind/ http://www.metaverseroadmap.org/overview/ Ressources et tutoriaux http://developer.yahoo.com/ypatterns/ http://developer.yahoo.com/ypatterns/ wireframes/ Utilisabilité http://www.iconfinder.net/ http://www.feng-gui.com/ http://www.thegridsystem.org/ http://www.useit.com/ http://www.surl.org/ http://www.clicktale.com/
  • 293. A retrouver sur http://www.slideshare.net/davethepreacher