Pays du Bessin au Virois Portail Internet du Pays

1. Pays du Bessin au ViroisPortail Internet du Pays « Zoning du portail »

2. Historique des modifications du document

3. Sommaire • Objectifs du document • Nature et objectifs du portail • Types de gabarits • Types de cœur de page • Représentation graphique

4. Objectifs du document Le zoning permet de définir les grands espaces d’actions sur lesquels l’utilisateur devra interagir. 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. Ce document de Zoning pose les premières bases de la construction ergonomique et visuelle du futur portail

5. Sommaire • Objectifs du document • Nature et objectifs du portail • Types de gabarits • Types de cœur de page • Représentation graphique

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: • 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. • 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 imaginerles 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. Sommaire • Objectifs du document • Nature et objectifs du portail • Types de gabarits • Types de cœur de page • Représentation graphique

8. 1 2 1 2 1 3 4 7 5 1 3 3 6 8 Types de gabarits • 3 principaux types de gabarits Gabarit A Gabarit B Gabarit C

9. Zone identitaire Zone d’outils récurrents Zone de visuel thématique Navigation par barre PBV Zone d’identification Navigation principale Espace partenaires Zone de Cœur de page Liens annexes récurrents Gabarit A: 9 zones 1 2 1 3 4 5 6 8 7 9

10. Gabarit A: 9 zones 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 »

11. Gabarit A: 9 zones Rôles des différentes zones: • 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. • 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. • 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. • 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. • 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é. • Navigation principale • C’est la zone principale d’accès au contenu du site. • 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. • Zone de Cœur de page • Elle présente le contenu des pages. C’est le Cœur du site. • 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.

12. Gabarit A: 9 zones Hiérarchisation de l’information: Par ordre décroissant d’importance, les contenus présents dans la gabarit A sont les suivants: • 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. • 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. • Mise en valeur du système de navigation pour faciliter l’accession au contenu. • Mise en valeur du Cœur de page, où se trouve le contenu principal du site. • La zone d’identification pour permettre aux utilisateurs inscrits d’avoir accès à un contenu spécifique • La zone d’outils récurrents, disponibles pour une partie des internautes. Il ne sont utilisés qu’occasionnellement par les visiteurs. • 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.

13. Zone identitaire Zone d’outils récurrents Navigation par barre PBV Zone d’identification Navigation principale Espace partenaires Zone de Cœur de page Liens annexes récurrents Gabarit B: 8 zones 1 2 1 3 4 7 5 6 8

14. Gabarit B: 8 zones 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

15. Gabarit B: 8 zones Rôles des différentes zones: • 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. • 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. • 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. • 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é. • Navigation principale • C’est la zone principale d’accès au contenu du site. • 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. • Zone de Cœur de page • Elle présente le contenu des pages. C’est le Cœur du site. • 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.

16. Gabarit B Hiérarchisation de l’information: Par ordre décroissant d’importance, les contenus présents dans la gabarit B sont les suivants: • 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. • Mise en valeur du système de navigation pour faciliter l’accession au contenu. • Mise en valeur du Cœur de page, où se trouve le contenu principal du site. • La zone d’identification, pour permettre aux utilisateurs inscrits d’avoir accès à un contenu spécifique • La zone d’outils récurrents, disponibles pour une partie des internautes. Il ne sont utilisés qu’occasionnellement par les visiteurs. • 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.

17. Zone identitaire Zone de visuel thématique Zone de Cœur de page Gabarit C: 3 zones 1 2 3 Pages concernées: • Plan du site • Newsletter • Page d’impression • Page d’erreur

18. Gabarit C Hiérarchisation de l’information: Par ordre décroissant d’importance, les contenus présents dans la gabarit C sont les suivants: • La zone identitaire: Le nom et la nature du site sont présentés. Le visiteur sait d’où vient l’information. • Mise en valeur du Cœur de page, où se trouve le contenu informationnel. 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. Sommaire • Objectifs du document • Nature et objectifs du portail • Types de gabarits • Types de cœur de page • Représentation graphique

20. Types de Cœurs de pages • Cœur de page AB1 Pour les gabarits A et B Zone d’article

21. Types de Cœurs de pages • Cœur de page AB2 Pour les gabarits A et B Navigation de niveau 3 Zone d’article

22. Types de Cœurs de pages • Cœur de page AB3 Pour les gabarits A et B Zone d’article Contenu dynamique

23. Types de Cœurs de pages • Cœur de page AB2 Pour les gabarits A et B Navigation de niveau 3 Zone d’article Contenu dynamique

24. Types de Cœurs de pages • Cœur de page AB4 Pour les gabarits A et B Infos contextuelles Zone d’article

25. Types de Cœurs de pages • Cœur de page AB5 Pour les gabarits A et B Navigation de niveau 3 Infos contextuelles Zone d’article

26. Types de Cœurs de pages • Cœur de page AB6 Pour les gabarits A et B Zone d’article Infos contextuelles Contenu dynamique

27. Types de Cœurs de pages • Cœur de page AB7 Pour les gabarits A et B Navigation de niveau 3 Infos contextuelles Zone d’article Contenu dynamique

28. Types de Cœurs de pages • Cœur de page C1 Pour les gabarits C Zone d’article

29. Types de Cœurs de pages • Cœur de page C2 Pour les gabarits C Infos contextuelles Zone d’article

30. Types de Cœurs de pages • Cœur de page C3 Pour les gabarits C Zone d’article Contenu dynamique

31. Types de Cœurs de pages • Cœur de page C4 Pour les gabarits C Zone d’article Infos contextuelles Contenu dynamique

32. Sommaire • Objectifs du document • Nature et objectifs du portail • Types de gabarits • Types de cœur de page • Représentation graphique

33. Exemple de gabarit B (8 zones) Cœur de page AB7 (4 zones) Représentation graphique