Design, authenticité et émotions

DESIGN, AUTHENTICITÉ
ET ÉMOTIONS
CYNTHIA SAVARD SAUCIER
Designer expérience utilisateur, TP1
PATRICK WILLIAMS
Directeur 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
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.

laquelle indique le mieux sa fonction ?
VS
Selon les critères de Dieter Rams,

DU «MÉCHANT» SKEUOMORPHISME
La 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

SkeuomorphismeSkeuomorphisme
«Flat» design
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
EST-CE QUE LE
SKEUOMORPHISME
C’EST MAL?

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’AFFORDANCE
Raison 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
EST-CE QUE LE
«FLAT» DESIGN EST
LA SOLUTION ?

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 PETITES
GENTILLESSES
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ÉTAPHORES
INTELLIGENTES
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

Exemples - Microcopie persuasive

exemple 2
Exemple - Site de Mailchimp

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.

LE LIVRE
Comment faire évoluer cet objet mythique ?

Tablette Parchemin Livre eBook

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 REPÈRES INCONHÉRENTS
Les pages perdent leur repère lorsque j’augmente
la taille de la police.

LE SKEUOMOSPHISME INUTILE
Vraiment !??

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

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 ]

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

RÉTROACTION DANS LE TEMPS
mollis non.
mollis non.
Aliquam
porttitor
condimen-
tum tortor
mollis non.
mollis non.
Aliquam
porttitor
condimen-
tum tortor

PETITES GENTILLESSES
Chapitre 1
mollis non.
leo.
Chapitre 1
mollis non.
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 SAUCIER
Designer expérience utilisateur, TP1
PATRICK WILLIAMS
Directeur de la création, TP1
@PATSVEK@CYNTHIASAVARD

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://www.youtube.com/watch?v=kdTbHSQXGWo
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/

Design, authenticité et émotions

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Similaire à Design, authenticité et émotions

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

Plus de TP1

Plus de TP1 (13)

Design, authenticité et émotions