BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) La vie quotidienne dans un village (néolithique)

Les hommes des lacs (Rubrique : Le village)

Ce site retranscrit virtuellement

la vie quotidienne de deux villages néolithiques : Chalain et Clairvaux. Nous nous intéresserons plus particulièrement à la rubrique du village : nous

tiendrons le rôle de conseillers pour améliorer son esthétisme et sa navigation.

http://www.chalain.culture.gouv.fr/culture/arcnat/chalain/fr/index2.html Détails des rubriques Outre les rubriques habituelles (Bibliographie, Crédits, et aide), ce site est composé de plusieurs rubriques mettant en scène la richesse de Chalain et de Clairvaux :

- Rubrique « le Territoire » (6 scènes représentant les activités quotidiennes des hommes néolithique telles que la cueillette, l’élevage, l’exploitation de la forêt, la pêche, la chasse et l’agriculture)

- Rubrique « Le Village » (que nous détaillerons ci-dessous) - Rubrique « La maison » (2 scènes expliquant comment construire une maison

accompagnée de quelques recettes culinaires de l’époque et 1 scène proposant une visite virtuelle)

- Rubrique « La recherche » (4 scènes composent cette rubrique : dater et analyser le passé, fouiller en bord de lac, quel avenir pour les lacs ?, les acteurs de la recherche)

- Rubrique « Promenades à Chalain et Clairvaux » (les points stratégiques des promenades étoffés d’explications, sont représentés sur les cartes de Chalain et de Clairvaux)

- Rubrique « Le Jeu » (15 questions pour apprendre de façon ludique la vie quotidienne des deux villages néolithiques)

- Rubrique « Guide pratique » (liste de sites intéressants en matière d’informations) Nous allons nous préoccuper plus particulièrement de la rubrique « Le Village ».

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004)

(figure 1) Remarques générales

1. La présentation du village est décomposée en cinq scènes principales : Un village en bord de lac, un espace villageois le climat et la démographie, une société inégalitaire ? et les morts ?

2. L’essentiel de la « mise en scène » de la rubrique se joue sur la partie supérieure de

la page-écran.

3. La rubrique est dotée d’une image d’identification sous forme d’une photographie représentant plusieurs maisons.

4. Il n’y a pas de texte apparent à première vue. En effet, lorsque l’on survole les icônes

le titre de la scène apparaît sous le titre de la rubrique. On trouve le sommaire de la rubrique « Le Village » à droite sous forme d’icônes représentatives du contenu de chaque scène (figure 1 : rectangle bleu). En haut à droite (figure 1 : rectangle orange) figurent les icônes permettant d’accéder à la page d’accueil ou à ses différentes rubriques grâce à un menu déroulant, au jeu, à l’aide et à la chronologie (qui n’apparaît pas sur la page d’accueil)

5. La rubrique en question est caractérisée par un chromatisme qui lui est propre : le

bleu. Ce code couleur s’applique à chaque rubrique : pour la recherche (rouge orangé), le territoire (vert), et la maison (marron)…

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Une scène Nous allons étudier plus particulièrement, contenu, structure et organisation d’une partie de la rubrique « Le Village » : les principaux éléments de la mise en scène de la scène « un Village en bord de lac ? » (dont les résultats peuvent être généralisés sur l’ensemble de la rubrique « Le Village ») Gestion de l’espace

Figure 2 Les deux espaces centraux de représentation organisent la page-écran :

- L’espace du site (figure 2 : en rouge) - L’espace de la scène de la rubrique (figure 2 : en bleu)

On remarque dès à présent qu’une partie de la page-écran n’est pas utilisée ce qui peut s’expliquer entre autres, par le choix graphique (centrée). La partie inférieure de l’écran, laissée vide, contribue à l’aération de la page. En effet, il est recommandé de n’écrire qu’à hauteur de 40 à 60% de la page pour ne pas dissuader l’internaute de la lecture-écran.

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Régions

(figure 3) La présentation d’une scène est composée d’une manière invariable par une image, un texte (descriptif) qui sont alignés, un titre et des icônes présentant les sous-scènes. - Régions à fonction hypertextuelle (figure 3 : rouge), l’une se référant aux sous-scènes, celle en haut à droite se référant aux rubriques propres au site et celle en haut à gauche renvoyant au cinq rubriques (dont le titre « Le village », lien hypertexte renvoyant à la page d’accueil de la rubrique « Village ») - Régions à fonction textuelle (figure 3 : jaune) Les illustrations (types et fonctions) Les types

- Photographie retouchée de la reconstitution d’un village accompagnant le texte explicatif

- Photographies retouchées située en haut de la page représentant la mer. - Photographies retouchées dans le sommaire présentant les sous-scènes. - Dessins et photographies retouchées présents dans le sommaire de la rubrique - Icônes présents dans le menu général.

