Your SlideShare is downloading. ×
Présentation MétierERGONOMIE & DESIGN
SOMMAIRE2. Rôle et Missions3. Ergonomie4. Etapes d’un projet5. Illustration
CHAPITRE1- RÔLE ET MISSIONS
1. RÔLE ET MISSIONS   Expériences         J’ai travaillé 5 ans en Agence Web             ■   Graphisme et Scénarisation ...
1. RÔLE ET MISSIONS Une valeur ajoutée aux Technologies    Approche et profil plus Com’ que Technique, meilleure compréh...
1. RÔLE ET MISSIONS   Convergences d’univers                                                                             ...
1. RÔLE ET MISSIONS Exemple de dysfonctionnement                   IBP a développé toute                                 ...
1. RÔLE ET MISSIONS Objectifs     Vous sensibiliser     Vous simplifier la vie     Parfois vous faire gagner du temps ...
CHAPITRE2- ERGONOMIE
Site fouilli, la « foire fouille », ça clignote dans tous                                         les sens et on ne s’est ...
2. ERGONOMIE Définition    L’ergonomie est l’étude de la meilleure adaptation entre les     fonctionnalités et les utili...
2. ERGONOMIE Principaux critères d’ergonomie    Compatibilité et homogénéité        ■ Respecter une logique de présentat...
CHAPITRE3- ETAPES D’UN PROJET
3. ETAPES D’UN PROJET   Cas typique pour les sites Intranet (quasi-même principe pour une appli, un site web…)           ...
3. ETAPES D’UN PROJET Termes employés        Arborescence / RubriquageL’organisation type et logique d’un site        S...
4. ILLUSTRATION Vous cherchez des images, moi aussi !    J’interviens au même titre que la charte graphique,     en amon...
Upcoming SlideShare
Loading in...5
×

Présentation Métier / Responsable Webdesign

687

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
687
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Présentation Métier / Responsable Webdesign"

  1. 1. Présentation MétierERGONOMIE & DESIGN
  2. 2. SOMMAIRE2. Rôle et Missions3. Ergonomie4. Etapes d’un projet5. Illustration
  3. 3. CHAPITRE1- RÔLE ET MISSIONS
  4. 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. 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. 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. 7. 1. RÔLE ET MISSIONS Exemple de dysfonctionnement IBP a développé toute l’appli transactionnelet d’insatisfaction client des BP, sans prendre en compte « l’identité » Banque Populaire et lesInterface impersonnel, loin de l’image attentes clients. DuBanque Populaire et de la manière coup, il nous a fallut être réactif et travaillerdont 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. 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. 9. CHAPITRE2- ERGONOMIE
  10. 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 Quest ce qui fait que certains sites/applications ont du succès et que dautres, 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 sontimportant, vient ensuite l’ergonomie bien distinctes… on s’y retrouve.: agencement, mise en avant… On espère que cet exemple serales 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’enqu’il recherche et faire en sorte approchent de plus en plus.qu’il est envie de revenir.Le coup de peinture c’est juste lapointe finale de séduction. Si tout cetravail en amont n’a pas été respecté,il n’y aura pas de miracle...
  11. 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é dergonomique quand il propose un mode de navigation aisé et intuitif permettant à ses visiteurs une prise en main rapide de ses fonctionnalités (ex: Clarity ) ■ Lergonomie vise ainsi à la fois une meilleure efficacité et un plus grand confort dutilisation.
  12. 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. 13. CHAPITRE3- ETAPES D’UN PROJET
  14. 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. 15. 3. ETAPES D’UN PROJET Termes employés  Arborescence / RubriquageL’organisation type et logique d’un site  Scénarisation / Maquettage Scénarisation dans PowerPoint (Zoning de contenu) Maquettage au besoin selon nouveautés…
  16. 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

×