Download - Design, authenticité et émotions
DESIGN, AUTHENTICITÉ ET ÉMOTIONS
CYNTHIA SAVARD SAUCIERDesigner expérience utilisateur, TP1
PATRICK WILLIAMSDirecteur de la création, TP1
RDV DESIGN 2013
@TP1
JE NE SUIS PAS ASSEZ INTELLIGENTE POUR VOUS
DIRE C’EST QUOI LE «BON» DESIGN
MAIS LUI, OUI.Je suis
Dieter Rams.
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
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.
laquelle indique le mieux sa fonction ?
VSSelon les critères de Dieter Rams,
DU «MÉCHANT» SKEUOMORPHISMELa deuxième cuillère ressemble à du
A B
Quelle calculatrice présente des éléments de skeuomorphisme ?
LES DEUX. Quelle calculatrice présente des éléments de skeuomorphisme ?
«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
Skeuomorphisme
«Flat» Design
Skeuomorphisme
«Flat» Design
MinimalismePhotoréalisme
Skeuomorphisme
«Flat» Design
MinimalismePhotoréalisme
SkeuomorphismeSkeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE PHOTORÉALISME
C’EST MAL?
EST-CE QUE LE MAUVE C’EST MAL ?
Ça revient à demander
J’aime bien le mauve...
Skeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE SKEUOMORPHISME
C’EST MAL?
DES FOIS, OUI.
DES FOIS, OUI. TRÈS TRÈS MAL...
POURQUOI L’UTILISE-T-ON ALORS ?
EUH...
À CAUSE DE L’APPRENTISSAGE MOTEUR
Raison n°1
4ANS
2ANS
6ANS
POUR LES MÉTAPHORES
Raison n°2
Ne comprend pas les métaphores
Comprend littéralement
Comprend culturellement
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 :
UN LOGICIEL DE DESSIN, C’EST COMME UN SKETCHBOOK SUR L’ÉCRAN.
AH!
Définition d’un logiciel avec métaphore :
POUR L’AFFORDANCERaison n°3
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]
Skeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE «FLAT» DESIGN EST
LA SOLUTION ?
Microsoft pense que oui...
LE DESIGN AUTHENTIQUE C’est d’adhérer aux contraintes naturelles du médium.
FAUX VRAI
Un pixel n’a pas de profondeur. Lui donner une ombre est contraire au «design authentique».
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»
LES PETITESGENTILLESSES
Outil n°1
Exemple A - Barre de défilement
Exemple B - Supprimer dans Github
Exemple C - Recherche dans les préférences
RÉTROACTION DANS LE TEMPS
Outil n°2
- Layervault et la dégradation progressiveExemple A
Exemple B - L’application n’est pas gelée
LA COHÉRENCE DES FORMES
Outil n°3
Recherche
Exemple A - Incohérence entre la barre et le champs de recherche
bouton 1 bouton 2
Exemple B - Incohérence entre les sources lumineuses
LES MÉTAPHORESINTELLIGENTES
Outil n°4
Exemple A - Métaphore du cadran pour indiquer les prochains passages.
LE «SWIPE» SUR IPHONE, DANS LA VRAIE VIE...
Exemple B - «Branded interaction» ou créer et s’approprier une interaction.
Clear Path
LA MICROCOPIEOutil n°5
Exemples - Microcopie persuasive
exemple 2
Exemple - Site de Mailchimp
«ALMOST FLAT»Outil n°6
Exemple A - Letterpress utilise de la profondeur avec les ombres
Exemple B - Gmail utilise quelques métaphores
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.
ÉTUDE DE CAS
LE LIVREComment faire évoluer cet objet mythique ?
D’OÙ PROVIENT LE LIVRE ?
Tablette Parchemin Livre eBook / Tablette tactile
Parchemin Livre eBook / Tablette tactile
MÉTAPHORES EMPLOYÉES
• Les pages
• Le livre
• Le signet
• La bibliothèque
• Le surligneur
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
LES PIÈGES
LES REPÈRES INCONHÉRENTS
Les pages perdent leur repère lorsque j’augmentela taille de la police.
LE SKEUOMOSPHISME INUTILE
Vraiment !??
DÉCO, DÉCO ET REDÉCO
QUELQUES PISTES...
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
NOUVELLES MÉTAPHORES
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]
NOUVELLES MÉTAPHORES
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]
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
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
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
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.
MERCI.CYNTHIA SAVARD SAUCIERDesigner expérience utilisateur, TP1
PATRICK WILLIAMSDirecteur de la création, TP1
@PATSVEK@CYNTHIASAVARD
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/