1 / 49

IMAGE de la PAGE ECRAN : LECTURE ET DECRYPTAGE

Aline BousquetMai 2018

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

8 / 49

Que voyons-nous ? Des informations ? Une page d'accueil ? Une image ?

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

11 / 49

12 / 49

L'image écranVoir

Interpréter Agir sur

Percevoir

13 / 49

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

15 / 49

Zoning

http://www.lecil.fr/fr/webdesign/zoning-site-web

Dans le sens de la lecture

16 / 49http://optimisation-conversion.com/wp-content/uploads/2012/03/Larchitecture-de-linformation-zoning.png

17 / 49

18 / 49

19 / 49

L'image écranVoir, c’est savoir regarder

Interpréter, c’est trouver le sens

Agir sur Percevoir

20 / 49

http://www.21siecle.quebec

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 ...

27 / 49

Exemple :

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

31 / 49

A nous de lire

Signes utilisés ? Couleurs et formes ? Première analyse

32 / 49

L'image écranVoir, regarder

Interpréter, donner du sensAgir sur Percevoir

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

35 / 49

2 types de régions Région paratextuelle

Région paratextuelle /navigation Région textuelle

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

37 / 49

38 / 49

L'image écranVoir, regarder

Interpréter, donner du sens Agir sur

Percevoir

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

42 / 49

Loi de proximité ? Loi de similitude ? Loi du destin commun ?

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

48 / 49

A vous : quelles émotions ?

Exemple d'NRJ

A vous : décryptage d'une page d'accueil

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/