19
1 Description de la mise en scène d’une rubrique et proposition d’une nouvelle maquette. Site web : Charavines, villages néolithiques au cœur des Alpes Rubrique : L’Artisanat Auteurs : Alexandra Chartrain Anne-Sophie Jouhanneau Séminaire « Sémiotique appliquée aux Nouveaux Médias : Les sites web à caractère culturel et scientifique » Poitiers - ICOMTEC 2004

Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

1

Description de la mise en scène d’une rubrique et proposition d’une nouvelle maquette.

Site web : Charavines, villages néolithiques au cœur des Alpes

Rubrique : L’Artisanat

Auteurs :

Alexandra Chartrain Anne-Sophie Jouhanneau

Séminaire « Sémiotique appliquée aux Nouveaux Médias : Les sites web à caractère culturel et scientifique » Poitiers - ICOMTEC

2004

Page 2: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

2

1) Principaux éléments de l’étude

Notre étude sémiotique concerne la rubrique « Artisanat » du site « Les villages néolithiques de Charavines » créé en 2000 par Jacques Wino et Aimé Bocquet, deux archéologues, au Centre de Documentation de la Préhistoire Alpine. Ce site n’a pas été réalisé par un professionnel de l’outil web. Il est très complet en terme de contenu même si c’est un site amateur en terme de graphisme, couleurs, mises en scène, des rubriques. Il est d’ailleurs hébergé par une « page perso » de wanadoo et apparaît comme un « document sans titre » dans la barre de navigation Internet ce qui démontre le non-professionnalisme de sa réalisation concernant l’aspect technique. Notre étude se concentre sur la sémiotique du site et ne concerne donc pas son contenu mais son aspect visuel. Elle s’attache plus particulièrement à la mise en scène de la rubrique « Artisanat », les graphismes (fonds d’écran par exemple), les couleurs utilisées Le site présente en six rubriques (dont la rubrique « Artisanat ») les recherches des archéologues sur les sites néolithiques de Charavines. La rubrique « Artisanat » rassemble différents ensembles de scènes : outils de silex, récipients, fabrication de la hache, travail du bois, textile. Les ensembles de scènes et les scènes sont présentés selon un même modèle. Le menu de la rubrique se trouve sur la droite et le menu du site en bas de la page. Les graphismes et couleurs sont invariants d’une scène à l’autre.

Page 3: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

3

2) La rubrique « Artisanat » 2.1) Brève présentation de la rubrique Ce site a été entièrement réalisé par un archéologue et de ce fait ne présente pas un aspect très professionnel. Le site n’est pas hébergé chez un professionnel et est référencé comme une page personnelle : http://perso.wanadoo.fr/..ctredocumprehistalpine/

• La structure de la rubrique : La rubrique « artisanat » se présente avec une structure de page web basique. La rubrique se présente dans la même forme que le reste du site. Il convient de noter que la page est simple avec, une barre de navigation dans la rubrique à gauche, une barre de navigation sur le site en bas de la page principale et une page principale de texte et d’images sur l’artisanat. • La chromatique : Le choix des couleurs reste simple. Les couleurs sont très « hétérogènes » (liens bleus, rouge et vert) et ne conviennent pas à « une charte couleurs » adaptée pour un site sur la vie des hommes préhistoriques. Les fonts d’écran de la barre de navigation et de la page principale restent assez neutres et fades sur un ton de couleur beige. • La fonctionnalité / la navigation dans la rubrique : La navigation est assez sommaire.

• Les visuels : Sont des photos de pièces d’artisanat ainsi que des dessins de présentation de scènes de la vie quotidienne afin que l’internaute puisse mieux comprendre l’utilisation de certains outils préhistoriques. Il n’y a aucune animation (par exemple flash).

• Les contenus (textes, jeu…) : Le contenu des textes, écrits par un scientifique, sont de fait, intéressants. Ils sont précis et décrivent concrètement la vie des hommes préhistoriques, l’utilisation et la confection des outils de ces hommes des cavernes.

Page 4: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

4

2.2) Brève comparaison avec les autres sites composant votre corpus • Comparaison globale avec le site

