Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Charte ergonomique FUCID suite

346 views

Published on

Exemple de rapport amont pour la création d'un site: environnement graphique, charte ergonomique ...

Published in: Government & Nonprofit
  • Be the first to comment

  • Be the first to like this

Charte ergonomique FUCID suite

  1. 1. Page n°1 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Manuel II FUCID Université de NAMUR WEB et Réseaux Charte, ergonomie et Brand
  2. 2. Page n°2 FUCID / Document de travail interne / à ne pas diffuser / REALIZ A. Elaboration de la charte graphique et de la charte d’illustration 1° Client type (persona) nos clients âge besoins, envies… tâches expérience avec l'outil informatique, Etudiants 20 ans Fête, quête de sens, changer le monde, le réseautage amical ou social … Etudient A la pointe Professeurs & chercheurs 35 - 45 ans Publier, évoluer dans leur carrière… Enseignement et recherche A la pointe pour Mail, SMS, Web Réseaux et UGC : peu mieux faire Grand public (autre) 35 – 40 ans Informations, propositions de pistes d’action, Employé, femme au foyer… Connaissance usuelle
  3. 3. Page n°3 FUCID / Document de travail interne / à ne pas diffuser / REALIZ … Les institutions 50 ans Valoriser leur institution, visibilité, … Gestion et représentation Usuelle Le monde associatif 25 – 35 ans 45 – 55 ans Mobiliser, toucher un public plus large, synergies, partenariat… Communication, animation et réflexion Bon (mais selon les associations) Hautes écoles /profs 35 – 45 ans Très idéaliste, besoin de valeurs et de projets… et de sens Enseignement Bonne maîtrise …
  4. 4. Page n°4 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Importance (âge pondéré par la ligne stratégique) Age moyen pondéré Etudiants 60 20 12 Profs + HE 20 40 8 Associations 15 40 6 Grand PUBLIC 5 37,5 1,875 Moyenne : 27,875 ans 28 ans Le client type a donc 28 ans ;o) 2° Valeur primaire et secondaire • Alternative / changement • Convivial / rencontre • Engagement / bouger Primaire : Alternative Secondaire : Convivial
  5. 5. Page n°5 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 3° Underline Vous avez ensuite votre Mission, c’est à dire ce pourquoi l’institution a été créée… en une phrase Participer à la co-construction d’un monde solidaire et durable Co-construction : à utiliser comme un fer de lance de communication (effet Orangina) 4° Logo
  6. 6. Page n°6 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 1. Analyse - Couleurs : turquoise, bleu et jaune moutarde - Formes : courbes, cercle, une barre (axe de la mate monde) - Métaphore : mate monde désigne la formation (celle qui est sur le bureau de l’élève ou du prof), le développement, le monde plus juste… 2. Comment mettre du lien avec ce que nous sommes - Changer la palette des couleurs pour correspondre d’avantage au Brand (Alternative / conviviale) - Retracer la courbe du pieds qui ne s’intègre pas au reste du logo schématique (trop ligne claire) 3. Comment l’intégrer dans notre communication - WEB : intégrer le logo dans le choix du template - RS : picto ? - Courrier : entête - Affiches : à décliner dans leur conception Institutionnel
  7. 7. Page n°7 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 5° Une police de titre et une police de contenu • Voir avec le template Word Press • Et la police du logo 6° Couleurs Le nombre de jeux de couleurs doit rester limité pour simplifier la mémorisation de l’identité visuelle et sa différenciation par rapport à la concurrence (4 ou 5 couleurs étant un compromis idéal entre mémorisation et différenciation) Primaire : Alternative • Vert printemps o Palette • Bleu • Orange Secondaire : Convivial voir affiche • Jaune tamisé chaleureux • Orange un peu brun / chaleureux • Rouge bordeaux chaleureux
  8. 8. Page n°8 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Valeurs Pantone, CMJN, RVB et hexadécimales de chaque couleur utilisée A titre d’exemple : Eventuellement adapter le choix des couleurs pour l’adapter aux exigences • des différents supports de communication et • des différents fonds du site (fond de couleur ou fond blanc).
  9. 9. Page n°9 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 7° Analogie: nos cousins nous ressemblent Exemple : les couleurs de la charte de l’EDEN (centre culturel) et celle des Inrock Chez nos « concurrents », des traits caractéristiques on va les « espionner en ligne » ;o)
  10. 10. Page n°10 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Développement Traits caractéristiques : • Orange foncé, beige / vert aussi • Photos de personnes • Logo en gauche Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Image du Forum • Menu accompagne le lecteur Ce qui nous déplait • Photos passives, et inefficaces • Atmosphère fade et triste • Menu pas clair • Trop d’infos en HP • Manque d’accroche • Pas de vidéo • Typo pas terrible • Trop d’onglets • Contours orange • Coins arrondis • Photo découpée (ne pas découper un visage
  11. 11. Page n°11 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Développement Traits caractéristiques : • Deux menus / slideshow • Underline • Photo « action locale » Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Contour flou / tâches de peinture • Liens vers réseaux sociaux • Dynamique • Menu clair • Bulles • Liens efficaces • Site léger / aéré • Système de ZOOM • Combinaison horizontal et vertical • Liens Publics / Projets (à reprendre) Ce qui nous déplait • Ecole primaire • Trop créatif • Calendrier à améliorer
  12. 12. Page n°12 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Développement Traits caractéristiques : • Photos stéréotypes / agriculture • Affiches • Moteur de recherche Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Contact très rapidement accessible • Plan du site • Liens en bas du site • Cohérence des couleurs entre site et photos • Esthétique harmonique • Cela tient en une page • Présence de l’horizon Ce qui nous déplait • Photos stéréotypes • Menus complexes et non pertinents • Onglets FACEBOOK • Remerciements : non • Pas de liens derrière les photos • Trop de texte dans le slide show • Idem article • Affiche, non !
  13. 13. Page n°13 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Développement Traits caractéristiques : • Couleurs • Appel aux dons • RS Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • D’écran en écran • donc pas de pavés plus dynamique • Barre de menu fixe Ce qui nous déplait • Trop sombre • Visages découpés • Trop levée de fonds • Charte pas cohérente • 5 typos différentes • Tutoiement • Formulations trop clichées
  14. 14. Page n°14 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Développement Traits caractéristiques : • Structure • Agenda Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Couleurs sympas • Equilibre photos / logos • Agenda clair • Entrée directe pour étudiant • Pictos de contacts accompagnent la navigation Ce qui nous déplait • Flou • Trop de place pour le bandeau • Hutte, pfff • Trois lignes de menus • Dessins pictos enfantins • Trop de texte • Thématiques pas claires • Cartes non !
  15. 15. Page n°15 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Sites étudiants / universitaires Traits caractéristiques : • Photos de personnes Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Photos de des activités • S’adresse sur le ton de l’humour • Interactif Ce qui nous déplait • Aspect trop blog • Couleurs trop noirew • Pas de logo
  16. 16. Page n°16 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Sites étudiants / universitaires Traits caractéristiques : • Look blog • Photo Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Epuré • Agenda simple et afcile • Photos de groupes Ce qui nous déplait • Mise à jour (6 mois) • 0 commentaires • Arrière fond blanc
  17. 17. Page n°17 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Sites jeunes adultes 25/30 ans « trendy » Traits caractéristiques : • Le split screen • Le perceptif • Couleurs chaudes et complexes / travaillées
  18. 18. Page n°18 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Sites jeunes 25/30 ans « trendy » Traits caractéristiques : • Couleurs rassurantes • Well being
  19. 19. Page n°19 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Sites jeunes adultes 25/30 ans « trendy » Traits caractéristiques : • Trendy • perceptif Liens, couleurs, structure, organisation, photos, typos… Ce qui nous plait • Liens carré • Sur impression • Phrase logo / slogan • Mots clefs en flash • Qualité des photos • Logo sobre • Lien FB Ce qui nous déplait • Trop chargé • Photos tournent trop vite
  20. 20. Page n°20 FUCID / Document de travail interne / à ne pas diffuser / REALIZ • Ce qui nous plait o Clair o Sympa o Positif o Slogan mis en avant o Couleurs sucrées o Aspect communautaire
  21. 21. Page n°21 FUCID / Document de travail interne / à ne pas diffuser / REALIZ B) Déclinaison du Brand en ligne éditoriale 1° Les objectifs de communication : les audiences visées, le type de trafic que l'on veut attirer, les qualités que l'on veut mettre en avant, etc. Nos objectifs : • Faire savoir ce que l’on propose • Comment participer • Avoir du public • Les engagements possibles • Alimenter la réflexion • … 2° La ligne éditoriale : le fil rouge thématique, l'angle de communication, le type d'information mis en scène, le rythme de publication. Notre fil rouge : • Engagement / activité / ligne principale o Donc du concret, de l’engageant, du sympa, … • Réflexion / prise de distance / ligne secondaire
  22. 22. Page n°22 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Nos informations types : • Agenda • Activités • Liste d’engagement • Call to action • Documentation • . . . Exemple : Exemple : idéal et buzz positif
  23. 23. Page n°23 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Chercher: - L’image idéale de votre « business », de l’aide que vous apportez, de ce que vous vendez ou de qui vous êtes - Pensez non seulement produit ou service mais surtout plus-value et rêves… voire les fantasmes ou l’humour ;o) - Ça doit se partager, faire le Buzz Ma planète idéale : • Sans inégalité • Heureux • Juste équitable @Solidaire • Saine La citoyenneté mondiale : • Emancipation • Tous concernés • Actif / concret • Choix responsable et solidaire • Respect tolérance • Analyse critique Que partager en ligne? ... et qui réponde à notre identité ;o) • Midi de la FUCID • Campagne économie sociale • Juste et équitable : clips, liens … • Capsule humour, well being … • Clip cases / métiers • . . .
  24. 24. Page n°24 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Notre rythme de publication (en ligne): Site Web : • 1 x semaine : agenda o Modifier le slideshow en fonction des activités o Surtout pendant les périodes scolaires • 1x an : CA et AG RS : • Snapchat : à développer • Tinder : à développer correspondance pour nos valeurs / nos activités • Instragram : en fonction des activités • FB : 1x par jour o en période creuse 1x par semaine UGC : • YT : à développer (concert p.e.) • Slideshare : 1x semaine
  25. 25. Page n°25 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Exemple source : webmarketing-com • Twitter : o sur ce réseau social dont l’instantanéité est le maître mot, o un tweet a une durée de vie d’environ 4 heures. o Pour exister, publier plusieurs fois par jour est nécessaire pour remporter de l’engagement ; • Facebook : o grâce à son reach, il permet de rallonger la durée de vie des publications. o Celles-ci peuvent apparaître jusqu’à 14 heures après leur publication ; • LinkedIn : o la durée de vie moyenne d’une publication étant de 12 heures, o il est généralement conseillé de publier le tôt le matin ; • You Tube : o le succès des publications dépend essentiellement du moyen par lequel elles sont promues par les autres réseaux sociaux comme Twitter ou Facebook
  26. 26. Page n°26 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 3° La stratégie SEO : le territoire mots clés visé, l’identification des synonymes, … nos clients Les mots qu’ils cherchent Synonymes Etudiants ONG, voyage, conférence, rencontre, développement, stage, UNAMUR, campus, stagiaire, Afrique, asbl, extra académique, kot à projet, cercle, soirée Namur, Bunker, AGE, cinéma, Professeurs & chercheurs Coopération, droit de l’homme, engagement, projet, financement, cours, méta, métisse, Namur, Grand public (autre) Solidarité, université, information, international, institutions, activités, agenda, emploi, théatre, concert, Les institutions Alternative, inégalité, international, réseau, Le monde associatif Communication,
  27. 27. Page n°27 FUCID / Document de travail interne / à ne pas diffuser / REALIZ formation, partenariat, ECMS, EP, éduction permanente, ED, éducation au développement, interculturel Hautes écoles /profs Documentation, document, … 4° Le rubriquage : vue d’ensemble de l’arborescence, description de l'objectif de chaque rubrique. Conseils de rédaction propres à chaque zone du site : page d'accueil, pages thématiques, pages produits, pages institutionnelles, etc. Se référer au document sur la structure du texte
  28. 28. Page n°28 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 5° Le guide de style : Se référer au document sur la structure du texte Les règles d'écriture : - Titre : - Chapô : - Texte images : - Corps de texte : - Citations : - Appels à l'action : - Liens : - Picto : La tonalité - Proche ou impersonnelle : - Décontractée ou sérieuse : - Engagée ou factuelle : - … Le niveau de technicité - TIC : - Langage développement / citoyen … :
  29. 29. Page n°29 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 6° Le processus de production : Choix des sujets - Descriptif : En fonction des activités, de l’actu, des contacts - Qui : Chargés de projet - Comment : à l’initiative / note : fin janvier et fin août – réunion de rédaction sur le Quadri - Quand : - Plan de rédaction - none Contrôle qualité - Descriptif : orthographe - Qui : Catherine - Comment : papier ou copie par mail - Quand : ex ante EP : groupe de travail qui valide les publications Processus de validation - Descriptif : relecture - Qui : en fonction Rita / Nathalie - Comment : document via mail - Quand : ex ante et relecture du site et des réseaux 1x par mois
  30. 30. Page n°30 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Traduction - Descriptif : à développer - Qui : - Comment : pour certaines rubriques seulement (exemple : carte d’identité) - Quand : Coordination des intervenants éditoriaux - Descriptif : selon les tâches, le responsable coordonne ses projets - Qui : chef de projet - Comment : concertation informelle - Quand : selon l’actu Workflow de nettoyage éditorial - Descriptif : ce qui ‘est plus d’actu, ce qui hors sujet, ce qui est trop vieux… - Qui : Rita - Comment : RS via onglet, site via community manager WP - Quand : 1x par semaine Suivi des statistiques - Descriptif : Site, RS, UGC… - Qui : Aurélie - Comment : en ligne pis communication interne - Quand : avril / mai
  31. 31. Page n°31 FUCID / Document de travail interne / à ne pas diffuser / REALIZ C. Rédaction de la charte ergonomique 1° Orienté utilisateur " Où suis-je ? " : l'en-tête soit le titre du site - le nom de l'association -, identique sur toutes vos pages, répond à cette question ; " Où puis-je aller ? " : la barre de navigation simple et claire est toujours au même endroit ; vous pouvez séparer visuellement les rubriques de contenu des rubriques de type " Services ". Pas de sous-rubriques proposées par du javascript si vous ne le maîtrisez pas et ne l'avez pas testé, car les navigateurs de vos lecteurs risquent de ne pas le présenter correctement (voire pas du tout, dans certains cas). " Qu'y-a-t'il comme information ? ": c'est la troisième zone, celle de la lecture. Vous y donnez le titre de la page (qui correspondra, règle élémentaire, à l'intitulé du lien de la navigation sur lequel on a cliqué pour y arriver), toujours au même endroit, toujours de la même manière, puis le texte, que vous devez prévoir court, structuré avec des intertitres. Se référer au document sur la structure du texte Pour l'espace de lecture, a) vous peaufinez votre typographie,
  32. 32. Page n°32 FUCID / Document de travail interne / à ne pas diffuser / REALIZ b) la couleur du fond de la page et celle du texte (noir sur fond blanc, on n'a jamais rien inventé de plus lisible), c) celles des titres et sous-titres (un peu de couleur, du moment qu'elle est visible, mais pas plus de 2 ou 3), d) la couleur des liens (il vous en faut deux : une pour les liens non visités, une autre pour les liens visités). Se référer au document sur la structure du texte 2° Ergonomie cognitive L'ergonomie cognitive se base sur les connaissances concernant le fonctionnement psychologique humain pour y adapter notre environnement. 1. Problématiques de perception - Descriptif des problématiques : - Solutions imaginées pour y remédier : 2. Problématiques de langage - Descriptif des problématiques : - Solutions imaginées pour y remédier : 3. Problématiques de mémoire - Descriptif des problématiques : - Solutions imaginées pour y remédier :
  33. 33. Page n°33 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 4. Problématiques de raisonnement - Descriptif des problématiques : - Solutions imaginées pour y remédier : 3° Zoning Découpage de l'interface en zones d'informations. Le zoning peut être plus ou moins détaillé et mentionner les dimensions en pixels. Le zoning est défini en fonction de l'importance que l'on veut donner à chaque élément. Il peut s'apparenter à un gabarit de page : on y décrit l'emplacement des éléments et leur appellation. Se référer au document sur la structure du texte
  34. 34. Page n°34 FUCID / Document de travail interne / à ne pas diffuser / REALIZ 4° Scénario de navigation Parcours et actions de l'utilisateur dans l'application, en fonction de la tâche qu'il doit accomplir. Définir des scénarios de navigation permet d'adapter l'interface et son comportement aux besoins de l'utilisateur. Se référer au document sur la structure du texte 5° Navigation Dans le cadre d'une interface web, la navigation consiste à passer d'une page à une autre. Les éléments de navigation sont les liens, les boutons, les menus, les images cliquables et les boutons du navigateur. Se référer au document sur la structure du texte
  35. 35. Page n°35 FUCID / Document de travail interne / à ne pas diffuser / REALIZ D. Choix et distribution des canaux de communication Médias traditionnels § Presse écrite (journaux, magazines, revues…) - Choix : - Commentaires : - …. § Radio (émissions, espaces pub…) - Choix : - Commentaires : - …. § Télévision (émissions, espaces pub…) - Choix : - Commentaires : - …. § Cinéma (espace pub…) - Choix : - Commentaires : - ….
  36. 36. Page n°36 FUCID / Document de travail interne / à ne pas diffuser / REALIZ § Affichage - Choix : - Commentaires : - …. Médias WEB § Presse en ligne (magazines, revues…) - Choix : - Commentaires : - …. § Publicité en ligne (Google adwords, sites…) - Choix : - Commentaires : - …. § Plateformes communautaires (Réseaux sociaux, blogs, groupes, forums…) - Choix : - Commentaires : - …. Hors médias traditionnel § Evènements traditionnels (stands, salons, conférences…)
  37. 37. Page n°37 FUCID / Document de travail interne / à ne pas diffuser / REALIZ - Choix : - Commentaires : - …. § Evènements alternatifs (formation, street marketing…) - Choix : - Commentaires : - …. § Relations publiques (lobby, négociation…) - Choix : - Commentaires : - …. § Courrier postal (ciblé, tout-ménage…) - Choix : - Commentaires : - …. § Contact direct (téléphone, réunion, promotion…) - Choix : - Commentaires : - ….
  38. 38. Page n°38 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Hors médias WEB § Plateformes individuelles (site Internet, Intranet…) - Choix : - Commentaires : - …. § Communication asynchrone (mailing, newsletter…) - Choix : - Commentaires : - …. § Communication synchrone (chat, visio conférence…) - Choix : - Commentaires : - …. § Applications mobiles - Choix : - Commentaires : - ….
  39. 39. Page n°39 FUCID / Document de travail interne / à ne pas diffuser / REALIZ BIBLIOGRAPHIE
  40. 40. Page n°40 FUCID / Document de travail interne / à ne pas diffuser / REALIZ Notes et commentaires

×