Pays du Bessin au Virois Portail 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

Historique des modifications du document Version Modifications apportées 1.0 Livraison 2.0 Ajout d’un 4em et 5em niveau de navigation

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

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

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

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 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.

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

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

Gabarit A: 9 zones 1 2 1 3 4 5 6 8 7 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 1 2 1 3 4 5 6 8 7 9

Gabarit A: 9 zones Objectifs du gabarit: Pages concernées: 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 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.

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.

Gabarit B: 8 zones 1 2 1 3 4 5 7 6 8 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 1 2 1 3 4 5 7 6 8

Gabarit B: 8 zones Objectifs du gabarit: Pages concernées: 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 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.

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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