Charte ergonomique FUCID suite

Pagen°1

FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ

Manuel I I

FUCID Université de NAMUR

WEB et Réseaux Charte, ergonomie et Brand

Pagen°2


A. Elaborationdelachartegraphiqueetdelacharted’illustration

1°Clienttype(persona)nosclients âge besoins,envies… tâches expérienceavecl'outil

informatique,Etudiants 20ans Fête,quêtede

sens,changerlemonde,leréseautageamicalousocial…

Etudient Alapointe

Professeurs&chercheurs

35-45ans Publier,évoluerdansleurcarrière…

Enseignementetrecherche

AlapointepourMail,SMS,WebRéseauxetUGC:peumieuxfaire

Grandpublic(autre) 35–40ans Informations,propositionsdepistesd’action,

Employé,femmeaufoyer…

Connaissanceusuelle

Pagen°3


…Lesinstitutions

50ans Valoriserleurinstitution,visibilité,…

Gestionetreprésentation

Usuelle

Lemondeassociatif 25–35ans45–55ans

Mobiliser,toucherunpublicpluslarge,synergies,partenariat…

Communication,animationetréflexion

Bon(maisselonlesassociations)

Hautesécoles/profs

35–45ans Trèsidéaliste,besoindevaleursetdeprojets…etdesens

Enseignement Bonnemaîtrise

…

Pagen°4


Importance (âgepondéréparlalignestratégique) Agemoyen pondéré

Etudiants 60 20 12Profs+HE 20 40 8Associations 15 40 6GrandPUBLIC 5 37,5 1,875

Moyenne: 27,875 ans

28ans

Leclienttypeadonc28ans;o)2°Valeurprimaireetsecondaire• Alternative/changement• Convivial/rencontre• Engagement/bougerPrimaire:AlternativeSecondaire:Convivial

Pagen°5


3°UnderlineVousavezensuitevotreMission,c’estàdirecepourquoil’institutionaétécréée…enunephrase

Participeràlaco-constructiond’unmondesolidaireetdurableCo-construction:àutilisercommeunferdelancedecommunication(effetOrangina)

4°Logo

Pagen°6


1. Analyse- Couleurs:turquoise,bleuetjaunemoutarde- Formes:courbes,cercle,unebarre(axedelamatemonde)- Métaphore:matemondedésignelaformation(cellequiestsurlebureaudel’élèveouduprof),le

développement,lemondeplusjuste…

2. Commentmettredulienaveccequenoussommes- Changerlapalettedescouleurspourcorrespondred’avantageauBrand(Alternative/conviviale)- Retracerlacourbedupiedsquines’intègrepasaurestedulogoschématique(tropligneclaire)

3. Commentl’intégrerdansnotrecommunication

- WEB:intégrerlelogodanslechoixdutemplate- RS:picto?- Courrier:entête- Affiches:àdéclinerdansleurconception

Institutionnel

Pagen°7


5°Unepolicedetitreetunepolicedecontenu• VoiravecletemplateWordPress• Etlapolicedulogo

6°CouleursLenombredejeuxdecouleursdoitresterlimitépoursimplifierlamémorisationdel’identitévisuelleetsadifférenciationparrapportàlaconcurrence(4ou5couleursétantuncompromisidéalentremémorisationetdifférenciation)

Primaire:Alternative

• Vertprintempso Palette

• Bleu• Orange

Secondaire:Convivialvoiraffiche

• Jaunetamiséchaleureux• Orangeunpeubrun/chaleureux• Rougebordeauxchaleureux

Pagen°8


ValeursPantone,CMJN,RVBethexadécimalesdechaquecouleurutiliséeAtitred’exemple:

Eventuellementadapterlechoixdescouleurspourl’adapterauxexigences

• desdifférentssupportsdecommunicationet• desdifférentsfondsdusite(fonddecouleuroufondblanc).

Pagen°9


7°Analogie:noscousinsnousressemblentExemple:lescouleursdelachartedel’EDEN(centreculturel)etcelledesInrock

Cheznos«concurrents»,destraitscaractéristiquesonvales«espionnerenligne»;o)

Pagen°10


Développement

Traitscaractéristiques:

