Le design émotionnel au service de l’expérience

[fusion_builder_container hundred_percent= »no » equal_height_columns= »no » menu_anchor= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »center center » background_repeat= »no-repeat » fade= »no » background_parallax= »none » enable_mobile= »no » parallax_speed= »0.3″ video_mp4= » » video_webm= » » video_ogv= » » video_url= » » video_aspect_ratio= »16:9″ video_loop= »yes » video_mute= »yes » video_preview_image= » » border_size= » » border_color= » » border_style= »solid » margin_top= » » margin_bottom= » » padding_top= » » padding_right= » » padding_bottom= » » padding_left= » »][fusion_builder_row][fusion_builder_column type= »1_1″ layout= »1_1″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » border_position= »all » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no »][fusion_title margin_top= » » margin_bottom= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » size= »1″ content_align= »center » style_type= »default » sep_color= » »]

[/fusion_title][fusion_text]

Dans son traité De architectura, Vitruve, architecte romain du 1^er siècle av JC, a développé le principe selon lequel une structure devait présenter 3 qualités : firmitas, utilitas et venustas (pérenne, utile et belle). Des nos jours, lorsqu’un designer crée un produit ou un service, l’utilisateur attend que ce qu’on lui propose soit aussi pérenne, utile et esthétiquement agréable. Plus de 2000 ans nous séparent de Vitruve et pourtant ces 3 qualités restent toujours d’actualité.

On pourrait croire que concevoir c’est facile pour les humains, car on conçoit pour un sujet que l’on connait bien : nous-mêmes ! Si seulement c’était si simple… Chaque être humain est différent : il est doté d’une personnalité qui le rend unique et de ce fait, il aimera et détestera des choses différentes. Mais l’humain a aussi des caractéristiques innées, comme l’expression de ses émotions. Dans sa théorie de l’évolution, Darwin explique que nous avons tous un langage émotionnel qui s’exprime dès la naissance. Cela est tellement ancré en nous que nous sommes disposés à aimer certaines choses, par exemple les visages ronds ou certains animaux.

C’est parce que nous réagissons avec nos émotions que les marques font appel au design émotionnel afin d’être mieux perçues et comprises par l’utilisateur.

Voici dix principes à retenir pour engager les utilisateurs :

[/fusion_text][fusion_title margin_top= » » margin_bottom= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » size= »2″ content_align= »left » style_type= »none » sep_color= » »]

#1 : Le pouvoir du visage des bébés

Aarron Walter dans son ouvrage sur le design émotionnel explique que notre nature humaine fait en sorte que nous sommes sensibles aux visages de bébés, à ses proportions. De nombreux dessins animés utilisent ce type de proportions, qui déclenchent la sympathie chez nous, car on les associe à des choses positives. Les designers ont utilisé ce principe pour concevoir des univers plus plaisants pour l’utilisateur. On retrouve aussi ces caractéristiques dans certains animaux qui inspirent un sentiment de confiance

[/fusion_text][/fusion_builder_column_inner][fusion_builder_column_inner type= »1_2″ layout= »1_2″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_imageframe image_id= »39594″ style_type= »none » stylecolor= » » hover_type= »none » bordersize= » » bordercolor= » » borderradius= » » align= »none » lightbox= »no » gallery_id= » » lightbox_image= » » alt= » » link= » » linktarget= »_self » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]http://www.mbadmb.com/wp-content/uploads/2018/08/face-of-a-beautiful-newborn-girl-with-blue-face-PAENKTD-300×200.jpg[/fusion_imageframe][/fusion_builder_column_inner][/fusion_builder_row_inner][fusion_title margin_top= » » margin_bottom= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » size= »2″ content_align= »left » style_type= »none » sep_color= » »]

#2 : L’homme est la clé

