Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Design, authenticité et émotions

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
Alliance Axe Coaching_V20
Alliance Axe Coaching_V20
Chargement dans…3
×

Consultez-les par la suite

1 sur 74 Publicité

Design, authenticité et émotions

Télécharger pour lire hors ligne

Le design authentique, c'est éviter les pièges de la dépendance au sentier, des métaphores visuelles incomplètes ou incohérentes. C'est concentrer ses efforts sur les interactions des utilisateurs, plutôt que sur le rendu de l’interface. C'est utiliser la rétroaction à des moments précis, des interactions valables et des variations subtiles dans le but de créer une connexion émotionnelle.

Cynthia Savard-Saucier propose une structure de pensée du design d’interaction pour créer des interfaces uniques et authentique qui interpellent et engagent les utilisateurs, tandis que Patrick Williams applique cette structure à un exemple concret.

Le design authentique, c'est éviter les pièges de la dépendance au sentier, des métaphores visuelles incomplètes ou incohérentes. C'est concentrer ses efforts sur les interactions des utilisateurs, plutôt que sur le rendu de l’interface. C'est utiliser la rétroaction à des moments précis, des interactions valables et des variations subtiles dans le but de créer une connexion émotionnelle.

Cynthia Savard-Saucier propose une structure de pensée du design d’interaction pour créer des interfaces uniques et authentique qui interpellent et engagent les utilisateurs, tandis que Patrick Williams applique cette structure à un exemple concret.

Publicité
Publicité

Plus De Contenu Connexe

Les utilisateurs ont également aimé (17)

Similaire à Design, authenticité et émotions (20)

Publicité

Plus récents (20)

Publicité

