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/