[/fusion_title][fusion_builder_row_inner][fusion_builder_column_inner type= »1_2″ layout= »1_2″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_imageframe image_id= »39596″ style_type= »none » stylecolor= » » hover_type= »none » bordersize= » » bordercolor= » » borderradius= » » align= »none » lightbox= »no » gallery_id= » » lightbox_image= » » alt= » » link= » » linktarget= »_self » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]http://www.mbadmb.com/wp-content/uploads/2018/08/Spirale_dor_de_Fibonacci.svg-1024×724.png[/fusion_imageframe][/fusion_builder_column_inner][fusion_builder_column_inner type= »1_2″ layout= »1_2″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_text]

Depuis longtemps, les architectes peintres et autres artistes utilisent l’être humain comme source de proportion pour leurs œuvres. Le nombre d’or (ou mesure divine), est une des proportions exploitées par les designers. Cette proportion géométrique, qui aurait été utilisée sur des nombreuses œuvres d’art, est qualifiée de nombre d’or lorsque la somme de deux mesures a et b divisée par a est égale à la valeur de a divisée par b [(a + b)/a = a/b].

Lorsque Twitter a changé en 2010 sa mise en page, les designers ont utilisé cette proportion du nombre d’or.

Notre définition de l’esthétisme et de la beauté prend finalement source dans notre propre image.

[/fusion_text][/fusion_builder_column_inner][/fusion_builder_row_inner][fusion_title margin_top= » » margin_bottom= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » size= »2″ content_align= »left » style_type= »none » sep_color= » »]

#3 : Le contraste pour se démarquer

[/fusion_title][fusion_builder_row_inner][fusion_builder_column_inner type= »2_3″ layout= »2_3″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_imageframe image_id= »39600″ style_type= »none » stylecolor= » » hover_type= »none » bordersize= » » bordercolor= » » borderradius= » » align= »none » lightbox= »no » gallery_id= » » lightbox_image= » » alt= » » link= » » linktarget= »_self » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]http://www.mbadmb.com/wp-content/uploads/2018/08/be-different-conceptual-visual-art-of-eggs-PYBBRW8.jpg[/fusion_imageframe][/fusion_builder_column_inner][fusion_builder_column_inner type= »1_3″ layout= »1_3″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_text]

Le contraste est lié à la perception humaine, il nous permet de définir une hiérarchie et faire des choix. Il existe deux types de contraste : visuel et cognitif.

Le contraste visuel est utilisé en design web pour aider l’utilisateur à agir. Pour cela on élimine tout le contenu superflu et on met en avant un élément (un formulaire, un bouton…). Mais attention à ne pas tomber dans le piège et faire trop de contrastes, car le temps requis pour prendre une décision augmente proportionnellement au nombre d’alternatives (loi de Hick).

Le contraste cognitif permet lui de modeler les perceptions d’un public. Les marques définissent des identités en contraste avec leurs concurrents afin que le public se souvienne d’elles.

#4 : Soigner l’esthétique

[/fusion_title][fusion_text]

Certains ne jurent que par le contenu, mais malheureusement si le contenant n’est pas soigné on n’aura pas forcément envie d’aller voir le contenu… l’être humain est superficiel. Donald Norman, designer, explique que les objets qui sont visuellement agréables ont un effet émotionnel positif, ce qui améliore nos capacités cognitives et, de ce fait, ces objets ont tendance à mieux fonctionner.

#5 : Donner de la personnalité

[/fusion_title][fusion_text]

Il est important de créer des services, des produits ou des marques avec une personnalité : cela permet d’établir des relations durables avec le public.

Le graphisme et le ton choisis pour s’exprimer doivent représenter leur nature unique. Comme pour les utilisateurs, il est possible de créer un persona pour donner de la personnalité à une marque et à son site web.

Par exemple, sur l’application Dojo, des messages s’affichent à chaque nouvelle connexion. Les messages sont drôles et variés. Cela donne de la personnalité à l’application et à la marque.

#6 : La mémorisation via l’émotion

[/fusion_title][fusion_text]