• Orangefoncé,beige/vertaussi• Photosdepersonnes

• Logoengauche

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

Pagen°11


Développement


• Deuxmenus/slideshow• Underline• Photo«actionlocale»

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

Pagen°12


Développement


• Photosstéréotypes/agriculture• Affiches• Moteurderecherche

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 !

Pagen°13


Développement


• Couleurs• Appelauxdons• 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 • Tropsombre• Visagesdécoupés• Troplevéedefonds• Chartepascohérente• 5typosdifférentes• Tutoiement• Formulationstropclichées

Pagen°14


Développement


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

Pagen°15


Sitesétudiants/universitaires


• Photosdepersonnes

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

Pagen°16


Sitesétudiants/universitaires


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

Pagen°17


Sitesjeunesadultes25/30ans«trendy»Traitscaractéristiques:

• Lesplitscreen• Leperceptif• Couleurschaudesetcomplexes/travaillées

Pagen°18


Sitesjeunes25/30ans«trendy»


• Couleursrassurantes• Wellbeing

Pagen°19


Sitesjeunesadultes25/30ans«trendy»

Traitscaracté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

Pagen°20


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

o Aspect communautaire

Pagen°21


B)DéclinaisonduBrandenligneéditoriale1°Lesobjectifsdecommunication:lesaudiencesvisées,letypedetraficquel'onveutattirer,lesqualitésquel'onveutmettreenavant,etc.Nosobjectifs:

• Fairesavoircequel’onpropose• Commentparticiper• Avoirdupublic• Lesengagementspossibles• Alimenterlaréflexion• …

2°Laligneéditoriale:lefilrougethématique,l'angledecommunication,letyped'informationmisenscène,lerythmedepublication.Notrefilrouge:

• Engagement/activité/ligneprincipaleo Doncduconcret,del’engageant,dusympa,…

• Réflexion/prisededistance/lignesecondaire

Pagen°22


Nosinformationstypes:• Agenda• Activités• Listed’engagement• Calltoaction• Documentation• ...

Exemple:Exemple:idéaletbuzzpositif

Pagen°23


Chercher:- L’imageidéaledevotre«business»,del’aidequevousapportez,decequevousvendezoudequivousêtes- Penseznonseulementproduitouservicemaissurtoutplus-valueetrêves…voirelesfantasmesoul’humour;o)- Çadoitsepartager,faireleBuzz

Maplanèteidéale:

• Sansinégalité• Heureux• Justeéquitable@Solidaire• Saine

Lacitoyennetémondiale:

• Emancipation• Tousconcernés• Actif/concret• Choixresponsableetsolidaire• Respecttolérance• Analysecritique

Quepartagerenligne?...etquirépondeànotreidentité;o)

• MididelaFUCID• Campagneéconomiesociale• Justeetéquitable:clips,liens…• Capsulehumour,wellbeing…

• Clipcases/métiers• ...

Pagen°24


Notrerythmedepublication(enligne):SiteWeb:

• 1xsemaine:agendao Modifierleslideshowenfonctiondesactivitéso Surtoutpendantlespériodesscolaires

• 1xan:CAetAG

RS:

• Snapchat:àdévelopper• Tinder:àdéveloppercorrespondancepournosvaleurs/nosactivités

• Instragram:enfonctiondesactivités

• FB:1xparjour

o enpériodecreuse1xparsemaine

UGC:• YT:àdévelopper(concertp.e.)• Slideshare:1xsemaine

Pagen°25


Exemplesource:webmarketing-com

• Twitter:

o surceréseausocialdontl’instantanéitéestlemaîtremot,o untweetauneduréedevied’environ4heures.o Pourexister,publierplusieursfoisparjourestnécessairepourremporterde

l’engagement;

• Facebook:o grâceàsonreach,ilpermetderallongerladuréedeviedespublications.o Celles-cipeuventapparaîtrejusqu’à14heuresaprèsleurpublication;

• LinkedIn:

o laduréedeviemoyenned’unepublicationétantde12heures,o ilestgénéralementconseillédepublierletôtlematin;

• YouTube:

o lesuccèsdespublicationsdépendessentiellementdumoyenparlequelellessontpromuesparlesautresréseauxsociauxcommeTwitterouFacebook

