CHAP 3 / Le X de UX - La couleur du Zèbre · UX • INTERVENTION CAWEB 2018/2019 – 21H OCTOBRE 2018 * DOCUMENT EN COURS DE REALISATION CHAP 3 / Le X de UX Loi de Fitts Cette loi

UX•INTERVENTIONCAWEB2018/2019–21H OCTOBRE2018*DOCUMENTENCOURSDEREALISATION

CHAP3/LeXdeUX

§  Schémasdepenséesetperceptionsdesutilisateurs(Lapsychologiecognitive,théoriesetlois,signifianceetperceptions…)

§  Marketingsensorieletémotionnel


Rappeldesbesoinsfondamentauxpourleshumains-dansunerelationils’agitde«sesentir»:>Stimulé>Autonome>Enrelation(groupe)>Ensécurité>Compétentetefficace>Influentetpopulaire>Épanoui(accomplissementdesoi/sensàsavie)

CHAP3/LeXdeUX

Schémasdepenséesetperceptionsdesutilisateurs

Lienspourallerplusloin:http://www.usabilis.com/definition-sciences-cognitives/

http://www.usabilis.com/definition-psychologie-cognitive/#cognitivehttps://blocnotes.iergo.fr/articles/introduction-a-la-psychologie-cognitive-appliquee-au-web/

http://referencement-site-francophone.com/quest-ce-que-les-sciences-cognitives-peuvent-apporter-aux-ux-designer/

Lapsychologiecognitiveestuneétudescientifiquedesfonctionscognitiveshumaines:•lamémoire,•lelangage,•lesperceptions,•leraisonnement,•larésolutiond’unproblème…Pourcomprendrelesprocessuscognitifsetanticiperlescomportementsdesutilisateurs,laméthodedelapsychologiecognitiveconsisteàcomprendreetutiliserlesmodèlesdufonctionnementmental.


Onchercheratoujoursnaturellementàdonnerunestructuresignifianteàcequel’onperçoit.Devantlacomplexitédenotreenvironnement,lecerveauvachercheràmettreenforme,àdonnerunestructuresignifianteàcequ’ilperçoitsuivantplusieurslois(nousauronsd’aborduneperceptiondelaformeglobale,puisdesélémentsindividuels).

CHAP3/LeXdeUX


Lienspourallerplusloin:https://blocnotes.iergo.fr/breve/motsetphrases/theorie-de-la-gestalt/

https://www.comonlight.com/lart-de-creer-un-logo-qui-active-notre-intelligence-visuelle/

Commentcesloiss'appliquentauxconceptionsetaudesignd'interface?


CHAP3/LeXdeUX


Lienspourallerplusloin:https://blocnotes.iergo.fr/breve/motsetphrases/theorie-de-la-gestalt/

https://www.comonlight.com/lart-de-creer-un-logo-qui-active-notre-intelligence-visuelle/

Lagestalt=théoriedelaGestalt(«forme»enallemand,aussiappeléepsychologiedelaforme)sebasesurlesprincipesdelaperceptionducerveauhumain:•laloideproximité,•laloidesimilarité/similitude•laloideclôture,•laloidelacontinuité•laloid’émergenceoumultisabilitéetaussi…LesloisdeFitts,deHicketdeMiller…


CHAP3/LeXdeUX

Loideproximité>nousregrouponslespointsd’abordlesplusprocheslesunsdesautres.



Loidesimilitude>nousnousattacheronsensuiteàrepérerlesplussimilairesentreeuxpourpercevoiruneforme.

CHAP3/LeXdeUX


Lien


CHAP3/LeXdeUX

Loideclôture>uneformeferméeestplusfacilementidentifiéecommeunefigure(oucommeuneforme)qu’uneformeouverte.



Loisd’émergenceoumultisabilité>L’œilidentifieuntoutouunautretout.Jamaislesdeuxàlafois.

CHAP3/LeXdeUX

Écouteretcomprendrelesschémasdepenséesdesutilisateurs


CHAP3/LeXdeUX

Etlemixestpossible…



CHAP3/LeXdeUX