Design, authenticité et émotions

  1. 1. DESIGN, AUTHENTICITÉ ET ÉMOTIONS CYNTHIA SAVARD SAUCIER Designer expérience utilisateur, TP1 PATRICK WILLIAMS Directeur de la création, TP1 RDV DESIGN 2013 @TP1
  2. 2. JE NE SUIS PAS ASSEZ INTELLIGENTE POUR VOUS DIRE C’EST QUOI LE «BON» DESIGN
  3. 3. MAIS LUI, OUI. Je suis Dieter Rams.
  4. 4. SELON DIETER RAMS, UN BON DESIGN : 1. Est innovateur 2. Fournit une utilité à chaque produit 3. Est esthétique 4. Fait un produit compréhensible 5. Est discret 6. Est honnête 7. A une valeur à long terme 8. Conçoit les détails avec précision 9. Est respectueux de l'environnement 10. Est minimaliste
  5. 5. DESIGN INDUSTRIEL Utiliser le design pour créer des solutions virtuelles ou physiques. LE DESIGN Créer une interface entre un besoin et un problème.
  6. 6. laquelle indique le mieux sa fonction ? VS Selon les critères de Dieter Rams,
  7. 7. DU «MÉCHANT» SKEUOMORPHISME La deuxième cuillère ressemble à du
  8. 8. A B Quelle calculatrice présente des éléments de skeuomorphisme ?
  9. 9. LES DEUX. Quelle calculatrice présente des éléments de skeuomorphisme ?
  10. 10. «Un élément de design ou une structure qui ne sert aucun but dans l'objet formé à partir du nouveau matériau, mais qui était essentiel dans l'objet fait à partir du matériau original» LE SKEUOMORPHISME
  11. 11. Skeuomorphisme «Flat» Design
  12. 12. Skeuomorphisme «Flat» Design MinimalismePhotoréalisme
  13. 13. Skeuomorphisme «Flat» Design MinimalismePhotoréalisme
  14. 14. SkeuomorphismeSkeuomorphisme «Flat» design MinimalismePhotoréalisme EST-CE QUE LE PHOTORÉALISME C’EST MAL?
  15. 15. EST-CE QUE LE MAUVE C’EST MAL ? Ça revient à demander J’aime bien le mauve...
  16. 16. Skeuomorphisme «Flat» design MinimalismePhotoréalisme EST-CE QUE LE SKEUOMORPHISME C’EST MAL?
  17. 17. DES FOIS, OUI.
  18. 18. DES FOIS, OUI. TRÈS TRÈS MAL...
  19. 19. POURQUOI L’UTILISE-T-ON ALORS ? EUH...
  20. 20. À CAUSE DE L’APPRENTISSAGE MOTEUR Raison n°1
  21. 21. 4ANS 2ANS 6ANS POUR LES MÉTAPHORES Raison n°2 Ne comprend pas les métaphores Comprend littéralement Comprend culturellement
  22. 22. UN LOGICIEL EST UN ENSEMBLE D'INFORMATIONS RELATIVES À DES TRAITEMENTS EFFECTUÉS AUTOMATIQUEMENT PAR UN APPAREIL INFORMATIQUE. Y SONT INCLUSES LES INSTRUCTIONS DE TRAITEMENT, REGROUPÉES SOUS FORME DE PROGRAMMES, DES DONNÉES ET DE LA DOCUMENTATION. LE TOUT EST STOCKÉ SOUS FORME D'UN ENSEMBLE DE FICHIERS DANS UNE MÉMOIRE OU UN DISQUE DUR. EUH... Définition d’un logiciel sans métaphore :
  23. 23. UN LOGICIEL DE DESSIN, C’EST COMME UN SKETCHBOOK SUR L’ÉCRAN. AH! Définition d’un logiciel avec métaphore :
  24. 24. POUR L’AFFORDANCE Raison n°3
  25. 25. PAR DÉPENDANCE AU SENTIER. Raison n°4 [Un ensemble de décisions passées peut influer sur les décisions futures. Particularités historiques, justifiées à une époque mais qui ont cessé d’être optimales ou rationnelles]
  26. 26. Skeuomorphisme «Flat» design MinimalismePhotoréalisme EST-CE QUE LE «FLAT» DESIGN EST LA SOLUTION ?
  27. 27. Microsoft pense que oui...
  28. 28. LE DESIGN AUTHENTIQUE C’est d’adhérer aux contraintes naturelles du médium.
  29. 29. FAUX VRAI Un pixel n’a pas de profondeur. Lui donner une ombre est contraire au «design authentique».
  30. 30. DES OUTILS DU DESIGN AUTHENTIQUE 1. Les petites gentillesses 2. La rétroaction dans le temps 3. La cohérence des formes 4. La métaphore intelligente 5. La microcopie 6. «Almost flat»
  31. 31. LES PETITES GENTILLESSES Outil n°1
  32. 32. Exemple A - Barre de défilement
  33. 33. Exemple B - Supprimer dans Github
  34. 34. Exemple C - Recherche dans les préférences
  35. 35. RÉTROACTION DANS LE TEMPS Outil n°2
  36. 36. - Layervault et la dégradation progressiveExemple A
  37. 37. Exemple B - L’application n’est pas gelée
  38. 38. LA COHÉRENCE DES FORMES Outil n°3
  39. 39. Recherche Exemple A - Incohérence entre la barre et le champs de recherche
  40. 40. bouton 1 bouton 2 Exemple B - Incohérence entre les sources lumineuses
  41. 41. LES MÉTAPHORES INTELLIGENTES Outil n°4
  42. 42. Exemple A - Métaphore du cadran pour indiquer les prochains passages.
  43. 43. LE «SWIPE» SUR IPHONE, DANS LA VRAIE VIE...
  44. 44. Exemple B - «Branded interaction» ou créer et s’approprier une interaction. Clear Path
  45. 45. LA MICROCOPIE Outil n°5
  46. 46. Exemples - Microcopie persuasive
  47. 47. exemple 2 Exemple - Site de Mailchimp
  48. 48. «ALMOST FLAT» Outil n°6
  49. 49. Exemple A - Letterpress utilise de la profondeur avec les ombres
  50. 50. Exemple B - Gmail utilise quelques métaphores
  51. 51. EN RÉSUMÉ 1. Soyez cohérents si vous utilisez des métaphores. 2. Si vous vous lancez dans le «Flat Design» utilisez les interactions pour renforcer votre interface. 3. Adhérez aux contraintes naturelles du médium que vous choisissez. Les contraintes sont toujours une source de créativité. 4. Évitez de tomber dans la dépendance au sentier.
  52. 52. ÉTUDE DE CAS
  53. 53. LE LIVRE Comment faire évoluer cet objet mythique ?
  54. 54. D’OÙ PROVIENT LE LIVRE ?
  55. 55. Tablette Parchemin Livre eBook
  56. 56. Parchemin Livre eBook / Tablette tactile
  57. 57. MÉTAPHORES EMPLOYÉES • Les pages • Le livre • Le signet • La bibliothèque • Le surligneur
  58. 58. LES FONCTIONS DU LIVRE • Lire le contenu • Classer ce livre (bibliothèque) • Mettre en évidence un texte (surligner) • Partager le livre (remettre à quelqu’un) • Annoter de l’information (dans la marge) • Évaluer le contenu • Employer des outils (recherche, traduction) • Gagner des trophées, badges • Obtenir des statistiques • Personnaliser le contenant (luminosité, police, habillage) Fonctions de base Fonctions nouvelles
  59. 59. LES PIÈGES
  60. 60. LES REPÈRES INCONHÉRENTS Les pages perdent leur repère lorsque j’augmente la taille de la police.
  61. 61. LE SKEUOMOSPHISME INUTILE Vraiment !??
  62. 62. DÉCO, DÉCO ET REDÉCO
  63. 63. QUELQUES PISTES...
  64. 64. NOUVELLES MÉTAPHORES Ma bibliothèque Romans Bandes dessinées Cuisine Design graphique Nouvelles [ 2 ] [ 8 ] [ 3 ] [ 1 ] Design intérieur [ 4 ] Québécois [ 7 ] [ 12 ] VS
  65. 65. NOUVELLES MÉTAPHORES Ma bibliothèque Romans Bandes dessinées Cuisine Design graphique Nouvelles [ 2 ] [ 8 ] [ 3 ] [ 1 ] Design intérieur [ 4 ] Québécois [ 7 ] [ 12 ]
  66. 66. NOUVELLES MÉTAPHORES Ma bibliothèque Romans Bandes dessinées Cuisine Design graphique Nouvelles [ 2 ] [ 8 ] [ 3 ] [ 1 ] Design intérieur [ 4 ] Québécois [ 7 ] [ 12 ]
  67. 67. RÉTROACTION DANS LE TEMPS Chapitre 1 La découverte du jour Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. Aenean elit mauris, adipiscing et mollis a, pulvinar dapibus leo. Sed accumsan ornare sollicitudin. Donec euismod, sem quis varius rutrum, sapien tortor sodales metus, a posuere dui neque in leo. Chapitre 2 Au gré de la nuit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. MIDI TRENTE MINUIT SEIZE
  68. 68. RÉTROACTION DANS LE TEMPS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Aliquam porttitor condimen- tum tortor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Aliquam porttitor condimen- tum tortor
  69. 69. PETITES GENTILLESSES Chapitre 1 La découverte du jour Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. Aenean elit mauris, adipiscing et mollis a, pulvinar dapibus leo. Sed accumsan ornare sollicitudin. Donec euismod, sem quis varius rutrum, sapien tortor sodales metus, a posuere dui neque in leo. Chapitre 1 La découverte du jour Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non. Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. Aenean elit mauris, adipiscing et mollis a, pulvinar dapibus leo. Sed accumsan ornare sollicitudin. Donec euismod, sem quis varius rutrum, sapien tortor sodales metus, a posuere dui neque in leo. PORTRAIT PAYSAGE
  70. 70. CONCLUSION 1. Se rappeler de la provenance du produit. 2. Ne pas négliger les fonctionnalités de base du produit au détriment des nouvelles possibilités du médium. 3. Introduire uniquement les métaphores si nécessaire. 4. Ce n'est pas parce que l’on retire les métaphores graphiques que le livre n'est plus un livre.
  71. 71. MERCI. CYNTHIA SAVARD SAUCIER Designer expérience utilisateur, TP1 PATRICK WILLIAMS Directeur de la création, TP1 @PATSVEK@CYNTHIASAVARD
  72. 72. Design Industriel Design Authentique Almost Flat Cohérence des formes Affordance Métaphore intelligente Microcopie Piège Skeuomorphisme Petites gentilesses http://vimeo.com/42674279 http://vimeo.com/58022280 http://vimeo.com/11970647 http://vimeo.com/52584608 http://www.youtube.com/watch?v=kdTbHSQXGWo http://vimeo.com/3860979 http://www.youtube.com/watch?v=lAfOuhsJJsQ http://www.youtube.com/watch?v=WPs3E1-3UaE http://www.youtube.com/watch?v=GCyiDaM3boc http://www.youtube.com/watch?v=fLzWtUvdGz0 IMAGES Portrait de Dieter Rams Cuillère à crème glacé 1 Cuillère à crème glacé 2 Calculatrice Progressive Reduction Skeupmorphisme Korg App Exemples de petites gentillesses Dégradation progressives "StillLoading" Application Contacts Métaphores Intelligentes Wash Me Almost flat : Letterpress Almost flat : Gmail App Windows 8 http://www.aa13.fr/design-objet/le-bon-design-dieter-rams-13334 http://supremehousewares.com/icecreamscoop-icecream.aspx http://gadgets.boingboing.net/2009/02/10/antifreeze-ice-cream.html http://iphonesoft.fr/2011/09/03/bons-plans-app-store-du-3-septembre-2011 http://layervault.tumblr.com/post/42361566927/progressive-reduction http://skeu.it/page/2 http://www.soundpad.fr/application/synthes-intrusments-virtuels/korg/korg-ims-20-ipad http://littlebigdetails.com/ http://layervault.tumblr.com/post/42442865260/implementing-progressive-reduction http://andrewayala.tumblr.com/ Application contact pour iPad http://patterntap.com/pattern/bus-arrival-clock-bus-oclock http://www.broadsheet.ie/2011/03/24/ive-been-to-abbeyfeale-but-ive-never-been-to-edit-me/ http://pguba.tumblr.com/post/34349385596/letterpress-the-app-is-awesome http://www.iclarified.com/28627/gmail-app-now-supports-swiping-between-messages-gets-edit-mode http://img.clubic.com/05100494-photo-windows-8-cp-metro.jpg VIDÉOS THÉORIE Digital et Skeuomorphisme Critique du "skeuomorphisme" Critique du "skeuomorphisme" Branded Interaction Ce que le Skeuomorphisme est Ebook Microcopie Design Honnête Definition du Flat design Almost Flat Voice and Tone Affordance 10 principes du bon design de Dieter Rams Métaphores visuelles Métaphore du Bureau et de la bibliothèque Révolution du Design d'Apple Critique de Windows 8 The Flattening of Design Le Flat ne remplace pas le Skeuomorphisme http://designmodo.com/skeuomorphic-vs-digital-interfaces/ http://www.wired.com/magazine/2012/01/st_thompson_analog/ http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis http://www.matthewmooredesign.com/branded-interactions/ http://sachagreif.com/what-skeuomorphism-is-and-isnt/ http://www.metagramme.com/writing/ebooks-and-design-humans http://bokardo.com/archives/writing-microcopy/ http://alistapart.com/article/material-honesty-on-the-web http://branch.com/b/flat-design-needs-a-new-name?ref=group http://www.matthewmooredesign.com/almost-flat-design/ http://voiceandtone.com/ http://www.interaction-design.org/encyclopedia/affordances.html http://fr.wikipedia.org/wiki/Dieter_Rams http://www.persee.fr/web/revues/home/prescript/article/colan_0336-1500_1996_num_109_1_2705 http://www.sigchi.org/chi95/proceedings/tutors/ams_bdy.htm http://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html http://www.fastcodesign.com/1670760/will-apples-tacky-software-design-philosophy-cause-a-revolt http://www.nngroup.com/articles/windows-8-disappointing-usability/ http://bits.blogs.nytimes.com/2013/04/23/the-flattening-of-design/ http://laurent.assouad.com/2013/non-le-flat-design-ne-remplace-pas-le-skeuomorphisme/

×