En comparaison avec le site « Les Gaulois en Provence » de l’oppidum d’Entremont qui utilise des couleurs chaudes et homogènes (création d’une harmonie de couleurs, des animations sur les liens, des jeux interactifs pour l’internaute…), le site de Charavines n’utilise pas une charte graphique adaptée au sujet traité. De plus, ce site crée peu d’ interactions avec l’internaute. La rubrique est assez « archaïque » et peu élaborée tant dans la structure générale, la construction graphique, que dans le choix des couleurs et la navigation. Les choix des couleurs, de structuration de la rubrique sont peu pertinents, seuls les contenus des textes restent intéressants dans la mesure ou le site a été réalisé par un archéologue professionnel (et non pas par un webmaster professionnel !) Ce site est globalement peu « accueillant » ainsi que peu attractif et ludique.

En quoi la rubrique « Artisanat » dans le site de référence se différencie-t-elle de celles dans les sites consultés ?

– distinction au niveau des scènes : Site « Les Gaulois en Provence » : Il n’y a pas réellement de sous scènes directes à la rubrique. Il faut naviguer au travers du lien « objets de la vie quotidienne » pour accéder à un ensemble de scènes présentant des outils et bijoux d’artisanat. Prenons un exemple d’une scène commune aux deux sites afin de mieux répondre à la question posée :

Page 5: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

5

Les poteries et vases

Fond d’écran blanc uniforme qui donne un aspect « froid » à la scène et tranche avec les couleurs chaudes de la page principale de la rubrique « artisanat »

Lien objet pour naviguer dans la rubrique

La scène est encadrée par deux bandes noires qui centrent le contenu

Sous liens de navigation

Photos de poteries et pavés textuels succincts

Menu

Page 6: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

6

Site de « Charavines » : La rubrique « Artisanat », présente de nombreuses scènes, il y a autant de scènes que d’outils d’artisanat. Exemple de scène : Les poteries et vases :

Croquis sur la façon de créer un vase (très informatif)

Photo

Menus : Menu pour naviguer dans la rubrique (à gauche de l’écran) Menu de navigation sur le site (en bas)

Petits textes descriptifs

Page 7: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

7

– éléments de la mise en scène utilisés : Site « Les Gaulois en Provence » : La chromatique du site ainsi que certains graphismes et dessins comme l’aquarelle de JC. Golvin sur la page « artisans et paysans » nous plongent directement dans l’histoire. Les couleurs utilisées et les dessins nous donnent une impression dynamique. On se sent « plus proche » du sujet dans ce site que dans celui de Charavines où la technicité et le scientisme prévalent. Par contre quand, l’on rentre plus en profondeur, l’aspect du site et de la rubrique ici étudiés semblent plus froids, avec des pages un peu épurées tant par un texte linéaire, que la couleur de fond blanc, et d’un manque de supports graphiques (dessins ou photos d’outils d’artisanat) qui sont plus nombreux dans le site de Charavines. Cependant de nombreux éléments de mise en scènes se retrouvent sur ce site : utilisation de petites icônes et de symboles dans le menu (assez épurés pour rappeler les dessins ancestraux sans doute…) les onglets carte, jeu, chronologie nous permettent de mieux situer et comprendre la civilisation étudiée dans le site en la replaçant dans un contexte historique et géographique particulier (à défaut dans le site de Charavines).

Site de « Charavines » :

La structure du site est épurée et basique et la mise en forme des éléments dans la page principale n’est pas homogène d’une scène à l’autre dans la rubrique. Les couleurs utilisées donnent un aspect terne au site. Les graphismes sont précis et témoignent bien des travaux accomplis autant dans la recherche archéologique que sur les créations artisanales ce qui manque sur le site « les Gaulois en Provence » qui reste assez général sans entrer dans les détails. – structure rédactionnelle et logique : Site « Les Gaulois en Provence » : Les textes sont généralistes et ne rentrent pas dans les détails de technicité, de pragmatique…

Page 8: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

8

Site de « Charavines » : Les textes sont précis, techniques descriptifs et scientifiques.

- Structure fonctionnelle et navigation : Site « Les Gaulois en Provence » : - Difficulté de trouver directement le lien de retour à la page principale de la rubrique, nommé « sommaire » et situé dans le menu en haut à gauche. Il faut passer sur le lien pour que le mot sommaire apparaisse. Ce lien ne paraît pas évident en soi à un retour à la page principale de la rubrique. - Il faut aller dans la rubrique « objets » pour trouver des objets d’artisanat de l’époque. Cette rubrique « objets » n’est pas incluse dans la rubrique « artisanat » comme cela est fait dans le site de Charavines. Site de « Charavines » : - Navigation simple basée sur deux menus principaux : L’un pour naviguer à l’intérieur de la rubrique L’autre, pour naviguer sur les autres rubriques du site. - Par contre, en dehors de ces deux menus, deux autres liens se trouvent en bas de la page principale, (peu faciles à identifier en raison d’un choix peu judicieux des contrastes de couleurs et de la police).

