6 années au siège du Groupe Banque populaire comme Responsable Webdesign / AMOA « Médiatrice » entre la technique, la pertinence et l’esthétisme ! Présentation "Métier" auprès de la Direction des Technologies pour expliquer la démarche d'un projet, les différentes étapes. L'objectif était de sensibiliser les développeurs pour arriver à travailler ensemble, leur faire prendre conscience qu'il est important d'être solliciter en amont et valoriser leur travail.

1. Présentation Métier
ERGONOMIE & DESIGN

2. SOMMAIRE
2. Rôle et Missions
3. Ergonomie
4. Etapes d’un projet
5. Illustration

3. CHAPITRE
1- RÔLE ET MISSIONS

4. 1. RÔLE ET MISSIONS
 Expériences
 J’ai travaillé 5 ans en Agence Web
■ Graphisme et Scénarisation pour des projets web variés.
 J’ai rejoint la BFBP, il y a 4 ans à l’occasion de la création du pôle « Inet »
Pour l’anecdote… quand je suis arrivée, il y avait des sites intranets dans tous les sens, sans harmonie, ni touche « Banque
Populaire », chacun faisait son petit site perso…
Intranet
■ Mise en place d’une Charte Graphique Intranet, réflexion sur les évolutions/adaptations/déclinaisons pour la création de
nouveau gabarit.
■ Garantie de la cohérence et homogénéisation des intranets tout en donnant une personnalisation à chaque site.
■ Déploiement par l’accompagnant des utilisateurs dans l’expression de leur besoin (rubriquage, pertinence, organisation
de contenu…) tout en prenant en compte les problématiques techniques.
Internet
■ Participation à la coordination Développement/Agence pour la refonte, les évolutions de BP.fr,
les campagnes Commerciales…
■ IBP : Adaptation de la partie transactionnel selon la charte graphique web
Applications (pour l’instant intervention limitée aux « coups de peinture »)
■ Magnitude, Actiflow, Cognos…
Modèles de docs
■ Newsletter Flash (ponant) + Professions Libérales (Développement)
■ Refonte des modèles ppt en collaboration avec le Développement

5. 1. RÔLE ET MISSIONS
 Une valeur ajoutée aux Technologies
 Approche et profil plus Com’ que Technique, meilleure compréhension des
attentes du Développement et de nos utilisateurs (langage et interprétation
différents).
 Dans le cadre de la gestion d’un projet, l’avantage c’est que je mets tout de
suite en image le contenu d’un site (sensibilité artistique / feeling), avec une
idée précise de la mise en page. J’essaie toujours de prouver la logique et de
transmettre aux utilisateurs « l’envie de donner envie » quelque soit le
contenu.
 Connaissance des contraintes techniques pour des solutions adaptées.

6. 1. RÔLE ET MISSIONS
 Convergences d’univers
 C’est pas de la
fantaisie !
 Les Technos > Objectifs Fonctionnels et techniques
On leur commande un outils, leur priorité est de garantir le fonctionnement
Prenons l’exemple
technique.
d’une voiture.
 La Com’ > Objectifs de séduction, de message… Vous construisez une
Avant tout, ils jugent sur l’esthétique avant de s’assurer que ça fonctionne. voiture, elle roule, c’est
le principal ! C’est pas
Tous ces objectifs sont complémentaires, ensemble ils garantissent le succès de pour autant que vous
aurez envie de l’acheter.
l’application. J’ai donc un parcours inverse du votre. Je viens de la com’ et j’ai
appris des technos. A moi de vous sensibiliser pour mettre un peu de com’ dans Vous la choisirez parce
vos technos ! que sa couleur et sa
forme vous plaisent,
c’est aussi grâce à
 ça qu’on l’associera à
Avec l’arrivée du web, les technos ont été obligé de se sensibiliser au
graphisme et à l’ergonomie. Parce que les internet ne sont que des telle marque et pas à
supports de communication, le soucis majeur c’est le client. une autre.
 A la différence des applis/intranet qui sont de véritables outils, jusqu’à
maintenant il fallait que ça marche. Aujourd’hui, nos utilisateurs attendent
plus. On considère nos collaborateurs en Banque comme des clients, eux
aussi évoluent avec ce qu’ils voient et veulent des interfaces intuitives et
gracieuses.

7. 1. RÔLE ET MISSIONS
 Exemple de dysfonctionnement IBP a développé toute
l’appli transactionnel
et d’insatisfaction client des BP, sans prendre
en compte « l’identité »
Banque Populaire et les
Interface impersonnel, loin de l’image attentes clients. Du
Banque Populaire et de la manière coup, il nous a fallut être
réactif et travailler
dont les clients ont l’habitude de nous voir.. ensemble pour revoir
l’ergonomie, les
couleurs qui ne
correspondaient pas à
l’image du Groupe et
surtout qui risquait de
décevoir nos clients.
Ces ajustements ont eu
de lourdes
conséquences sur leur
développement et leur
ont nécessité un surplus
de travail qui auraient
pu être évité s’ils nous
avaient consulté en
amont.

8. 1. RÔLE ET MISSIONS
 Objectifs
 Vous sensibiliser
 Vous simplifier la vie
 Parfois vous faire gagner du temps
 Et surtout valoriser le travail que vous réalisez
 Créer ensemble une unité aussi bien graphique qu’intuitive,