LoideFittsCetteloimetenévidenceunerelationentrelavitesseetlaprécisionrapportéeaupointage.Eneffet,lesélémentslespluspetitsoulespluséloignés,demandentforcémentdavantagedetempspourêtreatteints.Cetteloifondamentaleadegrandesimplicationsdansl’UXetledesignd’interface.ApartirdelaloideFitts,oncomprendmieuxpourquoiilexisteunezonedeconfortdansl’usagedesinterfacesgraphiques,desktopetmobiles,tactilesounon.


Lien:https://www.usabilis.com/definition-loi-de-fitts/


CHAP3/LeXdeUX

LoideFitts


Lien:https://www.usabilis.com/definition-loi-de-fitts/


LoideHick>letempsdedécision(=deconversion)dépenddunombredechoixdisponibles.

CHAP3/LeXdeUX


Lien:http://blog.yumaneed.com/?p=334ethttps://www.usabilis.com/definition-loi-de-miller/

LoideMiller>nouspouvonsmémoriser7Éléments(enmoyenneet+ou–2)

Cetteindicationpeutégalementêtreemployéepourestimernotrecapacitéàtraiterlesinformations(mémoireàcourtterme).


CHAP3/LeXdeUX


Lire:http://www.gallimard.fr/Catalogue/GALLIMARD/Folio/Folio-essais/Point-et-ligne-sur-planLienspourallerplusloin:https://fr.wikipedia.org/wiki/Psychologie_de_la_forme

https://graphism.fr/rsum-de-la-confrence-dannesophie-fradier-sur-la-macrotypographiehttps://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html

Signifianceetperceptions>ilestindispensabledecomprendreetmaîtriserquelquesprincipesdeperception.Ils’agitdecomprendrel'expressiviteetlaperception:-  desformes,-  descouleurs-  del’imageenmouvement-  dusonetdelamusique-  delatypographie,delamacrotypographieetdesgrillesdemisesenpages…


CHAP3/LeXdeUX


ExpressivitédesformesLepoint:élémentdebasedulangageplastique=élémentpremier.C'estlatraced'unoutilsurunsupport.Laligne:traced'unpointenmouvement=expressiondetensions,demouvements,dedirections.(différentesconfigurations)maislalignerenvoietoujoursàunenotiondedynamique,delienetdeséparation:dynamiquedelarelationdecauseàeffet,actionetpassaged’influxmaisaussi,dedémarcationetdedistinction.>Lalignedroite:formelaplusconcisedespossibilitésdemouvement.Elleestàlafoisdynamismeetdiscrétion,mouvementetrigueur.Lalignedroiteestunetensionplusunedirection.Maislessignificationsdelalignevontdépendre,deladirectiondecepointenmouvement.Lalignedroitehorizontale:suggèrelamatièreterrestre(horizon),élémentderéférence,symboliquedelalignedetemps.Lalignedroiteverticale:évoquel'élévation,l'élégance,laspiritualitemaisaussilaforceetl'autorite.Ainsiuneverticalepourraévoquerlachuteoularéussiteselonqu'elle"descend"ouqu'elle"monte".Lalignedroitediagonale:plusdynamiqueetplusagressive.Selonl’axialisation,onpourraparlerdediagonalesascendantesetdescendantes.>Lalignebrisée:expressivitequivarieraselonsadirectiongénérale,selonletyped'anglesquilaconstituent,etselonlerythmecrééparlalongueurdessegmentsdechacundesanglesconsidérés.


CHAP3/LeXdeUX


ExpressivitédesformesLetriangle:estunefiguretrèsdynamiqueetrapide.Sonexpressiviteestsoumiseauxdifférentstypesd'anglesquileconstituent,àlalongueurdessegmentsqu'ilsdessinentetàsonaxialisationquiseraassuméeparl'angleayantlaplusgrandetensiondepointe.LesanglesAngledroit:Référencequifondenotrerepèrecartésien,c’estl’angleleplusneutreetleplusabstrait.L'angledroitrenvoieàl'architecture.Angleaigu:Ilaunegrandevaleurdedirectiondynamique,unegranderapidite(flèche).Angleobtus:Ilperdlaforceagressiveetperçantedel'angleaigupourgagnerunesortedepuissancesourdeetlentequilerapprochedel'arcdecercle.LacroixFigurecentréecomposéedel’intersection.Lacroixrenvoied’abordàl'idéed'équilibre,decomplétude(d’uniondesvaleurscomplémentairesetopposablesdel’horizontaleetdelaverticale).


