IMAGE ECRAN : LECTURE ET...

1 / 44

IMAGE ECRAN : LECTURE ET DECRYPTAGE

Avril 2017

2 / 44

Savoir lire une page d'accueil pour

Être libre de ses choixGarder un esprit critique quant aux valeurs

véhiculées

3 / 44

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 apprend à confronter différentes sources et à évaluer la validité des contenus.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'oeuvre ; 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.

4 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écran

A vous : quelles émotions ? Exemple d'NRJ

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

5 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écran

A vous : quelles émotions ? Exemple d'NRJ

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

6 / 44Que voyons-nous ? Des informations ?

Une page d'accueil ? Une image ?

7 / 44

8 / 44

Les 3 cadresLes 3 supports

écran

Page écran

navigateur

s.formel

s.ergodique

s.matériel

9 / 44

L'image écranVoir l'image écran Agir sur l'image écran

Percevoir l'image écranA nous : quelles émotions ?

Exemple d'NRJA vous : décryptage d'une page

d'accueil

10 / 44

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

11 / 44

Loi de la proximitéL'oeil regroupe les éléments qui

sont proches

Loi de la similitudeL'oeil 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-4

La vision est instantanéeLa vision ordonneLa vision regroupe

12 / 44

13 / 44

Permettre une lecture rapide et efficace équilibre visuel et contraste→● Typographies

● Valeurs différentes selon le corps de texte (titre, sous-titre, citation, texte courant, signes passeurs)

● Paragraphes

● Couleurs

● Formes

● Textures

● Zoning

● Signe passeurs

● Signes

14 / 44

15 / 44

Zoning

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

Dans le sens de la lecture

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

17 / 44

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)

18 / 44

Les signes : signes (Unité linguistique constituée par l’association d’une forme

sonore ou graphique (signifiant) et d’un contenu conceptuel (signifié).

http://www.multimedialab.be/doc/projections/doc_com_vis.pdf

icône

pictogramme

Pour être vu et compris en même temps

Améliorer l'ergonomie et le confort de navigation

Raccourci visuel

Analogie d'objets du réel

idéogrammes Abstrait Prend son sens par rapport aux autres signes auxquels il s'associe X

Les images véhiculent du sens Littératie visuelle→

19 / 44

SignifiantFace matérielle perçue

Habillage graphique

RéférentRéalité physique

Propriétés perceptives du référent et celles du signifiant → adéquation logique pour une lecture rapide et

efficace

STOPSTOP

Les signes : signes (Unité linguistique constituée par l’association d’une forme

sonore ou graphique (signifiant) et d’un contenu conceptuel (signifié).

20 / 44

SignifiantFace matérielle perçue

Habillage 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

Les signes : signes (Unité linguistique constituée par l’association d’une forme

sonore ou graphique (signifiant) et d’un contenu conceptuel (signifié).

21 / 44

Une action --> enregistrer, sauvegarder La mémoire

Support 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çue

Habillage graphique

RéférentRéalité physique

SignifiéConcept, intention,

image mentale

22 / 44

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

23 / 44

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

24 / 44

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

25 / 44

26 / 44

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

27 / 44

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 »

28 / 44

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

29 / 44

A nous de lire

http://www.bfmtv.com/, 07/02/2017

Signes passeurs ? Picto ? Icônes ? Idéogrammes ?

30 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écran

A vous : quelles émotions ? Exemple d'NRJ

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

31 / 44

Les 3 cadresLes 3 supportsLes 3 régions

écran

Page écran

navigateur

s.formel

s.ergodique

s.matériel

http://www.bfmtv.com/

32 / 44

→ actualisé par 3 instances :● l'utilisateur-lecteur● l'éditeur ● l'auteur

→ constitué de 3 types de « régions » : ● régions textuelles ● régions hypertextuelles → prestation d'information● régions paratextuelles

Texte, contexte, paratexte, énonciation éditoriale

33 / 44

3 types de régions Région paratextuelle

Région hypertextuelle Région textuelle

34 / 44

Région paratextuelle

Région paratextuelle

Région textuelle

Région hypertextuelle

Différencier les 3 types de zones→ savoir identifier la région textuelle = savoir trouver l'information recherchée et à lire // de la région paratextuelle (dont les commentaires) et de la région hypertextuelle (tous les signes passeurs)

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 l'hypertexte et savoir l'utiliser→ Comprendre la navigation interne au site et savoir s'y repérer

35 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écranA vous : quelles émotions ?

Exemple d'NRJA vous : décryptage d'une page

d'accueil

36 / 44

https://rsf.org/

Quels services rend ce site?Comment fonctionne-t-il?

Pourquoi ce site ?Que contient-il?

A qui s'adresse-t-il?Qui en est responsable ? Qui

contacter ?

La page d'accueil du site

https://www.jeanpaulgaultier.com/fr-fr/

« 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

37 / 44

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 »

38 / 44http://www.buzzwebzine.fr/wp-content/uploads/2016/10/infographie-ux-ui-design.jpg

39 / 44

https://material.io/gallery/

40 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écran

A vous : quelles émotions ? Exemple d'NRJ

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

41 / 44

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.linternaute.com/

15.http://www.directmatin.fr/

42 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écran

A vous : quelles émotions ? Exemple d'NRJ

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

43 / 44

L'image écranVoir l'image écran

Agir sur l'image écranPercevoir l'image écran

A vous : quelles émotions ? Exemple d'NRJ

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

44 / 44

bibliographie

Julia Bonaccorsi,« Approches sémiologiques du Web » In « Manuel d'analyse du Web en sciences humaines et sociales », Armand Colin, 2013

Yves Jeanneret, Emmanuel Souchier, L'énonciation éditoriale dans les écrits d'écran , In : Communication et langages. N°145, 3ème trimestre 2005.pp. 3-15

Jean-Philippe Dupuy, Structure de la page Web. Revue des Interactions Humaines Médiatisés, Europia, 2009, p.25-42.

Stéphane Vial, « L'être et l'écran ; Comment le numérique change la perception », Presses Universitaires de France , 2013

Aaron Walter, « Design émotionnel », éditions Eyrolles, 2012

Jean-François Nogier, « Ergonomie des interfaces : Guide pratique », Dunod, 2013

Jason Tselentis, « Design graphique pour écran », Dunod, 2013

Joelle Cohen, « L'écran efficace : trois lois fondamentales de la perception visuelle », Documentalistes-sciences de l'information 2000, vol.37, n°3-4

Matthew Healy, « Logos et identité visuelle. Principes fondamentaux et études de cas : 300 logos du monde entier analysés et commentés », Dunod, 2011