Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans...

31
Émotion et Esthétique Émotion et Esthétique Au delà du contenu et de l’ergonomie Au delà du contenu et de l’ergonomie Dimension esthétique et affective dans Dimension esthétique et affective dans les interfaces les interfaces Ce qu’on aime pourquoi ? Ce qu’on aime pourquoi ? Aude Dufresne Aude Dufresne B.D.I. Juan Roncancio

Transcript of Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans...

Page 1: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Émotion et EsthétiqueÉmotion et Esthétique

Au delà du contenu et de l’ergonomieAu delà du contenu et de l’ergonomie

Dimension esthétique et affective dans les Dimension esthétique et affective dans les interfaces interfaces

Ce qu’on aime pourquoi ?Ce qu’on aime pourquoi ?

Aude DufresneAude Dufresne

B.D.I. Juan Roncancio

Page 2: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

EsthétiqueEsthétique• Aesthetics examines what makes something beautiful, sublime,

disgusting, fun, cute, silly, entertaining, pretentious, discordant, harmonious, boring, humorous, or tragic

• In architecture, aesthetic principles include proportion, symmetry, color, lines, texture, balance, flow.

• More specifically, some key factors that contribute to the aesthetics of a UI are:– graphics, colors and fonts in the same style across the application;

limited to a handful, and to a few font styles – graphics, colors, and fonts should be in harmony across one another.– proportion and placement of visual components - visual components on

a screen are competing against one another for the user's attention. As such, their placement and relative size need to be balanced and in relationship with their functional importance.

Page 3: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Articulating the Use Qualities of Digital DesignsArticulating the Use Qualities of Digital DesignsJonas LJonas Löwgren 2006öwgren 2006

• “Pliable” flexible, moulable, s’adapte aux actions, niveau de généralité intermédiaire

• Liée à la motivation– Anticipation - participation et imagination– Playability (jouabilité) équilibre des buts, des ressources des obstacles..bon

niveau de défi.– Séduction, attrait, promesse, réalisation des promesses

Visual thesaurus, TextArc.org, Daniel Langlois– Pertinence et utilité

• Liée à l’Interaction– Fluidité (flow)– Autonomie (fonctionne de lui même, intelligent SIMS) contrôle collaboratif– Immersif, idéalement sans contraintes

Page 4: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

ImmersionImmersion– Modalités d’entrée et sortie (virtualité)

• Tactapad, Multitouch, microsoft surface, démo

• 3D Interface

• Le cercle

– Jeux où vous bougez Wii

• Wii PingPong, cooking mama, Dance Revolution

Page 5: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Articulating the Use Qualities of Digital DesignsArticulating the Use Qualities of Digital DesignsJonas LJonas Löwgren 2006öwgren 2006