CHAP3/LeXdeUX


ExpressivitédesformesLecarré:renvoieàl'idéed'équilibre,destabilite,deneutralite,deconcisionetd'abstraction.Lecarréestunefigureanti-dynamique,ancréesurquatrecôtés.Ilsymbolisel’arrêtoul’instantpréleve.C'estunefigurepresquecentréequivéhiculedesidéesdesolidite,deconstructionrassuranteetprotectrice.Mais,lecarréinduitaussid'enfermement.Lecercle:saperceptionsefondebiensûrsurcelledelacourbe,maisunecourbeparticulièrequin’auraitnicommencementnifin,nidirectionniorientation.Lesymboleduciel,dutempsetdel’éternite.Lecerclerenvoieàlaroue,auxplanètes(soleil,lune,terre)etauxmouvementsderotationlentsetinexorablesquileursontassociés.Lecercleévoque,enmêmetempsquelesvaleursdecentralitedupoint,lacourbeféminineetplusprécisémentleventredelafemmeenceinte:l'œuf.Lecercleconnotelesnotionsd'origine,dedouceur,deprotectionmatureetpuissante.LesdérivésLerectangleestunesortedecarréayantsubiunétirementouunecompressiondansl'unedesesdimensions.Ilestplusdynamiquequelecarré.L’ellipsepourraitêtretraitéedefaçonanalogueàcelledurectangle,maisenlacomparantcettefoisaucercleLelosangeestplusagressifquelecarrétoutenconservantunepartdesaconcisionetdesaneutralite.Ilparaîtplusdangereuxetserapprochedoncdutriangle.


CHAP3/LeXdeUX


Expressivitédescouleurs


CHAP3/LeXdeUX


ExpressivitédescouleursBleu:Teinteregroupantlesdénominationsdebleu-vert,cyan,bleu,bleuoutremer...Lebleuestlaplusprofondeetlaplusimmatérielledescouleurs.Lessignifiésdubleu:l’immatérialite,laprofondeur,lafroideuretlapurete.Couleurdel'espace,del'infini,dulointain,durêve,desélémentsnaturelspuissantsetincommensurables.Lebleuestaussicouleurdufroid,dufrais,del'eau.Rouge:Teinteregroupantlesdénominationsdebrun,pourpre,magenta,rouge-orangé...Sessignifiésambivalentsdécoulentdesesformesquesontlesangetlefeu.Lerougeestunsymbolefondamentalduprincipedeviesoitilencourage,dynamise,inciteàl’action:soitilinquiète,alerte,provoque.Couleurludiqueassociéeaumondedel'enfance.Couleurduluxeetdelafête.Jaune:Teinteregroupantlesdénominationsdejauneorangé,jaune,ocrejaune...Lejauneestexpansif,intense,violent,aigu,jusqu’àlastridence.C’estlaplusardentedescouleurs.Sessignifiésdécoulentdesesformesquesontlesoleil,lefeu,l’oretlalumière,maisaussilesouffre,labileetlesfeuillesjaunissantavantdemourir.Couleurdelalumière,dusoleil,del’énergie,couleurdel’éternite,dudivinouencorecouleuracide.


CHAP3/LeXdeUX


