Articles taggés Esthétisme

Pyramide du design adapté de la pyramide de Maslow

Les émotions dans le design – en pratique

1

Cet article est le dernier d’une série d’articles (première et deuxième partie) autour des émotions dans le design après ma lecture des livres Design émotionnel de Aarron Walter et Design Emotionnel de Donald Norman.

Il est difficile de créer un design qui attire tout le monde : l’approbation d’une personne peut être le rejet d’une autre. Pire ! ce qui peut nous attirer à un moment peut ne pas l’être à un autre moment. Aucun produit ne peut plaire à tout le monde. Les niveaux comportemental et réflectif sont très dépendants de l’expérience, de la formation, de l’éducation et de la culture. Au niveau viscéral, malgré que les réponses soient biologiques et identiques à travers le monde, il y a de forte différence entre chaque personne.
D’où la segmentation du marché et la personnalisation.
Il faut aussi faire la différence entre les besoins et les désirs déterminés par la culture, la publicité, par la façon dont on se voit et l’image qu’on veut montrer de nous-même. Les designers de produit et les responsables du marketing savent que les désirs sont plus puissants que les besoins dans le succès d’un produit.
Dans l’article précédent, nous avons vu les 3 niveaux du design. Aaron Walter dans son livre va plus loin en reprenant la pyramide de Maslow et en l’adaptant au design.

Pyramide du design adapté de la pyramide de Maslow
Chaque niveau de design a ses propres problématiques et nécessite sa propre réponse.
Pour répondre au design comportemental qui correspond à la base de la pyramide, il faut mettre en place les bonnes fonctionnalités, la fiabilité et l’utilisabilité. C’est le niveau déjà beaucoup étudié par les ergonomes, les spécialistes de l’utilisabilité ou les architectes de l’information et déjà abordé dans des articles précédents comme les principes du design.
Si le design comportemental s’associe très bien avec un design par comité ou itératif où le résultat sera peut-être terne mais sur, c’est beaucoup moins le cas avec le design viscéral et itératif qui sont plus emmenés par la vision claire d’une personne. Un design viscéral effectif requiert les compétences de l’artiste graphique et de l’ingénieur industriel. Tout se joue avec l’impact émotionnel immédiat.
Un moyen d’atteindre les deux derniers niveaux de la pyramide correspondant aux niveaux viscéral et réflectif est possible par le biais des émotions est de créer une expérience forte en mettant en avant la personnalité du produit. Il n’y a d’ailleurs pas que le produit qui peut avoir une personnalité. Cela peut aussi être le cas pour une compagnie ou une marque. Cette personnalité doit cohérente avec le segment de marché visé et doit être consistante.

Par exemple le design d’un packaging forge un lien émotionnel entre le consommateur et la marque.

Les émotions dans le packaging
En mettant en avant la personnalité de votre marque, vous engagez votre audience émotionnellement. Quand votre marque se démarque clairement des autres, votre audience va facilement s’identifier avec et s’en souvenir. La surprise amplifie cette réponse émotionnelle. Surprendre les gens avec de la gentillesse et une attention individuelle peut aider le business à atteindre le succès.

La beauté d’un design joue un rôle essentiel et crée une réponse émotionnelle positive dans le cerveau qui va jusqu’à améliorer réellement nos compétences cognitives et donc notre performance. Il y a aussi un retour sur investissement à faire en sorte que vos utilisateurs se sentent bien car cela se transforme directement en ventes et en économies budgétaires de marketing. Nous savons que les personnes qui utilisent les sites et les applications naviguent et traitent le contenu rapidement et leur attention est limitée. Introduire de la surprise et de l’émotion peut limiter cette attitude et permettre de capter l’attention.
Le design émotionnel n’est pas seulement là pour créer des expériences positives et surmonter des obstacles. Il peut aussi aider à faire face à des situations difficiles comme une indisponibilité des serveurs, la perte de données ou encore des bugs touchant le travail des utilisateurs. L’engagement émotionnel avant et même durant un événement majeur peut aider à atténuer le risque de perdre des utilisateurs. En situations de stress élevé, votre priorité doit être d’apprivoiser les émotions négatives mieux que vous le pouvez et, si possible, les remettre dans des états positifs. Par exemple, Flickr lors d’un gros problème sur leurs serveurs avait créé un concours de coloriage.

 

