Ergonomie, accessibilité et webdesign d'un système de gestion de … · 2014-03-26 · la création de chartes graphique, l'intégration de sites Web et la création de lettres

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


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).


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.


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)


– 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


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


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,


• 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


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.


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.


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.


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.


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


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


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.


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


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.


Tableau 3 - partie 1 : Calendrier de travail


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)


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é.


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


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.


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.


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/


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.



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.


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


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.



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.


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


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


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.


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.


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.


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.


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/


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.


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.


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/


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


Illustration 19 : Exemples d'icônes créées pour Blyss

CMS

http://www.famfamfam.com/

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.


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.


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.


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.


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.


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.


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


http://alistapart.com/articles/redesignrealign

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.


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.


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.


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.


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.


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.


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


http://alistapart.com/articles/redesignrealign

http://www.alsacreations.com/

http://www.opquast.com/

http://www.w3c.org/

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

Documents

Ergonomie, accessibilité et webdesign d'un système de gestion de … · 2014-03-26 · la création de chartes graphique, l'intégration de sites Web et la création de lettres