Pagen°26


3°LastratégieSEO:leterritoiremotsclésvisé,l’identificationdessynonymes,…

nosclients Lesmotsqu’ilscherchent SynonymesEtudiants ONG,voyage,conférence,

rencontre,développement,stage,UNAMUR,campus,stagiaire,Afrique,asbl,extraacadémique,kotàprojet,cercle,soiréeNamur,Bunker,AGE,cinéma,

Professeurs&chercheurs

Coopération,droitdel’homme,engagement,projet,financement,cours,méta,métisse,Namur,

Grandpublic(autre)

Solidarité,université,information,international,institutions,activités,agenda,emploi,théatre,concert,

Lesinstitutions

Alternative,inégalité,international,réseau,

Lemondeassociatif Communication,

Pagen°27


formation,partenariat,ECMS,EP,éductionpermanente,ED,éducationaudéveloppement,interculturel

Hautesécoles/profs

Documentation,document,

… 4°Lerubriquage:vued’ensembledel’arborescence,descriptiondel'objectifdechaquerubrique.Conseilsderédactionpropresàchaquezonedusite:paged'accueil,pagesthématiques,pagesproduits,pagesinstitutionnelles,etc.Seréféreraudocumentsurlastructuredutexte

Pagen°28


5°Leguidedestyle:Seréféreraudocumentsurlastructuredutexte

Lesrèglesd'écriture:- Titre:- Chapô:- Texteimages:- Corpsdetexte:- Citations:- Appelsàl'action:- Liens:- Picto:

Latonalité

- Procheouimpersonnelle:- Décontractéeousérieuse:- Engagéeoufactuelle:- …

Leniveaudetechnicité

- TIC:- Langagedéveloppement/citoyen…:

Pagen°29


6°Leprocessusdeproduction:Choixdessujets

- Descriptif:Enfonctiondesactivités,del’actu,descontacts- Qui:Chargésdeprojet- Comment:àl’initiative/note:finjanvieretfinaoût–réunionderédactionsurle

Quadri- Quand:-

Planderédaction

- none

Contrôlequalité- Descriptif:orthographe- Qui:Catherine- Comment:papieroucopieparmail- Quand:exante

EP:groupedetravailquivalidelespublications

Processusdevalidation- Descriptif:relecture- Qui:enfonctionRita/Nathalie- Comment:documentviamail- Quand:exanteetrelecturedusiteetdesréseaux1xparmois

Pagen°30


Traduction

- Descriptif:àdévelopper- Qui:- Comment:pourcertainesrubriquesseulement(exemple:carted’identité)- Quand:

Coordinationdesintervenantséditoriaux

- Descriptif:selonlestâches,leresponsablecoordonnesesprojets- Qui:chefdeprojet- Comment:concertationinformelle- Quand:selonl’actu

Workflowdenettoyageéditorial

- Descriptif:cequi‘estplusd’actu,cequihorssujet,cequiesttropvieux…- Qui:Rita- Comment:RSviaonglet,siteviacommunitymanagerWP- Quand:1xparsemaine

Suividesstatistiques

- Descriptif:Site,RS,UGC…- Qui:Aurélie- Comment:enlignepiscommunicationinterne- Quand:avril/mai

Pagen°31


C.Rédactiondelacharteergonomique1°Orientéutilisateur

"Oùsuis-je?":l'en-têtesoitletitredusite-lenomdel'association-,identiquesurtoutesvospages,répondàcettequestion;"Oùpuis-jealler?":labarredenavigationsimpleetclaireesttoujoursaumêmeendroit;vouspouvezséparervisuellementlesrubriquesdecontenudesrubriquesdetype"Services".Pasdesous-rubriquesproposéespardujavascriptsivousnelemaîtrisezpasetnel'avezpastesté,carlesnavigateursdevoslecteursrisquentdenepasleprésentercorrectement(voirepasdutout,danscertainscas)."Qu'y-a-t'ilcommeinformation?":c'estlatroisièmezone,celledelalecture.Vousydonnezletitredelapage(quicorrespondra,règleélémentaire,àl'intituléduliendelanavigationsurlequelonacliquépouryarriver),toujoursaumêmeendroit,toujoursdelamêmemanière,puisletexte,quevousdevezprévoircourt,structuréavecdesintertitres.

Seréféreraudocumentsurlastructuredutexte

Pourl'espacedelecture,

a) vouspeaufinezvotretypographie,