Il faut être conscient que quand vous mettez en avant votre personnalité dans votre design, certaine personne ne vont pas aimer. Mais un design chargé d’émotion ne permet pas seulement d’attirer et garder votre public, il permet d’assurer que vous parlez aux bonnes personnes. Traiter les sceptiques est difficile mais au moins ils accordent leur attention à votre produit. Et, pour répondre au grincheux, on peut permettre à l’utilisateur de changer le ton des réponses.

 

Il n’y a pas de formule simple pour le design émotionnel, seulement quelques principes de psychologie et de nature humaine pour vous guider.

Mailchimp - un exemple de design émotionnel
Par exemple MailChimp n’a jamais voulu que Freddie leur mascotte fournisse du feedback à propos de l’application, délivre des statistiques ou vous prévienne quand quelque chose c’est mal passé c’est simple un niveau de fun et d’émotion afin d’améliorer une interface déjà utilisable.
Un autre exemple est le service en ligne Wufoo permettant la création de formulaire qui a créé un design émotionnel intégré directement à l’interface. En jouant sur l’esthétisme, Mint a défié son plus gros concurrent Quicken en appelant à l’émotion de ses utilisateurs
Aaron Walter conseille pour mettre en place ces émotions de reprendre le principe des persona pour créer un persona de la marque ou du site web.

Pour conclure, cette série d’articles (partie 1 et partie 2), j’espère que vous avez maintenant compris l’importance des émotions et leur utilité.

Pour aller plus loin dans l’importance des émotions Aaron Walter et Donald Norman vont jusqu’à dire que la poursuite de la perfection technique (fonctions, reliabilité ou utilisabilité) n’est pas utile ce qui importe c’est l’expérience de l’utilisateur dans son ensemble en prenant en compte bien sur les émotions. Donald Norman a d’ailleurs écrit un article intitulé « La mémoire est plus importante que la réalité ».

Un  autre sujet intéressant par rapport aux émotions est bien sur la gamification.

D’autres articles :

Un retour sur Design Emotionnel d’Aaron Walter chez Ergophile

Donnez à votre site une âme avec des interactions émotionnellement intelligentes (en anglais)

Mettre des émotions dans votre site (en anglais)

Fonction et Forme

La forme suit la fonction

2

Le dicton la forme suit la fonction nous vient de l’architecte américain Louis Sullivan qui affirme que la forme et l’apparence extérieure d’un bâtiment doivent découler de sa fonction et de ses articulations intérieures :

It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.

Elle est tirée d’un courant plus général appellé fonctionnalisme.

Le corollaire de « la forme suit la fonction » peut être interprété de deux façons différentes comme une description de la beauté ou une prescription de la beauté.

  • L’interprétation descriptive est que la beauté résulte d’une pureté de la fonction et une absence d’ornementation.
  • L’interprétation prescriptive est que les considérations esthétiques dans un design devraient être secondaire par rapport aux considérations fonctionnelles.

Le corollaire a été adopté et popularisé par les architectes modernes au début du 20ème siècle puis a été adopté par les designers dans de nombreuses disciplines. On parle aussi dans un sens plus général de fonctionnalisme. Les aspects fonctionnels d’un design ont l’avantage d’être moins subjectifs que les aspects esthétiques.

La forme suit la fonction sur google.com

La page d'accueil du moteur de recherche Google est un parfait exemple de la forme suit la fonction

Cependant la question ne doit pas être limitée à « quels aspects de la forme doivent être exclus ou échangés contre des fonctionnalités ? » mais « quels aspects du design sont critiques pour le succès ? » Quand le temps ou les ressources sont limités, les compromis sur le design doivent être basés sur ce qui fera le moins de préjudice aux probabilités de succès. Dans certaines circonstances, les considérations esthétiques seront mise de coté et dans d’autre cas ce sera les fonctionnalités.
Les facteurs déterminants ? ce qui sert le mieux le produit !

 

Il ne faut pas oublier que l’esthétisme et le biais d’attractivité joue un rôle important dans l’acceptation d’un design comme nous le rappelle avec brio Donald Norman dans sa video TED :