Les fonctions Image « reconstitution du village » : illustration du texte et de la scène Image « mer » : illustration de la rubrique Images « sous-scènes » : exemplification et illustrations des sous-scènes Images « sommaire de la rubrique » : exemplification et illustrations des scènes Images « menu général » : illustrations communément admises pour les rubriques visées exceptées pour la chronologie et le jeu qui sont plus imagés.

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Le pavé textuel Le pavé textuel principal dans la mise en scène de la scène « Un village en bord de lac ? » est un texte explicatif complétant l’illustration. Il introduit également les sous-scènes qui tentent de répondre à la problématique énoncée dans ce texte :

- Un sol favorable aux constructions ? - La position défensive ? - La proximité de la pêche ?

Le deuxième pavé textuel est le titre de la scène juste au dessus du pavé textuel principal. Le troisième pavé textuel est l’intitulé de la rubrique Un quatrième pavé textuel est composé des différentes info-bulles du sommaire des sous-scènes et de la rubrique, et du menu général. Le positionnement respectif des éléments visuels et textuels La structure de la scène reste identique pour chacune des scènes, mise à part le sommaire des sous-scènes qui peut varier en nombre. Le chromatisme Le constat

1. Globalement : noir et blanc (deux marges noires et l’ensemble du contenu sur un fond blanc).

2. Le bleu est la couleur représentative de la rubrique : les titres de la rubrique, de chaque scène et sous-scènes étant en bleu.

3. Le code couleur n’est pas respectée pour le village au niveau des survols des icônes. Le survol fait apparaît un coin orangé au lieu de bleu, si l’on suit la logique des codes couleurs adaptés pour les autres rubriques (exceptés les promenades et la guide pratique).

4. Les illustrations sont généralement choisies en fonction du code couleur. Les fonctions 1. Fonction d’identification : le bleu nous signale que l’internaute se situe bien dans la rubrique « Village » et dans toutes les scènes et sous-scènes correspondantes. 2. Fonction d’aide contextuelle : le survol des icônes permettant d’accéder aux sous-scènes et aux scènes permet d’indiquer à l’internaute qu’il peut accéder à d’autre parties du site, notamment par une indication colorée et l’apparition de titres.

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Les sous-scènes Nous nous attarderons que sur une sous-scène : « Un sol favorable aux constructions ? » sachant que toutes les sous-scènes sont globalement similaires.

(figure 4)

1. Toutes les sous-scènes sont construites de la même manière : l’illustration de la mer (présente dans la rubrique « Le Village ») est en haut de la page, l’illustration est à gauche, alignée au texte explicatif à droite, le titre au-dessus du texte. La bande supérieure est composée :

- du titre de la rubrique, - du titre de la scène, - des icônes des différentes scènes - des icônes des sous-scènes - des icônes du menu général 2. Dans les sous-scènes, des liens internes au site sont présents au sein des textes, ils

sont soulignés et ainsi facilement reconnaissables. 3. Le chromatisme utilisé pour les sous-scènes est le même que celui de la rubrique

correspondante (bleu pour la rubrique Village).

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Points particuliers :

1. Dans la sous-scène « la position défensive ? », il existe deux liens qui ouvrent une fenêtre particulière au sujet traité dans cette partie dont on ne trouve aucune trace dans le contenu général du site. Les deux liens sont : les sites contemporains et les comparaisons ethnographiques

2. La sous-scène « la position défensive ? » est la seule à requérir un ascenseur ce qui

est déconseillé pour la lecture-écran. Par contre, une icône situé en bas de la page permet à l’internaute d’un simple clic de remonter en haut de la page.

3. La sous-scène « la position défensive ? » offre également des liens dynamiques qui

permettent d’illustrer le propos. Si l’on survole sur les mots écrits en bleu comme « bas marais », la photographie présente dans la marge à gauche va mettre en avant par un changement de couleur la zone en question.

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Recommandations Nous avons axé ces recommandations en fonction de la cible du site – essentiellement des adultes (familles, passionnés d’histoire, des étudiants…). Nous y avons extrait les éléments positifs et ceux plus controversés pour nous aider à établir des préconisations. Nous tiendrons compte de la cible et du thème du site pour ne pas contraster avec la sobriété et le sérieux qu’il dégage actuellement. Constat

Positif Négatif Site Rubrique (scènes et

sous-scènes comprises)

Site Rubrique (scènes et sous-scènes comprises)

- Texte court en général - Bon contraste - Sobriété des couleurs face au sujet - Bonne interactivité (jeu) - Bonne animation (visite virtuelle de la maison)

- Bonne arborescence dans la rubrique - Scènes et sous-scènes bien organisées - Bon contraste des couleurs - Beaucoup d’illustrations - Sobriété des couleurs face au sujet

- Mauvaise optimisation de l’espace. - Sons d’ambiance pour chaque rubrique pas représentatifs

- Pas d’animations - Utilisation d’un ascenseur pour une sous-scène (« la position défensive ? ») - Pas de menu général dans la rubrique. Obligation d‘aller sur la page d’accueil. (difficulté pour se repérer au niveau du site en lui-même et des autres rubriques) - Pas d’interactions - Son d’ambiance pas caractéristique du sujet - Photographies et icônes pas toujours représentatives - Texte trop serré, taille d’écriture trop petite et la police (pas assez lisible) n’incitent pas la lecture. Difficulté de discerner au premier regard l’idée clé. - code couleur pas respecté pour les menus des scènes et sous-scènes (titres en jaune alors que le code est bleu)

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) Les scripts > Script de la rubrique

