design émotionnel
DESCRIPTION
MAJ le 22/04/2013 > www.http://designemotionnel.fr ----------------------------------------------- COMMENT ENGAGER VOS VISITEURS AVEC UN DESIGN ÉMOTIONNEL ? ----------------------------------------------- Engager, convaincre et fidéliser vos internautes avec une expérience utilisateur est un défi au quotidien. Une ligne éditoriale, une mascotte, des fonctionnalités ou encore un effet sonore peuvent provoquer des réactions émotionnelles positives ou négatives à vos visiteurs. Cette présentation a pour but d'aborder les différents domaines du design, de décrypter la stratégie et les atouts de plusieurs cas concrets dans le domaine du design d'applicationTRANSCRIPT
![Page 1: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/1.jpg)
Le design émotionnel dans notre quotidien
Mise à jour : mars 2013
![Page 2: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/2.jpg)
Hi!@jacinthe_ Co-fondateur de Kontestapp.com
Auteur du blog Ergophile.com
![Page 3: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/3.jpg)
définition du DesignLe design, autrefois appelé en français «esthétique industrielle», «Arts décoratifs», «Art industriel» ou «Arts Appliqués», est une discipline créative qui consiste à concevoir des dispositifs destinés à des usagers grâce à un travail sur les formes {...} spatiales (design d’espace), volumiques (design de produits), textiles (stylisme), graphiques (graphisme) ou interactives (design interactif)*
Source : Wikipedia
![Page 4: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/4.jpg)
Nous avons tous un langage commun et universel
les émotions
![Page 5: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/5.jpg)
![Page 6: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/6.jpg)
David Hanson : des robots qui «montrent des émotions»Vidéo TED : http://www.ted.com/talks/david_hanson_robots_that_relate_to_you.html
![Page 7: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/7.jpg)
Dans le domaine du webdesign,
le design émotionnel peut être défini selon plusieurs critères :
•une ligne éditoriale,•une mascotte,•des fonctionnalités,•un contenu provocateur,•un effet sonore,•etc.
![Page 8: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/8.jpg)
Fonctionnel + Agréable = Esthétique et utilisabilité
![Page 9: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/9.jpg)
Design d’objet et
architecture
![Page 10: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/10.jpg)
1934191018901810 - 1840
![Page 11: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/11.jpg)
1953 1968 1993 2011
![Page 12: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/12.jpg)
PHiLiPPE STArCk - JuiCy SALif - ALESSi, 1991
![Page 13: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/13.jpg)
i Mac2002, Apple
Vidéo publicitaire :
http://www.culturepub.fr/videos/apple-imac-window
![Page 14: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/14.jpg)
MacBook2006, Apple
veilleuse
![Page 15: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/15.jpg)
HumboldtforumBerlinyoutube :
https://www.youtube.com/watch?v=rSr4A0ggmyk
![Page 16: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/16.jpg)
Nabaztag2005, Violet
![Page 17: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/17.jpg)
Evian2012, projet Smartdrop
![Page 18: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/18.jpg)
Design d’application mobile / tablette
![Page 19: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/19.jpg)
iPhone
![Page 20: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/20.jpg)
CONVERTBOT CALCBOT WEIGHTBOT
Tapbots
![Page 22: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/22.jpg)
realmac Software
ClearSite web : http://www.realmacsoftware.com/clear/
![Page 23: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/23.jpg)
Eventbrite
Loading sur l’application mobileiPhone et Androïd
![Page 24: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/24.jpg)
Epic agency
Le Roi Babelhttp://babeltheking.com
Viméo : http://vimeo.com/43779454#at=0
![Page 25: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/25.jpg)
L’importance du rédactionnelattention aux p’tits détails
![Page 26: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/26.jpg)
![Page 27: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/27.jpg)
Vimeo
![Page 28: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/28.jpg)
Diwi
Firefox
![Page 29: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/29.jpg)
![Page 30: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/30.jpg)
![Page 31: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/31.jpg)
![Page 32: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/32.jpg)
Spotify
![Page 33: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/33.jpg)
![Page 34: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/34.jpg)
![Page 35: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/35.jpg)
![Page 36: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/36.jpg)
![Page 37: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/37.jpg)
Personnifaction et usagesdes mascottes
![Page 38: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/38.jpg)
Astrid
![Page 39: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/39.jpg)
SEOmoz
![Page 40: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/40.jpg)
Github
Octocat
![Page 41: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/41.jpg)
![Page 42: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/42.jpg)
Bit.ly
![Page 43: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/43.jpg)
Mailchimp
![Page 44: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/44.jpg)
Adium
![Page 45: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/45.jpg)
Allocine
![Page 46: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/46.jpg)
Caisse d’Epargne
![Page 48: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/48.jpg)
Datavizualisation
![Page 49: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/49.jpg)
Si le monde était un vi l lage de 100 personnes...
expoviz.fr
![Page 50: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/50.jpg)
![Page 51: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/51.jpg)
![Page 52: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/52.jpg)
Autres exemples...
![Page 53: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/53.jpg)
![Page 54: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/54.jpg)
![Page 55: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/55.jpg)
![Page 56: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/56.jpg)
![Page 57: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/57.jpg)
![Page 58: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/58.jpg)
![Page 59: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/59.jpg)
![Page 60: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/60.jpg)
Création d’un persona pour un design d’interface
![Page 61: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/61.jpg)
1. Nom de la marque
2. Aperçu : Qu’est-ce qui rend votre marque unique ?
3. Image de personnalité : photo d’une vrai personne qui incarne les traits souhaités (personnal i té, star.. ) .
4. Traits de la marque : l ister 5 traits de la marque qui la caractérise et 5 traits non souhaités.
5. Traits de la personnalité : sympathie vs méchanceté, soumis vs domination. (Si vous possédez une mascotte, décrivez la personnal i té de cette dernière.)
6. Voix : s i votre marque parle, quel est le ton ut i l isé : famil ier ? fleuri ? Str icte ? Sobre ? Guindé ?
7. Exemple rédactionnel : exemples de textes susceptibles d’être ut i l isés (message de bienvenue, message d’erreur, etc.)
8. Lexique visuel : charte graphique des couleurs, typographies, nuancier, etc.
9. Méthode d’engagements : déf inir une expérience permettant un engagement au sein de votre interface. Exemples : Doddle de Google qui change selon l ’actual i té local
![Page 62: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/62.jpg)
Conclusion
![Page 63: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/63.jpg)
Transformer ses clients satisfaits en ambassadeurs de marque.
Construire une affinité se traduira par :•des achats plus fréquents ou plus élevés•des achats supplémentaires•une résistance aux offres des concurrents•une forte recommandation auprès de leur proche
Les clients émotionnellement satisfaits sont ceux sont émotionnellement attachés et ont une plus forte affinité avec les marques.
Source init-marketing.fr - « Human Sigma » de John H. Fleming et Jim Asplund, livre paru en 2007
![Page 64: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/64.jpg)
Seules les émotions transforment vos clients « satisfaits »
en « promoteurs »
![Page 65: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/65.jpg)
Sincérite, confiance, identification et expérience humaine
![Page 66: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/66.jpg)
Ressources
![Page 67: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/67.jpg)
![Page 68: Design émotionnel](https://reader034.vdocuments.pub/reader034/viewer/2022052523/555df6abd8b42a3f618b4bd2/html5/thumbnails/68.jpg)
Thx!@jacinthe_