Cours projet web collaboratif - partie 2 : Stratégie éditoriale, version 2019

Cours projet web collaboratif - partie 2 : Stratégie éditoriale, version 2019

• 1.
  Projet Web Collaboratif Partie2 – La stratégie éditoriale Eric GIRAUDIN, responsable innovation pédagogique IUT2 Univ. Grenoble Alpes, coordinateur Karuta France Portfolio, Chargé d’enseignement au département Information-Communication, « Information Numérique dans les Organisations »
• 2.
  Plan du cours 1.Démarrer 2. L’image de de la marque : ligne éditoriale et identité visuelle 3. Organiser l’éditorial 4. Architecture de l’information
• 3.
  Démarrer : campersa stratégie • A quelle(s) problématique(s) globale(s) mon projet doit répondre, raison(s) d’être ? • Quels enjeux pour l’organisation commanditaire ? • Analyser l’existant, ne pas réinventer la roue ! • Se différencier de la concurrence
• 4.
  Démarrer avec lespersonas Créer ses personnages imaginaires représentants un segment de vos cibles pour construire vos contenus, parcours utilisateurs et fonctionnalités Voir : Les personas – un outil pour mieux comprendre les utilisateurs, sur le site « les cahiers de l’innovation » Elodie DUPIANTAU 32 ans, CSP+, célibataire sans enfants, Grenoble, France « Je suis une femme moderne passionnée de voyage en recherche d’expériences authentiques » Connaissances web Élevées Habitudes & hobbies Emails, Instagram, Pinterest, Facebook, logiciels PAO et montage vidéo, ebooks, NetFlix, Cinéma, décoration, photos, voyages & découverte culturelle, hummanitaire Matériel Ordinateur, ipad, iphone Sites de prédilections Yahoo.fr, showroomprive.com Son contexte Très connectée, passionnée par la photo et le cinéma elle adore préparer ses voyages en ligne, cherche à sortir des sentiers battus touristiques habituels et aller réellement à la rencontre de nouvelles cultures Sa relation avec votre marque Elle vient de découvrir votre marque par un story partagée par ses amis sur Instagram et elle s’est abonnée à vous (Insta et newsletter) Pourquoi utilise t’elle votre site web ? Pour découvrir des destinations de voyage sur le site web VoyagerAutrement Comment ? S’inspirer des expériences des internautes croisées avec les dossiers thématiques des experts du site Comportement Déteste la publicité, aime l’authentique, les visuels de qualité et inspirant, les sites aérés, impatiente elle aime trouver rapidement l’information qu’elle cherche, et a besoin d’être mise en confiance.
• 5.
  L’image de l’organisation: la ligne éditoriale Définir les périmètres du territoire éditorial (publics, langues, contributeurs, thématique, tonalité…) Définir les objectifs éditoriaux à atteindre en fonction des objectifs de communication Définir les formats éditoriaux (blogs, articles, pages, catalogues, newsletter…) >> Rédiger une charte éditoriale
• 6.
  L’image de l’organisation: L’identité visuelle • L’identité visuelle : – Ensemble des éléments visuels qui permettent la reconnaissance d’une organisation • La charte graphique – Document qui formalise les éléments de l’identité visuelle • Le Wireframing – Travail sur les gabarits de page (maquette non réaliste) • Prototype d’expérience utilisateur – Travail plus réaliste que le Wireframing pour construire des prototypes d’expérience utilisateur • La maquette visuelle réaliste – Epreuves graphiques donnant un aperçu très réaliste de la future apparence du site • Le thème graphique – Découpage de la maquette visuelle du design, selon les prototypes d’expérience utilisateur, en fichiers (XHTML, CSS…) permettant son intégration de manière cohérente dans votre site web (et également sur vos réseaux sociaux, applications…)
• 7.
  Organiser l’éditorial « Labible du projet éditorial qui précise la stratégie éditoriale, le design, le concept, la stratégie de référencement, la planification des étapes, les fonctionnalités attendues, les attentes techniques, etc. », mais qui laisse suffisamment de souplesse pour une gestion de projet Agile Modèle sur le site IMPALAWEBSTUDIO Exemple réel : refonte site Pays de Falaise LE CAHIER DES CHARGES
