Charte ergonomique FUCID suite

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

Page n°2

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

Page n°3

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

Page n°4

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

Page n°5

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

Page n°6

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

Page n°7

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

Page n°8

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

Page n°9

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)

Page n°10

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

Page n°11

Développement

• 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)
• Ecole primaire
• Trop créatif
• Calendrier à améliorer

Page n°12

Développement

• Photos stéréotypes / agriculture
• Affiches
• Moteur de recherche
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
• 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 !

Page n°13

Développement

• Couleurs
• Appel aux dons
• RS
Ce qui nous plait
• D’écran en écran
• donc pas de pavés plus
dynamique
• Barre de menu fixe
• Trop sombre
• Visages découpés
• Trop levée de fonds
• Charte pas cohérente
• 5 typos différentes
• Tutoiement
• Formulations trop clichées

Page n°14

Développement

• Structure
• Agenda
photos, typos…
Ce qui nous plait
• Couleurs sympas
• Equilibre photos / logos
• Agenda clair
• Entrée directe pour étudiant
• Pictos de contacts accompagnent
la navigation
• 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 !

Page n°15

Sites étudiants / universitaires

• Photos de personnes
Ce qui nous plait
• Photos de des activités
• S’adresse sur le ton de
l’humour
• Interactif
• Aspect trop blog
• Couleurs trop noirew
• Pas de logo

Page n°16

Sites étudiants / universitaires

• Look blog
• Photo
Ce qui nous plait
• Epuré
• Agenda simple et afcile
• Photos de groupes
• Mise à jour (6 mois)
• 0 commentaires
• Arrière fond blanc

Page n°17

Sites jeunes adultes 25/30 ans « trendy »

• Le split screen
• Le perceptif
• Couleurs chaudes et complexes / travaillées

Page n°18

Sites jeunes 25/30 ans « trendy »

• Couleurs rassurantes
• Well being

Page n°19

Sites jeunes adultes 25/30 ans « trendy »

• Trendy
• perceptif
photos, typos…
Ce qui nous plait
• Liens carré
• Sur impression
• Phrase logo / slogan
• Mots clefs en flash
• Qualité des photos
• Logo sobre
• Lien FB
• Trop chargé
• Photos tournent trop vite

Page n°20

• Ce qui nous plait
o Clair
o Sympa
o Positif
o Slogan mis en avant
o Couleurs sucrées
o Aspect communautaire

Page n°21

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

Page n°22

Nos informations types :
• Agenda
• Activités
• Liste d’engagement
• Call to action
• Documentation
• . . .

Exemple :
Exemple : idéal et buzz positif

Page n°23

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

Page n°24

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

Page n°25

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

Page n°26

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,

Page n°27

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

Page n°28

5° Le guide de style :


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 … :

Page n°29

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

Page n°30

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

Page n°31

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.


Pour l'espace de lecture,
a) vous peaufinez votre typographie,

Page n°32

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


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

3. Problématiques de mémoire

Page n°33

4. Problématiques de raisonnement

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.


Page n°34

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.


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.


Page n°35

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

Page n°36

§ 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…)

Page n°37

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

Page n°38

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

Page n°39

BIBLIOGRAPHIE

Page n°40

Notes et commentaires

Charte ergonomique FUCID suite

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie Charte ergonomique FUCID suite

Ähnlich wie Charte ergonomique FUCID suite (20)

Mehr von REALIZ

Mehr von REALIZ (20)

Charte ergonomique FUCID suite