En conclusion, il est intéressant d’utiliser l’interprétation descriptive de la forme suit la fonction comme un guide esthétique mais il ne faut pas utiliser l’interprétation prescriptive comme une règle de design stricte. Quand le designer fait des choix de design, il doit se concentrer sur l’importance relative de tous les aspects du design, forme et fonction, à la lumière des critères de succès

Fonction et Forme

Des liens en anglais :
http://wikipedia.qwika.com/en2fr/Form_follows_function
http://www.digital-web.com/articles/form_follows_function/
http://www.smashingmagazine.com/2010/03/23/does-form-follow-function/

Texte traduit provenant de Universal Principles of Design

Les couleurs

0

Le choix des couleurs est un des principaux travaux du designer et un sujet qui mériterait un article beaucoup plus long !
Un choix approprié de couleurs permet de rendre un design plus intéressant, esthétique et peut renforcer l’organisation et la signification des éléments.

Les points ci-dessous adressent les principaux problèmes rencontrés lors de l’utilisation des couleurs.

Le nombre de couleurs : Utiliser les couleurs avec parcimonie et limiter la palette à ce que nous pouvons traiter d’un seul coup d’œil (environ 5 couleurs différentes).

Combinaisons de couleurs : Améliorer l’esthétisme avec des combinaisons de couleurs proches sur la roue des couleurs (analogues), à l’opposé (complémentaires), triadiques ou encore les combinaisons que l’on trouve dans la nature. Il vaut mieux utiliser les couleurs chaudes pour les éléments en avant plan et les couleurs froides pour les éléments en arrière plan.

La saturation : Utiliser des couleurs saturées quand on veut attirer l’attention. Utiliser des couleurs peu saturées quand la performance et l’efficacité sont les priorités. Des couleurs brillantes et peu saturées sont perçues comme amicales et professionnelles. Des couleurs peu saturées et sombres sont perçues comme sérieuses et professionnelles. Les couleurs saturées sont perçues comme plus excitantes et dynamiques. Il faut faire attention en utilisant les couleurs saturées celles-ci peuvent interférer entre elles et sont fatigantes pour les yeux.

Enfin s’il n’y a pas d’évidences de l’influence des couleurs sur le moral ou les émotions, il faut faire attention au symbolisme de certaines couleurs en fonction de la culture.

Schémas d'utilisation des couleurs

Schémas d'utilisation des couleurs

Texte traduit provenant de Universal Principles of Design

L’alignement par zone

0

L’alignement par zone est basé sur les zones des éléments au contraire des cotés des éléments.

L’alignement des éléments graphiques est basé sur les cotés de ceux ci. Cette méthode marche mal quand les éléments ne sont pas relativement uniformes et symétriques.  Il est alors préférable de les aligner sur leur « poids » visuel. Cette technique demande d’utiliser les yeux et le jugement du designer.

Pour aligner l’élément, on peut considérer que celui-ci a une masse et qu’on cherche à la répartir de façon égale le long de l’axe d’alignement.

Ce principe s’applique aussi bien sur les éléments graphiques que les éléments textuels par exemple pour les citations.

En conclusion, il faut appliquer cette technique quand on veut inclure des éléments dissymétriques.

L'alignement par zone

L'alignement de droite est basé sur les extrémités du dessin tandis que celui de droite est basé sur le poids des dessins

Texte traduit et image provenant de Universal Principles of Design

La consistance

1

L’utilisabilité d’un système est améliorée quand les différentes parties sont exprimées de façon similaire. Les systèmes consistants sont plus facilement utilisables et voient leur apprentissage facilité. Elle permet aux utilisateurs de transférer efficacement leur connaissance dans de nouveaux contextes, d’apprendre rapidement et de se concentrer sur les éléments importants de la tâche.
Il y a quatre genres de consistance: esthétique, fonctionnelle, interne et externe.
La consistance esthétique concerne le style et l’apparence. Cela permet d’améliorer la reconnaissance, communiquer l’appartenance et mettre en place des attentes émotionnelles. Le meilleur exemple est l’utilisation du logo courant dans les grandes marques.
La consistance fonctionnelle concerne le sens et les actions (par exemple le feu de circulation orange avant de devenir rouge). Cela facilite l’utilisabilité et l’apprentissage en permettant de réutiliser des connaissances acquises par exemple tout le monde sait rapidement utiliser un magnétoscope ou un lecteur de MP3 grâce aux symboles communs (jouer, arrêter, avancer, reculer).
La consistance interne concerne les éléments entre eux dans un système. Les éléments groupés de façon logique devraient être esthétiquement et fonctionnellement constant entre eux. C’est un indicateur que le système a été designé et pas assemblé pêle-mêle.
La consistance externe concerne différents éléments d’un même environnement qui étend la consistance interne à travers de multiple systèmes indépendants. On peut prendre en exemple les barres de menus des systèmes d’opérations (Windows et surtout Mac OSX).

