SlideShare une entreprise Scribd logo
1  sur  74
Télécharger pour lire hors ligne
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
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’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
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 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
LA MICROCOPIE
Outil 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 LIVRE
Comment faire évoluer cet objet mythique ?
D’OÙ PROVIENT LE LIVRE ?
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 PIÈGES
LES REPÈRES INCONHÉRENTS
Les pages perdent leur repère lorsque j’augmente
la taille de la police.
LE SKEUOMOSPHISME INUTILE
Vraiment !??
DÉCO, DÉCO ET REDÉCO
QUELQUES PISTES...
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 ]
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
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 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
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://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/

Contenu connexe

En vedette

Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?
Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?
Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?AfricaAdapt
 
La stratégie : une discipline en plein changement
La stratégie : une discipline en plein changementLa stratégie : une discipline en plein changement
La stratégie : une discipline en plein changementTP1
 
Capitalisation d'images de plantes, comment participer à la sortie ?
Capitalisation d'images de plantes, comment participer à la sortie ?Capitalisation d'images de plantes, comment participer à la sortie ?
Capitalisation d'images de plantes, comment participer à la sortie ?Violette Roche
 
Presentation marché Vins de Loire en Norvège
Presentation marché Vins de Loire en NorvègePresentation marché Vins de Loire en Norvège
Presentation marché Vins de Loire en Norvègecciducher
 
Infolab kit de représentation de la problématique v1
Infolab kit de représentation de la problématique v1Infolab kit de représentation de la problématique v1
Infolab kit de représentation de la problématique v1idemocratic
 
Guide Apps Analytics AT Internet
Guide Apps Analytics AT InternetGuide Apps Analytics AT Internet
Guide Apps Analytics AT InternetStéphanie LEGRAND
 
Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...
Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...
Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...LinuQ
 
Livret formation
Livret formationLivret formation
Livret formationPSL34
 
La solution globale ultra résistante au feu (REI 60) pour ossatures en bois
La solution globale ultra résistante au feu (REI 60) pour ossatures en boisLa solution globale ultra résistante au feu (REI 60) pour ossatures en bois
La solution globale ultra résistante au feu (REI 60) pour ossatures en boisFermacell BV
 
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01SGI Negocio
 
Pp carrieres
Pp carrieresPp carrieres
Pp carrieres96bobcat
 
Grupo 01 analisis
Grupo 01  analisisGrupo 01  analisis
Grupo 01 analisistallera
 
Atelier mon marché vu a la loupe
Atelier mon marché vu a la loupeAtelier mon marché vu a la loupe
Atelier mon marché vu a la loupecciducher
 

En vedette (17)

Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?
Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?
Minielle tall: Média et Changement climatique au Sénégal: L'impossible agenda?
 
La stratégie : une discipline en plein changement
La stratégie : une discipline en plein changementLa stratégie : une discipline en plein changement
La stratégie : une discipline en plein changement
 
Capitalisation d'images de plantes, comment participer à la sortie ?
Capitalisation d'images de plantes, comment participer à la sortie ?Capitalisation d'images de plantes, comment participer à la sortie ?
Capitalisation d'images de plantes, comment participer à la sortie ?
 
Presentation marché Vins de Loire en Norvège
Presentation marché Vins de Loire en NorvègePresentation marché Vins de Loire en Norvège
Presentation marché Vins de Loire en Norvège
 
Infolab kit de représentation de la problématique v1
Infolab kit de représentation de la problématique v1Infolab kit de représentation de la problématique v1
Infolab kit de représentation de la problématique v1
 
Desayunos Tecnológicos
Desayunos TecnológicosDesayunos Tecnológicos
Desayunos Tecnológicos
 
Guide Apps Analytics AT Internet
Guide Apps Analytics AT InternetGuide Apps Analytics AT Internet
Guide Apps Analytics AT Internet
 
Dhcp+ldap+gosa
Dhcp+ldap+gosaDhcp+ldap+gosa
Dhcp+ldap+gosa
 
Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...
Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...
Présentation LinuQ "Ouverture des données à la ville de Québec : approche et ...
 