ExpressivitédescouleursVert:Teinteregroupantlesdénominationsdejaune-vert,vert,bleu-vert...Levertestunecouleuroùs’équilibrentlaforteinstabilitedynamiquedujauneetlastabilitedubleu.Sessignifiésdécoulentdeformesdumilieunaturel:del’eauetdelachlorophylle.Couleurdelanature,del'écologie,del'hygiène,delasanté,delafraîcheur.Couleurdelajeunesse,del’énergievitalisante.Couleurdel'autorisation.Levertestaussilacouleurcomplémentaireetopposéedurouge,couleurdel'interdit.Couleurdel’étrangeetl’inquiétant.Orange:Teinteregroupantlesdénominationsdejaune-orangé,orange...L’orangéestunecouleuràlafoispuissanteetdynamique:rayonnanteetinstable.CouleurdusignaletdudangerCouleurdel’immatériel,del’espritetdusacréCouleurdel’artificieletdutechnologiqueCouleurdelalibido.Violet:Teinteregroupantlesdénominationsdelilas,violet,bleuviolet,pourpre...Levioletestunecouleurpuissante,profondeetimmatérielle.Couleurchrétiennedusacrificeetdelapénitence.Couleurdel’étrangedudeuil.Couleurdesrichesetdespuissants.


CHAP3/LeXdeUX


ExpressivitédescouleursNoir:Cetteteinteestcaractériséeparsonabsencedelongueurd’onde.Couleurdelamort,delafaute,dupéche,delamalhonnêteté.Couleurdelatristesse,delasolitude,delamélancolie.Couleurdel'austérite,durenoncementetdelareligion.Couleurdel'éléganceetdelamodernite.Blanc:Cetteteinteestcaractériséeparlasommenewtoniennedetoutesleslongueursd’onde.Leblancincarnedeuxvaleurscontradictoires:leblancmatentantquesupport,qu’absencedecouleur(systèmesoustractif)etleblancbrillantentantquesommedeslumières(systèmeadditif).Couleurinitiatricedel'immacule,ducandide.Couleurdel'hygiène.Couleurdel'absence.Couleurdufroidquiaseptiseetconserve.Couleurdelasimplicite,deladiscrétion,delapaix.Couleurdelalumière.Ànoter…Laluminositerenvoieàdesvaleursd'énergieetproduitdes"paires"designifiéstelsque:nocturne/diurne,inquiétant/rassurant,mystérieux/intelligible.L'oppositionchaud/froidestaussiuneoppositionimportante.Uneautreoppositionactiveestcellequiopposelacouleurpureousimpleàlacouleurimpureoucomplexe.Lacouleurditepureestgénéralementuneprimaireouunesecondaireauhautdegredesaturation.


CHAP3/LeXdeUX


ExpressivitédelatypographieLapoliced’écriture–policedecaractère–lafontdonneleton,ellerendlalectureagréable.Elleinsuffledelapersonnalitéautexte,etvéhiculedesvaleursaumêmetitrequelesimagesetlescouleurs.Avecsoncaractère,ellealimentelaperceptionetcréedesémotions.MacrotypographieGristypographique,grilledemiseenpage,lignedebase,repèresdelecture,rythmes,contrastes,équilibre,déséquilibre,structureethiérarchiedel’information…Lamacrotypographierépondaussiaufonctionnementdenotrecerveauetànosschémasdepensées…

Liens:https://exodream.com/blog/design/les-polices-d-ecriture-https://www.anthedesign.fr/communication-2/typographie/https://graphiste.com/blog/conseils-choisir-typographie-https://www.lahautesociete.com/blog/la-typographie-dans-le-design-graphique-12/

http://www.ux-republic.com/la-typographie-digitale-ou-lart-du-design-insaisissable/ethttps://graphism.fr/rsum-de-la-confrence-dannesophie-fradier-sur-la-macrotypographie/https://www.paris-web.fr/2010/conferences/macrotypographie-page-web.php


CHAP3/LeXdeUX


Signifianceetperceptiondel’imageL’imageestlelangageleplussignifiantimmédiatement.Ellerépondencelaauxenjeuxdelamodernité.C’estpourcetteraisonquelesréseauxsociauxcommeInstagram,PinterestouSnapchatconnaissentunetellevalorisation.

>+de3milliardsd’imageséchangées/joursurleweb>30%desrecherchesWebcommencentsurGoogleImage…

Liens:https://www.lemonde.fr/idees/article/2017/05/29/le-role-de-l-image-n-est-plus-simplement-d-informer-le-consommateur-mais-de-l-immerger-dans-une-experience_5135631_3232.html