Pagen°32


b) lacouleurdufonddelapageetcelledutexte(noirsurfondblanc,onn'ajamaisrieninventédepluslisible),

c) cellesdestitresetsous-titres(unpeudecouleur,dumomentqu'elleestvisible,maispasplusde2ou3),

d) lacouleurdesliens(ilvousenfautdeux:unepourlesliensnonvisités,uneautrepourlesliensvisités).

Seréféreraudocumentsurlastructuredutexte2°ErgonomiecognitiveL'ergonomiecognitivesebasesurlesconnaissancesconcernantlefonctionnementpsychologiquehumainpouryadapternotreenvironnement.

1. Problématiquesdeperception

- Descriptifdesproblématiques:- Solutionsimaginéespouryremédier:

2. Problématiquesdelangage


3. Problématiquesdemémoire


Pagen°33


4. Problématiquesderaisonnement


3°ZoningDécoupagedel'interfaceenzonesd'informations.Lezoningpeutêtreplusoumoinsdétailléetmentionnerlesdimensionsenpixels.Lezoningestdéfinienfonctiondel'importancequel'onveutdonneràchaqueélément.Ilpeuts'apparenteràungabaritdepage:onydécritl'emplacementdesélémentsetleurappellation.

Seréféreraudocumentsurlastructuredutexte

Pagen°34


4°ScénariodenavigationParcoursetactionsdel'utilisateurdansl'application,enfonctiondelatâchequ'ildoitaccomplir.Définirdesscénariosdenavigationpermetd'adapterl'interfaceetsoncomportementauxbesoinsdel'utilisateur.Seréféreraudocumentsurlastructuredutexte5°NavigationDanslecadred'uneinterfaceweb,lanavigationconsisteàpasserd'unepageàuneautre.Lesélémentsdenavigationsontlesliens,lesboutons,lesmenus,lesimagescliquablesetlesboutonsdunavigateur.Seréféreraudocumentsurlastructuredutexte

Pagen°35


D.Choixetdistributiondescanauxdecommunication

Médiastraditionnels§ Presseécrite(journaux,magazines,revues…)- Choix:- Commentaires:- ….

§ Radio(émissions,espacespub…)- Choix:- Commentaires:- ….

§ Télévision(émissions,espacespub…)- Choix:- Commentaires:- ….

§ Cinéma(espacepub…)- Choix:- Commentaires:- ….

Pagen°36


§ Affichage- Choix:- Commentaires:- ….

MédiasWEB

§ Presseenligne(magazines,revues…)- Choix:- Commentaires:- ….

§ Publicitéenligne(Googleadwords,sites…)- Choix:- Commentaires:- ….

§ Plateformescommunautaires(Réseauxsociaux,blogs,groupes,forums…)- Choix:- Commentaires:- ….

Horsmédiastraditionnel

§ Evènementstraditionnels(stands,salons,conférences…)

Pagen°37


- Choix:- Commentaires:- ….

§ Evènementsalternatifs(formation,streetmarketing…)- Choix:- Commentaires:- ….

§ Relationspubliques(lobby,négociation…)- Choix:- Commentaires:- ….

§ Courrierpostal(ciblé,tout-ménage…)- Choix:- Commentaires:- ….

§ Contactdirect(téléphone,réunion,promotion…)- Choix:- Commentaires:- ….

Pagen°38


HorsmédiasWEB

§ Plateformesindividuelles(siteInternet,Intranet…)- Choix:- Commentaires:- ….

§ Communicationasynchrone(mailing,newsletter…)- Choix:- Commentaires:- ….

§ Communicationsynchrone(chat,visioconférence…)- Choix:- Commentaires:- ….

§ Applicationsmobiles- Choix:- Commentaires:- ….

Pagen°39


BIBLIOGRAPHIE

Pagen°40


Notesetcommentaires

Charte ergonomique FUCID suite

Government & Nonprofit

Transcript of Charte ergonomique FUCID suite