• 8.
  Organiser l’éditorial… auquotidien • Créer les contenus : rédacteurs web • Editer des contenus : éditeurs web • Enrichir les contenus : graphistes, photographes, illustrateurs, communicants, vidéastes, iconographes… • Publier et rendre trouvable ses contenus : documentalistes, spécialistes de l’information numériques… >> Et surtout, mettre en place un Workflow! • Créer les contenus : rédacteurs web • Editer des contenus : éditeurs web • Enrichir les contenus : graphistes, photographes, illustrateurs, communicants, vidéastes, iconographes… • Publier, rendre conformes et accessibles ses contenus : documentalistes, spécialistes de l’information numériques… • Animer autour des contenus : community manager >> Et surtout, mettre en place un Workflow!
• 9.
  Pensez à l’accessibilitéweb • Créer les contenus : rédacteurs web • Editer des contenus : éditeurs web • Enrichir les contenus : graphistes, photographes, illustrateurs, communicants, vidéastes, iconographes… • Publier et rendre trouvable ses contenus : documentalistes, spécialistes de l’information numériques… >> Et surtout, mettre en place un Workflow! Extrait du site w3qc.org « L’accessibilité web signifie que les personnes handicapées peuvent utiliser le web » • Ce n’est pas à la personne handicapée de s’adapter à votre site mais à vous de le rendre accessible. • Il faut l’intégrer dans vos pratiques de rédaction web ou dans votre cahier des charges Exemples de bonnes pratiques : • Chaque image intégrée dans vos contenues, utile à la compréhension de vos informations, doit être renseignée en version alternative textuelle; • Les liens hypertextes doivent être sémantiques. « Cliquer ici » ne permet pas à un aveugle de savoir ce qu’il va trouver en cliquant sur ce lien. Par contre « Afficher la suite de l’article Partir en vacances » sera beaucoup plus explicite.
• 10.
  Pensez à laRGPD • Créer les contenus : rédacteurs web • Editer des contenus : éditeurs web • Enrichir les contenus : graphistes, photographes, illustrateurs, communicants, vidéastes, iconographes… • Publier et rendre trouvable ses contenus : documentalistes, spécialistes de l’information numériques… >> Et surtout, mettre en place un Workflow! • Le Règlement Général de Protection des Données est un texte réglementaire européen en application depuis le 25/05/2018 pour encadrer le traitement des données personnelles de manière égalitaire en Europe • 3 objectifs : – renforcer les droits des personnes ; – responsabiliser les acteurs traitant des données ; – crédibiliser la régulation grâce à une coopération renforcée entre les autorités de protection des données. • 2 types d’identification : directe (nom, prénom etc.) et indirecte (identifiant, numéro etc.). • 6 conseils de la CNIL : – collectez que les données vraiment nécessaires ; – soyez transparent ; – respectez le droit des personnes en matière de consultation, de rectification ou de suppression des données ; – gardez la maîtrise des informations que vous collectez ; – identifiez les risques liées à votre traitement de données ; – déployez des dispositifs de sécurisation des données collectées (physiques et numérique). • Les CMS tels que WordPress proposent des fonctionnalités utiles au RGPD mais il faudra ajouter et configurer d’autres extensions pour se mettre en conformité
• 11.
  Architecture de l’information «Chaque chose doit être à la bonne place! » • Travailler avec en co-design avec des usagers finaux, se mettre à la place des visiteurs, collaborer avec des ergonomes; • Définir : – L’architecture des contenus : plus utile à votre équipe de contributeurs – L’architecture fonctionnelle : plus utile à vos visiteurs (plan du site) – La (les) navigation(s)
• 12.
  RessourcesWireframing app.mockflow.com Exemple charte graphique web Trouversa typo Dafont.org Icônes gratuits Flaticon Maquettes d’expériences utilisateur Adobe XD Banque d’images gratuites pixabay.com/fr/ Mindmap (architecture du site…) framindmap