Page 9: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

9

3) La réalisation de la rubrique sous forme de scène

3.1) Les principales rubriques

La rubrique Artisanat fait partie des six rubriques contenues dans le site de Charavines (sites et fouilles, architecture, alimentation, vie quotidienne, conclusions) Elle rassemble différents ensembles de scènes : outils de silex (silex, poignards, tracéologie), récipients (vases en terre, panier), fabrication de la hache (manche de hache, lame polie, gaine de hache), travail du bois (cuillères, peignes, épingles, planches et pieux, traces d’outils), textile (textile, corde et ficelle).

Script 1 : page de présentation « Artisanat »

Description Commentaires et références aux échantillons

Eléments pour la mise en scène audio (-visuelle)

Composition de la rubrique : 5 scènes principales (outils de silex, récipients, fabrication de la hache, travail du bois, textile) avec un sous-ensemble de scènes pour chacune. Eléments textuels : titres en bleu pour les rubriques et rouge pour les sous-rubriques. Police : Times New Roman. Eléments visuels : Aucun autre élément sur le script rubrique. Eléments graphiques : fond de la scène rubrique orange.

Contenu du texte : couleurs et polices des titres peu adaptées au sujet et à un site Internet (ex : Times New Roman est une police à empattements. Il vaut mieux privilégier une police sans empattements pour faciliter la lecture à l’écran). Graphisme : couleurs fades. Pas d’harmonie entre les différents fonds et les couleurs de textes.

Interactions (aspects et exploration)

Un menu sur la gauche présentant les différents ensembles et sous-ensembles de scènes avec liens mais pas d’aperçu de l’ensemble des rubriques du site.

Le menu de la rubrique « Artisanat » ainsi que le menu de toutes les rubriques du site restent toujours accessibles pour faciliter la navigation dans la rubrique et sur le site.

Organisation rédactionnelle, logique et physique

Espace de la représentation de la scène : Menu de la rubrique sur la gauche du site.

Organisation classique de la page : menus à gauche et en bas.

Page 10: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

10

Espace de la représentation du site : Espace de la scène au-dessus de la barre de menu est invariante.

Toutes les rubriques sont construites sur le même modèle avec le même graphisme.

Autres services proposés

Possibilité de retour sur la page d’accueil et accès direct aux autres rubriques du site

Services classiques (retour haut de page, lien vers autres rubriques…)

La rubrique Artisanat

Menu de la rubrique « Artisanat »

Titre de la rubrique

Titre des rubriques de la rubrique Artisanat

Titre des sous-rubriques

Scène

Rubrique générale du site

Page 11: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

11

4) La description de la mise en scène d’une scène

1. Dans la page-écran, il y a deux éléments principaux de représentation : le menu de la rubrique Artisanat sur la gauche, et la scène à droite. Le troisième élément important serait le menu général du site en bas de la page.

Espace principal de représentation de la scène

Second espace principal de représentation de la scène

Page 12: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

12

2. Le menu « rubriques » sur la gauche permet de voir d’un seul coup toutes les sous-rubriques disponibles dans une rubrique (par exemple la rubrique « Artisanat » ) ce qui alourdit un peu la page-écran.

La scène principale est composée d’un titre, de plusieurs photos et des descriptions de ces photos.

Page 13: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

13

3. Les illustrations. Ce site présente le résultat des fouilles archéologiques réalisées à Charavines. Les photos des nombreux objets retrouvés sont donc exposées dans le site et ici dans la rubrique « Artisanat » et composent la majeure partie de chaque scène.

4. Le pavé textuel est assez restreint dans la plupart des scènes. Une ligne de texte décrit les photos.

Page 14: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

14

Cependant, dans certaines rubriques, le texte descriptif des photos est plus important (par exemple la rubrique silex) et d’autres (par exemple la rubrique « Tracéologie ») ne comportent presque que du texte et très peu de photos.

4.