à l’image du Groupe.
Si l’ergonomie est abordée en amont, elle aura une influence sur votre développement.
Si l’on se pose la question qu’au final, à moins de tout recasse, on ne pourra avoir recours
qu’à un coup de peinture. Mieux vaut anticiper.

9. CHAPITRE
2- ERGONOMIE

10. Site fouilli, la « foire fouille », ça clignote dans tous
les sens et on ne s’est pas ce qui est le important…
2. ERGONOMIE
 Qu'est ce qui fait que
certains sites/applications
ont du succès et que
d'autres, proposant des
services similaires, sont
au contraire des échecs ?
Ce n’est pas le coup de peinture !
Mais un ensemble de critères à
prendre en compte.
Le contenu déjà, c’est le plus Site structuré, l’information
corporate et commerciale sont
important, vient ensuite l’ergonomie bien distinctes… on s’y retrouve.
: agencement, mise en avant… On espère que cet exemple sera
les plus adaptées pour garantir à source d’inspiration pour nos BP.
l’internaute de trouver l’information A l’occasion de leur refonte, les
BP nous consultent et s’en
qu’il recherche et faire en sorte approchent de plus en plus.
qu’il est envie de revenir.
Le coup de peinture c’est juste la
pointe finale de séduction. Si tout ce
travail en amont n’a pas été respecté,
il n’y aura pas de miracle...

11. 2. ERGONOMIE
 Définition
 L’ergonomie est l’étude de la meilleure adaptation entre les
fonctionnalités et les utilisateurs.
■ Un site web, une application est qualifié d'ergonomique quand il propose un
mode de navigation aisé et intuitif permettant à ses visiteurs une prise en
main rapide de ses fonctionnalités (ex: Clarity )
■ L'ergonomie vise ainsi à la fois une meilleure efficacité et un plus grand
confort d'utilisation.

12. 2. ERGONOMIE
 Principaux critères d’ergonomie
 Compatibilité et homogénéité
■ Respecter une logique de présentation et d’utilisation constante fidèle à celle
des utilisateurs (charte graphique et d’intégration technique, mise en page et style
graphique, langage…)
 Guidage
■ Ensemble des moyens mis en œuvre pour assister l’internaute dans ses intuitions
(chemin de fer, navigation, aide…)
 Lisibilité et Concision
■ Affichage que des informations pertinentes, perception facile et rapide
(Hiérarchisation des informations pour éviter les gros paragraphes qui ne donnent
pas envie d’être lu, niveaux de lecture, Illustration visuel, mise en avant…)

13. CHAPITRE
3- ETAPES D’UN PROJET

14. 3. ETAPES D’UN PROJET
 Cas typique pour les sites Intranet (quasi-même principe pour une appli, un site web…)
 Les utilisateurs nous contactent : Ils ont des idées mais ne savent pas comment les mettre en place et intéresser
les gens.
 Inet les rencontre pour prendre connaissance des contenus et définir l’arborescence / rubriquage
 Une fois le rubriquage validé, nous les accompagnons dans l’organisation de leur page pour associer le meilleur
gabarit ou envisager un développement spécifique. C’est ce qu’on appelle la phase scénarisation / maquettage.
 C’est à ce stade également que nous proposons une personnalisation graphique du site, selon la charte et le
type de contenu.
 En collaboration avec les développeurs, nous étudions les faisabilités techniques et la pertinence des
propositions pour définir un plan de charge.
 Quand les scénarios sont validés, nous pouvons alors passer à la construction technique de votre site
 Pour valider cette mise en place, nous étamons une phase de recettage qui concerne aussi bien les utilisateurs,
que le Chef de Projet.
 Nous organisons dès lors, une formation pour les utilisateurs avec la remise de guides spécifiques.
 Nous continuons, tout au long, d’assister nos utilisateurs dans les problèmes qu’ils rencontrent mais aussi dans
les évolutions de leur besoin.
Pour compléter nos actions, nous avons mis à disposition IDNET, un intranet support (guides) et «catalogue»
sur les outils que l’ont propose, les gabarits disponibles sur publigen, les évolutions, la charte graphique…
>>> Chaque projet est un travail d’équipe

15. 3. ETAPES D’UN PROJET
 Termes employés
 Arborescence / Rubriquage
L’organisation type et logique d’un site
 Scénarisation / Maquettage
Scénarisation dans PowerPoint (Zoning de contenu) Maquettage au besoin selon nouveautés…

16. 4. ILLUSTRATION
 Vous cherchez des images, moi aussi !
 J’interviens au même titre que la charte graphique,
en amont pour créer l’identité.
Ensuite, de la même manière que vous travaillez vos contenus, il vous revient
également d’illustrer, quand c’est possible, vos pages. C’est beaucoup plus acceuillant
qu’un gros paragraphe et vous êtes beaucoup plus à même de savoir comment l’illustrer.
Je peux vous transmettre ma sensibilité, vous donnez des conseils, vous recommander
l’utilisation de photos plutôt que de Clip Art (pour être fidèle à l’image du Groupe)
 Où trouver des images, ça c’est autre problème?
Attention, toutes images requièrent des droits d’utilisation. Pour en savoir plus, je vous
invite à vous rapprocher de Mme TROGNEUX (Responsable de la Photothèque au
Développement) qui s’occupe d’un projet de Photothèque numérique.
En attendant, je vous ai mis à disposition quelques images sur
P:Dossiers_Banque_FederalePhotothèque