Intitulé Description Commentaires et références aux échantillons

Eléments pour la mise en scène

Composition de la rubrique : - 5 scènes principales - éléments textuels : titre principal de la rubrique, et en dessous de celui-ci, les titres des scènes peuvent s'inscrire lorsqu'on survole les icônes en question - nous conservons la même image : plusieurs maisons (villages) avec le lac en arrière plan = référence au titre principal- graphisme : fond du cadre principal en blanc et des marges bleues

- Nous conservons le fond principal en blanc pour conserver la sobriété de ce site, c'est ce qui, selon nous, correspond le mieux à la cible concernée. - Nous souhaitons changer la couleur des marges : dans notre rubrique étudiée, elles seraient bleues. Ceci afin de donner davantage de gaieté à ce site et de varier des marges qui, quelques soient les rubriques, restent toujours noires. Afin que les internautes se repèrent plus facilement dans la hiérarchie générale du site, chaque rubrique pourrait être identifiée par une couleur de marge représentative (bleu pour la

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) rubrique "Village au lac", vert pour la rubrique "le territoire"…)

Interactions

Menus vont être organisés hiérarchiquement en deux parties sur cette page d'accueil de la rubrique: *menu général des rubriques du site figure dans la marge bleue en haut à gauche de la page, soit en dehors du cadre principal. *Le titre des rubriques à droite du menu général apparait lors du survol des icônes. * menu des scènes sur la droite de la page, comme actuellement. Animations : afin de donner un petit peu plus de dynamisme au site, nous comptons insérer un "filet bleu", un mouvement de vague léger en continu *Le survol des icônes des scènes fait apparaitre un encadré bleu, le titre de la scène et la main en curseur * L'icône de la rubrique sélectionnée est en filigrane

Objectif de faciliter la navigation à l'internaute, d'où possibilité, quelque soit la page sur laquelle on se trouve, de se repérer sur le site en général, et d'accéder au menu général plus facilement. D'où la nécessité de décaler de quelques centimètres le cadre principal : notre intention est donc de décaler de quelques centimètres le cadre principal, il y aura donc une marge bleu au-dessus du cadre, ce qui va réduire l'espace blanc en bas de page qui nous semblait inutile, et nous permet donc de recentrer l'ensemble en créant une marge au niveau supérieur et en réduisant ce grand espace vide en bas de page. Nous respectons ainsi toujours le principe que nous avons appris en cour : ne pas trop encombrer l'espace et respecter le principe 40% de contenu et 60% d'espace libre.

Organisation rédactionnelle, logique et physique

Espace de la représentation de la rubrique: * titre au niveau supérieur du cadre, visuel en dessous sur tout l'espace supérieur et au centre, * menu, sous formes d'icônes pour accéder aux scènes, en superposition, à droite de l'image.

Nous décidons de conserver globalement la même structure, notre objectif premier étant de faciliter la navigation de l'internaute sur ce site, et qu'il puisse se repérer plus facilement. L'espace est aéré, nous tenons à conserver cet aspect même si nous décidons de procéder à quelques modifications, au niveau des sommaires notamment, ce qui engendre quelques variantes au niveau de l'espace utilisé.

Autres services proposés NON Consignes pour la réalisation - Les icônes actuelles des

scènes sont à changer tout comme une partie des titres - L'illustration de la rubrique est à conserver. - Suppression du menu déroulant du bouton page d'accueil

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) > Script de la scène

Intitulé Description Eléments pour la mise en scène - L'illustration en haut de page est à garder

- Les points d'interrogation sur les icônes des sous-scènes sont à garder, chaque sous-scène représentant une raison possible à l'implantation des villages en bord de lac

Interactions - L'animation "filet bleu" reste la même que sur la rubrique - Les titres des rubriques et des scènes apparaissent lors du survol de l'icône correspondante - Le titre de la sous-scène apparaît lors du survol de l'icône correspondante, tout comme le cadre

Organisation rédactionnelle, logique et physique

- Le texte = police Verdana avec les infos importantes en bleue, et plus d'espacement.

Autres services proposés NON Consignes pour la réalisation - Le point d'interrogation du titre de la rubrique est supprimé car non

utile - L'icône du haut et celle de droite sont à changer

BONIN Patricia, FELACO Aline VINCENT Alice – Expertise sémiotique d’un site web (Poitiers, ICOMTEC 2004) > Script de la sous-scène

Intitulé Description Eléments pour la mise en scène - L'illustration et sa légende restent les mêmes

- L'illustration en haut de page est à garder

Interactions - Les titres des rubriques, scènes et sous-scènes apparaissent lors du survol de l'icône correspondante - L'animation "filet bleu" est la même que celle de la rubrique et de la scène.

Organisation rédactionnelle, logique et physique

- Le texte = police Verdana, avec les infos importantes en bleu, avec plus d'espacement entre les lignes. Les liens en bas de pages sont à supprimer.

Autres services proposés NON Consignes pour la réalisation NON