L’émotion permet de mieux mémoriser une expérience, qu’elle soit bonne ou mauvaise. C’est le cas pour des événements marquants comme le 11 septembre. Les personnes se souviennent généralement de qu’ils faisaient ce jour-là au moment où ils ont appris l’événement.

#7 : Surprendre pour créer de l’engagement émotionnel

[/fusion_title][fusion_builder_row_inner][fusion_builder_column_inner type= »1_3″ layout= »1_3″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_text]

L’effet de surprise amplifie notre réaction émotionnelle, car il condense des émotions dans un temps très court. Ce qui provoque un contraste très fort qui nous oblige à réévaluer la situation très rapidement.

#8 : Créer de l’anticipation

[/fusion_title][fusion_text]

Lorsque nous apprenons qu’un événement va avoir lieu, nous avons tendance à l’imager. L’anticipation donne un temps de réflexion à l’utilisateur et de ce fait crée un lien émotionnel avec lui. C’est ce que fait Apple avec le lancement de ses produits. Dès qu’Apple annonce qu’un nouvel iPhone va sortir, il donne quelques informations et laisse le reste à l’imagination de son public. Cela suscite un engouement sur les possibilités.

[/fusion_text][/fusion_builder_column_inner][fusion_builder_column_inner type= »2_3″ layout= »2_3″ spacing= » » center_content= »no » hover_type= »none » link= » » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » background_color= » » background_image= » » background_position= »left top » background_repeat= »no-repeat » border_size= »0″ border_color= » » border_style= »solid » padding= » » dimension_margin= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » last= »no » border_position= »all »][fusion_imageframe image_id= »39602″ style_type= »none » stylecolor= » » hover_type= »none » bordersize= » » bordercolor= » » borderradius= » » align= »none » lightbox= »no » gallery_id= » » lightbox_image= » » alt= » » link= » » linktarget= »_self » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]http://www.mbadmb.com/wp-content/uploads/2018/08/ben-white-197668-unsplash.jpg[/fusion_imageframe][/fusion_builder_column_inner][/fusion_builder_row_inner][fusion_title margin_top= » » margin_bottom= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » size= »2″ content_align= »left » style_type= »none » sep_color= » »]

#9 : Économiser l’effort des utilisateurs

[/fusion_title][fusion_text]

Bien que l’on ait tendance à dire que nous sommes tous des adeptes du moindre effort, la réalité est que nous sommes surtout des êtres qui aimons la voie la plus facile, celle qui représente le moins d’obstacles. Nous sommes juste des petits malins !

Pour ne pas créer de la frustration, il faut faciliter autant que possible le parcours de l’utilisateur et lorsqu’une action doit être faite, le guider pour qu’il puisse agir.

#10 Gestion des situations difficiles

[/fusion_title][fusion_text]

L’humain n’est pas parfait, il commet des erreurs, mais si un lien émotionnel a été créé avec la marque, l’utilisateur sera plus indulgent. Il est donc conseillé de prévoir une réponse appropriée.

[/fusion_text][fusion_separator style_type= »none » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » sep_color= » » top_margin= » » bottom_margin= » » border_size= » » icon= » » icon_circle= » » icon_circle_color= » » width= » » alignment= »center » /][fusion_text]

Lorsque nous devons prendre des décisions nous n’avons pas forcement le temps de peser le pour et le contre. Nous nous laissons guider par notre intuition et par nos émotions. Aujourd’hui les marques ne peuvent pas faire abstraction des aspects émotionnels des utilisateurs si elles souhaitent créer de l’engagement. C’est pour cela qu’elles font appel au design émotionnel. Il ne s’agit pas d’ajouter une suite de photos et de mots clés : le design émotionnel est une autre manière d’exprimer la personnalité d’une marque et de communiquer avec les utilisateurs.

[/fusion_text][fusion_title margin_top= » » margin_bottom= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » class= » » id= » » size= »3″ content_align= »left » style_type= »default » sep_color= » »]

Sources

[/fusion_title][fusion_text]

Aarron Walter – Design Émotionnel

wwww.newflux.fr

www.usabilis.com

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]