Upload
realiz
View
134
Download
1
Embed Size (px)
Citation preview
Pagen°1
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Manuel I I
FUCID Université de NAMUR
WEB et Réseaux Charte, ergonomie et Brand
Pagen°2
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
…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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
3°UnderlineVousavezensuitevotreMission,c’estàdirecepourquoil’institutionaétécréée…enunephrase
Participeràlaco-constructiond’unmondesolidaireetdurableCo-construction:àutilisercommeunferdelancedecommunication(effetOrangina)
4°Logo
Pagen°6
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
ValeursPantone,CMJN,RVBethexadécimalesdechaquecouleurutiliséeAtitred’exemple:
Eventuellementadapterlechoixdescouleurspourl’adapterauxexigences
• desdifférentssupportsdecommunicationet• desdifférentsfondsdusite(fonddecouleuroufondblanc).
Pagen°9
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
7°Analogie:noscousinsnousressemblentExemple:lescouleursdelachartedel’EDEN(centreculturel)etcelledesInrock
Cheznos«concurrents»,destraitscaractéristiquesonvales«espionnerenligne»;o)
Pagen°10
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Développement
Traitscaractéristiques:
• 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Développement
Traitscaractéristiques:
• 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Développement
Traitscaractéristiques:
• 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Développement
Traitscaracté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 !
Pagen°15
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Sitesétudiants/universitaires
Traitscaractéristiques:
• 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Sitesétudiants/universitaires
Traitscaractéristiques:
• 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Sitesjeunesadultes25/30ans«trendy»Traitscaractéristiques:
• Lesplitscreen• Leperceptif• Couleurschaudesetcomplexes/travaillées
Pagen°18
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Sitesjeunes25/30ans«trendy»
Traitscaractéristiques:
• Couleursrassurantes• Wellbeing
Pagen°19
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
• Ce qui nous plait o Clair o Sympa o Positif o Slogan mis en avant o Couleurs sucrées
o Aspect communautaire
Pagen°21
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Nosinformationstypes:• Agenda• Activités• Listed’engagement• Calltoaction• Documentation• ...
Exemple:Exemple:idéaletbuzzpositif
Pagen°23
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
- Descriptifdesproblématiques:- Solutionsimaginéespouryremédier:
3. Problématiquesdemémoire
- Descriptifdesproblématiques:- Solutionsimaginéespouryremédier:
Pagen°33
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
4. Problématiquesderaisonnement
- Descriptifdesproblématiques:- Solutionsimaginéespouryremédier:
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
§ 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
- 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
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
HorsmédiasWEB
§ Plateformesindividuelles(siteInternet,Intranet…)- Choix:- Commentaires:- ….
§ Communicationasynchrone(mailing,newsletter…)- Choix:- Commentaires:- ….
§ Communicationsynchrone(chat,visioconférence…)- Choix:- Commentaires:- ….
§ Applicationsmobiles- Choix:- Commentaires:- ….
Pagen°39
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
BIBLIOGRAPHIE
Pagen°40
FUCID/Documentdetravailinterne/ànepasdiffuser/REALIZ
Notesetcommentaires