1 pays du bessin au virois portail internet du pays « zoning du portail » document rédigé...

1

Pays du Bessin au ViroisPortail Internet du Pays

« Zoning du portail »

Document rédigé par: Laurent DEMONTIERS

Version du document 2.0

Date de dernière modification 31/08/2006

2

Historique des modifications du document

Version Modifications apportées

1.0 Livraison

2.0 Ajout d’un 4em et 5em niveau de navigation

3

Sommaire1. Objectifs du document

2. Nature et objectifs du portail

3. Types de gabarits

4. Types de cœur de page

5. Représentation graphique

4

Objectifs du document

L’approche choisie pour le zoning conditionne :

• L’organisation de l’information sur le site– Les contenus aux fonctions similaires sont regroupés dans une même zone pour rendre l’interface plus

intuitive.

• La hiérarchisation des zones d’information.– Le zoning prend en compte la nature du portail, ses objectifs, et l’importance stratégique des différents

éléments de la page pour les positionner dans l’interface. En fonction de son importance stratégique, une zone peut être mise en avant, ou en retrait. Pour cela, on va la positionner à la place qui lui convient dans le sens de lecture de la page, et lui accorder l’espace d’encombrement qui convient à son rang dans la hiérarchisation de l’information.

• La cohérence de l’organisation du contenu sur les différents types de gabarits.– Le zoning représente les différents types de gabarits de page présents dans le site. La représentation du

zoning de chaque gabarit permet d’en assurer la cohérence avec le reste du site.

Le zoning permet de définir les grands espaces d’actions sur lesquels l’utilisateur devra interagir.

Ce document de Zoning pose les premières bases de la construction ergonomique et visuelle du futur portail

5






6

Nature et objectifs du portail

La future plate-forme en ligne est un Portail d’information.

Nous distinguons deux objectifs pour le futur portail:

1. Son premier objectif est de diffuser de l’information. Cela implique que:

• Le système de navigation du portail doit être mise en avant, clair, intuitif et rapide pour faciliter l’accessibilité au contenu.

• Le zoning, l’ergonomie et le design du portail doivent également être pensés pour faciliter la navigation et l’accès à l’information.

2. Jusqu’à présent, le Pays du Bessin au Virois ne dispose pas des différents éléments qui constituent une identité visuelle (Logo, charte graphique, avec codes formes, codes couleurs, typographiques cohérents…). Notre second objectif est de profiter de la conception du portail pour imaginer les premières bases d’une identité visuelle forte pour le Pays du Bessin au Virois. Les codes formes, codes couleurs et codes typographiques conçus pour le portail seront suffisamment forts et identitaires pour instaurer les bases graphiques des futurs plans de communication du Pays.

7






8

Types de gabarits

• 3 principaux types de gabarits

Gabarit A Gabarit B Gabarit C

13

5

1

7

41 23

68

3

1 2

9

Gabarit A: 9 zones1. Zone identitaire2. Zone d’outils récurrents3. Zone de visuel thématique4. Navigation par barre PBV 5. Zone d’identification6. Navigation principale7. Espace partenaires8. Zone de Cœur de page9. Liens annexes récurrents

6

1

3

8

5

1

2

4

7

9

10

Objectifs du gabarit:

Ce gabarit est utilisé pour les entrées principales du portail. Graphiquement plus riche, il contribue à poser l’identité visuelle et présente l’univers de l’organisme.

Pages concernées: – Page d’accueil du site

– Pages d’accueil des rubriques de niveau 1

– Pages d’accueil des « espaces municipalités »

Gabarit A: 9 zones

11

Gabarit A: 9 zones

1. Zone identitaire• Elle présente le logo de la structure et le nom du portail. Elle permet au visiteur d’identifier le Portail et d’en

comprendre la fonction.2. Zone d’outils récurrents

• L’utilisateur y trouve les outils dont la présence sur toutes les pages du portail est requise. La fonction de changement de langue et le champs de recherche dans le portail.

3. Zone de visuel thématique• Une zone avec un visuel thématisé illustre le contenu de la page. Le visuel de la page d’accueil est une

animation Flash qui présente le champ d’action du Pays du Bessin au Virois, ses métiers, et les valeurs du territoire. Les visuels des pages d’accueil des municipalités reprennent les thématiques chères à chaque municipalité et permettent de personnaliser l’espace d’accueil de chacun.

4. Navigation par barre PBV • La zone contient la barre PBV. Ses contenus permanents pourront être mis à disposition sous forme d’une

barre facilitant ainsi l’intégration dans d’autres sites web d’acteurs du Pays. 5. Zone d’identification

• Zone d’action qui permet à l’utilisateur de s’identifier sur le portail afin d’accéder au contenu spécifique. Elle souhaite aussi la bienvenue à l’utilisateur identifié.

6. Navigation principale• C’est la zone principale d’accès au contenu du site.

7. Espace partenaires• La zone cite les différents partenaires du Pays du Bessin au Virois. Sa fonction est stratégique. Elle permet

la valorisation des partenaires du Pays.8. Zone de Cœur de page

• Elle présente le contenu des pages. C’est le Cœur du site.9. Liens annexes récurrents

• La zone présente les liens annexes du portail, présents sur toutes les pages. Leur utilisation n’est pas indispensable à la navigation dans le site.

Rôles des différentes zones:

12

1. La zone identitaire: Le nom et la nature du site sont présentés. Le visiteur sait ou il est, c’est important dans la mesure ou ce gabarit est le point d’entrée principal des visiteurs du portail.

