SlideShare une entreprise Scribd logo
1  sur  16
Présentation Métier


ERGONOMIE & DESIGN
SOMMAIRE




2. Rôle et Missions

3. Ergonomie

4. Etapes d’un projet

5. Illustration
CHAPITRE




1- RÔLE ET MISSIONS
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
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.
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.
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.
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.
CHAPITRE




2- ERGONOMIE
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...
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.
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…)
CHAPITRE




3- 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…)
                          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
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…
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

Contenu connexe

Tendances

Refonte et Optimisation de site Web
Refonte et Optimisation de site WebRefonte et Optimisation de site Web
Refonte et Optimisation de site Web
WSI France
 
Conception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiquesConception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiques
Tarn Tourisme
 
Réussir sa création/refonte de site ADN et CDT 64
Réussir sa création/refonte de site ADN et CDT 64Réussir sa création/refonte de site ADN et CDT 64
Réussir sa création/refonte de site ADN et CDT 64
Emilie64
 
Audit personnalisé Performance Tourisme
Audit personnalisé Performance TourismeAudit personnalisé Performance Tourisme
Audit personnalisé Performance Tourisme
Performance_Tourisme
 

Tendances (20)

Comment améliorer l'expérience utilisateur
Comment améliorer l'expérience utilisateur Comment améliorer l'expérience utilisateur
Comment améliorer l'expérience utilisateur
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
Refonte et Optimisation de site Web
Refonte et Optimisation de site WebRefonte et Optimisation de site Web
Refonte et Optimisation de site Web
 
Formation : Techniques de rédaction web - Hack/Hackers Dakar
Formation : Techniques de rédaction web - Hack/Hackers DakarFormation : Techniques de rédaction web - Hack/Hackers Dakar
Formation : Techniques de rédaction web - Hack/Hackers Dakar
 
Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix
 
Entrez dans l'E-Tourisme 2012
Entrez dans l'E-Tourisme 2012Entrez dans l'E-Tourisme 2012
Entrez dans l'E-Tourisme 2012
 
Comment améliorer l'expérience utilisateur sur un site e-commerce ?
Comment améliorer l'expérience utilisateur sur un site e-commerce ?Comment améliorer l'expérience utilisateur sur un site e-commerce ?
Comment améliorer l'expérience utilisateur sur un site e-commerce ?
 
Création & refonte de site internet
Création & refonte de site internet Création & refonte de site internet
Création & refonte de site internet
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
Démarquez-vous par l'image
Démarquez-vous par l'imageDémarquez-vous par l'image
Démarquez-vous par l'image
 
Apprenez à plaire à Google pour bien positionner votre entreprise en ligne
Apprenez à plaire à Google pour bien positionner votre entreprise en ligneApprenez à plaire à Google pour bien positionner votre entreprise en ligne
Apprenez à plaire à Google pour bien positionner votre entreprise en ligne
 
Conception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiquesConception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiques
 
Réussir sa création/refonte de site ADN et CDT 64
Réussir sa création/refonte de site ADN et CDT 64Réussir sa création/refonte de site ADN et CDT 64
Réussir sa création/refonte de site ADN et CDT 64
 
Comment améliorer les performances de mon site web grâce à l'UX ?
Comment améliorer les performances de mon site web grâce à l'UX ?Comment améliorer les performances de mon site web grâce à l'UX ?
Comment améliorer les performances de mon site web grâce à l'UX ?
 
Audit personnalisé Performance Tourisme
Audit personnalisé Performance TourismeAudit personnalisé Performance Tourisme
Audit personnalisé Performance Tourisme
 
Créer un site internet efficace aujourd'hui !
Créer un site internet efficace aujourd'hui !Créer un site internet efficace aujourd'hui !
Créer un site internet efficace aujourd'hui !
 
Ai-je besoin d'une application mobile ?
Ai-je besoin d'une application mobile ?Ai-je besoin d'une application mobile ?
Ai-je besoin d'une application mobile ?
 
Atelier Numérique "Optimiser le contenu de mon site web"
Atelier Numérique "Optimiser le contenu de mon site web"Atelier Numérique "Optimiser le contenu de mon site web"
Atelier Numérique "Optimiser le contenu de mon site web"
 

En vedette

Maifeiertag
MaifeiertagMaifeiertag
Maifeiertag
YPEPTH
 
[weave] Risk and Compliance - FATCA
[weave] Risk and Compliance - FATCA[weave] Risk and Compliance - FATCA
[weave] Risk and Compliance - FATCA
onepoint x weave
 
R duction des pesticides
R duction des pesticidesR duction des pesticides
R duction des pesticides
steph079
 
Investissements d'avenir axe e education
Investissements d'avenir axe e educationInvestissements d'avenir axe e education
Investissements d'avenir axe e education
capdigital
 
Caso 2 el método algunas consideraciones
Caso 2 el método algunas consideracionesCaso 2 el método algunas consideraciones
Caso 2 el método algunas consideraciones
USET
 
Der muttertag
Der muttertagDer muttertag
Der muttertag
YPEPTH
 

En vedette (20)

Maifeiertag
MaifeiertagMaifeiertag
Maifeiertag
 
Votre site est il bien protégé ? - WordCamp Montréal 2012
Votre site est il bien protégé ? - WordCamp Montréal 2012 Votre site est il bien protégé ? - WordCamp Montréal 2012
Votre site est il bien protégé ? - WordCamp Montréal 2012
 
KWK: Die Suche nach dem richtigen Kompass
KWK: Die Suche nach dem richtigen KompassKWK: Die Suche nach dem richtigen Kompass
KWK: Die Suche nach dem richtigen Kompass
 