Livret formation
Livret formationLivret formation
Livret formation
 
La solution globale ultra résistante au feu (REI 60) pour ossatures en bois
La solution globale ultra résistante au feu (REI 60) pour ossatures en boisLa solution globale ultra résistante au feu (REI 60) pour ossatures en bois
La solution globale ultra résistante au feu (REI 60) pour ossatures en bois
 
Aapna presentation
Aapna presentationAapna presentation
Aapna presentation
 
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01UD:ADMINISTRACION DE BASE DATOS - SESION N°01
UD:ADMINISTRACION DE BASE DATOS - SESION N°01
 
Pp carrieres
Pp carrieresPp carrieres
Pp carrieres
 
Madame montour 3
Madame montour 3Madame montour 3
Madame montour 3
 
Grupo 01 analisis
Grupo 01  analisisGrupo 01  analisis
Grupo 01 analisis
 
Atelier mon marché vu a la loupe
Atelier mon marché vu a la loupeAtelier mon marché vu a la loupe
Atelier mon marché vu a la loupe
 

Similaire à Design, authenticité et émotions

Pour une présentation percutante: repensez votre Powerpoint
Pour une présentation percutante: repensez votre PowerpointPour une présentation percutante: repensez votre Powerpoint
Pour une présentation percutante: repensez votre PowerpointHamid Nach
 
It smf 2011-innovationgames-v1.3a
It smf 2011-innovationgames-v1.3aIt smf 2011-innovationgames-v1.3a
It smf 2011-innovationgames-v1.3aLaurent Sarrazin
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conceptionLaurent Barbat
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Olivier Andrieu
 
L'effet Cupcake
L'effet CupcakeL'effet Cupcake
L'effet CupcakeTP1
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceAlexandre Jubien
 
Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015Libéo
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2dayAlexandre Jubien
 
De développeur à Scrum Master, une transition évidente ?
De développeur à Scrum Master, une transition évidente ?De développeur à Scrum Master, une transition évidente ?
De développeur à Scrum Master, une transition évidente ?Caroline Aupert
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftMicrosoft Décideurs IT
 
Des dinosaures aux mammifères : nouvelles clés pour l'entreprise
Des dinosaures aux mammifères : nouvelles clés pour l'entrepriseDes dinosaures aux mammifères : nouvelles clés pour l'entreprise
Des dinosaures aux mammifères : nouvelles clés pour l'entrepriseOlivier Nerot
 
ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...
ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...
ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...Agile Montréal
 
Guide la prise de parole en public
Guide la prise de parole en publicGuide la prise de parole en public
Guide la prise de parole en publicYannick HAJJAR
 
Guide la prise de parole en public
Guide la prise de parole en publicGuide la prise de parole en public
Guide la prise de parole en publicaurelien malecki
 
Meetup initiation au design thinking par klap chez ionis361 le 03/12/19
Meetup initiation au design thinking par klap  chez ionis361 le 03/12/19Meetup initiation au design thinking par klap  chez ionis361 le 03/12/19
Meetup initiation au design thinking par klap chez ionis361 le 03/12/19Klap
 

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

Initiation à la pao
Initiation à la paoInitiation à la pao
Initiation à la pao
 
Pour une présentation percutante: repensez votre Powerpoint
Pour une présentation percutante: repensez votre PowerpointPour une présentation percutante: repensez votre Powerpoint
Pour une présentation percutante: repensez votre Powerpoint
 
It smf 2011-innovationgames-v1.3a
It smf 2011-innovationgames-v1.3aIt smf 2011-innovationgames-v1.3a
It smf 2011-innovationgames-v1.3a
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conception
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
 
L'effet Cupcake
L'effet CupcakeL'effet Cupcake
L'effet Cupcake
 
Sug bordeaux 20110426
Sug bordeaux 20110426Sug bordeaux 20110426
Sug bordeaux 20110426
 
Atelier Story Map
Atelier Story MapAtelier Story Map
Atelier Story Map
 
