68
Le design émotionnel dans notre quotidien Mise à jour : mars 2013

Design émotionnel

Embed Size (px)

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'application

Citation preview

Page 1: Design émotionnel

Le design émotionnel dans notre quotidien

Mise à jour : mars 2013

Page 2: Design émotionnel

Hi!@jacinthe_ Co-fondateur de Kontestapp.com

Auteur du blog Ergophile.com

Page 3: Design émotionnel

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

Nous avons tous un langage commun et universel

les émotions

Page 5: Design émotionnel
Page 6: Design émotionnel

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

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

Fonctionnel + Agréable = Esthétique et utilisabilité

Page 9: Design émotionnel

Design d’objet et

architecture

Page 10: Design émotionnel

1934191018901810 - 1840

Page 11: Design émotionnel

1953 1968 1993 2011

Page 12: Design émotionnel

PHiLiPPE STArCk - JuiCy SALif - ALESSi, 1991

Page 13: Design émotionnel

i Mac2002, Apple

Vidéo publicitaire :

http://www.culturepub.fr/videos/apple-imac-window

Page 14: Design émotionnel

MacBook2006, Apple

veilleuse

Page 15: Design émotionnel

HumboldtforumBerlinyoutube :

https://www.youtube.com/watch?v=rSr4A0ggmyk

Page 16: Design émotionnel

Nabaztag2005, Violet

Page 17: Design émotionnel

Evian2012, projet Smartdrop

Page 18: Design émotionnel

Design d’application mobile / tablette

Page 19: Design émotionnel

iPhone

Page 20: Design émotionnel

CONVERTBOT CALCBOT WEIGHTBOT

Tapbots

Page 21: Design émotionnel

NuageTouch

Mr Moodyoutube : http://youtu.be/z5dHcXMLezg

Page 22: Design émotionnel

realmac Software

ClearSite web : http://www.realmacsoftware.com/clear/

Page 23: Design émotionnel

Eventbrite

Loading sur l’application mobileiPhone et Androïd

Page 24: Design émotionnel

Epic agency

Le Roi Babelhttp://babeltheking.com

Viméo : http://vimeo.com/43779454#at=0

Page 25: Design émotionnel

L’importance du rédactionnelattention aux p’tits détails

Page 26: Design émotionnel
Page 27: Design émotionnel

Twitter

Vimeo

Page 28: Design émotionnel

Diwi

Firefox

Page 29: Design émotionnel
Page 30: Design émotionnel
Page 31: Design émotionnel
Page 32: Design émotionnel

Spotify

Page 33: Design émotionnel
Page 34: Design émotionnel
Page 35: Design émotionnel
Page 36: Design émotionnel
Page 37: Design émotionnel

Personnifaction et usagesdes mascottes

Page 38: Design émotionnel

Astrid

Page 39: Design émotionnel

SEOmoz

Page 40: Design émotionnel

Github

Octocat

Page 41: Design émotionnel
Page 42: Design émotionnel

Bit.ly

Page 43: Design émotionnel

Mailchimp

Page 44: Design émotionnel

Adium

Page 45: Design émotionnel

Allocine

Page 46: Design émotionnel

Caisse d’Epargne

Page 47: Design émotionnel

Pixar

https://www.youtube.com/watch?v=W740iHEArP4

Page 48: Design émotionnel

Datavizualisation

Page 49: Design émotionnel

Si le monde était un vi l lage de 100 personnes...

expoviz.fr

Page 50: Design émotionnel
Page 51: Design émotionnel
Page 52: Design émotionnel

Autres exemples...

Page 53: Design émotionnel
Page 54: Design émotionnel
Page 55: Design émotionnel
Page 56: Design émotionnel
Page 57: Design émotionnel
Page 58: Design émotionnel
Page 59: Design émotionnel
Page 60: Design émotionnel

Création d’un persona pour un design d’interface

Page 61: Design émotionnel

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

Conclusion

Page 63: Design émotionnel

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

Seules les émotions transforment vos clients « satisfaits »

en « promoteurs »

Page 65: Design émotionnel

Sincérite, confiance, identification et expérience humaine

Page 66: Design émotionnel

Ressources

Page 67: Design émotionnel
Page 68: Design émotionnel

Thx!@jacinthe_