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.
JE NE SUIS PAS ASSEZ
INTELLIGENTE POUR VOUS
DIRE C’EST QUOI
LE «BON» DESIGN

3.
MAIS LUI, OUI.
Je suis
Dieter Rams.

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.
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.
laquelle indique le mieux sa fonction ?
VS
Selon les critères de Dieter Rams,

7.
DU «MÉCHANT» SKEUOMORPHISME
La deuxième cuillère ressemble à du

8.
A B
Quelle calculatrice présente des éléments de skeuomorphisme ?

9.
LES DEUX.
Quelle calculatrice présente des éléments de skeuomorphisme ?

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.
Skeuomorphisme
«Flat» Design

12.
Skeuomorphisme
«Flat» Design
MinimalismePhotoréalisme

13.
Skeuomorphisme
«Flat» Design
MinimalismePhotoréalisme

14.
SkeuomorphismeSkeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE
PHOTORÉALISME
C’EST MAL?

15.
EST-CE QUE LE MAUVE
C’EST MAL ?
Ça revient à demander
J’aime bien le
mauve...

16.
Skeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE
SKEUOMORPHISME
C’EST MAL?

17.
DES FOIS, OUI.

18.
DES FOIS, OUI. TRÈS TRÈS MAL...

19.
POURQUOI
L’UTILISE-T-ON ALORS ?
EUH...

20.
À CAUSE DE L’APPRENTISSAGE
MOTEUR
Raison n°1

21.
4ANS
2ANS
6ANS
POUR LES MÉTAPHORES
Raison n°2
Ne comprend pas les
métaphores
Comprend
littéralement
Comprend
culturellement

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.
UN LOGICIEL DE DESSIN, C’EST COMME
UN SKETCHBOOK SUR L’ÉCRAN.
AH!
Définition d’un logiciel avec métaphore :

24.
POUR L’AFFORDANCE
Raison n°3

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.
Skeuomorphisme
«Flat» design
MinimalismePhotoréalisme
EST-CE QUE LE
«FLAT» DESIGN EST
LA SOLUTION ?

27.
Microsoft pense que oui...

28.
LE DESIGN AUTHENTIQUE
C’est d’adhérer aux contraintes naturelles du médium.

29.
FAUX VRAI
Un pixel n’a pas de profondeur.
Lui donner une ombre est contraire au «design authentique».

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.
LES PETITES
GENTILLESSES
Outil n°1

32.
Exemple A - Barre de défilement

33.
Exemple B - Supprimer dans Github

34.
Exemple C - Recherche dans les préférences

35.
RÉTROACTION
DANS LE TEMPS
Outil n°2

36.
- Layervault et la dégradation progressiveExemple A

37.
Exemple B - L’application n’est pas gelée

38.
LA COHÉRENCE
DES FORMES
Outil n°3

39.
Recherche
Exemple A - Incohérence entre la barre et le champs de recherche

40.
bouton 1 bouton 2
Exemple B - Incohérence entre les sources lumineuses

41.
LES MÉTAPHORES
INTELLIGENTES
Outil n°4

42.
Exemple A - Métaphore du cadran pour indiquer les prochains passages.

43.
LE «SWIPE» SUR IPHONE, DANS LA VRAIE VIE...

44.
Exemple B - «Branded interaction» ou créer et s’approprier une interaction.
Clear Path

45.
LA MICROCOPIE
Outil n°5

46.
Exemples - Microcopie persuasive

47.
exemple 2
Exemple - Site de Mailchimp

48.
«ALMOST FLAT»
Outil n°6

49.
Exemple A - Letterpress utilise de la profondeur avec les ombres

50.
Exemple B - Gmail utilise quelques métaphores

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.
ÉTUDE DE CAS

53.
LE LIVRE
Comment faire évoluer cet objet mythique ?

54.
D’OÙ PROVIENT LE LIVRE ?

55.
Tablette Parchemin Livre eBook

56.
Parchemin Livre eBook / Tablette tactile

57.
MÉTAPHORES EMPLOYÉES
• Les pages
• Le livre
• Le signet
• La bibliothèque
• Le surligneur

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.
LES PIÈGES

60.
LES REPÈRES INCONHÉRENTS
Les pages perdent leur repère lorsque j’augmente
la taille de la police.

61.
LE SKEUOMOSPHISME INUTILE
Vraiment !??

62.
DÉCO, DÉCO ET REDÉCO

63.
QUELQUES PISTES...

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.
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.
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.
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.
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.
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.
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.
MERCI.
CYNTHIA SAVARD SAUCIER
Designer expérience utilisateur, TP1
PATRICK WILLIAMS
Directeur de la création, TP1
@PATSVEK@CYNTHIASAVARD

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/