https://www.huffingtonpost.fr/alexandre-chombeau/le-droit-a-limage-sur-internet_b_10108006.html


CHAP3/LeXdeUX


Signifianceetperceptiondel’imageL’imageenmouvement…lavidéoL’impactpsychologiqued’uneimageenmouvementaulieud’uneimagefixeestbienplusimportantchezl’utilisateur.Lavidéoestparticulièrementappropriéepourdéployerunecommunicationinteractiveetsusciterl’engagementdesutilisateurs(rappelonsqueYoutubeestle3èmesitewebleplusconsultédanslemonde!)L’imageenmouvementestcodifiée,scénarisée…lebruitageetlamusiquepeuvents’yajouter>multiplesexpressions/perceptionspossibles!!Lesgifsanimésetlesmicrointeractionsdanslesinterfaces.Lamicro-interactionestledétailquivacréerdel’émotionchezl’utilisateur,améliorersonexpérienceenapportantplusdevieauxinterfaces.

Liens:https://manonpincaut.wixsite.com/lapetitemarketeuse/single-post/2017/06/17/Quel-est-l%E2%80%99impact-de-la-vid%C3%A9o-sur-le-web-aujourd%E2%80%99hui-https://www.webmarketing-com.com/2015/03/23/36367-3-raisons-dutiliser-la-video-dans-votre-strategie-de-contenu

https://medium.com/francetelevisions-design/les-micro-interactions-au-service-de-lui-ou-plut%C3%B4t-ux-645cb3f6b036


CHAP3/LeXdeUX

Ledesignd’interaction

5dimensionsLedesignd’interactionconcernel’interfaceentrelesutilisateursetunproduitouunservice.Ilenglobeunlargeéventaild’éléments,telsquel’esthétique,lemouvementetleson…maisnouspouvonsleclasserdanslescinqdimensionsdudesignd’interaction.1-Mots:signifiantsetsimplesàcomprendre(items,étiquettesdeboutons,…)

2-Représentationsvisuelles:élémentsgraphiquesaveclesquelslesutilisateursinteragissent(images,latypographieetlesicônes…)

3-Objetsphysiquesouespace:lecontexted’utilisation(dansuntrain,àsonbureau,aucalme,danslebruit…)

etl’objet(ordinateurportableavecunesourisouunpavétactile?Viaunsmartphone?...)affectentl’interaction4-Temps:Tempspassédansl’interactionetrythmedonnéparlesmédias(animation,vidéos,sons)

5-Comportement:actions,attitudes,réactions…

Liens:https://academy.lotincorp.biz/le-design-interaction/https://www.usability.gov


CHAP3/LeXdeUX

Ledesignd’interaction

Questionsimportantesqueposentlesdesignersd’interaction

Liens:https://academy.lotincorp.biz/le-design-interaction/ethttps://www.usability.govhttps://newflux.fr/2015/05/09/10-principes-dux-qui-rendent-airbnb-si-populaire/

•Quepeuventfairelesutilisateursavecleurssouris,leursdoigtsouleursstyletspourinteragiravecl’interface?•Qu’enest-ildel’apparence(couleur,forme,taille,etc.)quidonneàl’utilisateuruneidéedelafaçondontellepourraitfonctionner?•Lesmessagesd’erreurfournissent-ilsunmoyenàl’utilisateurdecorrigerleproblèmeoud’expliquerpourquoil’erreuraeulieu?•Quellessontlesréactionsd’unutilisateurunefoisqu’uneactionesteffectuée?•Lesélémentsd’interfacesont-ilsd’unetailleraisonnablepourinteragiravec?•Desformatsfamiliersoustandardsont-ilsutilisés?

>aideàdéfinirlesinteractionspossiblesdel’utilisateuravecleproduit.>aideàdonnerauxutilisateursdesindicessurlescomportementspossibles.>permetd’anticiperetd’atténuerleserreurs.>celanouspermetdenousassurerquelesystèmefournitdesfeedbacksdansundélairaisonnableaprèslesactions.>aideàréfléchirstratégiquementàchaqueélémentutilisédansleproduit.>standardsutiliséspoursimplifieretaméliorerl’apprentissaged’unproduit.