060 arborescence
060   arborescence060   arborescence
060 arborescence
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
 
Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015Une hirondelle ne fait pas le printemps – PRSQ 2015
Une hirondelle ne fait pas le printemps – PRSQ 2015
 
Revolution Mobile @Web2day
Revolution Mobile @Web2dayRevolution Mobile @Web2day
Revolution Mobile @Web2day
 
Produit mobile
Produit mobileProduit mobile
Produit mobile
 
De développeur à Scrum Master, une transition évidente ?
De développeur à Scrum Master, une transition évidente ?De développeur à Scrum Master, une transition évidente ?
De développeur à Scrum Master, une transition évidente ?
 
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de MicrosoftLe skeuomorphisme et l'approche authentiquement numérique de Microsoft
Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
 
Des dinosaures aux mammifères : nouvelles clés pour l'entreprise
Des dinosaures aux mammifères : nouvelles clés pour l'entrepriseDes dinosaures aux mammifères : nouvelles clés pour l'entreprise
Des dinosaures aux mammifères : nouvelles clés pour l'entreprise
 
ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...
ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...
ATMTL23 - L'agilité augmentée : Comment l'IA transforme-t-elle les capacités ...
 
Guide la prise de parole en public
Guide la prise de parole en publicGuide la prise de parole en public
Guide la prise de parole en public
 
Guide la prise de parole en public
Guide la prise de parole en publicGuide la prise de parole en public
Guide la prise de parole en public
 
Meetup initiation au design thinking par klap chez ionis361 le 03/12/19
Meetup initiation au design thinking par klap  chez ionis361 le 03/12/19Meetup initiation au design thinking par klap  chez ionis361 le 03/12/19
Meetup initiation au design thinking par klap chez ionis361 le 03/12/19
 

Plus de TP1

L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoTP1
 
Tragedy of the common web
Tragedy of the common webTragedy of the common web
Tragedy of the common webTP1
 
Tragédie du web commun
Tragédie du web communTragédie du web commun
Tragédie du web communTP1
 
Échecologie en design au FailCampMTL 2014
Échecologie en design au FailCampMTL 2014Échecologie en design au FailCampMTL 2014
Échecologie en design au FailCampMTL 2014TP1
 
Cas de la refonte de STM.info
Cas de la refonte de STM.infoCas de la refonte de STM.info
Cas de la refonte de STM.infoTP1
 
Connect (français)
Connect (français)Connect (français)
Connect (français)TP1
 
Satisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les HumainsSatisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les HumainsTP1
 
Design, honesty and emotions
Design, honesty and emotionsDesign, honesty and emotions
Design, honesty and emotionsTP1
 
The strategist: An ever-evolving profession
The strategist: An ever-evolving professionThe strategist: An ever-evolving profession
The strategist: An ever-evolving professionTP1
 
Boom Sketch Box 2013
Boom Sketch Box 2013Boom Sketch Box 2013
Boom Sketch Box 2013TP1
 
The Cupcake Effect
The Cupcake EffectThe Cupcake Effect
The Cupcake EffectTP1
 
Ma relation d'amour-haine avec la gamification
Ma relation d'amour-haine avec la gamificationMa relation d'amour-haine avec la gamification
Ma relation d'amour-haine avec la gamificationTP1
 
Gamification: Integrating gaming into your brand strategy
Gamification: Integrating gaming into your brand strategy Gamification: Integrating gaming into your brand strategy
Gamification: Integrating gaming into your brand strategy TP1
 

Plus de TP1 (13)

L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
 
Tragedy of the common web
Tragedy of the common webTragedy of the common web
Tragedy of the common web
 
Tragédie du web commun
Tragédie du web communTragédie du web commun
Tragédie du web commun
 
Échecologie en design au FailCampMTL 2014
Échecologie en design au FailCampMTL 2014Échecologie en design au FailCampMTL 2014
Échecologie en design au FailCampMTL 2014
 
Cas de la refonte de STM.info
Cas de la refonte de STM.infoCas de la refonte de STM.info
Cas de la refonte de STM.info
 