MacOS et consistance de l'interface

MacOS et consistance de l'interface

Enfin, quand un design standard existe, il est préférable de l’utiliser.

Texte traduit provenant de Universal Principles of Design

Yannick Grenzinger

Les formes anthropomorphiques

0

Nous sommes prédisposés à percevoir certaines formes et motifs comme « humains » surtout quand ceux-ci ont les proportions du visage ou du corps. Cette tendance, quand elle est appliquée au design, est un moyen efficace d’attirer l’attention et établir une tonalité affective positive pour l’interaction.
La forme de bouteille de Coca Cola qui apparait en 1915, surnommée la bouteille « Mae West » à cause de ses formes particulièrement féminines, a été une rupture avec les bouteilles rectilignes et sans relief de cette époque.

Les formes anthropomorphiques de la bouteille de Coca Cola de 1915
Il faut mieux favoriser les formes anthropomorphiques abstraites plutôt que réalistes, les représentations réalistes ont plus tendance à diminuer plutôt qu’augmenter l’attrait esthétique. Il faut utiliser les proportions du corps féminin pour obtenir des associations avec la sexualité et la vitalité, utiliser des formes rondes pour obtenir des relations avec les enfants et des formes plus angulaires pour obtenir des associations masculines et agressives.
La bouteille de liquide vaisselle Method est aussi une réussite. La grosse tête en forme de bulbe déclenche des associations avec le visage des bébés et les valeurs de sécurité, honnêteté et pureté.
Bouteille de liquide vaisselle Method aux formes rondes et anthropomorphiques

Texte traduit provenant de Universal Principles of Design

Yannick Grenzinger

L’alignement

0

L’alignement correspond au placement des éléments pour que leurs côtés s’alignent le long de lignes ou colonnes communes ou leur corps le long d’un centre commun.

Cela permet de créer un sens d’unité et de cohésion qui contribuent à l’esthétisme du design. C’est aussi un excellent moyen de guider l’utilisateur à travers le design en créant des relations explicites par les lignes et colonnes d’une table.

L’alignement du texte d’un paragraphe sur la droite ou la gauche fournit des repères bien plus puissants que du texte centré. La colonne invisible créée par ces deux alignements permet à d’autres éléments de venir s’aligner et ainsi d’être mis en relation

Problème d'alignement sur les machines de votes américaines

Le mauvais alignement fait partie des problèmes du design de la machine de vote électronique qui a provoqué de nombreuses erreurs lors des élections américaines.

Texte traduit et image provenant de Universal Principles of Design

Yannick Grenzinger

L’esthétisme

0

L'esthetisme et Apple

Un design esthétique est perçu comme plus facile à utiliser et a une plus grande chance d’être utilisée.

Un design plus utilisable moins esthétique peut souffrir d’un manque d’acceptation. Cette perception porte préjudice à l’interaction et est résistante au changement. Par exemple l’étude de l’utilisation des ordinateurs a montré que les premières impressions influencent l’attitude sur le long terme à propos de la qualité et de l’utilisation. Un phénomène similaire se retrouve dans les relations humaines où les premières impressions influencent comment on évalue et traite la personne.

Un design esthétique va favoriser une attitude positive et rend plus tolérant aux erreurs de design. Une telle relation positive et personnelle avec un design fait naitre des sentiments d’affection, de loyauté et de patience mais facilite aussi l’esprit créatif et la résolution de problème.

Il faut toujours désirer créer un design esthétique.

Texte traduit provenant de Universal Principles of Design

Yannick Grenzinger

Haut de page