2 / 49
Savoir lire l’image écran ...
● Pour naviguer efficacement
● Pour différencier texte / paratexte
● Pour évaluer la source de façon critique
● Pour ne pas être influencé
● Pour évaluer l’intention de publication
Évaluation Esprit critique
3 / 49
Domaine 5 : les représentations du monde et l'activité humaine
Objectifs de la formation
L'ESPRIT CRITIQUE !Education aux Médias et à l'Information
→ Médias, démarches de recherche et de traitement de l'information Il comprend les modes de production et le rôle de l'image.Il développe une culture numérique.Il identifie les différents médias (presse écrite, audiovisuelle et Web) et en connaît la nature. Il en comprend les enjeux et le fonctionnement général afin d'acquérir une distance critique et une autonomie suffisantes dans leur usage.
Domaine 2 : les méthodes et outils pour apprendre
→ Organisations et représentations du mondeIl exprime à l'écrit et à l'oral ce qu'il ressent face à une œuvre littéraire ou artistique ; il étaye ses analyses et les jugements qu'il porte sur l’œuvre ; il formule des hypothèses sur ses significations et en propose une interprétation en s'appuyant notamment sur ses aspects formels et esthétiques. Il justifie ses intentions et ses choix expressifs, en s'appuyant sur quelques notions d'analyse des œuvres.
Réputation du site WebAdresse URLConception graphiqueLongueur du messageStyle d’écriture utiliséAutorité de leurs responsables
Indice de confiancePrésence de photoApparence du site Web
Comment les jeunes s’informent-ils via les sites
Web ?
Crédibilité de l’infoAutorité de la source
TRAITEMENT HEURISTIQUE
Heuristique visuelle
Heuristique expérientielle
Heuristique de l'expertise
Heuristique d'auto-confirmation
Heuristique de réputation
RapideSoupleSuperficielÉconomie cognitiveGain de temps
« L’heuristique visuelle est fondée sur l’apparence des pages consultées, leur design visuel. Quand leurs qualités esthétiques sont perçues, elles bénéficient d’un jugement de crédibilité positif. À l’inverse, une
présentation jugée négativement engendre une impression d’amateurisme qui n’inspire pas confiance
et aboutit au rejet du document. »
Gilles Sahut, L’enseignement de l’évaluation critique de l’information numérique », tic&société, Vol.11, N°1/-1, 223-248 in http://journals.openedition.org/ticetsociete/2321?lang=es [consulté le 8 janvier 2018]
Construire un site
Publier sur le Web
Quelques pistes
Faire prendre conscience qu’une information a une intention de publication
Web = volonté humainePage Web = image
Savoir décrypter le storytelling
Considérer la page Web comme une image constituée de texte et d’illustrations
Savoir lire cette image écran
6 / 49
L'image écranVoir l'image écran
Interpréter l’image écranAgir sur l'image écran
pause
Percevoir l'image écran
midi
A vous : quelles émotions ?Exemple d'NRJ
A vous : décryptage d'une page d'accueil
7 / 49
L'image écranVoir l'image écran
Interpréter l’image écranAgir sur l'image écran
Percevoir l'image écran
9 / 49
Les 3 cadresLes 3 supports
écran
Page écran
navigateur
s.formel
s.ergodique
s.matériel
Image réelle
webdesign
10 / 49
Le design = culture industrielle = technique + art
L'objectif du designer = produire intentionnellement un « effet d'expérience », afin de transformer des usages bruts en « expériences à vivre » hautement qualitatives
Webdesign
Capteur d'attention
Créateurs d'émotions
Webdesign : Permettre une lecture rapide et efcace équilibre visuel et contrasté→
● Zoning VOIR→
● Signes / couleurs / formes / typographie /textures
→ INTERPRÉTER
● Signes passeurs PERCEVOIR→
Esprit critique
14 / 49
Pour voir l'image écran en faisant des captures d'écran des pages Web entières :
google chrome : screenshot firefox : fireshot screen capture explorer : getgreenshot
16 / 49http://optimisation-conversion.com/wp-content/uploads/2012/03/Larchitecture-de-linformation-zoning.png
19 / 49
L'image écranVoir, c’est savoir regarder
Interpréter, c’est trouver le sens
Agir sur Percevoir
21 / 49
l’image est communicantel’image est polysémique
Les fonctions de l’imageFonction symbolique : accès au SacréFonction epistémique : apport d’infosFonction esthétique: émotions
22 / 49
SignifiantFace matérielle perçueHabillage graphique
RéférentRéalité physique
SignifiéConcept, intention, image mentale
Propriétés perceptives du référent et celles du signifiant → adéquation logique pour une lecture rapide et
efficace
STOPSTOP
Triangle sémiotique. SaussureLe signe est une entitée à deux faces : ce que je perçois et l’image mentale associée à cette perception
23 / 49
Une action --> enregistrer, sauvegarder La mémoire
Support de stockage de l'information
Image numérique colorée d'une disquette permettant autrefois de
sauvegarder des documents numériques
Une disquette
SignifiantFace matérielle perçueHabillage graphique
RéférentRéalité physique
SignifiéConcept, intention, image mentale
24 / 49
Une action --> accéder au compte Instagram du site Web
Voir des images, commenter, aimer
Image numérique d'un appareil photo polaroïd en noir et blanc
Appareil photographique à développement instantané de la
marque Polaroid
SignifiantFace matérielle perçue
RéférentRéalité physique
SignifiéConcept, intention, image mentale
25 / 49
Les couleurs Logos et identité visuelle, Matthew Healey, Dunod éditions, 2011
Puissance, passion, goût de la vie, urgence / capte l'attention
Chaleureux, apaisant. Couleur des fleurs et de produits alimentaires. Couleur très dépendante de la culture
Attire le regard, soleil, signe d'alerte associé au noir
Harmonie, équilibre, la nature
Couleur la plus apaisante, autorité, dignité, fierté, intelligence
Sensualité, émotions fortes
La terre, richesse, plaisir
Met en valeur les autres couleurs, neutre
26 / 49
Les formes
Cycle de la vie, unité du monde, passage des saisons
Et rectangle : ordre, raison et contrôle des éléments naturels
Autorité, conflit, sexualité, direction ...
28 / 49
SignifiantFace matérielle perçue
RéférentRéalité physique
SignifiéConcept, intention, image mentale
Énergie, force, urgence
Rectangle rouge Image numérique d'un rectangle de couleur rouge
29 / 49
SignifiantFace matérielle perçue
RéférentRéalité physique
SignifiéConcept, intention, image mentale
Dernière minute
Actualité chaudeRapidité et contrôle de l'information
Le média nous propose une information de « dernière minute »
« dernière minute » écrit dans un rectangle rouge
Image numérique d'un rectangle de couleur rouge dans lequel est écrit « dernière minute »
Contexte : média en ligne
30 / 49
SignifiantFace matérielle perçue
RéférentRéalité physique
SignifiéConcept, intention, image mentale
Page Web du compte Instagram
du Centre Pompidou
Image écran du compte Instagram du
Centre Pompidou
33 / 49
Les 3 cadresLes 3 supportsLes 2 régions
écran
Page écran
navigateur
s.formel
s.ergodique
s.matériel
34 / 49
→ actualisé par 3 instances :● l'utilisateur-lecteur● l'éditeur ● l'auteur
Texte, contexte, paratexte
Jean-Philippe Dupuy, Structure de la page Web. Revue des Interactions Humaines Médiatisés, Europia, 2009, p.25-42
→ constitué de 2 types de « régions » : ● région textuelle ● région paratextuelle
prestation d'information
navigateur
36 / 49
?
?
?
Différencier les 2 types de région→ savoir identifier la région textuelle // région paratextuelle
Comprendre le paratexte et savoir l’utiliser→ Savoir où trouver, dans un site Web, l'information nécessaire à l'évaluation de sa fiabilité→ savoir différencier ce qui appartient à une stratégie de l'auteur (publication d’images, de vidéos, de sons, de liens hypertextes vers d’autres articles complémentaires) de ce qui est publié indépendamment de sa volonté (publicité, bannière …)→ Comprendre la navigation interne au site et savoir s'y repérer
39 / 49
+
Contexte de l’instant
Culture et connaissances
WebdesignBiais cognitifs utilisés par le Webdesign
Action / expérience
interprétation
Perception
=
Le Webdesign → 2 expériences différentes vécues par l'utilisateur :
« l'expérience en ligne » : il s'agit de la prise en main de l'interface par l'usager, son action sur le système par la navigation et l'usage des signes passeurs. Il s'agit d'une expérience physique dans laquelle il est actif : il lit, choisit, clique ou touche.
« expérience design » ou « social expérience » : c'est la prise en compte des sensations, du vécu personnel dans les actes de navigation de l'usager via les signes passeurs
40 / 49
Hyperliens
Liens hypertextes hypermédias
Signes passeurs Tout signe "outil" permettant d'agir directement sur le texte". → geste d'interprétation ( LIRE)→ geste fonctionnel (NAVIGUER). Se clique, se lit et se voit (Y.Jeanneret, E.Souchier, C.Barats)
41 / 49
Loi de la proximitéL’œil regroupe les éléments qui
sont proches
Loi de la similitudeL’œil regroupe les éléments
présentant des caractéristiques communes de luminance
(couleur), de taille ou de forme
3 lois fondamentales de la perception visuelle
De Joelle Cohen, Documentalistes-sciences de l'information 2000, vol.37, n°3-4La vision est instantanée
La vision ordonneLa vision regroupe
Loi du destin communL’œil regroupe les éléments se
déplaçant selon une même trajectoire
Théorie du Gestalt
43 / 49
Rester, naviguer, acheter, recommander, partager, partir, ne jamais revenir, revenir
UX et UI
la navigation, le contenu, organisation des éléments
graphiques et textuels
efficacité
Conception du produit
UX = user eXperience UI : User Interface conception de l'expérience utilisateur
Émotions (plaisir, surprise, humour)
→ la mémoire
Story tellingMise en scèneMétaphores
Erik Karjaluoto, designer graphique : « design graphique pour écrans », Dunod, 2013
« Lieu Virtuel destiné à faire vivre une expérience »
« Sur le Web, impliquer le visiteur nécessite souvent une bonne histoire »
Effet OthelloOn manipule grâce
aux scénarios
44 / 49
http://whatusersdo.com/blog/ux-ui-debate/
JugementComportement de l'utilisateur
Besoin / attente / action / satisfaction
45 / 49
La page d'accueil
Le biais d’ancrage désigne la difficulté que l’on rencontre à se départir de sa première impression.
« les choix sur la composition de la page d'accueil d'un site web
déterminent l'expérience de l'utilisateur en « verrouillant son
processus interprétatif » en raison d'un « effet de halo » que
produit la « 1ère impression » visuelle dans les premiers
dixièmes de seconde de la visite d'un site »
(B.Darras. « Aesthetics and semiotics of digital Design »,
art.cit. p.123
46 / 49
Travailler la page d’accueil d’un site Web
https://fr.wix.com/https://www.e-monsite.com/Wordpresshttps://fr.jimdo.com/
47 / 49
Savoir lire l’image de la page écran ...
● Pour naviguer efficacement
● Pour différencier texte / paratexte
● Pour évaluer la source de façon critique
● Pour ne pas être influencé par l’image écran
● Pour évaluer l’intention de publication
49 / 49
1.http://www.1jour1actu.com/
2.http://www.ladepeche.fr/
3.http://www.lemonde.fr/
4.https://www.spicee.com/fr
5.http://www.francetvinfo.fr/
6.http://www.cdiscount.com/
7.http://www.france3.fr/
8.http://le1hebdo.fr/
9.http://www.revue21.fr/
10.http://www.nytimes.com/
11.http://www.lapierrequitourne.com/
12.http://www.nike.com/fr/fr_fr/
13.http://www.6play.fr/m6
14.http://www.cnews.fr/
15.http://www.directmatin.fr/
Top Related