Domaine Sciences des Interactions Humaines et SocialesMaster mention information, communication et société
Spécialité Contenus et Projets InternetParcours Gestion et Développement de Projets
Ergonomie, accessibilité et webdesign d'un système de gestion de contenus
et du site internet le présentant
ParLaurence Jacquet
Tuteur universitaire : Brigitte Simonnot
Année universitaire 2005 – 2006
Remerciements
Merci à ma tutrice, Brigitte Simonnot mais aussi à tous les enseignants de M2 CPI.
Merci au personnel de la société ICOM de m'avoir si bien accueilli et proposé un stage très
intéressant ainsi que pour tous leurs conseils et pour m'avoir permis de mettre en pratique une partie
de mes recherches réalisées pour le mémoire de recherche.
Merci à toutes les personnes qui ont pris le temps de lire ou relire ce rapport de stage.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 1
Table des matières
1.Cadre du projet professionnel........................................................................................................3 1.1 Parcours universitaire .............................................................................................................. 3 1.2 Projet professionnel.................................................................................................................. 4 1.3 Présentation de l'entreprise d’accueil........................................................................................4 1.4 Compétences mobilisées et qualifications requises.................................................................. 7 1.5 Ressources disponibles............................................................................................................. 8
2.Objectifs du projet de stage .........................................................................................................10 2.1 Objectifs de l'entreprise.......................................................................................................... 10 2.2 Objectifs de l'étudiant............................................................................................................. 11
3.Évaluation de la conduite du projet ............................................................................................12 3.1 Description analytique............................................................................................................ 12
Contexte du projet.....................................................................................................................12Progression du travail................................................................................................................16Travail effectué durant le stage.................................................................................................20
3.2 Évaluation critique..................................................................................................................45Les moyens mis en oeuvre ....................................................................................................... 45Conception, gestion de projet et réalisation des travaux ..........................................................47Analyse critique du résultat.......................................................................................................48
4.Bilan général du projet professionnel .........................................................................................50 4.1 Éléments d'appréciation de la maîtrise du projet ................................................................... 50 4.2 Apports de l'entreprise............................................................................................................ 50 4.3 Évaluation du stage ................................................................................................................51
Glossaire............................................................................................................................................ 52
Bibliographie.....................................................................................................................................53Webographie ....................................................................................................................................53
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 2
1. Cadre du projet professionnel
1.1 Parcours universitaire
Sortie du lycée avec un Bac Scientifique option physique chimie, je m'intéressais déjà au monde de
l'informatique, c'est pourquoi j'ai opté pour une orientation professionnelle orientée vers les
nouvelles technologies : le DEUST TIC (Diplôme d'études universitaire scientifique et technique
dans les technologies de l'information et de la communication et de développement local).
Ce diplôme professionnel en 2 ans m'a fait découvrir les bases de l'informatique théorique et
pratique avec différents modules orientés vers les NTIC et le monde de l'entreprise. A la fin de
cette formation, j'ai réalisé un stage de deux mois dans la société Interact. Le but de mon stage était
la création de chartes graphique, l'intégration de sites Web et la création de lettres d'informations
pour la promotion de leurs clients.
Suite à l'obtention de ce diplôme avec mention Assez Bien en étant classée 3ème de la promotion,
je pouvais continuer mes études via la MST TIC (Maîtrise en Sciences et Techniques des
Technologies de l'Information et de la Communication). Durant les deux années de préparation de
ce diplôme, j'ai découvert une nouvelle façon de travailler : en utilisant la combinaison du XHTML
et des CSS, je pouvais créer des sites plus légers, plus simples à modifier mais aussi aux normes
actuelles, permettant une compatibilité entre les navigateurs modernes et une accessibilité pour le
plus grand nombre.
Ces quatre années d'études à l'Université m'ont aussi permis de m'auto-former dans les domaines de
l'ergonomie et de l'accessibilité, domaines qui me tiennent aujourd'hui à coeur. Les notions de
gestion de projet abordées en MST TIC ainsi que le stage de fin d'année m'ont poussé à orienter ma
cinquième année d'études dans le domaine de l'information et de la communication, afin
d'approfondir mes connaissances en gestion de projet et dans les domaines des nouvelles
technologies de l'information et de la communication, via le Master 2 CPI (contenus et projets
internet).
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 3
1.2 Projet professionnel
Depuis quelques années, je sais que ma formation plutôt technique peut me permettre de me diriger
à long terme vers de la gestion de projet. J'espère pouvoir continuer à intervenir à toutes les étapes
de la création d'un projet, en proposant mes solutions pour améliorer l'ergonomie et l'accessibilité
des sites Web ainsi que mes connaissances et ma créativité pour la création des chartes graphiques
de ces sites. Ma formation technique devrait me permettre de trouver un emploi dans le domaine du
conseil ou de la création Web car je n'ai pas encore de longue expérience, mais avec le temps,
j'espère pourvoir prendre plus de responsabilités et ainsi m'orienter vers un poste de chef de projet,
grâce aux connaissances acquises lors de la fin de mes études universitaires.
De plus, grâce aux travaux d'études et de recherche proposé par l'université, j'ai pu étendre mon
savoir concernant le développement orienté utilisateur, ce qui ajoute une compétence
supplémentaire à mon profil, déjà orienté vers l'ergonomie.
1.3 Présentation de l'entreprise d’accueil
ICOM, conseil en communication plurimédia ICOM, agence conseil spécialisée depuis près de vingt ans en communication publique et corporate,
est au service des entreprises privées et publiques. ICOM est animée par les valeurs d’équité, de
respect et de responsabilité et par des principes d’action fondés sur l’écoute et la proximité
partenariale. Ses prestations se caractérisent par la convergence de compétences intégrées et de
savoir-faire spécialisés plurimédia à la fois stratégiques et créatifs.
Ses prestations et ses compétences s’organisent en trois pôles d’activités stratégiques
complémentaires :
ICOM communication
• Conseil et stratégie : audit, étude, recommandations et accompagnement stratégiques,
campagne publicitaire.
• Création et production de contenus éditoriaux : création graphique, conception-
rédaction, édition.
• Organisation d’événements : logistique, animation-programmation, gestion des
partenaires et des publics, réalisation des supports, relations presse.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 4
ICOM multimédia
• Création et production Web et vidéo : conseil et stratégie de communication on line,
conception et réalisation de sites internet et intranet.
• Création de contenus éditoriaux, production et réalisation de films (télévision, vidéos
d’entreprise), ingénierie audiovisuelle d’événements, Web TV, motion design,
animation 3D, création de DVD.
ICOM formation
• Formation à la communication : consulting, ingénierie pédagogique, coaching,
interventions en présentiel et e-formation.
De la stratégie à l’opérationnel Lorsqu'un client consulte ICOM pour la mise en œuvre de son action de communication, ICOM
mettra à sa disposition ses compétences humaines (conseiller en communication, concepteur-
rédacteur, directeur artistique, webdesigner …) et ses moyens techniques, afin de mettre en place,
en collaboration avec le client les supports et les médias qui lui permettront d’engager une
communication de qualité, efficace et pérenne.
ICOM met aussi à la disposition de ses clients son savoir-faire en communication stratégique, sa
capacité en gestion de production et management de projet, ses compétences éditoriales
(rédaction…) ainsi que ses compétences créatives pour la réalisation de tous supports de
communication plurimédia (édition, Web)
Pour le management d'un projet, ICOM organise sa production grâce à des outils méthodologiques
de suivi qualité comme :
– la mise à disposition d’un interlocuteur principal pour l’ensemble du projet, interface entre
le commanditaire et les équipes ayant pour mission :
d’organiser et piloter la prestation
de garantir la pertinence stratégique
d’assurer le suivi qualité de la mission (respect des objectifs et des délais)
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 5
– le repérage préalable des interlocuteurs et de leurs rôles respectifs
– le rétroplanning/workflow servant d'outil de pilotage et d'avancée des travaux en fonction
des tâches et des différentes dead-line (le directeur de l'agence et le chef de projet en sont
les garants) avec pour objectif de baliser les différentes étapes et les différentes
validations successives nécessaires et les conditions de réception et d’acceptation des
différents produits finaux et intermédiaires
– le conventionnement du workflow qui sert d'exigence mutuelle tant de la part du client
que de l'agence en fonction des contraintes spécifiques du client
– la fourniture continue d'épreuves laser couleur et/ou de BAT (Bon à Tirer) numérique au
format PDF pour validations successives (serveur internet avec espace dédié)
– l'utilisation de compte-rendu de réunions actant les décisions
– la validation par le client des différents BAT , PAD (Prêt à Diffuser), BAP (Bon À
Publier, Mise en Ligne)
Les réseaux d’appartenance La société ICOM est en relation avec de nombreux acteurs, présentés ci-dessous :
• Club de la communication Toulouse Midi-Pyrénées
• UJJEF (L’interprofessionnelle de la communication d’entreprise)
• FREMP (Fédération Régionale des Entreprises du Multimédia Midi-Pyrénées)
• Le Directeur Général est membre du Centre des Jeunes Dirigeants section de Toulouse et du
Club Rotary Toulouse Ovalie
• La Directrice Administrative et Financière est administratrice de l’AGEFOS/PME
• La Directrice Adjointe de l’agence est membre de la Jeune Chambre Économique de
Toulouse
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 6
1.4 Compétences mobilisées et qualifications requises
Les différentes missions et tâches qui m'ont été confiées nécessitent diverses compétences et
qualification que j'ai pu acquérir tout au long de mes études. On pourra diviser ces compétences en
plusieurs domaines d'activités, dans la mesure ou j'ai eu l'occasion de toucher à toutes les étapes de
la vie d'un projet, durant ce stage, réalisé pour la société ICOM, en télétravail.
Gestion de projetLa notion de travail à distance implique forcément d'apprendre à gérer son temps, de savoir se poser
des limites ainsi que de maîtriser les nouvelles technologies de communication telles que les
messageries instantanées, la vidéo conférence ou les courriers électroniques. Ces connaissances sont
indispensables pour le bon déroulement d'un stage à distance. La mise en place d'une liste
d'objectifs initiaux en collaboration avec toute l'équipe ainsi que la rédaction des documents tout au
long de la conception du projet de stage ont aussi nécessité des compétences précises acquises lors
des cours de M2CPI ainsi que la découverte de nouvelles techniques de gestion de projet lors de la
rédaction de mon mémoire de recherche.
ErgonomieLa réflexion ergonomique sur l'outil Blyss CMS a été réalisée sur les bases des cours d'ergonomies
auxquels j'avais déjà pu assister depuis le début de mes études, mais aussi grâce a une longue
observation des systèmes de gestions de contenus et de leurs problèmes d'ergonomie. En
m'appuyant mes propres connaissances, sur les avis des utilisateurs et sur des livres, j'ai pu
m'auto-former tout au long de ce stage sur ce domaine qui m'intéresse depuis quelques années.
WebdesignLa création de maquettes, d'icônes et d'éléments graphiques nécessite une connaissance approfondie
de logiciels de création d'images. Cependant, un logiciel tel que Photoshop possède tant de
fonctionnalités que la simple utilisation du logiciel permet de se former soi-même sur l'outil, mais le
webdesign ne se résume pas a cela. Il faut savoir mélanger avec harmonie les formes et les couleurs,
pour aboutir à un résultat cohérent avec l'image de marque du produit ou de la société.
Développement WebMes compétences en programmation ont été nécessaires à plusieurs niveaux : tout d'abord pour
évaluer la faisabilité des recommandations que je devais rédiger, mais aussi pour réussir le passage
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 7
de la maquette du site à la version en XHTML/CSS.
Ces compétences ont été acquises durant toutes les année passées à l'Université, cependant, ces
technologies évoluant constamment et rapidement, il est nécessaire de s'auto-former régulièrement
et de réaliser une veille technologique soutenue afin d'avoir des connaissances à jour sur ces
technologies.
Aussi, même si mon rôle dans ce stage n'était pas de programmer des sites en PHP, j'ai eu l'occasion
de me trouver face au code et sa connaissance m'a permis d'éviter de perdre du temps à me former
sur les langages de programmation pour comprendre ce code.
1.5 Ressources disponibles
Afin de réaliser ce stage dans les meilleures conditions, de nombreuses ressources étaient à ma
disposition.
Ressources matériellesFaire un stage en télétravail n'est possible que si l'on possède une machine chez soi. Les ressources
matérielles de ce stage sont donc ma propriété. Les voici :
• Un ordinateur de bureau
• Un ordinateur portable (pour les déplacements et pour travailler dans les locaux d'ICOM)
• Une webcam et un micro (pour les vidéo conférences)
Ressources logiciellesUne de mes volontés pour ce stage était d'utiliser un maximum de logiciels libres ou gratuits pour
réaliser mes missions.
Exceptés quelques logiciels professionnels tels que Windows (pour les tests) ou Photoshop (pour
les maquettes de sites), le reste des mes besoins logiciels pouvait largement être comblé grâce à des
logiciels libres ou gratuits, listés ci-dessous:
• Skype : vidéoconférences et messagerie instantanée,
• Gaim : messagerie instantanée gérant les protocoles MSN, AIM, ICQ, Yahoo et Jabber,
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 8
• Thunderbird : gestion et rédaction des courriers électroniques,
• Opera, Safari, Firefox : navigation sur internet, test de compatibilités des sites,
• Webdeveloper Toolbar : Plug-in de Firefox, facilite le développement des applications
Web.
• Ubuntu (Linux) : systèmes d'exploitation,
• OpenOffice : rédaction de la documentation.
Ressources documentairesA chaque étapes des missions, j'ai dû me documenter, pour mieux comprendre une application,
trouver de nouvelles idées, vérifier si l'accessibilité des sites respectaient les normes, ou tout
simplement pour éclaircir mes doutes ou mes questions sur la gestion de projet. Ces documents,
pages Web, livres ou notes de cours, m'ont été très utiles tout au long du stage et constituent pour
moi une mine précieuse d'informations.
Pour mieux connaître l'outil sur lequel portait mon stage, Blyss CMS, j'ai pu me documenter grâce à
une démonstration et des documents explicatifs : notes d'aide pour les utilisateurs, présentation de
l'outil, etc.
Mes réflexions sur l'ergonomie et l'accessibilité de Blyss CMS et du site de Blyss ont aussi
nécessité des ressources documentaires au format papier et électronique :
• Livre : "Créer des sites accessibles à tous" A. Afchain et J. Lanceraux,
• Livre : "Conception de sites Web, L'art de la simplicité" J. Nielsen,
• Site Web : recommandations du W3C ( http://www.w3c.org ) ,
• Site Web : les bonnes pratiques de Opquast ( http://www.opquast.com/ ) ,
• Site Web : les tutoriels d'Alsacréations ( http://www.alsacreations.com ).
D'autres ressources documentaires m'auront aussi servi de support dans le domaine de la gestion de
projet. Ainsi, les notes de cours de gestion de projet auront été d'une grande aide tout au long du
stage, même si j'ai aussi eu l'occasion d'appuyer ces connaissances sur deux ouvrages :
• Livre : "Conduite de projet Web" S. BORDAGE
• Livre : "[Re]design Web [2.0]" K. GOTO et E. COTLEL
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 9
2. Objectifs du projet de stage
2.1 Objectifs de l'entreprise
ICOM m'a proposé de travailler sur deux missions reliées à un de leur produit : leur solution de
gestion de contenu Blyss CMS. C'est un outil souple, évolutif et simple conçu, autour de deux
concepts fondateurs : l’accès de l’internaute à l’information et la facilité de mise à jour du site.
Réflexion sur l'ergonomie de Blyss CMS Lors de mon arrivée au sein de l'entreprise ICOM, leur produit de création de site Web, Blyss CMS,
était déjà fonctionnel. Grâce a un moteur très performant, Blyss CMS permettait déjà de construire
et modifier un site, d'ailleurs, il était déjà utilisé chez un grand nombre de leur clients. Cependant,
l'outil, bien que performant, n'était pas simple à utiliser. ICOM m'a ainsi demandé d'intervenir sur
l'ergonomie générale de leur produit, mais aussi de trouver des options de fonctionnement pour
simplifier au maximum cet outil de gestion de contenus.
ICOM m'a proposé cette mission afin que je puisse apporter un nouveau regard sur une application
que tout le monde avait l'habitude d'utiliser dans l'entreprise. Cette habitude avait pour effet
d'effacer tout problème d'utilisabilité aux yeux des développeurs et des utilisateurs de l'entreprise.
Ils comptaient essentiellement sur mon profil technique et mes connaissances en matière
d'ergonomie et d'accessibilité pour que je puisse proposer des solutions réalisables et une véritable
réflexion sur l'utilisabilité de cette application.
Création du site internet présentant Blyss CMS.Ma seconde mission portait sur le site internet visant à présenter l'outil sur lequel je venais de
travailler. On m'a donc demandé de concevoir et de réaliser ce site, qui utiliserait comme moteur la
nouvelle version de Blyss CMS.
De l'analyse de la concurrence à l'intégration des contenus, en passant par le cahier des charges, le
design et l'intégration au format XHTML/CSS, le projet m'a été confié de A à Z.
Le premier objectif d'un tel site est surtout de démontrer aux visiteurs de ce dernier les possibilités
et la stabilité de leur CMS. Pour cela, il est nécessaire de séduire l'utilisateur au niveau visuel grâce
à un design percutant et en cohérence avec l'image de la société ICOM.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 10
Le visiteur sera alors plus motivé pour visiter le site et pourra ainsi s'informer sur toutes les
fonctionnalités de Blyss CMS.
De plus, leur souhait était, depuis le début, que je prenne le projet en main dans sa totalité, en
présentant régulièrement des livrables soumis à leur validation, afin que je puisse gérer seule mon
travail, tout en me donnant des conseils pour organiser au mieux mes travaux.
2.2 Objectifs de l'étudiant
Le choix du stage et son contexteParmi diverses offres de stage, j'ai retenu celle d'ICOM pour plusieurs raisons : tout d'abord, c'est
une des rares entreprises me proposant un stage avec de réelles responsabilités ainsi que des projets
très intéressants, en relation avec mon projet professionnel. Aussi, ICOM me proposait la possibilité
de réaliser ce stage en télétravail. Ayant toujours voulu tester ce mode de travail, une période de six
mois m'a semblé une bonne occasion de réellement m'adapter aux conditions du télétravail, avec ses
contraintes, ses déplacements et ses modes de communications.
Mes objectifsLes deux missions que la société ICOM m'a proposé correspondaient parfaitement à mes attentes :
en effet, celles-ci me permettaient de travailler sur la conception et la réalisation d'au moins deux
projets différents mais complémentaires. Le mode de travail proposé m'a aussi donné l'occasion de
pourvoir apprendre à gérer mon temps, en prenant comptes des diverses contraintes liées aux
projets, en appliquant les notions de gestion de projet vues en cours durant l'année de Master 2.
Une des raisons motivant mon choix de stage était le fait de pouvoir étendre mes connaissances en
matière d'ergonomie et d'accessibilité, grâce à des projets orientés utilisateurs. Un autre de mes
objectifs était de ne pas trop m'éloigner d'une de mes premières passions, le webdesign.
Ce stage avait donc pour objectif principal de me faire découvrir toutes les étapes d'un projet dans
les conditions réelles du monde du travail.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 11
3. Évaluation de la conduite du projet
3.1 Description analytique
Contexte du projet
Le projet de ce stage se découpait en deux missions, réparties sur 6 mois et s'est réalisé en parallèle
de la rédaction de mon Travail d'Études et de Recherche, sur le thème de « L'amélioration de la
conception de sites Web au service de l'information pour tous ».
L'équipe avec laquelle j'ai eu l'occasion de travailler durant ces 24 semaines se compose de profils
très différents mais tout à fait complémentaires dont voici les acteurs :
Chef d'équipe :
Julien MARQUIÉ
Responsable du Pôle Multimédia et chef de projet communication de la société ICOM, il s'est
chargé de la validation de mes travaux tout en me guidant tout au long du stage.
Équipe de développement :
Benoit CLERC, Frédéric GROSRENAUD, Christophe MEYER
Une équipe dynamique et réactive avec qui j'ai travaillé en collaboration pendant toute la durée
du stage. Attachée et sensibilisée au standards du Web, cette équipe m'a permis d'apprendre de
nouvelles techniques d'intégration afin d'améliorer l'accessibilité des sites Web.
Équipe graphisme :
Alice BENOUN, Olivier RIDET
Chargés des créations graphiques en général, ils m'ont conseillé lors de la conception des
maquettes du site blyss.fr.
Rédaction des contenus :
Claire GODINOU
Stagiaire au sein de la société ICOM, elle s'est chargée en partie de la rédaction des contenus
Web du site blyss.fr.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 12
De part la nature du stage, c'est la gestion de projet agile qui s'est imposée naturellement. En effet,
le principe des cycles itératifs de courte durée correspondait exactement au rythme du télétravail.
De plus, la recherche et l'étude de solutions permettant d'améliorer l'accessibilité des sites Web m'a
permis de découvrir et d'appliquer deux autres type de développement, en plus des méthodes
agiles : le développement centré utilisateur et le développement centré utilisation.
Via des tests réguliers en collaboration avec les employés de la société ICOM et des vérifications de
la cohérence du projet à chaque itération, les diverses tâches à effectuer ont permis de réaliser
efficacement les deux missions proposées par la société ICOM, dont les buts n'étaient pas
clairement définis au début du stage.
En effet, si tous les intervenants savaient quels étaient les besoins inhérents au projet, le but des
missions était aussi de détecter les problèmes existants et de proposer des solutions pour améliorer
les interfaces des utilisateurs. Ainsi, la définition des objectifs et leur remise en question
permanente avait pour but de permettre de redéfinir à nouveau les objectifs à n'importe quelle
itération afin d'atteindre un meilleur niveau de qualité pour le projet.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 13
La gestion de projet agile implique de déterminer avec précision, et ce, dès l'initialisation du projet,
les objectifs à réaliser, ainsi que le temps alloué pour chacun d'entre eux.
Ce tableau récapitulatif des objectifs m'a permis de vérifier, tout au long du projet, l'évolution des
missions par rapport au temps prévu, tout comme un planning de Gantt pour une gestion de projet
plus classique.
N° de tâche Description des objectifs Temps alloué Mission
1 Découverte de l'outil et mise en place des objectifs 2 semaines
2 Étude concurrentielle 1 semaine
3 Définition du cahier des charges du site blyss.fr 1 semaine
4 Maquette papierIdentité visuelle des packages blyss 1 semaine
5 Proposition de 3 maquettes pour blyss.fr 3 x 1 semaine
6 Création de la maquette finale, page d'accueil 1 semaines
7 Création de la maquette finale, page intérieure 1 semaine
8 Intégration des maquettes (XHTML/CSS) 1 semaine
9 Rédaction des lignes directrices du contenu du site 1 semaine
Site blyss.fr
10 Rédaction des recommandations ergonomiques pour l'interface d'administration de Blyss CMS 2 semaines
11 Choix des icônes et création des maquettes des éléments graphiques de l'interface d'administration
1 semaine
12 Créations des maquettes des éléments d'interface de l'administration (Boites de dialogues, fenêtres ...)
1 semaine
13 Intégration des maquettes de l'administration (XHTML/CSS) 3 semaines
Zone d'administration
de Blyss CMS
TEMPS TOTAL 19 semaines
Tableau 1 : Description des objectifs initiaux
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 14
Sur un stage de 24 semaines, 19 semaines sont allouées à la réalisation des objectifs permettant de
réaliser les deux missions proposées par ICOM. Il reste donc une marge de 20% du temps total,
pour gérer les divers problèmes qui pourraient se poser durant le stage.
La notion de risque est réellement importante dans un projet, même lorsqu'il est géré de manière
agile. C'est pourquoi, suite à la définition des objectifs, j'ai réalisé une évaluation des divers
problèmes que le projet pourrait rencontrer. Grâce à cette marge de temps, le projet avait alors plus
de chances d'aboutir à la fin en temps voulu.
N° Description du risque Temps prévu
1 Arrêt maladie personnel 1 semaine
2 Déménagement de la société (équipe peu disponible) 2 semaines
3 Retard divers 1 semaine
4 Aider l'équipe sur d'autres projets 2 semaines
Tableau 2 : Description des risques du projet
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 15
Progression du travail
Les étapes du projet
Les deux missions, qui se sont déroulées quasiment l'une à la suite de l'autre, ont suivi les mêmes
étapes de gestion de projet, c'est-à-dire une suite de six phases :
initialisation,
conception,
réalisation,
tests,
validation,
mise en production.
Les phases d'initialisation se sont toujours déroulées en grande partie dans les locaux de la société
ICOM, afin de mettre en place les objectifs des missions lors de réunions et de discussions avec les
équipes projet. Ces discussions avaient aussi pour but de débattre des solutions proposées lors des
réunions, pour permettre à chacun des acteurs de proposer ses conseils et remarques concernant la
mission.
Les périodes de conception des deux missions pouvaient tout à fait être réalisées à distance, car
seule une connexion à Internet était nécessaire pour réaliser l'étude de la concurrence, pour déceler
les problèmes de l'existant afin d'y apporter des solutions techniques, dans le cas de l'interface
d'administration de Blyss CMS, mais aussi afin de fournir une documentation détaillée des
exigences inhérentes aux missions, pour les structurer et les décrire. Cette liste des tâches à réaliser
était ensuite étudiée pour déterminer le temps à allouer à chaque exigence. Puis elle était soumise
au chef d'équipe (tenant ici le rôle du client) qui devait choisir les tâches à réaliser sur chaque
période.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 16
Les phases de réalisation des deux missions se sont déroulées de manière très spécifiques, en
suivant les solutions proposées dans mon Travail d'Étude et de Recherche. J'ai donc fonctionné
selon des cycles itératifs de courte durée, me permettant de réaliser les différentes tâches
nécessaires à distance, en exécutant pour chaque élément créé – code ou graphique – des tests en
collaboration avec l'équipe de développement, ainsi que la vérification de la cohérence du projet à
chaque itération en suivant les règles d'ergonomie proposées par Constantine1 : visibilité , structure,
réutilisation, tolérance et simplicité.
À chaque itération, le travail effectué était validé par le chef d'équipe et ses retours étaient pris en
compte afin d'améliorer la qualité du projet. Si une erreur était détectée lors de la validation de
l'itération, l'itération suivante avait pour but de corriger cette erreur, puis passer au développement
d'une autre exigence.
Une des particularités de la phases de réalisation est la gestion des documents et des éléments
produits : dans le cas de ce stage, il était réellement important de centraliser les documents produits
pour que tous les intervenants puissent accéder à ces ressources. En stockant toutes les données sur
le même serveur et en prévenant les intervenants des dernières modifications par courrier
électronique, toute l'équipe du projet était au courant de l'état d'avancement des travaux et pouvait
contribuer au projet dans les meilleures conditions.
Les tests finaux des deux missions se sont alors révélés très courts et peu importants, dans la mesure
où les tests réguliers dûs au développement agile avaient déjà permis de déceler la majorité des
erreurs du projet. Cependant, il était important de vérifier une dernière fois les travaux dans leur
ensemble, avant la validation finale autorisant la mise en production du projet.
La validation finale du projet est ensuite réalisée par le chef d'équipe, en collaboration avec tous les
intervenants, puis la mise en production est exécutée par l'équipe de développement.
Dans le cas de ce stage, mes relations avec les autres intervenants des missions se sont déroulées en
grande majorité par messagerie instantanée ou par courrier électronique, ce qui n'est pas forcément
évident à gérer au début : en effet, les autres acteurs avaient d'autres missions à réaliser en parallèle
de ce projet, ce qui ne facilite pas la mise en place des cycles de tests et de validation, mais grâce a
une bonne coordination agencée par le chef d'équipe, les missions se sont bien déroulées.
1 Voir TER, page 24
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 17
Le calendrier de travail
Ce calendrier de travail permet de résumer facilement le déroulement du stage, tout en expliquant
quelles tâches ont été réalisées en parallèle par les équipes de la société ICOM. Pour chaque
semaine, une itération est réalisée, comprenant la réalisation, les tests et la validation des travaux
par le chef d'équipe ainsi que l'analyse des retours faits par l'équipe du projet.
Mois Semaine Travail réalisé En parallèle, dans la société
Mars
13/03 – 17/03Déplacement Metz-Toulouse Découverte de Blyss CMSPrésentation des projets
Étude des besoins pour le site de Blyss
20/03 – 24/03 Étude de la concurrenceMise en place des objectifs Mise en place des objectifs
27/03 – 31/03Rédaction du cahier des charges du projet de site blyss.fr et des besoins en accessibilité du site
Avril
03/04 – 07/04
Discussions avec les graphistes concernant l'identité visuelle du produit : Blyss CMS.Zoning de la page d'accueilIdentité visuelle des packages Blyss
10/04 – 14/04 Maquette n° 1
17/04 – 21/04 Maquette n° 2
24/04 – 28/04 Maquette n° 3
Développement logiciel de Blyss CMS par l'équipe de développement
Mai
01/05 – 05/05
Analyse des retourséchanges avec les graphistes pour optimiser l'espace nécessaire à la création de la maquette n° 4
08/05 – 12/05
Création de l'entête du siteAmélioration de la navigationConception et modification de l'animation Flash qui présentera les packages Blyss.
L'équipe de graphistes s'occupe des animations Flash
15/05 – 19/05 Maquette de la page intérieure
22/05 – 26/05 Intégration des maquettesTests des pages.
Développement logiciel de Blyss CMS par l'équipe de développement
Tableau 3 - partie 1 : Calendrier de travail
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 18
Mois Semaine Travail réalisé En parallèle, dans la société
Juin
29/05 – 03/06
Déplacement Metz-ToulouseRéunion concernant le projet de l'administration de Blyss CMSAnalyse des besoins
05/06 – 09/06Rédaction des recommandations ergonomiques de l'interface d'administration
12/06 – 17/06 Rédaction des grandes lignes des contenus de blyss.fr
Intégration des éléments XHTML et CSS dans le code de Blyss CMS
19/06 – 23/06Sélection des icônesCréation d'icônes spécifiques au CMS
Rédaction des contenus, premier document.
26/06 – 30/06 Création des interfaces utiles aux besoins des utilisateurs
Déménagement d'ICOM dans leurs nouveaux locaux.
Juillet
03/07 – 07/07 Pause : Arrêt maladie
10/07 – 13/07 Intégration et tests de l'interface d'administration (toolbar)
17/07 – 21/07 Intégration et tests de l'interface d'administration (menu et blocs)
24/07 – 28/07 Intégration et tests de l'interface d'administration (pop-ups)
Développement logiciel de Blyss CMS par l'équipe de développement
Août
31/07 – 04/08 Analyse des besoins de la société Kairn
07/08 – 18/08 Pause : Congés
21/08 – 26/08 Cahier des charges du site de Kairn
Rédaction des contenus (version longue)
28/08 – 01/09 Travail sur l'identité graphique de la société Kairn
Septembre 04/09 – 08/09 Rédaction du rapport de stage
Tableau 3 - partie 2 : Calendrier de travail
Comme on peut l'observer, ce calendrier respecte totalement le déroulement des objectifs prévus
dans le tableau 1 et un des risques présentés dans le tableau 2, un arrêt maladie d'une semaine, s'est
en effet réalisé.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 19
De plus, cet arrêt maladie dû à une tendinite du poignet droit m'a permis de mieux comprendre les
problèmes de navigation des personnes à mobilité réduite sur Internet, mais aussi de pouvoir tester
l'efficacité des raccourcis de navigation.
La répartition des tâches
Les missions que la société ICOM m'a confié comprenaient la gestion des équipes du projet ainsi
que le développement de certaines parties, graphiques, ergonomiques ou rédactionnelles.
Voici comment les différentes tâches ont été réparties sur toute la durée du projet :
Le développement logiciel a été réalisé par l'équipe de développement, qui m'a aussi aidé à
prendre le CMS Blyss en main rapidement, dès les premiers jours du stage.
Les animations Flash ont été préparées par l'équipe des graphistes, qui m'a conseillé durant de la
création des maquettes.
La validation des travaux était tenue par le chef d'équipe, qui prenait en compte mes remarques
et mes conseils à chaque itération.
Les tests ont étés réalisés et mis en place en collaboration avec l'équipe technique, qui a pu
tester de nombreux éléments des projets sur les employés de la société.
Les contenus ont été rédigés par une stagiaire de la société ICOM, spécialisée en
communication et multimédia.
Travail effectué durant le stage
Blyss.fr , le siteLa mise en place de la mission consistant à créer le site Internet, qui présentera le système de
gestion de contenus Blyss, a nécessité la création de nombreux documents, maquettes et pages Web.
Ces documents sont présentés ci-après et disponible dans leur totalité en annexes.
Le cahier des charges
La rédaction du cahier des charges a débuté par la découverte et l'étude du CMS qui serait présenté
par le site à réaliser. J'ai donc pris du temps d'explorer au mieux les différentes fonctionnalités
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 20
proposées par l'outil, afin de trouver des nouvelles idées d'amélioration, mais cela m'a aussi permis
d'étudier ses points forts et ses points faibles. A partir de cette étude, j'ai commencé à rédiger les
grandes lignes du contenu qui seraient présenté dans le site final.
Pour compléter ces lignes directrices du contenu, j'ai fait une rapide étude de la concurrence qui a
permis de préciser le positionnement du produit face à ses concurrents, au niveau géographique
mais aussi face aux solutions des systèmes de gestion de contenus gratuits ou payants, disponibles
au téléchargement sur Internet. En effet, même si la société ICOM possède une majorité de clients
dans une zone que l'on pourrait définir comme locale, c'est-à-dire souvent situés dans la région
Midi-Pyrénées, il ne faut pas s'arrêter aux solutions proposées par des concurrents locaux. Un
listing complet des point forts et des point faibles des concurrents a permis la description des
fonctionnalités manquantes du produit mais aussi l'argumentaire nécessaire à la mise en valeur de
Blyss CMS. Une fois le contenu créé, j'ai travaillé sur l'arborescence pour que l'information soit
structurée logiquement et naturellement pour le visiteur du site, en suivant les règles d'or de
l'ergonomie pour se limiter à une navigation simple à mémoriser par l'utilisateur. C'est en prenant
l'arborescence du site comme base que le zoning de la page d'accueil à été réalisé, définissant
comment le contenu serait structuré dans cette page.
Un des points les plus importants de ce cahier des charges était la proposition de fonctionnalités
essentielles sur le site, pour favoriser l'accessibilité des visiteurs et leur permettre de mieux naviguer
dans le site.
Ce cahier des charges est disponible en annexe n°1, page 2.
La liste des objectifs initiaux
Le type de gestion de projet, associant méthodes agiles, développement centré utilisateur et
développement centré utilisation, nécessite de mettre en place, dès le début de projet, un ensemble
d'objectifs initiaux qui détermineront le rythme des tâches à réaliser.
Lors de la définition de ces tâches, il est important de leur attribuer une durée, ou du moins un
nombre de cycles itératifs d'une semaine et de connaître les interdépendances de chaque tâche, afin
de les lister dans le bon ordre. Cette liste d'objectifs à atteindre tient alors la place du planning de la
gestion de projet Web classique.
La liste des objectifs des deux missions est visible dans le tableau 1.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 21
Les maquettes de l'interface du site
L'identité visuelle du système de gestion de contenu existait déjà lors de mon arrivée au sein de la
société ICOM, c'est donc à partir de quelques éléments graphiques tels que le logo, une typographie
et les couleurs du logo que l'on m'a demandé d'imaginer plusieurs interfaces de pages d'accueil du
site qui présenterait Blyss.
Excepté les éléments graphiques déjà créées, la seule directive donnée par le chef d'équipe était de
réaliser des maquettes représentant le coté « zen et chaleureux » de l'outil, mais avec un design
simple, créant une navigation ergonomique et efficace. Sachant qu'il s'agissait de la première page
du site, il était important d'y afficher un maximum d'informations importantes, tout en modérant
cette importance pour éviter de perturber l'utilisateur en le noyant sous une quantité trop importante
d'information : le but de cette première page est tout simplement d'expliquer au visiteur ce qu'est le
produit et de le motiver a lui faire découvrir plus en détail les informations présentées par le site.
Création d'éléments graphiques
La création de certains éléments graphiques a été nécessaire pour mettre en valeur le système de
gestion de contenus. Les boîtes ci-contre, par exemple, ont été réalisées avec un logiciel de création
vectoriel, ce qui rend alors la création utilisable sur plusieurs
supports nécessitant un format vectoriel. Dans toutes les créations
graphiques réalisées, un soin particulier a été apporté aux
réalisations afin de pouvoir être réutilisées dans les meilleures
conditions.
Déclinaison des packages
Parmi les éléments graphiques à imaginer, une des
tâches était de proposer un ensemble de couleurs pour
illustrer les différents packages disponibles autour de
Blyss. J'ai naturellement choisi des couleurs
complémentaires : le rouge du logo, un vert et un bleu.
Cette idée de complémentarité a tout de suite séduit l'équipe projet ainsi que le chef d'équipe.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 22
Illustration 1 : Déclinaison des trois logos pour les packages Blyss
Page d'accueil n°1
Cette première maquette est constituée de plusieurs blocs séparés afin de partitionner les zones
d'informations, ce qui permet de bien hiérarchiser le contenu, grâce à l'emplacement des blocs.
Le fond rouge foncé reprend la couleur du logo et
donne un coté chaleureux à l'interface. Les blocs ont
des bords arrondis : ce style, très à la mode
actuellement sur le Web, rend l'interface plus douce
et confortable à l'oeil du visiteur.
Le jaune moutarde, qui contraste avec le rouge, rend
l'interface plus dynamique et originale, car cette
couleur est peu commune sur les sites présentant des
systèmes de gestion de contenus.
Les couleurs choisies, en plus de favoriser la lecture
et de rendre cette interface originale, sont aussi tout à
fait compatibles avec un type de handicap visuel très
répandu : les différents types de daltonisme. Le test
de cette maquette sur le site de Vischeck2 s'est
d'ailleurs révélé très concluant, comme on peut le voir
dans l'illustration n°3, le site paraît tout à fait lisible et
les couleurs ne constituent pas un obstacle à la
navigation.
Cette maquette est visible dans une meilleure
résolution dans l'annexe n°2, page 9.
2 Vischeck est un outil en ligne permettant de simuler la vue d'une image ou d'un site par un daltonien. http://www.vischeck.com/
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 23
Illustration 2 : Maquette n°1, originale
Illustration 3 : Vue de la maquette n°1 par un daltonien, simulée par Vischeck
Page d'accueil n°2
La seconde maquette se compose d'un seul gros bloc qui a pour but de regrouper l'information, mais
cette fois, ce sont les nuances de gris qui permettent
de structurer les informations dans la page.
Le gris met en valeur le coté sérieux et à la pointe de
la technologie de Blyss, tout en conférant une bonne
lisibilité et un confort d'utilisation au visiteur.
Le rouge, de son coté, rappelle le produit et l'aspect
chaleureux qui devait être mis en valeur.
La visibilité de la zone de navigation supérieure est
renforcée grâce à une mise en forme utilisant des
onglets qui facilitent la mémorisation de la
navigation.
Comme le montre l'illustration 5, le contraste des
couleurs choisi est assez important pour que la
lisibilité du site ne soit pas affectée par un handicap
visuel tel que le daltonisme.
Cette maquette est visible dans une meilleure résolution dans l'annexe n°3, page 10.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 24
Illustration 4 : Maquette n°2, originale
Illustration 5 : Vue de la maquette n°2 par un daltonien, simulée par Vischeck
Page d'accueil n°3
La troisième maquette a été déclinée en deux tons : le gris et
le vert. La version grise représente le coté sérieux et simple de
l'outil, alors que la version verte rappelle l'aspect zen grâce a
un ton se rapprochant du thé vert, et de ses vertus apaisantes.
Le but de cette maquette est de présenter une version de la
mise en page plus épurée que les précédentes.
L'information est alors répartie dans les blocs délimités par
des fonds de couleur (ou de gris) et la zone de contenu
principale se retrouve alors plus « libre » mais aussi plus
lisible.
Le fond blanc, dominant l'interface, inspire au visiteur les
notions de pureté et de transparence du produit.
Le rouge du logo n'a pas été écarté de cette création, en effet,
on retrouve cette couleur dans les titres, qui deviennent alors
tout à fait lisibles.
Les tests de lisibilité des deux
versions de la maquette
exécutés par Vischeck se sont
révélés concluants : les
maquettes sont donc tout à
fait lisibles pour un handicapé
visuel atteint de daltonisme.
Ces maquettes sont visibles dans une meilleure résolution dans les annexe n°4 et n°5, pages 11 et
12.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 25
Illustration 6 : Les deux versions de la maquette n°3, originales
Illustration 7: Vues des deux versions de la maquette n°3 par un daltonien, simulées par Vischeck
Retours du chef d'équipe
Comme l'impose la gestion de projet agile, à la fin de chaque itération – dans ce cas, la phase de
maquettage de l'interface – le responsable du projet en collaboration avec l'équipe projet doit
émettre des remarques, positives et négatives, en fonction du travail présenté. En fonction de ces
remarques, j'avais pour tâche de proposer des solutions pour remédier aux remarques négatives,
dans le but de créer une nouvelle maquette, plus proche des besoins du chef d'équipe.
Voici, dans le tableau n°4, le listing des points forts et des points faibles des maquettes présentées
précédemment.
Remarque Solution proposée
La présentation des références est appréciée.
Les maquettes manquent d'éléments réalistes. Inclure des photos dans l'entête.
La couleur d'accompagnement de la maquette n°1, le
jaune moutarde, est appréciée.
La découpe des zones d'information est trop marquée
sur la maquette n°1, et pas assez sur la maquette n°2.
Trouver un compromis pour la
présentation des blocs.
Le motif de fond de la maquette n°2, avec les rayures,
semble trop lourd.
Faire des rayures plus fines ou les
supprimer.
Le lotus à l'envers de la maquette n°2 n'est pas
apprécié.
Placer le logo Blyss comme sur la
maquette n°1 et ajouter l'accroche de
ma maquette n°2.
La maquette n°3 semble trop pâle, un peut trop blanc. Ajouter plus de couleurs chaudes dans
la mise en page pour mettre en valeur
l'aspect convivial et chaleureux du
produit.
Les boites ne font pas l'unanimité dans toutes les
équipes du projet.
Laisser une boite dans la zone de
contenu et réutiliser les logos des
packages en trois couleurs.
Tableau 4 : Tableau des retours concernant les trois premières maquettes
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 26
Page d'accueil n°4
Prenant en compte les remarques émises par l'équipe, j'ai imaginé
la maquette n°4, en mélangeant un peu toutes les créations
précédentes et en y ajoutant quelques modifications, telles que la
largeur de la page, qui a alors rétréci de 200 pixels, mais aussi
l'ajout d'une photo de lotus, symbole du produit représenté dans le
logo. La barre de navigation du coté droit a été décalée ver le bas,
afin de créer un bloc d'éléments de navigation en dessous de la
zone de contenu, qui semble alors plus allégée.
Le but du changement de format de la maquette, moins large qu'un
site classique proportionné pour une fenêtre de navigateur en 800
pixels sur 600 pixels, était de choquer l'utilisateur en utilisant ce format peu courant, afin que les
visiteurs se souviennent du site naturellement.
La couleur jaune, associée au noir, très appréciée par l'équipe projet, à la particularité de s'adapter
au coeur de la fleur de lotus, mais elle donne un petit coté précieux au site en rappelant la couleur
de l'or, pour représenter les notions de qualité et de produit de luxe.
Ce jaune a aussi un avantage non négligeable : selon la simulation
de Vischeck, on peut remarquer que les daltoniens perçoivent
presque exactement les couleur de l'image normalement. De plus,
le contraste avec le rouge permet une grande lisibilité des titres et
des liens.
Ce test est donc plutôt concluant.
Cette maquette est visible dans une meilleure résolution dans
l'annexe n°6, page 13.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 27
Illustration 8 : Maquette n°4, originale
Illustration 9 : Vue de la maquette n°4 par un daltonien, simulée par
Vischeck
Retours de l'équipe projet concernant la maquette n°4
Remarque Solution proposée
L'entête est top sombre
La couleur du logo n'est pas assez présente
Ajouter du rouge dans l'entête et dans
les menus
L'originalité de la mise en page plus serrée n'est pas
appréciée
Utiliser un format plus classique
(retour au 800px*600px)
Tableau 5 : Tableau des retours concernant la maquette n°4
Page d'accueil n°4, version 2
La seconde version de la maquette n°4 a été rapidement
réalisée, car peu de nouveaux éléments graphiques ont été
ajoutés à l'ancienne maquette. L'entête du site récupère
donc la couleur du logo, pour rappeler le produit et rendre
l'aspect de la maquette plus chaleureux.
La navigation verticale est à nouveau décalée, mais cette
fois-ci vers le haut. Les blocs d'actualité et de promotion
des packages Blyss sont quant-à eux dans les tons gris,
comme sur les maquettes de départ.
Prenant en compte les remarques exposées dans le
tableau 5, la structure du site repart donc sur une base plus
classique, lisible sans problème sur une écran ayant comme
résolution 800 pixels sur 600 pixels.
Comme le montre l'illustration 11, la lisibilité des éléments
de cette version de la maquette reste tout à fait correcte,
même pour un daltonien.
Cette version de la maquette n°4 est visible dans une
meilleure résolution dans l'annexe n°7, page 14.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 28
Illustration 10 : Maquette n°4, version 2, originale
Illustration 11 : Vue de la version 2 de la maquette n°4 par un daltonien,
simulée par Vischeck
Retours de l'équipe projet concernant la version 2 de la maquette n°4
Solution proposée Solution proposée
La disposition de la zone de présentation sur toute la
largeur de la structure était appréciée
Décaler à nouveau le menu vertical vers
le bas
Les blocs du bas paraissent trop fadesEssayer différentes couleurs pour
l'ensemble des blocs du bas de la page
Le logo du produit n'est pas assez présentAjouter le lotus du logo dans la zone
d'entête
Tableau 6 : Tableau des retours concernant la version 2 de la maquette n°4
Page d'accueil n°4, version 3, les quatre propositions
L'image de la fleur de lotus a été inversée et décalée sur la gauche de l'entête de la page afin de
pouvoir insérer le logo du produit. Pour remplir l'entête, des formes vectorielles et des dégradés ont
été proposés. Un set de couleurs a aussi été imaginé pour mettre en valeur la zone d'information en
base de page.
Ces couleurs ont étés
choisies en fonction des
symboles représentant le
produit :
la technologie en gris
le confort en beige
le dynamisme en
rouge
l'aspect « zen » en
vert
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 29
Illustration 12 : Plusieurs propositions d'entêtes et de couleurs pour la maquette n°4 dans sa version 3
Comme le montre l'illustration
13, après vérification grâce au
simulateur de vue daltonienne de
Visckeck, on peut se rendre
compte que les maquettes les plus
agréables à regarder, même avec
un handicap comme celui-ci, sont
celles composées de gris et de
vert.
Ces versions de la maquette n°4 sont visibles dans une meilleure résolution dans l'annexe n°8, pages
15 et 16.
Retours de l'équipe projet
Le coté « zen » du produit étant déjà représentée par le lotus présent dans l'entête, c'est le gris qui
sera choisi, mais il faudra tout de même apporter encore quelques modifications, à savoir :
Utiliser un gris plus clair
Ajouter du relief dans l'entête en utilisant une photo, par exemple
Séparer les liens du menu horizontal
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 30
Illustration 13 : Vue des différentes versions de la version 3 de la maquette n°4 par un daltonien, simulée par Vischeck
Page d'accueil n°4, version 4
Ces dernières remarques donneront
lieu à la création de plusieurs
entêtes, visible sur l'illustration 14,
utilisant comme base des photos en
relation avec le thème principal du
logo : un lotus, des feuilles, des
fleurs, de l'eau. Des recherches ont
été réalisées dans les bases de
données d'images de la société
ICOM, puis des photos m'ont été
envoyées par courrier électronique.
C'est la première entête qui a été
choisie, pour sa simplicité et la
luminosité finale de l'entête.
Une fois le motif choisi, et le menu
horizontal modifié pour mieux
séparer les liens, la maquette finale a
été présentée à l'équipe du projet.
Cette maquette finale, visible sur l'illustration 15, a tout
de suite été validée par l'ensemble de l'équipe. Cette
interface est donc le fruit des nombreux échanges qui ont
eu lieu entre les différentes équipes du projet et moi.
De plus, comme le montre l'illustration 16, sur la page
suivante, les couleurs et nuances de gris choisies pour
cette maquette se révèlent tout à fait lisibles, même pour
un daltonien.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 31
Illustration 14 : Quatre proposition de motifs pour l'entête du site
Illustration 15 : Dernière version de la maquette n°4, originale
A ce moment du projet, si des modifications devaient encore être réalisées, elles seraient, selon le
chef d'équipe, de l'ordre du détail.
La gestion de projet agile a vraiment été un élément
important dans la réussite de cet objectif : grâce aux
développements par cycles, j'ai pu améliorer la qualité
du travail produit, tout en pouvant, à chaque itération,
repartir sur des versions précédentes des maquettes
proposées, pour réutiliser des éléments graphiques ou
tout simplement lorsque l'équipe revenait sur une
décision, telle que le déplacement du menu vertical.
La version finale de la maquette de la page d'accueil est visible dans une meilleure résolution dans
l'annexe n°9, page 17.
Maquette de la page intérieure
Il était important de repenser la navigation des pages intérieures pour améliorer l'accès à
l'information contenue dans le site. En effet, contrairement à la page d'accueil du site, les contenus
des pages intérieures doivent posséder des liens internes et mettre le contenu textuel en valeur.
Pour faciliter la navigation à l'intérieur des pages, une barre de menu est donc venue s'ajouter à la
droite de la zone de texte, qui devient alors plus lisible, car les lignes de textes sont de ce fait, un
peu raccourcies.
Afin de donner au lecteur envie de lire la totalité du contenu de la page, les informations sont
hiérarchisées et présentées grâce à un court texte d'accroche. Ce procédé a d'ailleurs été apprécié par
l'équipe du projet, et plus spécifiquement encore par la personne chargée de la rédaction du contenu
des pages.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 32
Illustration 16 : Vue de la maquette finale par un daltonien, simulée par
Vischeck
L'entête du site a elle aussi été modifiée : réduite en
hauteur, le contenu textuel a alors plus d'espace pour
s'afficher, sans que les pages intérieures ne paraissent
trop différentes de la page d'accueil.
Une zone de publicité a aussi été proposée en bas de
page afin de ne pas y bloquer le visiteur parce qu'il n'a
plus d'information à lire et qu'il n'a aucun lien sur lequel
cliquer. Cette publicité sera réalisée par l'équipe
graphique au format Flash, mais une publicité au format
image sera lisible par les utilisateurs qui ne sont pas
équipés d'un lecteur multimédia Flash. Même si une
publicité composée d'une simple image peut paraître
moins efficace qu'une belle animation, on préférera que
l'utilisateur ne pouvant lire du Flash puisse voir l'image
de publicité plutôt que de ne rien voir du tout. Le format
affiché dépendra d'un script permettant de déterminer si
l'animation peut être lue sur le navigateur de l'utilisateur.
Toujours sur les pages intérieures, ces deux nouveaux blocs d'information ont fait leur apparition :
« Le saviez- vous ? »
L'idée est de faire connaître le produit en affichant sur chaque page, une description
rapide d'une fonctionnalité, choisie aléatoirement parmi toutes les fonctionnalités. Ainsi,
même si le visiteur ne vient pas voir par lui même les détails du produit, le site lui permet
quand même d'en découvrir les atouts.
« Envie d'une démonstration ? »
La société ICOM ne souhaitait pas proposer une démonstration en ligne visible par tous,
c'est pourquoi ce bloc mènera à un formulaire permettant d'identifier le demandeur et de
lui proposer par téléphone ou par courrier électronique, un rendez-vous pour lui présenter
Blyss.
La maquette de la page intérieure est visible dans une meilleure résolution dans l'annexe n°10,
page 18.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 33
Illustration 17 : Maquette d'une page de contenu type, originale
L'intégration des maquettes
L'intégration des maquettes validées au format XHTML et CSS se sont déroulées en deux étapes,
tout d'abord la page d'accueil, puis une page intérieure type. Pour chaque intégration, le but premier
était de séparer un maximum le contenu de la présentation afin de maximiser l'accessibilité du site
final, mais la compatibilité avec les divers navigateurs sur le marché était toute aussi importante.
Comme le montre le tableau comparatif suivant, la totalité des éléments graphiques des pages Web
sont contenues dans la feuille de style, ce qui rend les informations lisibles sur tous les navigateurs,
même ceux qui ne supportent pas les feuilles de style.
Avec la feuille de style Sans feuille de style
Tableau 7 : Vue de la page d'accueil avec et sans feuille de style
Ce tableau montre aussi la structuration des informations dans la pages, qui sont alors organisées de
manière logique et naturelle. De nombreux tests ont alors été réalisés pendant cette phase
d'intégration (structure de base, ajout de la navigation, des blocs puis du contenu) afin d'obtenir un
site au rendu identique sur toutes les plateformes. Ces tests ont été réalisés localement et sans l'aide
d'autres testeurs : en effet, ce type de test vise a vérifier le bon affichage des pages sur un maximum
de navigateurs comme Internet Explorer, Firefox, Opera, Safari, Konqueror, mais aussi sur le
maximum de systèmes d'exploitation, c'est-à-dire Windows, Linux et Mac OS X.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 34
Une des recommandations ergonomiques proposée dans le cahier des charges était d'ajouter au site
des touches d'accès, ou access keys, afin de faciliter la navigation des personnes handicapées ou a
mobilité réduite, cependant, après quelques tests sur d'autres sites durant mon arrêt maladie, je me
suis rendue compte que certaines touches d'accès pouvaient poser plus de difficultés qu'elles ne
pouvaient en résoudre.
Voici la liste des raccourcis claviers recommandés par Accessiweb3 :
"s" : passer le menu,
"1" : page d'accueil,
"2" : page d'actualités,
"3" : plan du site,
"4" : moteur de recherche,
"5" : FAQ,
"6" : page d'aide,
"7" : contact,
"8" : conditions d'utilisation,
"9" : livre d'or,
"0" : lien vers la liste des raccourcis clavier utilisés dans la page.
La combinaison pour accéder a une page se compose d'un appui sur la touche ALT suivi d'un
caractère listé ci-dessus. Le problème vient du fait que certains caractères peuvent être tapés grâce à
une combinaison de touches sous Windows. Dans le cas du « é », l'utilisateur à le choix entre taper
sur la touche « é » ou de faire la combinaison ALT + 130. On comprend facilement que si un
utilisateur d'un site décide de remplir un formulaire et qu'il décide d'utiliser une combinaison de
touches pour écrire un caractère accentué, se retrouvera directement sur la page d'accueil et perdra
toutes les données remplies dans le formulaire. Les raccourcis clavier seront donc supprimés du site
blyss.fr, mais cette idée sera gardée pour l'interface d'administration, ce qui rendra alors la mise en
forme de texte, par exemple, plus rapide, en utilisant des raccourcis claviers différents de ceux
présentés ci-dessus.
3 http://accessiweb.org/
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 35
Problèmes rencontrés lors de l'intégration
Chaque navigateur possède un moteur d'affichage qui interprète les feuilles de style à sa manière et
si certains navigateurs comme Firefox ou Opera sont respectueux des standards, il en est un qui
pose souvent problème lors de l'intégration : c'est Internet Explorer. Il existe plusieurs moyens de
contourner ces problèmes d'affichage :
• Faire deux feuilles de styles : on risque de perdre du temps durant la maintenance du site si l'on
doit modifier deux fichiers au lieu d'un seul.
• Les hacks : lignes de codes spécifiques réservées aux moteurs autres que Internet Explorer lors
de la définition d'un style. Ce système est certes très efficace, mais ne constitue pas une solution
durable et est relativement risquée dans la mesure où elle s'appuie sur des bugs du moteur de
rendu d'Internet Explorer, qui peuvent être corrigés à tout moment. Cette solution est choisie
quand rien d'autre ne peut résoudre un problème d'affichage.
• Utiliser le script IE7, qui est un ensemble de fonctions Javascript qui corrigent une majorité de
problèmes d'affichage d'Internet Explorer 5.5 et 6. Ces fichiers, sous licence libre, sont
interprétés du coté client du site, et non du coté serveur : il est donc impossible de garantir a
100% son efficacité dans la mesure où l'utilisateur peut avoir désactivé le moteur Javascript de
son navigateur.
Il est donc préférable de créer une structure XHTML la plus simple possible, ce qui évitera de
nombreux problèmes d'affichage. Les trois solutions proposées ci-dessus ne permettent peut être pas
un résultat parfait, mais ne gênent aucunement l'accessibilité du site ainsi développé.
L'animation Flash en guise de publicité a aussi posé quelques problèmes lors de son intégration. En
effet, pour obtenir un rendu de bonne qualité des éléments graphiques lors de l'exportation de
l'animation, il est préférable d'utiliser des images au format PNG, plus légères et de meilleure
qualité. Cependant, les lecteurs d'animations Flash antérieurs à la version 8 ne sont pas capables de
lire ce format d'image. Il a donc fallu vectoriser ces éléments graphiques et exporter l'animation
publicitaire dans une version précédente de Macromedia Flash afin d'améliorer la compatibilité sur
un maximum de machines, n'ayant pas un lecteur d'animation Flash à jour.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 36
Rédaction des grandes lignes du contenu du site
En me proposant la conception et la création du site Web blyss.fr, ICOM m'a aussi demandé de
prendre en charge la rédaction des lignes directrices du contenu de ce dernier. Le but n'était pas de
rédiger la totalité des contenus, mais de réfléchir sur les points importants permettant de mettre en
valeur le produit et de guider la personne qui s'occuperait de la rédaction de ces textes, grâce à une
charte détaillée des argumentaires et des notions à aborder.
Pour rédiger cette charte, j'ai pris, dès le début du projet, du temps pour explorer les nombreuses
fonctionnalités de l'outil existant et étudier les besoins de la société ICOM lors de réunions qui se
sont déroulées sur place, à Toulouse. J'ai aussi profité de l'étude concurrentielle pour trouver de
nouveaux argumentaires en fonction de ce que les sociétés concurrentes proposent, pour que les
clients potentiels, visitant les sites concurrents, puissent comparer les fonctionnalités semblables et
remarquer les atouts supplémentaires de Blyss CMS.
Un point remarquable de l'étude concurrentielle était le manque de la prise en compte de
l'accessibilité dans les argumentaires des autres sociétés : dans la mesure où cette spécificité est une
des forces de l'outil, il m'a semblé important de la mettre en valeur via les contenus du site, mais
aussi via l'ergonomie des contenus, hiérarchisés et structurés afin de faciliter un maximum la
lecture.
De nombreux échanges ont aussi eu lieu par messagerie instantanée avec Claire, une stagiaire de la
société ICOM qui avait pour charge de rédiger les contenus du site à partir de ma documentation.
J'ai alors pu la conseiller et répondre à ses questions lorsque des parties du site lui posaient
problème : en effet, sa formation en communication ne lui permettait pas toujours de comprendre
les parties les plus techniques des contenus à rédiger. Cette lacune est pourtant un véritable atout
lors de la rédaction des contenus, qui sont alors plus compréhensibles par des visiteurs sans
véritables connaissances techniques.
Le document présentant les grandes lignes des contenus est disponible en annexe n°11 page 19.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 37
Réflexion ergonomique sur l'interface d'administration de Blyss CMSLa seconde mission de ce stage consistait en la rédaction d'un document explicitant toutes les
mesures à prendre par les développeurs pour améliorer l'utilisabilité de l'interface d'administration
de la nouvelle version de Blyss CMS. J'avais aussi pour tâche de créer les maquettes des éléments
graphiques et des interfaces, et de les intégrer.
Cahier des charges et recommandations ergonomiques
En étudiant la version précédente de Blyss CMS, j'ai découvert de nombreux problèmes
ergonomiques nuisant à l'utilisation du système. À partir de cette listes de points noirs, j'ai
commencé à chercher des solutions, tout d'abord personnelles, grâce à mon expérience en
informatique, puis je me suis mis à chercher de nouvelles idées dans les ouvrages de J. Nielsen,
K. Goto et E. Cotler. Toutes ces solutions ont été consignées dans une documentation destinée aux
développeurs.
Je devais repenser complètement l'ergonomie du système, et donc aussi la navigation : une
navigation naturelle et efficace a donc vu le jour, afin de regrouper les fonctionnalités pour
simplifier les actions de l'utilisateur.
Cette nouvelle navigation ainsi que quelques éléments graphiques tels que
les boites de dialogues ont nécessité la conception d'une iconographie
complète. Afin de gagner du temps, j'ai sélectionné un ensemble d'icônes
sous licence Creative commons 2.54 nommé SILK5. Ce lot d'icônes,
complet et simple à la fois, permettait de subvenir a 90% des icônes
nécessaires au projet.
De nouvelles idées ont aussi été proposées à travers cette documentation, comme le tableau de bord,
informant l'utilisateur des diverses tâches à réaliser lors de sa connexion au système ou de nouvelles
solutions pour implémenter les fonctionnalités de la nouvelle version de Blyss CMS.
Il était aussi primordial de représenter de la marque Blyss au sein du système de gestion de
contenus. Pour rappeler cette marque à l'utilisateur, sans pour autant le noyer sous un flot de
publicité important, des règles ont été proposées pour situer la marque.
Ce document a été validé par le chef d'équipe, en collaboration avec l'équipe de développement, il
est disponible en annexe n°12, page 25.
4 http://creativecommons.org/licenses/by/2.5/5 Distribué par famfamfam : http://www.famfamfam.com/lab/icons/
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 38
Illustration 18 : Extrait du lot d'icônes
SILK
Iconographie du produit
Un des éléments essentiels de l'utilisabilité d'un système est l'efficacité de son iconographie, qui
permet de retrouver facilement et rapidement un item, un lien ou une zone, sans avoir à lire tout un
contenu textuel.
Il ne suffit pas d'associer des formes ou des couleurs à du texte, il faut aussi choisir des éléments
graphiques simples, faciles à retenir et qui évoquent instantanément l'élément associé.
Une liste d'icônes associées aux fonctionnalités du système de gestion de
contenu Blyss a été définie à partir du lot d'icônes SILK créé par Mark
James6 puis testé et validé par l'équipe projet.
Certains éléments du système ont nécessité la conception d'icônes à
plusieurs formats, visibles sur l'illustration 19, suivant le style des icônes
SILK pour mieux s'intégrer au reste de l'environnement utilisateur.
Un des rares défauts du lot d'icônes choisi était le langage des icônes de
mise en page de texte : le gras, le souligné et le symbole barré étaient représentés par la première
lettre du mot anglais représentant le symbole : B pour le gras, U pour le souligné et S pour le barré.
Si ces symboles restent compréhensibles, même en anglais, il était important de refaire ces icônes
pour faciliter l'utilisation du système par la clientèle française d'ICOM.
Les interfaces de Blyss CMS
L'un des buts de la seconde mission était de repenser l'interface d'administration de Blyss CMS pour
rendre l'utilisation du système agréable et attrayante, en rafraîchissant notamment les barres d'outils
et l'affichage des messages relatifs à l'administration.
Comme le montre les illustrations 20 et 21, l'interface existante était plutôt simple, voire même
simpliste. Ses couleurs trop pâles et son manque d'iconographie ne mettaient pas en valeur le
système, respectueux des standards et performant.
6 Site de Mark James : http://www.famfamfam.com
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 39
Illustration 19 : Exemples d'icônes créées pour Blyss
CMS
Une étude des points faibles de cette interface ainsi que des solutions pour remédier à ces problèmes
a été établie lors de la rédaction des recommandations ergonomiques.
La nouvelle version du système devait aussi avoir de nouvelles fonctionnalités qui rendraient
l'interface d'administration plus ergonomique, telles qu'une boîte d'outils plus complète, pouvant se
déplacer dans la page pour augmenter le confort d'utilisation, ou la mise en place de normes
concernant l'affichage des informations et des messages renvoyés par le site.
Des éléments graphiques ont donc étés conçus pour être intégrés par la suite dans l'interface
d'administration.
La barre de navigation
Déjà présente sur l'ancienne interface, cette barre a été repensée pour mieux regrouper les
fonctionnalités entre elles, mais aussi pour mieux les repérer grâce aux icônes situées à coté des
liens. Une partie a été ajouté sur la droite pour signaler les éventuelles mises à jours et rappeler la
marque du système grâce au logo de Blyss. Cette zone sert aussi a présenter l'identification de
l'utilisateur et lui permet de se déconnecter du système.
On pourra noter que cette barre sera amovible, grâce à un script permettant de cacher 80% de sa
hauteur, pour étendre la surface d'affichage du site à modifier. En passant son curseur dans une zone
réactive en haut de page, la barre réapparaîtra automatiquement.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 40
Illustration 22 : Barre de navigation de l'interface d'administration
Illustration 20 : Présentation de la structure du site dans l'interface d'administration
Illustration 21 : Interface de modification d'une page
La boite d'outils
Une des plus importante faiblesse de l'ancienne version était la
présentation et la compréhension de la barre d'outils ayant pour
fonction de modifier la mise en page d'un site Web. Dans cette
version, le nombre minimum d'icônes était affiché à la verticale et
s'échangeaient automatiquement à chaque action de l'utilisateur : il
était donc difficile de retenir les positions de chaque icône. De
plus, aucune information ne pouvait aider l'utilisateur à savoir à
quelle fonction correspondait telle ou telle icône.
Un affichage total de toutes les icônes utiles au fonctionnement du
système a donc été privilégié, ainsi qu'une zone de description des
fonctions entraînées par un clic sur une icône, lors du survol des
éléments graphiques de cette boîte. Cette boîte d'outils, visible sur
l'illustration 23, a aussi la particularité de pouvoir être
partiellement cachée, tout comme la barre de navigation, via un
simple clic sur une flèche placée en haut à droite de la boîte.
Une corbeille permet a l'utilisateur de supprimer un élément d'une
page par un simple glisser-déposer, alors que la zone de formulaire titrée « état de la page »
renseigne l'utilisateur sur le nom de la page ainsi que sur la l'état de la version actuellement en cours
de modification (en ligne, brouillon...).
Affichage d'un message
Les développeurs avaient pensé à l'ajout d'une fonctionnalité
permettant d'ajouter et de modifier des messages, ou commentaires,
uniquement visible depuis l'interface d'administration, pour qu'un
utilisateur puisse laisser une suggestion de modification au
prochain utilisateur qui éditerait la page commentée. J'ai donc
proposé une interface proche de ce tout le monde utilise pour
laisser des commentaires dans un document papier par exemple : le
post-it. Visible sur l'illustration 24, l'interface proposée reprend la
couleur jaune pâle des petits papiers à coller partout, ce qui rend ce
type de message très facile à repérer dans la page.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 41
Illustration 23 : La maquette de la boite d'outils
Illustration 24 : Maquette de l'affichage d'un message
Une fausse pop-up
Afin de bien différencier le site à modifier des
informations relatives au site et au système de
gestion de contenu, des fausses pop-up ont été
conçues. Ces fausses fenêtres, intégrées dans la
page, s'affichent au premier plan de l'interface du
CMS, tout comme une vraie pop-up l'aurait fait,
mais dans ce cas précis, cette fenêtre ne peu pas
être bloquée et ne passera jamais en arrière plan
de l'application.
Elles sont toujours présentées de la même
manière, comme on peut le voir sur l'illustration
25. Les messages d'erreurs, de confirmation ainsi que les textes d'information auront une
présentation normée grâce a des icônes permettant de reconnaître instantanément le type
d'information. Cette présentation normée a pour but de rendre l'ensemble de la présentation plus
cohérente.
Un tableau de bord
Lors de l'identification de l'utilisateur, on affiche sur
une fausse pop-up spécifique les informations
concernant les dernières modifications réalisées par
tous les utilisateurs, ainsi que les tâches à réaliser et
des liens rapides vers le profil de l'utilisateur,
l'installation des mises-à-jour et l'aide en ligne.
Toujours dans l'esprit de l'accueil de l'utilisateur dans
un système, le tableau de bord affiche un « conseil
du jour », afin de guider et de former l'utilisateur un
peu plus chaque jour.
La totalité des interfaces d’administration réalisées sont visibles en qualité supérieure en annexe
n°13 page 31.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 42
Illustration 25 : Maquette d'une fausse pop-up
Illustration 26 : Maquette du tableau de bord
Intégration des interfaces
L'interface d'administration se compose de très nombreux éléments graphiques, tels que le fenêtres
ou les icônes de la boîte d'outils. Pour améliorer l'accessibilité de cette interface, il était important
de séparer au maximum le contenu de la présentation, et de réaliser, au niveau du code HTML, une
structure sémantique pour présenter les groupes d'icônes.
Les fonctions représentées dans la boite d'outils ont donc été structurées sous la forme de listes de
définition, comme le montre l'illustration 27. Les icônes sont uniquement contenues dans la feuille
de style (voir l'illustration 28), ce qui facilite la modification d'icônes, dans le cas d'une traduction
par exemple, pour la mise en forme de texte.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 43
Illustration 27 : Copie d'écran d'une partie du code source de la boite d'outils
Illustration 28 : Copie d'écran d'une partie du code de la feuille de style associée à la boite d'outils
On obtient alors une présentation complètement graphique pour les navigateurs supportant les
feuilles de styles et une présentation plus simple (voir l'illustration 29), mais tout aussi
compréhensible, dans le cas contraire (voir l'illustration 30).
Tous les éléments graphiques utiles a la création de l'interface d'administration ont été réalisés de
cette manière, avec des tests réguliers sur tous les navigateurs récents et sous plusieurs systèmes
(Windows, Linux et Mac OS) ainsi que sur les validateurs de code XHTML et CSS du W3C, pour
assurer une bonne qualité de code tout au long de l'intégration.
Des tests concluants ont aussi été exécutés sur le validateur de contraste Vischeck, présenté
précédemment.
Tous les éléments codés en XHTML et CSS ont ensuite été transmis à l'équipe de développement
pour être intégrés durant le mois de septembre dans la nouvelle version du système de gestion de
contenu Blyss, après une validation du chef d'équipe.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 44
Illustration 29 : Copie d'écran d'une partie de la boite d'outils sur un navigateur supportant les feuilles de styles
Illustration 30 : Copie d'écran de l'affichage de la page Web sans feuille de styles
3.2 Évaluation critique
Les moyens mis en oeuvre La majeure partie des travaux effectués lors de ce stage s’est déroulée à la suite d'une analyse des
besoins de la société et des utilisateurs.
Pour mieux connaître ces besoins, j'ai organisé des réunions internes à la société ICOM lors de mes
déplacements à Toulouse, mais j'ai aussi procédé à des réunions en ligne via la messagerie
instantanée pour mieux comprendre les besoins de chaque mission, ou plus simplement lors de la
validation des travaux. Le télétravail implique aussi une sauvegarde automatique de toutes les
conversations, par messagerie ou courrier électronique, ce qui évite de rédiger des comptes-rendus
de réunion, puisque tous les acteurs des réunions sauvegardent eux aussi les historiques de leurs
conversations.
La conception des travaux des deux missions a nécessité des études concurrentielles, afin de
comparer les différents produits présents sur le marché par rapport à celui de la société ICOM, mais
la conception ne s'est pas résumée à cette étude : j'ai aussi pris en compte les demandes
d'amélioration émises par les clients, utilisateurs du système de gestion de contenu existant, puis
analysé les atouts et les défauts de ce système afin de trouver de nouvelles solutions pour améliorer
ce dernier, grâce à ma propre expérience d'utilisation de ce type de système.
Les tests ont tous étés réalisés en collaboration avec l'équipe de développement et l'équipe
graphique, offrant ainsi leurs conseils pour achever mes travaux le mieux possible.
En ce qui concerne les stratégies adoptées tout au long du stage, je me suis imposée une liste de
contrôles permettant de vérifier la cohérence des missions à chaque étape de réalisation, afin de
rester en phase avec les exigences de départ de la société ICOM.
Faire simple et beau : Pourquoi faire des interfaces surchargées et compliquées quand on peut
faire simple et efficace?
Mettre en valeur l'accessibilité : Rendre un site accessible ne rend pas forcément un site laid :
partant de ce principe, la réalisation des interfaces s'est déroulée sans contrainte et l'intégration
au format XHTML/CSS a ensuite été réalisée en suivant de très près les maquettes, ainsi, les
interfaces réalisées deviennent attractives et accessibles.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 45
Hiérarchiser l'information : Le contenu d'un site ne doit pas seulement être hiérarchisé au
niveau du code HTML, il doit surtout être structuré de manière logique et visuelle pour le
visiteur, c'est pourquoi la hiérarchisation des contenus a été mise en place à plusieurs niveaux :
lors de la conception de l'arborescence et des grandes lignes de contenus, lors de la création des
interfaces, mais aussi lors de l'intégration, grâce à un code XHTML sémantique.
Good Designers Redesign, Great Designers Realign : Cet article7 de Cameron Moll, explicité
dans mon mémoire de recherche, a permis la conception de l'interface d'administration du
système de gestion de contenu Blyss dans les meilleures conditions. En effet, le but de cette
mission était de concevoir une interface plus attractive et plus ergonomique que la précédente,
mais cette nouvelle interface ne devait pas pour autant déstabiliser les utilisateurs de l'ancienne
version, c'est pourquoi certains éléments de l'ancienne version ont été conservés, tout en
rafraîchissant cette interface.
Communication et télétravail : Il était parfois difficile de pouvoir joindre à tout moment les
intervenants par messagerie instantanée, compte tenus de leurs implications sur d'autres projets
et des rendez-vous prévus avec des clients. Cependant, les messages les plus urgents étaient
envoyés par courrier électronique et j'obtenais des réponses dans un délai d'une journée
maximum. On peut considérer que la communication à distance s'est relativement bien déroulée
au final, étant donné que les missions ont été finies dans les temps.
Gestion de projet : L'idée principale était de déléguer un maximum les tâches que je ne pouvais
pas réaliser, pour des questions de temps ou de connaissances, telles que le développement de
Blyss ou la rédaction des contenus du site blyss.fr. Mon rôle était aussi de conseiller les
intervenants pour faire avancer le projet le plus rapidement possible, en organisant des réunions
en ligne régulièrement.
7 Disponible à cette adresse : http://alistapart.com/articles/redesignrealign
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 46
Conception, gestion de projet et réalisation des travaux
La phase de conception des deux missions s'est toujours déroulée en deux étapes : d'abord l'étude
des besoins, menant à la rédaction d'un cahier des charges, puis, après validation de ce document, la
mise en place d'une liste des objectifs initiaux. En se basant sur cette liste, le chef d'équipe
déterminait alors quelles tâches seraient réalisées chaque semaine. En fin de semaine, les travaux
étaient mis sur un serveur et envoyés par courrier électronique à chaque intervenant du projet, afin
de garder une trace des éléments envoyés.
Pour planifier et organiser ce stage, j'ai dû choisir une méthodologie de gestion de projet
correspondant le mieux possible aux besoins des missions. En parallèle, j'ai aussi pu étudier
diverses méthodes de gestion de projet Web, telles que les méthodes agiles, le développement
centré utilisateur et utilisation, développés en détail dans mon mémoire de recherche. Cette étude
m'a permis de découvrir comment organiser de manière efficace et rapide les deux missions que la
société ICOM m'avait confiées. De plus, j'ai eu la chance de pouvoir travailler sur des missions dont
les conditions étaient semblables à celle présentées dans mon mémoire, c'est-à-dire :
Peu d'intervenants travaillant sur le projet : une équipe de moins de 10 personnes
Un projet composé de missions courtes : 6 mois au total
Un projet ayant pour but le développement d'applicatifs de qualité
Des testeurs disponibles dans l'entreprise de stage.
Il est évident que si j'avais travaillé sur un autre projet et dans des conditions différentes, je n'aurais
jamais pu tester ce nouveau mode de gestion de projet, et j'aurais organisé mes travaux d'une
manière plus classique, avec un planning de Gantt et des phases de conception et réalisation plus
habituelles.
Ce mode de fonctionnement cyclique et organisé par semaine m'a véritablement aidé à gérer mon
temps et à organiser des relations à distances avec mes collègues très régulièrement, pour atteindre
les objectifs posés en début des missions dans le temps imparti.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 47
L'aspect le plus important des phases de réalisation a été l'approche des phases de tests lors de
chaque itération : en effet, même si des tests peuvent être mis en place localement, lord de
l'intégration d'une maquette par exemple, d'autres tests nécessitent la participation de personnes
extérieures au projet. Les tests de navigation et d'utilisabilité ont donc été réalisés en collaboration
avec l'équipe de développement, proposant à des employés de la société ICOM de participer aux
tests du projet. Grâce à de solides bases et un respect total des règles d'ergonomie, les tests n'ont
révélés que des erreurs minimes, rapidement corrigées lors des itérations suivantes.
Les phases de réalisation ont aussi été pour moi l'occasion de mettre en place de véritables échanges
avec les différents intervenants du projet, pour conseiller et aiguiller mes collègues dans les tâches
qui leurs étaient attribués.
Analyse critique du résultat
Site Blyss.frCette mission, visant à concevoir et à créer le site blyss.fr, s'est plutôt bien déroulée, tant au niveau
de la gestion de projet, que du projet en lui-même.
Parmi les points forts de cette mission, on remarquera les points suivants :
Le site créé est accessible à tous et possède une ergonomie travaillée et efficace,
Son design très tendance met en valeur le produit qu'il présente, sans perturber le visiteur dans
sa recherche d'informations
L'image véhiculée par le site correspond bien à l'image de la société ICOM et reste cohérent
avec la charte graphique de la société : des couleurs chaudes et de la simplicité dans la mise en
page qui évoquent les cotés chaleureux et zen du produit.
La structure XHTML de la page est simplifiée et optimisée pour le référencement, ce qui offrira
au produit un très bon positionnement à long terme.
Malheureusement, une des idées de départ n'a pas pu être réalisée, à savoir la mise en page de
plusieurs styles CSS différents pour le site, afin de démontrer une fonctionnalité supplémentaire du
produit. Cependant, il sera tout à fait possible, avec du temps supplémentaire, de réaliser d'autres
designs et de les intégrer dans le site.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 48
Interface d'administration de Blyss CMSAvec l'avancement de mon mémoire de stage, j'ai découvert de nouvelles astuces pour mieux
aborder la réalisation de cette seconde mission.
L'interface d'administration possède, au final, de nombreux points forts :
La nouvelle interface semble, selon les tests, plus simple d'utilisation, et les éléments graphiques
mettent mieux en valeur le système
Cette interface ne risque pas pour autant de perturber les utilisateurs de l'ancienne version, car
les modifications ont été effectuées pour rafraîchir l'environnement utilisateur, et non pour le
réinventer totalement.
L'iconographie est simple et précise, pour faciliter l'utilisation du système, et du temps a été
gagné en utilisant un lot d'icônes déjà prêt et sous licence Creative Commons.
Une fois les blocs réalisés intégrés dans le moteur de la nouvelle version du système et la
nouvelle version du système de gestion de contenus terminée, Blyss CMS sera prêt à être
présenté en démonstration chez des futurs clients.
J'ai pu apporter un nouveau regard sur un projet qui existe depuis 3 ans, et proposer des
nombreuses recommandations et solutions pour améliorer ce système, qui ont été appliquées par
l'équipe de développement.
Le seul regret que l'on peut ressentir face à cette mission, ma contribution à ce projet étant
maintenant terminée est que le développement doit encore se poursuivre, et que le système ne sera
réellement utilisé par les clients de la société ICOM qu'a partir de fin Octobre 2006. Les premiers
véritables retours des clients n'apparaîtront qu'à ce moment là.
Les échecs rencontrés durant le stageEn mettant en place, dès le début du stage, des objectifs réalistes, grâce à mon expérience technique
et une bonne évaluation du temps alloué à chaque tâche, tout les objectifs initiaux ont pu être
réalisés en temps voulu. Il n'y a donc pas eu d'échec majeur à la réalisation du projet durant ces six
mois de stage.
Les point faibles des projets sont en majorité dûs au temps, mais ils ne se sont pas avérés être des
obstacles au bon déroulement des missions.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 49
4. Bilan général du projet professionnel
4.1 Éléments d'appréciation de la maîtrise du projet
Dans l'ensemble, je pense que le projet s'est vraiment bien déroulé, compte tenu du fait que les
gestions de projet agile, centrée utilisateur et utilisation étaient complètement nouvelles pour moi.
Ce type de gestion m'a laissé une certaine marge d'erreur, car je pouvais redéfinir à tout moment les
besoins selon l'évolution du projet, même si je n'ai presque pas eu à utiliser cette option. Cette
nouvelle manière de gérer un projet m'a aussi beaucoup plu, car je n'ai pas perdu de temps à rédiger
de nombreux comptes rendus ou à planifier tout le déroulement du projet sur un planning de Gantt.
J'ai aussi eu l'occasion de tester pour la toute première fois le télétravail sur des projets en
collaboration avec d'autres intervenants.
Grâce à une gestion du temps et des risques plutôt performante, j'ai eu l'occasion de commencer à
travailler sur un troisième projet : le site de Kairn, représentant l'équipe de développement. Le
cahier des charges ainsi que quelques idées relatives à l'identité visuelle de l'entreprise ont vu le jour
à la fin du stage, durant le temps restant.
4.2 Apports de l'entreprise
J'ai choisi cette entreprise pour la qualité des missions qu'elle me proposait pour ces six mois de
stage, et je n'ai vraiment pas été déçue. En effet, j'ai eu la chance de faire un stage où j'avais des
responsabilités dans un secteur qui m'intéresse depuis plusieurs années en pouvant tester des
éléments de mon mémoire de recherche sur le terrain de ce stage.
Les responsabilités se situaient à plusieurs niveaux : pour commencer, je ne travaillais pas en
doublon d'un employé d'ICOM et le projet m'a été confié en grande partie, de la conception à la
validation finale. De plus, la mise en valeur de leur produit phare reposait entièrement sur moi, tant
au niveau de la création des interfaces que des argumentaires et de la structuration du contenu final
du site blyss.fr par exemple, ce qui a rendu ce stage encore plus intéressant.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 50
Le poste proposé par ICOM était lui aussi une source de motivation, car j'avais, en plus de la
gestion de projet et de la réalisation des missions, un véritable rôle de conseillère au sein de l'équipe
projet. J'ai aussi pu travailler sur des sujet qui me tiennent vraiment à coeur, le webdesign et
l'accessibilité, plutôt que de réaliser des animations Flash ou de rédiger la totalité des contenus.
4.3 Évaluation du stage
Il est évident pour moi qu'un tel poste dans une entreprise n'aurait pas pu être envisageable sans la
formation de Master 2 CPI, car certains enseignements de cette formation m'ont été utiles pendant
toute la durée du stage, tels que la gestion de projet, la conception de sites Web ou même les très
courtes introductions à l'ergonomie et à l'accessibilité vues cette année.
Le type de gestion de projet utilisé durant ce stage n'aurait pas du tout été le même si mon mémoire
de recherche avait eu un sujet différent : je suis heureuse d'avoir pu mettre en oeuvre et sur le terrain
une partie de mes recherches, qui se sont avérées plutôt concluantes, étant donné la réussite des
deux missions de stage.
Ce stage représente, à mes yeux, une véritable continuité des enseignements vus durant la période
de cours de Master 2, car j'ai pu, non seulement, appliquer les connaissances que j'ai acquis durant
ces quelques mois, mais aussi apprendre de nouvelles manières de travailler et de gérer un projet.
Par rapport à mon projet professionnel, ce stage confirme tout à fait le type de poste auquel je
voudrais être affectée dans le monde professionnel : un poste mêlant ergonomie, accessibilité,
webdesign, gestion de projet et conseil, pour améliorer toujours plus la qualité des sites Web.
Après six mois de télétravail, je sais que je suis tout à fait capable de mener à bien des projets,
même avec des collaborateurs à distance, grâce à une bonne organisation des ressources et des
tâches à réaliser.
Je prévois donc de continuer à travailler dans le même secteur que celui de mon stage,
éventuellement en télétravail, en espérant trouver un poste de chef de projet Web après plusieurs
années d'expérience dans le milieu du Web.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 51
Glossaire
CSS : Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire
la présentation d'un document structuré écrit en HTML ou en XML, et c'est le World Wide Web
Consortium (W3C) qui est à l'origine de sa spécification.
Standards du Web : Ensemble de technologies et de protocoles utilisés sur le Web définis par le
W3C sous forme de recommandations. Exemples: CSS, XHTML, PNG, HTTP.
Systèmes de gestion de contenus (ou CMS) : Famille de logiciels de conception et de mise à jour
dynamique de sites Web.
W3C : Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994
pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML,
XHTML, XML, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes, mais des
recommandations.
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 52
Bibliographie
Ouvrage : Nielsen J., 2004, Conception de sites Web : L'art de la simplicité, Pearson Education.
Ouvrage : Afchain A. et Lanceraux J., 2004, Créer des sites Web accessibles à tous, Liaisons.
Ouvrage : Bordage S., 2005, Conduite de projet Web, Eyrolles.
Ouvrage collectif : Goto K., Colter E., 2005 , (Re)design Web 2.0 : Conduite de projet , Eyrolles.
Mémoire de recherche : Les méthodes de gestion de projet appliquées durant le stage suivent en grande
partie la démarche proposé dans mon travail d'étude et de recherche réalisé cette année sous la direction de
Brigitte Simonnot dont le sujet est « L'amélioration de la conception de sites Web au service de l'information
pour tous. ».
Webographie
Site Web : Les recommandations du W3C
http://www.w3c.org [consulté tout au long du stage ]
Site Web : Les bonnes pratiques de Opquast
http://www.opquast.com [ consulté tout au long du stage ]
Site Web : Les tutoriels d'Alsacréations
http://www.alsacreations.com [ consulté tout au long du stage ]
Article en ligne : Good Designers Redesign, Great Designers Realign
Moll C. A List Apart, Octobre 2005 [consulté le 20 juillet 2006]
Disponible sur : http://alistapart.com/articles/redesignrealign
Rapport de stage – Laurence Jacquet – M2 CPI – 2006 53
Nom de l’étudiant :Laurence [email protected]
Titre du rapport :Ergonomie, accessibilité et webdesign d'un système de gestion de contenus et du site internetle présentant.
Coordonnées complètes de l’entreprise :ICOM COMMUNICATION15, rue du Général de Marmier ZA Baluffet 31100 Toulouse tél. 05 62 57 73 43 fax 05 62 57 73 44 http://www.icom-communication.fr/
Secteur d’activité de l’entreprise :Agence conseil plurimédia (Midi-Pyrénées)
Nom, fonction et coordonnées du tuteur professionnel :Julien Marquié, Responsable du Pôle Multimédia et chef de projet [email protected]
Tuteur universitaire :Brigitte [email protected]
Type de fonction exercée dans l’entreprise :Concepteur Web
Activité principale réalisée durant le stage :Conception et réalisation du site internet de présentation du Content Managment SystemBlyss mis au point par ICOM (Benchmarking, cahier des charges, design, arborescence...).Reflexion globale de design et d'ergonomie pour l'outil lui-même (interface d'administration :optimisation ergonomique, adéquation ...)
Métier visé :Concepteur Web
Durée du stage : 6 mois
Date de stage : du 13/03/2006 au 08/09/06