5. Les photos et textes sont positionnés de manière aléatoire sur la page et la remplissent.

6. Le chromatisme L’élément principal de la page-écran, la scène, est composée d’un fond jaune et gris moucheté, les titres sont en rouge et les textes en bordeaux, la page n’est donc pas très harmonieuse, d’autant plus qu’à ces couleurs, viennent se rajouter celles des photos. Le chromatisme du second élément de la page-écran, le menu « rubrique », se compose d’un fond orange pâle et de titres rouge et bleu vif. Ces deux éléments réunis ne bénéficient pas du tout d’un chromatisme harmonieux, agréable à regarder. De plus, les couleurs utilisées semblent peu adaptées au sujet de l’archéologie.

Silex Tracéologie

Page 15: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

15

Script de la scène Script 1 : page de présentation « Artisanat »

Description Commentaires et références aux échantillons

Eléments pour la mise en scène audio (-visuelle)

Composition de la page-écran : La scène est l’élément principal de la page-écran. Eléments textuels : titres de la scène en rouge, petits textes descriptifs en bordeaux pour chaque image / photo. Police : comic sans ms Eléments visuels : plusieurs photos ou dessins pour chaque scène répartis sur la page de manière assez aléatoire. Eléments graphiques : fond de page jaune, blanc et gris

Contenu du texte : couleurs et polices des titres peu adaptées au sujet (ex : comic sans ms pour l’archéologie). Image : mauvaise disposition des images. Pas d’homogénéité. Graphisme : couleurs fades. Pas d’harmonie entre les différents fonds et les couleurs de

Page 16: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

16

moucheté textes Interactions (aspects et exploration)

Un menu sur la gauche présentant les différents ensembles et sous-ensembles de scènes avec liens. Une bande grise en bas de la page présente les différentes rubriques du site.

Les deux menus (de la rubrique à gauche et du site en bas) restent toujours accessibles pour faciliter la navigation dans la rubrique et sur le site. Dans chaque scène, possibilité de retour en haut de page et sur la page d’accueil. Ces liens ne sont pas intégrés au menu.

Organisation rédactionnelle, logique et physique

Espace de la représentation de la scène : Le titre de la scène se trouve en haut de la page. Ensuite les photos sont disposées sur toute la page avec en dessous ou sur le côté un petit texte descriptif. Photos disposées sur toute la page avec une ligne de description à gauche ou en-dessous de la photo. Espace de la représentation du site : Espace de la scène au-dessus de la barre de menu invariante du site.

Organisation classique de la page : menus à gauche et en bas. Toutes les rubriques sont construites sur le même modèle avec le même graphisme.

Autres services proposés

Possibilité de retour sur la page d’accueil et accès direct aux autres rubriques du site

Services classiques (retour haut de page, lien vers autres rubriques…)

Consignes pour la réalisation

Page 17: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

17

5) Proposition d’un script « personnel » pour une autre mise en scène Présentation générale d’une nouvelle mise en scène : Il paraît ici évident sur ce site de Charavines que certains éléments de la mise en scène d’une page sont à modifier. Nous travaillerons sur la page destinée à l’ « Artisanat » pour illustrer nos propos. Il ne s’agit pas ici de modifier l’intégralité de la mise en scène de la page mais de déterminer les éléments à modifier et ceux à conserver. Nous proposons une nouvelle scène car elle nous semble peu adaptée à un site scientifique tant dans le choix des couleurs, des polices que dans la disposition générale de la scène et des menus qui nous semble très « scolaire » et peu professionnelle. Il faut une présentation plus technique, plus actualisée pour un site qui se veut être professionnel et scientifique. Eléments de la mise en scène à modifier : La chromatique : utiliser des couleurs de fond (tant pour les menus que pour la scène) plus adaptées à la dimension technique et scientifique du site ( vert, bronze, terre de sienne…). Utilisation de couleurs plus contrastées et plus « vivantes » tranchant avec la monotonie et l’aspect fade de la présentation. La police des textes : utiliser une police des textes plus adaptée à un aspect scientifique. Les couleurs des liens (activés ou non activés) : Homogénéiser les couleurs des liens et ceci en prenant compte des nouvelles couleurs de fonds des deux menus ainsi que de la scène. Les dispositions des images et photos : homogénéiser la présentation des images. C’est à dire mettre en place une présentation « type » des images (de façon à faciliter les repères visuels de l’internaute). En effet, certaines scènes du site actuel contiennent plus de photos que d’autres et il y a une disposition disparate des images d’une scène à une autre. Les menus (leur disposition dans la page et leurs contenus) : La disposition des menus est à modifier. Il serait préférable de disposer les menus de manière à ce que le menu de navigation sur le site se situe en haut et que le menu de navigation dans la rubrique soit situé en bas, les menus restant fixes sur tout le site. Cette disposition est plus originale et semble donner plus d’espace à la scène principale

