Embed Size (px)
Citation preview
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
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