Connect (français)
Connect (français)Connect (français)
Connect (français)
 
Satisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les HumainsSatisfaction: La différence entre les Robots et les Humains
Satisfaction: La différence entre les Robots et les Humains
 
Design, honesty and emotions
Design, honesty and emotionsDesign, honesty and emotions
Design, honesty and emotions
 
The strategist: An ever-evolving profession
The strategist: An ever-evolving professionThe strategist: An ever-evolving profession
The strategist: An ever-evolving profession
 
Boom Sketch Box 2013
Boom Sketch Box 2013Boom Sketch Box 2013
Boom Sketch Box 2013
 
The Cupcake Effect
The Cupcake EffectThe Cupcake Effect
The Cupcake Effect
 
Ma relation d'amour-haine avec la gamification
Ma relation d'amour-haine avec la gamificationMa relation d'amour-haine avec la gamification
Ma relation d'amour-haine avec la gamification
 
Gamification: Integrating gaming into your brand strategy
Gamification: Integrating gaming into your brand strategy Gamification: Integrating gaming into your brand strategy
Gamification: Integrating gaming into your brand strategy
 

Design, authenticité et émotions

  • 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
  • 15. EST-CE QUE LE MAUVE C’EST MAL ? Ça revient à demander J’aime bien le mauve...
  • 18. DES FOIS, OUI. TRÈS TRÈS MAL...
  • 20. À CAUSE DE L’APPRENTISSAGE MOTEUR Raison n°1
  • 21.
  • 22. 4ANS 2ANS 6ANS POUR LES MÉTAPHORES Raison n°2 Ne comprend pas les métaphores Comprend littéralement Comprend culturellement
  • 23. 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 :
  • 24. UN LOGICIEL DE DESSIN, C’EST COMME UN SKETCHBOOK SUR L’ÉCRAN. AH! Définition d’un logiciel avec métaphore :
  • 26. 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]
  • 28.
  • 30. LE DESIGN AUTHENTIQUE C’est d’adhérer aux contraintes naturelles du médium.
  • 31. FAUX VRAI Un pixel n’a pas de profondeur. Lui donner une ombre est contraire au «design authentique».
  • 32. 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»
  • 34. Exemple A - Barre de défilement
  • 35. Exemple B - Supprimer dans Github
  • 36. Exemple C - Recherche dans les préférences
  • 38. - Layervault et la dégradation progressiveExemple A
  • 39. Exemple B - L’application n’est pas gelée
  • 41. Recherche Exemple A - Incohérence entre la barre et le champs de recherche
  • 42. bouton 1 bouton 2 Exemple B - Incohérence entre les sources lumineuses
  • 44. Exemple A - Métaphore du cadran pour indiquer les prochains passages.
  • 45. LE «SWIPE» SUR IPHONE, DANS LA VRAIE VIE...
  • 46. Exemple B - «Branded interaction» ou créer et s’approprier une interaction. Clear Path
  • 48. Exemples - Microcopie persuasive
  • 49. exemple 2 Exemple - Site de Mailchimp
  • 51. Exemple A - Letterpress utilise de la profondeur avec les ombres
  • 52. Exemple B - Gmail utilise quelques métaphores
  • 53. 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.
  • 55. LE LIVRE Comment faire évoluer cet objet mythique ?
  • 58. Parchemin Livre eBook / Tablette tactile
  • 59. MÉTAPHORES EMPLOYÉES • Les pages • Le livre • Le signet • La bibliothèque • Le surligneur
  • 60. 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
  • 62. LES REPÈRES INCONHÉRENTS Les pages perdent leur repère lorsque j’augmente la taille de la police.
  • 64. DÉCO, DÉCO ET REDÉCO
  • 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 ] VS
  • 67. 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 ]
  • 68. 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 ]
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. 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.
  • 73. MERCI. CYNTHIA SAVARD SAUCIER Designer expérience utilisateur, TP1 PATRICK WILLIAMS Directeur de la création, TP1 @PATSVEK@CYNTHIASAVARD
  • 74. 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/