CHAP3/LeXdeUX

Marketingetémotionnel

Marketingémotionnel«Lemarketingémotionnel(=marketingdesémotions)serapporteàl’ensembledesusagesmarketingvisantàtirerpartidesémotionsressentiesparlesconsommateurs.Lesémotionsjouentunrôleimportantdansnotremanièredepenseretvivrelesmarques.Depuislongtemps,lesentreprisesutilisentlapsychologiedesémotionspourpromouvoirleursproduitsetservices.»agenceUXUsabilis.

Lemarketingémotionnel:•aideàcréerdelaconnivenceaveclesconsommateurs•provoquel’attachementàunemarque•favorisel’acted’achat.

Liens:http://blog-ux.com/design-emotionnel-et-marketing-emotionnel-comment-tirer-parti-des-emotions/https://comarketing-news.fr/marketing-emotionnel-mieux-connaitre-les-meandres-de-lintelligence-naturelle/


CHAP3/LeXdeUX


MarketingémotionnelQuelqueschiffrespeuventillustrerl’effetdesémotionssurlecomportementdesconsommateurs:•70%desconsommateursconsidèrentquelesémotionscomptentpour50%dansleurdécisiond’achat.•82%pensentquel’événementielexpérientielestlaformedecommunicationlaplussusceptibledeconduireàl’achatdanslesensoùellepermetd’anticiperleplaisirdeconsommation.•66%déclarentquelemarketingexpérientiel(=sensoriel)modifiepositivementleuropinionsurlamarque.•9consommateurssur10pensentquetesterleproduitviauneexpérienceestlameilleurefaçond’obtenirdel’informationsurlamarque.•8consommateurssur10ayantvécuuneexpériencedeconsommationpositiveenontparléautourd’eux.Source:JackMorton,Survey2006

Liens:https://www.1min30.com/evenementiel/13-exemples-de-marketing-sensoriel-reussi-et-rate-5507


CHAP3/LeXdeUX


L’impactdesémotionssurnotrecorps

Liens:https://www.alesiacom.com/dossiers/pourquoi-le-marketing-emotionnel-rendra-memorablehttps://comarketing-news.fr/marketing-emotionnel-mieux-connaitre-les-meandres-de-lintelligence-naturelle/

Outilsdemesuredumarketingémotionnel:-  l’électrodermie-  lefacecodingoul’électroencéphalogramme-  lamesuredel’intensitéémotionnelle

vialavariabilitécardiaque

C’estlàquelemarketingémotionneltrouvetoutsonsenscarplusl’intensitéémotionnelleprocuréeparunproduitouserviceestélevée,moinslaconscienceauradeforcepourretarderourefuserl’achatetplusleconsommateurseserafaitplaisir!Raison<>Emotion


CHAP3/LeXdeUX


Marketingsensoriel«Lemarketingsensoriel(oumarketingexpérentiel)estunetechniquemarketingquisolliciteunouplusieursdescinqsensduconsommateur.Sonobjectifestdeséduireleconsommateurtoutenaccroissantsonbien-êtredanslebutd'influencerfavorablementsoncomportementvis-à-visd'unservice,d'unproduitouauseind'unpointdevente.»Wikipédia

Liens:http://blog.lunaweb.fr/le-marketing-experientiel/,https://www.slideshare.net/TarjaChouvin/memoire-64392770https://mbamci.com/web-marketing-sensoriel/,http://onlycath.com/marketing-sensoriel-quand-lhumain-fait-sens/

http://www.ux-republic.com/le-design-sonore-rencontre-avec-antoine-charon-partie-1-2/

Documents

CHAP 3 / Le X de UX - La couleur du Zèbre · UX • INTERVENTION CAWEB 2018/2019 – 21H OCTOBRE 2018 * DOCUMENT EN COURS DE REALISATION CHAP 3 / Le X de UX Loi de Fitts Cette loi