[weave] Risk and Compliance - FATCA
[weave] Risk and Compliance - FATCA[weave] Risk and Compliance - FATCA
[weave] Risk and Compliance - FATCA
 
Conférence de presse Tilkee/Orange
Conférence de presse Tilkee/OrangeConférence de presse Tilkee/Orange
Conférence de presse Tilkee/Orange
 
Para que no
Para que noPara que no
Para que no
 
Smart Home Lösung mit Video-Telefonie
Smart Home Lösung mit Video-TelefonieSmart Home Lösung mit Video-Telefonie
Smart Home Lösung mit Video-Telefonie
 
R duction des pesticides
R duction des pesticidesR duction des pesticides
R duction des pesticides
 
Enfermería y redes sociales, realidad o ficción?
Enfermería y redes sociales, realidad o ficción?Enfermería y redes sociales, realidad o ficción?
Enfermería y redes sociales, realidad o ficción?
 
Wirtschaftlichkeit von Elektromobilität in gewerblichen Anwendungen
Wirtschaftlichkeit von Elektromobilität in gewerblichen AnwendungenWirtschaftlichkeit von Elektromobilität in gewerblichen Anwendungen
Wirtschaftlichkeit von Elektromobilität in gewerblichen Anwendungen
 
Integration des ressources numeriques dans l’offre documentaire
Integration des ressources numeriques dans l’offre documentaireIntegration des ressources numeriques dans l’offre documentaire
Integration des ressources numeriques dans l’offre documentaire
 
Ein Jahr nach Fukushima: Ablauf einer Katastrophe -- was wir mittlerweile übe...
Ein Jahr nach Fukushima: Ablauf einer Katastrophe -- was wir mittlerweile übe...Ein Jahr nach Fukushima: Ablauf einer Katastrophe -- was wir mittlerweile übe...
Ein Jahr nach Fukushima: Ablauf einer Katastrophe -- was wir mittlerweile übe...
 
Arquitectura Orientada a Servicios para investigación (ejemplo de uso en Algo...
Arquitectura Orientada a Servicios para investigación (ejemplo de uso en Algo...Arquitectura Orientada a Servicios para investigación (ejemplo de uso en Algo...
Arquitectura Orientada a Servicios para investigación (ejemplo de uso en Algo...
 
Investissements d'avenir axe e education
Investissements d'avenir axe e educationInvestissements d'avenir axe e education
Investissements d'avenir axe e education
 
50 Trucos De Google
50 Trucos De Google50 Trucos De Google
50 Trucos De Google
 
Caso 2 el método algunas consideraciones
Caso 2 el método algunas consideracionesCaso 2 el método algunas consideraciones
Caso 2 el método algunas consideraciones
 
Codigo procesal penal
Codigo procesal penalCodigo procesal penal
Codigo procesal penal
 
Estrellita.vargas cuaderno_ct[1]
Estrellita.vargas  cuaderno_ct[1]Estrellita.vargas  cuaderno_ct[1]
Estrellita.vargas cuaderno_ct[1]
 
First20120426jhm
First20120426jhmFirst20120426jhm
First20120426jhm
 
Der muttertag
Der muttertagDer muttertag
Der muttertag
 

Similaire à Présentation Métier / Responsable Webdesign

Retours sur les Flupa UX-Days 2017
Retours sur les Flupa UX-Days 2017Retours sur les Flupa UX-Days 2017
Retours sur les Flupa UX-Days 2017
Nicolas GOYER
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL
 

Similaire à Présentation Métier / Responsable Webdesign (20)

Retours sur les Flupa UX-Days 2017
Retours sur les Flupa UX-Days 2017Retours sur les Flupa UX-Days 2017
Retours sur les Flupa UX-Days 2017
 
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane P...
 
Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"Livre blanc "Design des portails de formation"
Livre blanc "Design des portails de formation"
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
 
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
10 tendances digitales pour 2016
10 tendances digitales pour 201610 tendances digitales pour 2016
10 tendances digitales pour 2016
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UX
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
Concevoir des Interfaces Utilisateur efficaces et vendeuses
Concevoir des Interfaces Utilisateur efficaces et vendeusesConcevoir des Interfaces Utilisateur efficaces et vendeuses
Concevoir des Interfaces Utilisateur efficaces et vendeuses
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
 
Ux
UxUx
Ux
 
comment rédiger une expression de besoins
comment rédiger une expression de besoinscomment rédiger une expression de besoins
comment rédiger une expression de besoins
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...
Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...
Data + UX = décisions objectives pour optimiser la conversion - Ingrid Thonet...
 
Atelier startup « marque et stratégie design »
Atelier startup « marque et stratégie design »Atelier startup « marque et stratégie design »
Atelier startup « marque et stratégie design »
 
UX & Product Management en contexte agile Monozygotes ou dizygotes ? [Nadège...
UX & Product Management en contexte agile Monozygotes ou dizygotes ?  [Nadège...UX & Product Management en contexte agile Monozygotes ou dizygotes ?  [Nadège...
UX & Product Management en contexte agile Monozygotes ou dizygotes ? [Nadège...
 
Méthodologie de conception: user flow
Méthodologie de conception: user flowMéthodologie de conception: user flow
Méthodologie de conception: user flow
 

Présentation Métier / Responsable Webdesign

  • 2. SOMMAIRE 2. Rôle et Missions 3. Ergonomie 4. Etapes d’un projet 5. Illustration
  • 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.
  • 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…)
  • 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