Page 18: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

18

encadrée par les deux menus. Enfin, concernant la fonctionnalité des menus, il serait plus judicieux d’adopter un menu déroulant de sous rubriques pour chaque grande rubrique de manière à alléger les menus. Les images : conserver les images et photos (en sachant qu’elles sont bien représentatives des textes). Cependant, il serait intéressant (en accord avec le scientifique qui a créé ce site) d’actualiser les photos pour que l’aspect « vieilli» de certaines ne contraste pas trop avec la nouvelle mise en scène. Eléments nouveaux à intégrer : Images animées : Intégrer des images animées en adéquation avec le sujet traité (sans forcément s’orienter sur une présentation de type FLASH). Ces images accentueraient un peu plus le côté dynamique que nous souhaitons donner à ce site dans sa nouvelle mise en scène. Icônes : des icônes pour les contacts, un retour à la page d’accueil, permettraient d’alléger les textuels dans les menus ou sur la scène principale (trop basiques et trop présents sur ce site). Ces icônes donnent un aspect plus visuel et plus ludique sans en altérer l’aspect scientifique du site et le professionnalisme des commentaires. Proposition d’un script Script 1 : page de présentation « Artisanat »

Description Commentaires et références aux échantillons

Eléments pour la mise en scène audio (-visuelle)

Composition de la page : sur la partie haute de la page, un menu présentant les grandes rubriques du site. En bas de la page, se trouve le menu des sous-rubriques d’une rubrique. La scène est donc encadrée par ces deux menus et occupe le reste de la page. Eléments textuels : Nous suggérons plus de descriptions des photos. Eléments visuels : Les photos pourraient être de meilleure qualité et mieux présentées (notamment pour le

Composition de la page : meilleure disposition des menus rubrique et sous-rubrique. Eléments textuels : le contenu textuel de la rubrique « Artisanat » pourrait être plus étoffé. Eléments graphiques : C’est le point le plus faible du site existant. Les couleurs de fond et de polices sont très peu adaptées au thème du site et lui enlève son caractère professionnel. C’est pourquoi nous

Page 19: Description de la mise en scène d’une rubrique et …semioweb.msh-paris.fr/escom/ressources_enligne/...Les choix des couleurs, de structuration de la rubrique sont peu pertinents,

19

fond). Une icône (par exemple une grotte préhistorique) qui renverrait vers la page d’accueil, serait présente sur toutes les scènes de même qu’une autre icône (par exemple une enveloppe) pour contacter l’archéologue. Eléments graphiques : Le fond de la scène : choisir une couleur assez chaude et naturelle (ex : brun, vert foncé, bronze, terre…). De même la police doit être adaptée au sujet. Exemple pour les titres des rubriques et des scènes : Artisanat Exemple de police pour les textes : Vaisselle en terre cuite

proposons un remaniement graphique complet.

Interactions (aspects et exploration)

Les deux icônes (hutte et enveloppe) seraient des liens vers l’accueil et la messagerie. Dans chaque scène, on aurait accès aux deux menus (rubriques générales et sous-rubriques).

Sur la plupart des sites, on trouve des liens vers la boîte mail et l’accueil du site qui facilitent la navigation

Organisation rédactionnelle, logique et physique

Espace de la représentation de la scène : Le titre de la scène se trouve en haut de la page. Ensuite les photos sont disposées sur toute la page avec en dessous ou sur le côté un petit texte descriptif Photos disposées sur toute la page avec une ligne de description à gauche ou en-dessous de la photo. Espace de la représentation du site : Espace de la scène au-dessus de la barre de menu invariante du site.

Toutes les rubriques sont construites sur le même modèle avec le même graphisme.

Autres services proposés

Possibilité de retour sur la page d’accueil et accès direct aux autres rubriques du site

Services classiques (retour haut de page, lien vers autres rubriques…)