2. Un visuel thématique: pour poser les valeurs de la « marque » et son identité visuelle sur la page d’accueil du portail, ou thématiser l’habillage graphique d’une rubrique.

3. Mise en valeur du système de navigation pour faciliter l’accession au contenu.

4. Mise en valeur du Cœur de page, où se trouve le contenu principal du site.

5. La zone d’identification pour permettre aux utilisateurs inscrits d’avoir accès à un contenu spécifique

6. La zone d’outils récurrents, disponibles pour une partie des internautes. Il ne sont utilisés qu’occasionnellement par les visiteurs.

7. La zone partenaires. Elle doit être présente pour des raisons stratégiques mais n’a pas d’incidence sur la compréhension de la page.

Hiérarchisation de l’information:

Par ordre décroissant d’importance, les contenus présents dans la gabarit A sont les suivants:

Gabarit A: 9 zones

13

Gabarit B: 8 zones1. Zone identitaire2. Zone d’outils récurrents3. Navigation par barre PBV4. Zone d’identification5. Navigation principale6. Espace partenaires7. Zone de Cœur de page8. Liens annexes récurrents

5

1

7

41

2

3

6

8

14

Objectifs du gabarit:

Ce gabarit est construit pour valoriser le contenu du site et faciliter son accession. Il permet de répondre au premier objectif du site.

Pages concernées: – Pages d’accueil rubriques de niveau 2 et 3

– Pages de contenu rubriques de niveau 2 et 3.

– Pages de liste

– Pages de détail

Gabarit B: 8 zones

15

Gabarit B: 8 zones

1. Zone identitaire• Elle présente le logo de la structure et le nom du portail. Elle permet au visiteur d’identifier le

Portail et d’en comprendre la fonction.2. Zone d’outils récurrents

• L’utilisateur y trouve les outils dont la présence sur toutes les pages du portail est requise. La fonction de changement de langue et le champs de recherche dans le portail.

3. Navigation par barre PBV • La zone contient la barre PBV. Ses contenus permanents pourront être mis à disposition

sous forme d’une barre facilitant ainsi l’intégration dans d’autres sites web d’acteurs du Pays.

4. Zone d’identification • Zone d’action qui permet à l’utilisateur de s’identifier sur le portail afin d’accéder au contenu

spécifique. Elle souhaite aussi la bienvenue à l’utilisateur identifié. 5. Navigation principale

• C’est la zone principale d’accès au contenu du site. 6. Espace partenaires

• La zone cite les différents partenaires du Pays du Bessin au Virois. Sa fonction est stratégique. Elle permet la valorisation des partenaires du Pays.

7. Zone de Cœur de page• Elle présente le contenu des pages. C’est le Cœur du site.

8. Liens annexes récurrents• La zone présente les liens annexes du portail, présents sur toutes les pages. Leur utilisation

n’est pas indispensable à la navigation dans le site.

Rôles des différentes zones:

16

Gabarit B

1. La zone identitaire: Le nom et la nature du site sont présentés. Le visiteur sait ou il est, c’est important dans la mesure ou ce gabarit est le point d’entrée principal des visiteurs du portail.

2. Mise en valeur du système de navigation pour faciliter l’accession au contenu.

3. Mise en valeur du Cœur de page, où se trouve le contenu principal du site.

4. La zone d’identification, pour permettre aux utilisateurs inscrits d’avoir accès à un contenu spécifique

5. La zone d’outils récurrents, disponibles pour une partie des internautes. Il ne sont utilisés qu’occasionnellement par les visiteurs.

6. La zone partenaires. Elle doit être présente pour des raisons stratégiques mais n’a pas d’incidence sur la compréhension de la page.


Par ordre décroissant d’importance, les contenus présents dans la gabarit B sont les suivants:

17

Gabarit C: 3 zones1. Zone identitaire

2. Zone de visuel thématique

3. Zone de Cœur de page

3Pages concernées:

• Plan du site

• Newsletter

• Page d’impression

• Page d’erreur

1 2

18

Gabarit C

1. La zone identitaire: Le nom et la nature du site sont présentés. Le visiteur sait d’où vient l’information.

2. Mise en valeur du Cœur de page, où se trouve le contenu informationnel.


Par ordre décroissant d’importance, les contenus présents dans la gabarit C sont les suivants:

Remarques: Ce gabarit est utilisé pour les pages spécifiques. Les visuels y sont limités pour optimiser le poids des lettres d’information, ou faciliter l’impression des pages.

19






20

Types de Cœurs de pages

• Cœur de page AB1

Zone d’article

Pour les gabarits A et B

21



Navigation de niveau 3

Zone d’article


22



Zone d’article

Contenu dynamique


23




Zone d’article

Contenu dynamique


24



Zone d’article


Infos

contextuelles

25




Zone d’article


Infos

contextuelles

26



Zone d’article

Contenu dynamique


Infos

contextuelles

27




Zone d’article

Contenu dynamique


Infos

contextuelles

28


• Cœur de page C1

Zone d’article

Pour les gabarits C

29



Zone d’article

Pour les gabarits C

Infos

contextuelles

30



Zone d’article

Pour les gabarits C

Contenu dynamique

31



Zone d’article

Pour les gabarits C

Infos

contextuelles

Contenu dynamique

32






33

Représentation graphiqueExemple de gabarit B (8 zones)Cœur de page AB7 (4 zones)

1 pays du bessin au virois portail internet du pays « zoning du portail » document rédigé...

Documents