• Liée aux actions et à leur signification sociale– Identité - outils puissants et faciles– Connections - ce qui compte c’est le lien.. Plus que le contenu– « actability » possibilité de nouvelles actions (redéfinir les paramètres, lever les

contraintes : discussion ou sondage anonyme, rejoindre quelqu’un sans le déranger ou sans coûts.

• Liées aux qualités d’Ingénierie– Efficience (rapide et sans erreurs)– Transparence (sans distractions)– Élégance (puissance et simplicité) Magic Lens - généralité du concept

• Liées à la compréhension- Art et Illusion reproduit et transforme les règles– Ambiguïté– Surprise

Page 6: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Articulating the Use Qualities of Digital DesignsArticulating the Use Qualities of Digital DesignsJonas LJonas Löwgren 2006öwgren 2006

• Conclusions– Les qualités du design sont liées au genre..– Cite l’exemple d’une encyclopédie numérique..

• currency, authority, reliability, integration, comprehensive– Qualités pour le Ecommerce, l’Art, les jeux sont différentes

Page 7: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Exploring Attributes of Skins as Potential Antecedents of Emotion in HCI Exploring Attributes of Skins as Potential Antecedents of Emotion in HCI Tractinsky and Zmiri, 2006Tractinsky and Zmiri, 2006

• Skinsplus que recherche de diversité = appropriation, identité, personnalisation

Emotion

réaction de courte durée à un objet ou un évènement, qui est relié à des besoins, des buts ou des préoccupations

Principale cause du choix des actionsLes réponses émotionnelles précèdent les réponses cognitives et persistent au delà des contradictions (Lindgaard and Dudek, 2003)

Page 8: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Exploring Attributes of Skins as Potential Antecedents of Emotion in HCI Exploring Attributes of Skins as Potential Antecedents of Emotion in HCI Tractinsky and Zmiri, 2006Tractinsky and Zmiri, 2006

Norman (2002, 2004)monde est évalué (affect) & interprété (cognition) à3 niveaux : réaction viscérale, comportement et réflexion

Desmet (2003) 5 classes de réaction émotiveinstrumentale, sociale, esthétique, surprise, intérêt

Rafaeli & Vilnai-Yavetzinstrumentalité - atteinte du but, utilitéesthétique - lié aux émotions, impact direct sur les senssymbolique - véhicule de sens à valeur positive ou négative, association à des valeurs sociales

Page 9: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Exploring Attributes of Skins as Potential Antecedents of Emotion in HCI Exploring Attributes of Skins as Potential Antecedents of Emotion in HCI Tractinsky and Zmiri, 2006Tractinsky and Zmiri, 2006

Expérimentation de 3 skins avec des tâches, leur demandent de choisir

Questions portant sur les dimensionsesthétique vs instrumentalité (usability) vs Symbolismesymbolisme apparaît très lié à esthétique

Analyse des questions ouvertes selon les mêmes dimensions.

Simplicité semble inversement corrélée à esthétiqueDisent que l’utilisabilité est le plus important, mais choisissent surtout

pour des critères esthétiques et symboliques.(réaction d’abord émotive, mais justification rationnelle)

Démontre la diversité des goûts des usagers

Page 10: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

InvestigationInvestigation

Le objectif principal de l’investigation était d’ établir si le modèle de Rafaeli et Vilnai-Yavets et les trois a trois propriétés des artefacts qu’ils proposent sont applicable aux HCI.

Page 11: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

MéthodologieMéthodologie• 60 participants (35 hommes et 25 femmes) d’approximativement 23

ans.• 12 Skins Windows Media Player Version 7 choisies aléatoirement.• On a demandé aux participants de choisir 2 des Skins selon leurs

gouts.• On a demandé aux sujets de réaliser plusieurs tâches avec les

skins sélectionnés et avec le skin par default.• Les participant ont remplis un questionnaire sur les attributs des

Skins et ont fait une description des raisons qui ont guidé leurs choix.

• Les questions et les descriptions faites par participants ont étés catégorisées et analysés selon les 3 propriétés de Rafaeli et Vilnai-Yavets.

Page 12: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

RésultatsRésultats - L’évaluation des expériences nous montre que l’usabilité est plus

importante la version par défaut.

- Les réponses aux questionnaires privilégient l’utilsabilité sur les autres paramètres.

- Nonobstant 80% des participants ont choisis de se dévier de l’interface de défaut.

- D’autre part, la corrélation des données nous montre un lien très fort entre l’aspect esthétique et symbolique.

Page 13: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.
Page 14: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

ConclusionsConclusions

• Dans le cas d’étude il est possible d’identifier systématiquement et avec exactitude les paramètres proposés par Rafaeli et Vilnai-Yavets.

• Ces paramétrés peuvent être utilisés pour évaluer l’expérience des utilisateurs dans le contexte des HCI.

• Même si chaque un des paramétres peu être analysé individuellement ont peut retrouver de nombreuses intersections entre eux.

• On trouve une divergence entre les données des questionnaires et celles collectés au cours de l’expérience. Même si dans leurs réponses l’usabilité semble avoir être le facteur déterminant, les participants ont souvent privilègiés dans leurs choix les caractéristiques esthétiques et symboliques.

Page 15: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Modèles cognitifs et émotionsModèles cognitifs et émotions• Définition des affects

• Dimension sensorielle• Cognitive• Réaction physiologique

• Persistance

B.D.I. Juan Roncancio

Page 16: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Les émotions sont elles innées ou apprises?Les émotions sont elles innées ou apprises?Brave, S. et Nass, C. (2003) Brave, S. et Nass, C. (2003)

Innées:• Chaque émotion est associée

à un processus physiologique et cognitif qui est déterminé biologiquement.

Apprises:• « Émotions are almost entirely

learned social constructs » • Concepts socialement appris.

Damasio (2003) « Ces émotions viscérales sont universelles et le plus souvent innées, bien que la culture puisse en moduler l’expression. »

B.D.I. Juan Roncancio

Page 17: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Aperçu des modèles cognitifsAperçu des modèles cognitifs• Motivation = conation et émotion

vouloir et ressentir

• Motivation– Liée au besoins, primaires et secondaires,

système autonomeconscient et inconscientmoteur de l’action sans elle on ne fait rien

• L’émotion – construit cognitif sur une réaction physiologique face à une situation– relativement indifférenciée et influençable– Persistante– Système autonome, lié au besoins et à la survie– Énergie qui accompagne la motivation

Changement d’attitudes

Psychanalyse

Renforcement

Comportement dans les foules

Inoculation

Stress anxiété

Page 18: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Émotions ≠ humeur ≠ sentimentsÉmotions ≠ humeur ≠ sentimentsBrave, S. et Nass, C. (2003) Brave, S. et Nass, C. (2003)

Page 19: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Dimensions de lDimensions de l’’émotionémotion

Page 20: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Théorie qui lie les actions aux sentiments Théorie qui lie les actions aux sentiments Roseman 79, Ortony (88) et Abelson (Lien avec Roseman 79, Ortony (88) et Abelson (Lien avec

modèles sémiotiques)modèles sémiotiques)

Émotions Besoins Objet Se produit Cause

Joie + moi +Jalousie + autre +Reconnaissance + moi + autreFierté + moi + moiTristesse + moi -Frustration + moi - moiColère + moi - autrePeur - moi +Honte - moi + moiHaine - moi + autrePitié - autre +Soulagement - moi -

Ortony, A., Clore, G. L., & Collins, A. (1988). The cognitive structure of emotions. Cambridge [England] ; New York: Cambridge University Press.

Page 21: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Réaction émotive avec les médiasRéaction émotive avec les médias• The Media Equation*

• «  We unconsciously act as if the media are people. 

• We believe in them We stay near or away if we like them or not.

• We think they won’t cheat..etc.

•Toutes les théories d’influence sociale joue aussi dans les systèmes informatisés: inocullation, effet de foules, crédibilité de la source,, etc.

• Reeves, B., & Nass, C. (1996). The media equation: How people treat computers, television, and new media like real people and places. New York: Cambridge University Press.

Page 22: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Mise en situationMise en situationQuestion de recherche =

Réaliser des interfaces adaptativesdans un environnement de télé-apprentissage, de jeu, de e-commerce

– Soutien à la tâche, à l’attention, à la motivation, à la collaboration

– Interface collaborative avec partage du contrôle

– Interface qui s’adapte, qui tienne compte des réactions, des préférences, des styles cognitifs des apprenants et des autres usagers

Problématique de recherche en sciences cognitives

– Psychologie - Sciences cognitives - Communication - Interaction humain-ordinateur – persuasion.

Page 23: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Interfaces à composantes Interfaces à composantes émotionnellesémotionnelles

MotivationsMotivationsÉmotionsÉmotions

CommunicationCommunication

Interfaces Interfaces intelligentesintelligentes

ÉchangeÉchange

SituationSituation

CognitiveCognitive SocialeSociale

Rendre le jeu réaliste…

Agents émotionnelsAgents émotionnels

Page 24: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Mise en situationMise en situationQuestion de recherche =

Réaliser des interfaces adaptatives pour le soutien aux acteurs dans un environnement de télé-apprentissage.

– Soutien à la tâche, à l’attention, à la motivation, à la collaboration

– Interface collaborative avec partage du contrôle

– Interface qui s’adapte, qui tienne compte des réactions, des préférences, des styles cognitifs des apprenants et des autres usagers

Problématique de recherche en sciences cognitives

– Psychologie - Sciences cognitives - Communication - Interaction humain-ordinateur - télé-apprentissage

Page 25: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Questions poséesQuestions posées• Quels sont les modèles utiles ?

• Comment se définit la situation ?INPUT OUTPUT

TRAITEMENT

• Jusqu’où peut-on aller pour introduire des agents intelligents à composantes émotionnelles ?

• Comment étudier les processus émotionnels. les réactions.

Page 26: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Aperçu des modèles cognitifsAperçu des modèles cognitifs• Motivation = conation et émotion

vouloir et ressentir

• Motivation– Liée au besoins, primaires et secondaires,

système autonomeconscient et inconscientmoteur de l’action sans elle on ne fait rien

• L’émotion – construit cognitif sur une réaction physiologique face à une situation– relativement indifférenciée et influençable– Persistante– Système autonome, lié au besoins et à la survie– Énergie qui accompagne la motivation

Changement d’attitudes

Psychanalyse

Renforcement

Comportement dans les foules

Inoculation

Stress anxiété

Page 27: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Intégration des agents émotionnelsIntégration des agents émotionnelsINPUT TRAITEMENT OUTPUT TRAITEMENT

Émotions

Perception

Attention

Modèle d’action

Comportement

Modèles d’action

Modèles d’émotionsNon verbal

Proxémie

Comportement

Réalisme

Dx de la personnalité

Tâche

Stress

Besoins

Dx de la personnalité

Situation

Pointage

Ententes négociées

Buts

Analyse des réseaux

Échéances

Difficulté de la tâche

Modèles sociaux

Adaptation de l’interface

Conversations

Réactions

Chercher à influencer

Personnalité Apprentissage Changement d’attitude Psychanalyse Psychothérapie

Reconnaissance du language et analyse ontologique

Page 28: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Intégration des agents émotionnelsIntégration des agents émotionnelsINPUT TRAITEMENT OUTPUT TRAITEMENT

Émotions

Perception

Attention

Modèle d’action

Comportement

Modèles d’action

Modèles d’émotionsNon verbal

Proxémie

Comportement

Réalisme

Dx de la personnalité

Tâche

Stress

Besoins

Dx de la personnalité

Situation

Pointage

Ententes négociées

Buts

Analyse des réseaux

Échéances

Difficulté de la tâche

Modèles sociaux

Adaptation de l’interface

Conversations

Réactions

Chercher à influencer

Personnalité Apprentissage Changement d’attitude Psychanalyse Psychothérapie

Reconnaissance du language et analyse ontologique

Page 29: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Intégration des agents émotionnelsIntégration des agents émotionnelsINPUT TRAITEMENT OUTPUT TRAITEMENT

Émotions

Perception

Attention

Modèle d’action

Comportement

Modèles d’action

Modèles d’émotionsNon verbal

Proxémie

Comportement

Réalisme

Dx de la personnalité

Tâche

Stress

Besoins

Dx de la personnalité

Situation

Pointage

Ententes négociées

Buts

Analyse des réseaux

Échéances

Difficulté de la tâche

Modèles sociaux

Adaptation de l’interface

Conversations

Réactions

Chercher à influencer

Personnalité Apprentissage Changement d’attitude Psychanalyse Psychothérapie

Reconnaissance du language et analyse ontologique

Page 30: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

Intégration des agents émotionnelsIntégration des agents émotionnelsINPUT TRAITEMENT OUTPUT TRAITEMENT

Émotions

Perception

Attention

Modèle d’action

Comportement

Modèles d’action

Modèles d’émotionsNon verbal

Proxémie

Comportement

Réalisme

Dx de la personnalité

Tâche

Stress

Besoins

Dx de la personnalité

Situation

Pointage

Ententes négociées

Buts

Analyse des réseaux

Échéances

Difficulté de la tâche

Modèles sociaux

Adaptation de l’interface

Conversations

Réactions

Chercher à influencer

Personnalité Apprentissage Changement d’attitude Psychanalyse Psychothérapie

Reconnaissance du language et analyse ontologique

Page 31: Émotion et Esthétique Au delà du contenu et de lergonomie Dimension esthétique et affective dans les interfaces Ce quon aime pourquoi ? Aude Dufresne B.D.I.

ConceptionConception• Quelle importance a la dimension émotive et esthétique dans votre

travail ? Comment allez-vous la faire jouer ?

• Dispositif interactif dans un musée ou sur le web pour faire découvrir la culture, l’histoire, un peintre, Comment rapprocher l’interaction d’une interaction réelle ?

• Publicité dans un lieu public pour attirer l’attention sur une compagnie.. Informatique, minière,

Voir exemples de sites et d’animations

Interfaces tangibles ReadyMate Sculpture animée en papier