design, authenticité et émotions
DESCRIPTION
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.TRANSCRIPT
![Page 1: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/1.jpg)
DESIGN, AUTHENTICITÉ ET ÉMOTIONS
CYNTHIA SAVARD SAUCIERDesigner expérience utilisateur, TP1
PATRICK WILLIAMSDirecteur de la création, TP1
RDV DESIGN 2013
@TP1
![Page 2: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/2.jpg)
JE NE SUIS PAS ASSEZ INTELLIGENTE POUR VOUS
DIRE C’EST QUOI LE «BON» DESIGN
![Page 3: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/3.jpg)
MAIS LUI, OUI.Je suis
Dieter Rams.
![Page 4: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/4.jpg)
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
![Page 5: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/5.jpg)
DESIGN INDUSTRIELUtiliser le design pour créer des solutions virtuelles ou physiques.
LE DESIGN Créer une interface entre un besoin et un problème.
![Page 6: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/6.jpg)
laquelle indique le mieux sa fonction ?
VSSelon les critères de Dieter Rams,
![Page 7: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/7.jpg)
DU «MÉCHANT» SKEUOMORPHISMELa deuxième cuillère ressemble à du
![Page 8: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/8.jpg)
A B
Quelle calculatrice présente des éléments de skeuomorphisme ?
![Page 9: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/9.jpg)
LES DEUX. Quelle calculatrice présente des éléments de skeuomorphisme ?
![Page 10: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/10.jpg)
«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
![Page 11: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/11.jpg)
Skeuomorphisme
«Flat» Design
![Page 12: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/12.jpg)
Skeuomorphisme
«Flat» Design
MinimalismePhotoréalisme
![Page 13: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/13.jpg)
Skeuomorphisme
«Flat» Design
MinimalismePhotoréalisme
![Page 14: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/14.jpg)
SkeuomorphismeSkeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE PHOTORÉALISME
C’EST MAL?
![Page 15: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/15.jpg)
EST-CE QUE LE MAUVE C’EST MAL ?
Ça revient à demander
J’aime bien le mauve...
![Page 16: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/16.jpg)
Skeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE SKEUOMORPHISME
C’EST MAL?
![Page 17: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/17.jpg)
DES FOIS, OUI.
![Page 18: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/18.jpg)
DES FOIS, OUI. TRÈS TRÈS MAL...
![Page 19: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/19.jpg)
POURQUOI L’UTILISE-T-ON ALORS ?
EUH...
![Page 20: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/20.jpg)
À CAUSE DE L’APPRENTISSAGE MOTEUR
Raison n°1
![Page 21: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/21.jpg)
![Page 22: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/22.jpg)
4ANS
2ANS
6ANS
POUR LES MÉTAPHORES
Raison n°2
Ne comprend pas les métaphores
Comprend littéralement
Comprend culturellement
![Page 23: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/23.jpg)
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 :
![Page 24: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/24.jpg)
UN LOGICIEL DE DESSIN, C’EST COMME UN SKETCHBOOK SUR L’ÉCRAN.
AH!
Définition d’un logiciel avec métaphore :
![Page 25: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/25.jpg)
POUR L’AFFORDANCERaison n°3
![Page 26: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/26.jpg)
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]
![Page 27: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/27.jpg)
Skeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE «FLAT» DESIGN EST
LA SOLUTION ?
![Page 28: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/28.jpg)
![Page 29: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/29.jpg)
Microsoft pense que oui...
![Page 30: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/30.jpg)
LE DESIGN AUTHENTIQUE C’est d’adhérer aux contraintes naturelles du médium.
![Page 31: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/31.jpg)
FAUX VRAI
Un pixel n’a pas de profondeur. Lui donner une ombre est contraire au «design authentique».
![Page 32: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/32.jpg)
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»
![Page 33: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/33.jpg)
LES PETITESGENTILLESSES
Outil n°1
![Page 34: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/34.jpg)
Exemple A - Barre de défilement
![Page 35: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/35.jpg)
Exemple B - Supprimer dans Github
![Page 36: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/36.jpg)
Exemple C - Recherche dans les préférences
![Page 37: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/37.jpg)
RÉTROACTION DANS LE TEMPS
Outil n°2
![Page 38: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/38.jpg)
- Layervault et la dégradation progressiveExemple A
![Page 39: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/39.jpg)
Exemple B - L’application n’est pas gelée
![Page 40: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/40.jpg)
LA COHÉRENCE DES FORMES
Outil n°3
![Page 41: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/41.jpg)
Recherche
Exemple A - Incohérence entre la barre et le champs de recherche
![Page 42: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/42.jpg)
bouton 1 bouton 2
Exemple B - Incohérence entre les sources lumineuses
![Page 43: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/43.jpg)
LES MÉTAPHORESINTELLIGENTES
Outil n°4
![Page 44: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/44.jpg)
Exemple A - Métaphore du cadran pour indiquer les prochains passages.
![Page 45: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/45.jpg)
LE «SWIPE» SUR IPHONE, DANS LA VRAIE VIE...
![Page 46: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/46.jpg)
Exemple B - «Branded interaction» ou créer et s’approprier une interaction.
Clear Path
![Page 47: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/47.jpg)
LA MICROCOPIEOutil n°5
![Page 48: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/48.jpg)
Exemples - Microcopie persuasive
![Page 49: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/49.jpg)
exemple 2
Exemple - Site de Mailchimp
![Page 50: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/50.jpg)
«ALMOST FLAT»Outil n°6
![Page 51: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/51.jpg)
Exemple A - Letterpress utilise de la profondeur avec les ombres
![Page 52: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/52.jpg)
Exemple B - Gmail utilise quelques métaphores
![Page 53: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/53.jpg)
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.
![Page 54: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/54.jpg)
ÉTUDE DE CAS
![Page 55: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/55.jpg)
LE LIVREComment faire évoluer cet objet mythique ?
![Page 56: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/56.jpg)
D’OÙ PROVIENT LE LIVRE ?
![Page 57: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/57.jpg)
Tablette Parchemin Livre eBook / Tablette tactile
![Page 58: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/58.jpg)
Parchemin Livre eBook / Tablette tactile
![Page 59: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/59.jpg)
MÉTAPHORES EMPLOYÉES
• Les pages
• Le livre
• Le signet
• La bibliothèque
• Le surligneur
![Page 60: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/60.jpg)
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
![Page 61: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/61.jpg)
LES PIÈGES
![Page 62: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/62.jpg)
LES REPÈRES INCONHÉRENTS
Les pages perdent leur repère lorsque j’augmentela taille de la police.
![Page 63: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/63.jpg)
LE SKEUOMOSPHISME INUTILE
Vraiment !??
![Page 64: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/64.jpg)
DÉCO, DÉCO ET REDÉCO
![Page 65: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/65.jpg)
QUELQUES PISTES...
![Page 66: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/66.jpg)
NOUVELLES MÉTAPHORES
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]VS
![Page 67: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/67.jpg)
NOUVELLES MÉTAPHORES
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]
![Page 68: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/68.jpg)
NOUVELLES MÉTAPHORES
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]
![Page 69: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/69.jpg)
RÉTROACTION DANS LE TEMPS
Chapitre 1La 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 2Au 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
![Page 70: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/70.jpg)
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
![Page 71: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/71.jpg)
PETITES GENTILLESSES
Chapitre 1La 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 1La 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
![Page 72: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/72.jpg)
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.
![Page 73: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/73.jpg)
MERCI.CYNTHIA SAVARD SAUCIERDesigner expérience utilisateur, TP1
PATRICK WILLIAMSDirecteur de la création, TP1
@PATSVEK@CYNTHIASAVARD
![Page 74: Design, authenticité et émotions](https://reader035.vdocuments.fr/reader035/viewer/2022081718/54801ef6b4af9f520b8b46ce/html5/thumbnails/74.jpg)
Design Industriel Design Authentique
Almost FlatCohérence des formes
AffordanceMétaphore intelligente
MicrocopiePiège
SkeuomorphismePetites gentilesses
http://vimeo.com/42674279http://vimeo.com/58022280http://vimeo.com/11970647http://vimeo.com/52584608http://www.youtube.com/watch?v=kdTbHSQXGWohttp://vimeo.com/3860979http://www.youtube.com/watch?v=lAfOuhsJJsQhttp://www.youtube.com/watch?v=WPs3E1-3UaEhttp://www.youtube.com/watch?v=GCyiDaM3bochttp://www.youtube.com/watch?v=fLzWtUvdGz0
IMAGESPortrait de Dieter Rams
Cuillère à crème glacé 1Cuillère à crème glacé 2
CalculatriceProgressive Reduction
Skeupmorphisme Korg App
Exemples de petites gentillessesDégradation progressives
"StillLoading" Application Contacts
Métaphores IntelligentesWash Me
Almost flat : LetterpressAlmost flat : Gmail App
Windows 8
http://www.aa13.fr/design-objet/le-bon-design-dieter-rams-13334http://supremehousewares.com/icecreamscoop-icecream.aspxhttp://gadgets.boingboing.net/2009/02/10/antifreeze-ice-cream.htmlhttp://iphonesoft.fr/2011/09/03/bons-plans-app-store-du-3-septembre-2011http://layervault.tumblr.com/post/42361566927/progressive-reductionhttp://skeu.it/page/2http://www.soundpad.fr/application/synthes-intrusments-virtuels/korg/korg-ims-20-ipadhttp://littlebigdetails.com/http://layervault.tumblr.com/post/42442865260/implementing-progressive-reductionhttp://andrewayala.tumblr.com/Application contact pour iPadhttp://patterntap.com/pattern/bus-arrival-clock-bus-oclockhttp://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-awesomehttp://www.iclarified.com/28627/gmail-app-now-supports-swiping-between-messages-gets-edit-modehttp://img.clubic.com/05100494-photo-windows-8-cp-metro.jpg
VIDÉOS
THÉORIEDigital 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'AppleCritique 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-uishttp://www.matthewmooredesign.com/branded-interactions/http://sachagreif.com/what-skeuomorphism-is-and-isnt/http://www.metagramme.com/writing/ebooks-and-design-humanshttp://bokardo.com/archives/writing-microcopy/http://alistapart.com/article/material-honesty-on-the-webhttp://branch.com/b/flat-design-needs-a-new-name?ref=grouphttp://www.matthewmooredesign.com/almost-flat-design/http://voiceandtone.com/http://www.interaction-design.org/encyclopedia/affordances.htmlhttp://fr.wikipedia.org/wiki/Dieter_Ramshttp://www.persee.fr/web/revues/home/prescript/article/colan_0336-1500_1996_num_109_1_2705http://www.sigchi.org/chi95/proceedings/tutors/ams_bdy.htmhttp://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html
http://www.fastcodesign.com/1670760/will-apples-tacky-software-design-philosophy-cause-a-revolthttp://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/