universitÉ charles de gaulle lille iii - grappamary/cours/stage/exemples/memoire-m2... · usage ;...
TRANSCRIPT
UNIVERSITÉ CHARLES DE GAULLE LILLE III
UFR Mathématiques, Sciences Économiques et Sociales
Mémoire de Master Informatique et Documentsoutenu le 6 septembre 2011
Mickaël Malandran-Banos
Les interfaces web des outils de gestion
le cas de l'application de Gestion Du Temps
Contrat de professionnalisation du 13 septembre 2010 au 29 juillet 2011
Sous la direction de :
Mr Mary Jérémie Responsable du master Informatique et Document
Remerciements
Je remercie Édouard Huault, Mikaël Mourcia et Dominique Vandenbroucke, gérants
de la société Capensis, de m'avoir accueilli au sein de leurs structures et de la
confiance qu'ils ont témoigné à mon égard. Je les remercie également de m'avoir
proposé un contrat à la fin de mon année de professionnalisation.
Je remercie Jérémie Mary, responsable du master Informatique et Document, de
m'avoir permis de faire cette dernière année sous la forme d'un contrat de
professionnalisation. Je le remercie également pour la qualité de la formation que
j'ai reçue.
Je remercie Alain Scieur, ingénieur en système et développement chez Capensis,
d'avoir été là au début de cette année, pour m'aider et orienter mon travail. Je le
remercie car j'ai pu progresser très vite.
Je remercie tous les enseignants du master Informatique et Document pour la
qualité de leurs enseignements. Tous m'ont permis d'avoir une vision critique à
l'égard de ce que je faisais et de la manière dont je le faisais.
Je remercie Armand Dissaux, ingénieur commercial chez Capensis, Simon Dubois,
stagiaire chez Capensis, David Maas, apprenti chez Capensis, Cécile Masia,
responsable Communication chez Capensis et Nicolas Vanwolleghem Responsable
Support chez Capensis. Travailler avec eux a été un réel plaisir, riche en échange
et en apprentissage.
Je remercie Mélie Boussat, mon amie, qui, malgré la distance a toujours eu une
pensée pour moi.
Je remercie Ghislain Senabre-Gourbin, mon ami. Je le remercie car il a toujours été
là dans les moments difficiles, qu'il a toujours cru en moi dans les moments de
doutes et qu'il n'a jamais douté de ce que je valais. Je le remercie également pour
Mickaël Malandran-Banos 2 / 86Mémoire de Master Informatique et Document
ses longs travaux de relecture et ses conseils avisés en matière de grammaire et
de syntaxe. Sans lui, tout aurait été beaucoup plus compliqué.
Enfin, je remercie Patrice Malandran et Maria-del-Pilar Banos, mes parents. Je les
remercie pour leur soutien. Je les remercie également de m'avoir permis de faire
des études longues, d'avoir cru en moi et de m'avoir fait confiance tout au long de
ces années.
Mickaël Malandran-Banos 3 / 86Mémoire de Master Informatique et Document
Résumé
Après avoir présenté le contexte et la naissance de la réflexion autour des
interfaces des applications web, un cadre théorique portant sur trois approches
différentes, l'Interaction Homme-Machine, l'ergonomie web et l'analyse des
usages, est défini. Ces différentes approches permettrons d'analyser et d'étudier
une interface web particulière : l'interface de l'application de Gestion du Temps
développée par Capensis. L'objectif de cette analyse est de dégager une grille
d'analyse et d'évaluation.
Mots-clés : Interaction Homme-machine ; Interface ; web ; ergonomie ;
usage ; développement ; analyse ; évaluation
Mickaël Malandran-Banos 4 / 86Mémoire de Master Informatique et Document
Abstract
After having presented the context and the beginning of thought about web
interfaces, a theoritical framework with three different approaches about Human-
Computer Interaction, web ergonomics and custom analysis is given. This different
approaches let's us analyse and study one specific web interface : the interface of
time management application developed by Capensis. The goal of this analysis is
to give a generic evaluation grid of web interface.
Keywords : Human-Computer interaction ; Interface ; web ; ergonomics ;
usage ; developement ; evaluation ; analysis
Mickaël Malandran-Banos 5 / 86Mémoire de Master Informatique et Document
« L’homme est d’abord un projet qui se vit subjectivement, au lieu d’être une mousse, une
pourriture ou un chou-fleur ; rien n’existe préalablement à ce projet ; rien n’est au ciel
intelligible, et l’homme sera d’abord ce qu’il aura projeté d’être. »
Jean-Paul Sartre, L’existence est un humanisme, Gallimard, 1996, p.30
Mickaël Malandran-Banos 6 / 86Mémoire de Master Informatique et Document
Table des matières
Introduction........................................................................................13
Chapitre 1 : Contexte...........................................................................16
1 Contexte organisationnel.................................................................16
1.1 L'entreprise...................................................................................................16
1.2 Déroulement du Contrat de Professionnalisation..........................................16
2 Contexte technologique pour le développement de l'application de
Gestion du temps................................................................................17
2.1 Techniques utilisées......................................................................................18
2.2 Méthodes pour le développement de l'application de Gestion du temps.....19
Chapitre 2 : Les interfaces web entre technique et usages....................22
1 IHM.................................................................................................22
1.1 Histoire..........................................................................................................22
1.2 Fondements théoriques et paradigmes.........................................................25
1.2.1 Concepts fondamentaux de l'IHM............................................................................25
1.2.2 Typologie des interactions.......................................................................................27
1.3 Web, IHM et interfaces riches.......................................................................29
2 Ergonomie.......................................................................................31
2.1 Architecture de l'information.........................................................................33
2.2 Structuration et présentation du contenu.....................................................35
3 Usages et Appropriation...................................................................36
3.1 Définitions.....................................................................................................36
3.2 Usages et approche orientée usager............................................................37
3.3 Usages des outils de gestion interne ...........................................................37
3.4 Usages et Conception....................................................................................39
Chapitre 3 : analyse de l'interface de l'application de Gestion du Temps 41
1 Description de l'application de Gestion du Temps..............................41
1.1 Paramétrage de l'application de Gestion du Temps......................................41
1.2 Saisie et workflow d'une activité...................................................................51
Mickaël Malandran-Banos 7 / 86Mémoire de Master Informatique et Document
2 Analyse de l'application...................................................................56
2.1 Des interactions soignées pour une interface traditionnelle.........................56
2.1.1 Prédominance de la désignation directe..................................................................56
2.1.2 Retours d'actions et retours d'information importants............................................57
2.1.3 Métaphore discrète voire absente...........................................................................58
2.2 Une conception de page chargée aux couleurs pertinentes.........................59
2.2.1 Des pages chargées................................................................................................59
2.2.2 Un code couleur soigné...........................................................................................60
2.2.3 Manque d'homogénéité des interfaces....................................................................61
2.3 Une architecture de l'information aux parties inégales................................62
2.4 Méthodologie de conception qui pallie à l'absence d'étude d'usages...........62
2.4.1 Absence de réelle étude d'usages...........................................................................63
2.4.2 Méthodologie de conception orientée usager..........................................................63
3 Grille d'analyse et d'évaluation.........................................................64
Conclusion..........................................................................................66
Bibliographie.......................................................................................68
Annexes..............................................................................................72
Mickaël Malandran-Banos 8 / 86Mémoire de Master Informatique et Document
Liste des tableaux
Tableau 1: Propriété du dialogue entre l'homme et la machine..........................................27
Tableau 2: Typologie des interactions de l'application de Gestion du Temps.....................56
Tableau 3: Grille d'analyse d'une application web...............................................................65
Mickaël Malandran-Banos 9 / 86Mémoire de Master Informatique et Document
Liste des figures
Illustrations
Illustration 1: sélection d'un item de menu par pointage du curseur de la souris dans des
menus hiérarchisés..............................................................................................................29
Illustration 2: requête HTTP..................................................................................................30
Illustration 3: définir un système d'organisation..................................................................33
Illustration 4: exemple de résultat d'une enquête de eye-tracking.....................................35
Illustration 5: Page sur laquelle l'utilisateur est dirigé lors de la connexion à l'interface de
Gestion du Temps.................................................................................................................42
Illustration 6: Menu déroulant de l'application de Gestion du Temps..................................43
Illustration 7: La page rôle et équipe lors de l'arrivée sur celle-ci.......................................43
Illustration 8: Page rôle et équipe lors d'un clic sur le nom d'un utilisateur........................44
Illustration 9: Formulaire de modification d'un rôle.............................................................45
Illustration 10: Calendrier du champ date de début et date de fin de la page "rôle et
équipe".................................................................................................................................46
Illustration 11: état de la page "semaine type" lors de l'arrivée sur celle-ci.......................46
Illustration 12: état de la page lors de l'activation d'une semaine type..............................47
Illustration 13: Boîte de dialogue pour l'ajout d'une semaine type......................................48
Illustration 14: Boîte de dialogue permettant de modifier une semaine type.....................49
Illustration 15: Boîte de dialogue permettant d'attacher des utilisateurs à des semaines
types.....................................................................................................................................50
Illustration 16: page du planning hebdomadaire.................................................................51
Illustration 17: apparition d'un cadre informatif lors du survol d'une activité.....................52
Illustration 18: Boîte de dialogue d'ajout d'une activité.......................................................53
Illustration 19: fonctionnement des dates de début et de fin concernant les activités.......54
Illustration 20: sélection d'une heure lors de l'ajout ou la modification d'une activité........54
Illustration 21: Page gestion des statuts..............................................................................55
Mickaël Malandran-Banos 10 / 86Mémoire de Master Informatique et Document
Dessins et schémas
Dessin 1: Architecture de l'application de Gestion du Temps..............................................18
Dessin 2: Modèle de conception en étoile............................................................................20
Dessin 3: Situation de communication.................................................................................26
Dessin 4: Situation d'interaction..........................................................................................26
Mickaël Malandran-Banos 11 / 86Mémoire de Master Informatique et Document
Liste des annexes
Table des matières
Annexe 1 : cahier de spécifications techniques pour la mise en place de
l'outil de gestion du temps...................................................................73
Annexe 2 : Modèle de données pour l'application de Gestion du temps. .81
Annexe 3 : exemple d'analyse d'usages des outils de gestion à partir de la
théorie de l'human agency...................................................................82
Annexe 4 : guide d'utilisation de l'outil de Gestion du Temps.................83
Mickaël Malandran-Banos 12 / 86Mémoire de Master Informatique et Document
Introduction
Nous assistons aujourd'hui à un essor considérable du développement des
applications web. Leurs portabilités sur tous les systèmes d'exploitation et le
développement de la puissance des machines qui ralentissent la durée de
chargement d'une page, en font des atouts majeurs du point de vue de
l'utilisateur. Du point de vue du technicien, l'utilisation du langage Php est
dominante et celle-ci peut apparaître plus simple à maîtriser que d'autres langages
plus fortement typés (comme le C++).
Au cours de mon expérience professionnelle, dans le développement web, au sein
de Capensis, j'ai été amené à prendre toute la mesure du rôle des interfaces des
logiciels qui étaient conçus. Souvent négligées dans le travail du développeur,
celles-ci sont souvent la seule partie visible pour le client final d'une entreprise de
service en informatique. À titre d'exemple, la cellule développement de l'entreprise
Capensis, à développer une application de Gestion du temps. L'estimation de la
durée du temps de travail a été effectuée par deux personnes et se situe autour de
quarante jours. Le projet s'est terminé avec plus de quatre-vingts jours de retard.
Une des raisons invoquée fut celle de la mauvaise estimation de la charge de
travail liée aux interfaces. En outre, j'ai également pu observer, au cours de ma
période de professionnalisation que les éléments qui guidaient la conception d'une
interface au sein du travail du développeur était tournée vers le beau et dans le
meilleur des cas, vers la simplicité d'utilisation. Se limiter à des questions
esthétiques dans la conception d'une interface est assez subjectif et peut conduire
à des interfaces ratées. La simplicité d'utilisation peut également être remise en
cause. Prenons comme exemple, le logiciel VIM. Il s'agit d'un éditeur de texte, très
utilisé au sein des professionnels de l'informatique. Cet outil n'est pas simple
d'utilisation, cependant, après un temps d'apprentissage, VIM peut permettre de
faire gagner beaucoup de temps aux développeurs.
Mickaël Malandran-Banos 13 / 86Mémoire de Master Informatique et Document
L'Interaction Homme-Machine, un des courants de l'informatique, s'attache à
analyser les interactions entre l'être humain et les différents dispositifs techniques
qui l'entourent. S'intéresser aux interfaces implique nécessairement de connaître
des éléments importants liés aux Interaction Homme-Machine. Une remarque, un
peu triviale, que nous pouvons faire sur les interfaces web d'aujourd'hui, consiste
en la comparaison de celles-ci avec le Minitel. En effet, la plupart des applications
web consiste en l'utilisation de formulaire que l'on envoie au serveur qui effectue
des traitements et retourne une réponse. C'est d'une certaine manière de ce que
permettait de faire le Minitel, à la différence près que les applications web offrent
une esthétique plus aboutie. Ceci est sans doute à nuancer avec l'arrivée de ce
que l'on appelle les interfaces riches.
Avec le développement important du web, nous avons également assister à
l'apparition de nouvelles approches liées à l'ergonomie et à l'architecture de
l'information. Ce courant, qui s'intéresse à la manière avec laquelle les êtres
humains organisent leurs navigations, vise à rendre les interfaces les plus
pertinentes possibles.
Une interface web est également un processus de médiation entre des données,
des informations et des individus. À ce titre, la manière avec laquelle chaque
individu va utiliser une interface de manière singulière répond à des logiques
d'usages issues des représentations des individus. Ce courant est particulièrement
utilisé dans les Sciences de l'Information et de la Communication et vise à analyser
les usages et la manière avec laquelle les individus s'approprient un dispositif
technique. Dans le cadre d'une application web, l'interface de celle-ci est la partie
où vont s'exercer des logiques d'usages.
Ainsi, nous pouvons nous interroger sur ce qui fonde la pertinence d'une interface
web à travers les différentes approches que nous avons évoquées précédemment.
Quels sont les outils dont nous disposons pour analyser une interface web et
pouvons-nous définir des règles guidant la conception d'interface web ? Y a – t – il
concurrence ou complémentarité entre les courants que nous avons présentés ?
Mickaël Malandran-Banos 14 / 86Mémoire de Master Informatique et Document
S'il y a complémentarité, quel est le poids de chaque approche ? S'il y a
concurrence, à quelle approche faut-il accorder une place prédominante ?
L'étude que nous avons menée se base sur notre expérience professionnelle au
sein de l'entreprise Capensis, une société spécialisée dans les infrastructures libres
orientées systèmes et réseaux. Au sein de cette entreprise, nous avons participé
au développement d'un logiciel de gestion du temps pour une association
(chapitre 1).
Chacune des approches que nous avons évoquée possède des outils propres
(chapitre 2) qui doivent nous permettre d'analyser et d'étudier l'interface de
gestion du temps que nous avons conçue (chapitre 3).
Outre un retour sur notre expérience professionnelle, nous espérons pouvoir
dégager une grille d'analyse et d'évaluation des interfaces web.
Mickaël Malandran-Banos 15 / 86Mémoire de Master Informatique et Document
Chapitre 1 : Contexte
Ce premier chapitre est introductif. Il vise à présenter le contexte dans lequel la
réflexion que nous avons menée, est née et s'est enrichie.
1 Contexte organisationnel
1.1 L'entreprise
Capensis est une société de service en informatique, spécialisée dans le domaine
du logiciel libre. Historiquement, la société est tournée vers l'étude, l'intégration, le
support et la formation aux infrastructures informatiques libres.
La société dispose de trois agences (Nantes, Paris et Lille). Une vingtaine de
personnes travaillent au sein de la structure, dont quatre au travers des contrats
de stages, de professionnalisations ou d'apprentissages.
La cellule de développement était composée de trois personnes.
1.2 Déroulement du Contrat de Professionnalisation
Mon contrat de professionnalisation au sein de Capensis s'est déroulé en deux
temps. Jusqu'au début du mois de février, j'ai alterné période d'apprentissage à
l'université les lundis, mardis et mercredis et période de professionnalisation les
jeudis et vendredis. Par la suite, j'ai été à temps plein en entreprise.
Au cours de ce contrat de professionnalisation, les tâches qui m'ont été confiées se
sont axées autour du développement web : programmation, modélisation des
données, conception d'interface.
J'ai participé, du mois de septembre à la fin du mois de mars au développement
d'un logiciel de gestion du temps pour une association (annexe 1, p 73 et annexe
Mickaël Malandran-Banos 16 / 86Mémoire de Master Informatique et Document
2, p 81). J'ai ensuite intégré ce logiciel au sein d'une autre organisation, puis en
interne, chez Capensis.
J'ai également été amené à réfléchir sur des problématiques internes en vue de
l'amélioration des outils existants.
L'ensemble des tâches qui m'ont été confiées m'a permis d'appréhender et de
comprendre le métier de développeur dans sa globalité.
2 Contexte technologique pour le développement de
l'application de Gestion du temps
Dans un premier temps, nous présenterons les techniques que nous avons
utilisées dans le cadre du développement de l'application de Gestion du temps,
nous exposerons quelques unes des différentes « règles de conduites » que nous
avons utilisées.
Pour développer cette application, nous avons utilisé le patron de conception
appelé Modèle-Vue-Contrôleur1.
Pour développer le modèle, nous avons utilisé un web-service, afin de rendre notre
modèle le plus indépendant possible des interfaces d'utilisation, et donc,
d'envisager d'autres interfaces. Notre modèle est composé de deux classes. La
classe « MysqlEngine » constitue notre couche d'accès aux données. Celle-ci nous
permet d'effectuer des opérations courantes liées à l'administration d'une base de
données (insertion, mise à jour, interrogation, …). Cette classe est instanciée dans
la classe « GestionDuTemps ». Cette dernière contient l'ensemble des règles de
gestion de l'application et contient toutes les méthodes permettant de faire
fonctionner l'application.
1 Le Modèle-Vue-Contrôleur (en abrégé MVC, de l'anglais Model-View-Controller) est une
architecture et une méthode de conception qui organise l'interface homme-machine (IHM) d'une
application logicielle.
Mickaël Malandran-Banos 17 / 86Mémoire de Master Informatique et Document
2.1 Techniques utilisées
Pour cette application, les techniques utilisées restent assez classiques dans le
développement d'applications web : le langage Php, connecté à une base de
données (MySQL). Le recours à la programmation orientée objet à l'aide du
langage Php n'a été que très marginale.
Le contrôleur est appelé dès qu'une requête est envoyée. Quelque soit la page
demandée, le fichier « moduleController.php » est chargé. En fonction de variables
passées en GET, le contrôleur charge alors le sous-contrôleur correspondant. Ce
sous contrôleur met en forme les données et les envoie au modèle, qui lui répond.
Il met ensuite en forme les données pour les envoyer à la vue. Le passage des
données à la vue se fait à l'aide d'un seul paramètre, un tableau associatif2, qui
contient toutes les variables nécessaires à la mise en forme de la vue. Les fichiers
Css et Javascripts sont stockés du côté du contrôleur. Chaque sous-contrôleur
indique alors à la vue quels sont les fichiers Css et Javascripts à charger.
2 En informatique, un tableau associatif (aussi appelé dictionnaire ou table d'association)
est un type de données associant à un ensemble de clefs un ensemble correspondant de
valeurs.
Mickaël Malandran-Banos 18 / 86Mémoire de Master Informatique et Document
Dessin 1: Architecture de l'application de Gestion du Temps
Contrôleur
Vue
Modèle
Base de donnéesModuleController.php
subControllers
Activites.php
ActivitesStatut.php
(...)
resources
Javascript
CSS
(...)
Moteur Smarty
Activites.tpl
ActivitesStatut.tpl
(...)
GestionDuTemps.php
MysqlEngine.php
Requête : variable « post » et « get »
Pour développer la vue, nous avons utilisé le framework3 Smarty. Ce framework
permet de dissocier de manière très claire la structure logique d'un programme de
sa mise en forme. En effet, le framework Smarty permet de créer des fichiers HTML
ou XHTML tout en ayant recours à des boucles et des conditions. À l'aide des
paramètres passés par le contrôleur, la vue chargera le fichier Smarty
correspondant.
L'architecture que nous avons définie peut être critiquée. La principale remarque
que nous pouvons faire sur notre travail concerne la vue. Nous pensons que nous
avons rendu notre vue trop « intelligente ». En effet, en ayant recours à de
nombreuses conditions, notamment pour la gestion des droits, la vue est devenue
peu autonome.
Après avoir présenté l'architecture globale de l'application de Gestion Du Temps,
nous souhaiterions présenter l'ensemble des règles que l'équipe chargée du
développement s'est données pour homogénéiser la structure du code.
2.2 Méthodes pour le développement de l'application de
Gestion du temps
Pour développer cette application, nous avons mis en œuvre un serveur SVN4, afin
de pouvoir travailler en équipe et gérer les éventuels conflits de versions sur les
fichiers d'une part, et de pouvoir accéder à un historique de notre travail d'autre
part.
Nous avons également défini un ensemble de règles pour permettre d'avoir un
code homogène. Ainsi, à chaque appel de fonction, nous demandons un seul
paramètre : il s'agit d'un tableau associatif qui contient l'ensemble des éléments
dont nous avons besoin. Chaque fonction retourne également un tableau
associatif. Ce tableau possède la structure suivante :
3 En programmation informatique, un framework est un kit de composants logiciels structurels,
qui servent à créer les fondations ainsi que les grandes lignes de tout ou partie d'un logiciel
4 Abrégé du logiciel de gestion de version « subversion ».
Mickaël Malandran-Banos 19 / 86Mémoire de Master Informatique et Document
1. 'return' => 2. 'code' => 3. 'message' =>4. 'data' =>
Ainsi, lorsqu'une erreur se produit, il est important de remplir le code et le
message. Dès lors que la clé 'return', 'code' n'est pas nulle, nous savons que les
données retournées dans la clé 'data' sont potentiellement fausses et qu'il faut
afficher le message d'erreur contenu dans la clé 'return', 'message'.
Nous nous sommes également imposés la même indentation à tous et la nécessité
de mettre un commentaire en début de fonction afin de spécifier les valeurs prises
en paramètre, le traitement effectué par la fonction et ce qu'elle retourne.
Si ces traitements peuvent apparaître lourds, il n'en demeure pas moins qu'ils
permettent d'avoir des données très structurées. Cependant, le risque de se
perdre dans des tableaux aux multiples entrées reste très grand.
Du point de vue de la gestion de projet, nous avons suivi un modèle de conception
en étoile (Dessin 2). Ce modèle nous a permis d'être centrés sur l'utilisateur et ses
Mickaël Malandran-Banos 20 / 86Mémoire de Master Informatique et Document
Dessin 2: Modèle de conception en étoile
Évaluation
Analyse de la tâche
des fonctionsCodage
PrototypageSpécification des besoins
Conception conceptuelleet formelle
Utilisateurs
attentes. Néanmoins, ce mode de conception nous a amené à largement dépasser
les délais qui nous étaient impartis.
Ainsi, nous avons décrit brièvement le contexte organisationnel et technique de
notre travail. Nous nous sommes attardés plus spécifiquement sur l'application de
Gestion du temps et son architecture ainsi que sur les règles que nous nous
sommes fixées. Nous allons maintenant nous intéresser plus spécifiquement aux
interfaces.
Mickaël Malandran-Banos 21 / 86Mémoire de Master Informatique et Document
Chapitre 2 : Les interfaces web entre technique et usages
Les interfaces web sont des composantes importantes de l'Interaction Homme-
Machine. C'est pourquoi, nous souhaitons décrire ces dernières. Cependant, nous
verrons qu'en dépit des innovations récentes concernant les Interaction Homme-
Machine, une interface web limite l’interaction entre l'homme et la machine, d'où
la nécessité d'avoir recours à une autre discipline : l'ergonomie. Néanmoins, il ne
faut pas négliger le fait qu'une interface web est amenée à être utilisée voire
appropriée par des individus. De ce fait, la connaissance des usages est également
importante.
1 IHM
L’Interaction Homme-Machine définit les moyens mis en œuvre pour permettre la
communication entre un individu et une machine. Dans le cadre d'application web,
la communication s'effectue souvent avec une base de données manipulée à l'aide
d'une interface web. Pour bien comprendre les enjeux de l'IHM, nous présenterons
de manière brève l'histoire de celle-ci, puis quelques concepts théoriques qui nous
permettrons d'analyser l'interface que nous avons développée. Enfin, nous nous
attacherons à décrire les évolutions de l'interaction entre l'homme et la machine
sur le web à travers les interfaces riches.
1.1 Histoire
L’interaction Homme-Machine a près de cinquante ans. C'est relativement peu si
l'on considère le goût pour les êtres humains de créer et d'inventer des machines
servant à automatiser, communiquer, apprendre et industrialiser. Cependant, de
nombreux événements ont jalonné l'histoire de cette discipline et nécessitent un
intéressement particulier afin de comprendre les fondements des interfaces
d'aujourd'hui. Nous serons susceptibles d'utiliser des termes techniques qui seront
Mickaël Malandran-Banos 22 / 86Mémoire de Master Informatique et Document
repris et détaillés dans la partie suivante. Nous avons en effet pensé d'une
manière plus logique de partir de l'histoire de l'IHM pour en détailler par la suite
des éléments qui nous permettrons une analyse du travail d'interfaçage que nous
avons réalisé au cours de notre année de professionnalisation.
Ce sont véritablement les travaux de Ivan Sutherland5 qui marque le début des
travaux en Interaction Homme-Machine au début des années 1960. Le
développement de SketchPad, grâce à un crayon optique, permet de dessiner des
objets, les redimensionner, les changer, les manipuler de manière directe. Il définit
également la notion de réalité virtuelle. La réalité virtuelle peut être vue comme
une simulation visuelle et/ou sonore, en permettant aux individus via des actions,
d'interagir avec cette réalité créée numériquement. À ce titre, la plupart des
métaphores utilisées dans le domaine de l'informatique peuvent être considérées
comme des réalités virtuelles (réduites certes, puisqu'elles ne mettent en avant et
n'utilisent que la vue).
C'est dans cette lignée qu'est inventé, par Douglas Engelbart6 en 1965, un des
périphériques les plus utilisés qui soit : la souris. Il développe également les
claviers à accords qui permettent lors de la saisie de plusieurs touches
simultanées, de lancer des commandes qui ne possèdent pas leurs propres
touches.
Mais la véritable innovation de Douglas Engelbart reste la mise en avant de
l'utilisation de programme permettant le travail au collaboratif, au milieu des
années 1960. En effet, en pensant comme Vannevar Bush, que l'informatique peut
nous permettre d'élever notre intelligence, il développe pour cela un système
d'hypertexte et de vidéoconférences qui permettent à tous les utilisateurs distants
de désigner des objets à l'écran.
L'étape suivante concerne le « STAR » de Xerox, au cours des années 1970. Les
innovations apportées en terme d’Interaction Homme-Machine sont
5 Ingénieur en informatique Américain.
6 Inventeur Américain et pionnier de l'informatique
Mickaël Malandran-Banos 23 / 86Mémoire de Master Informatique et Document
particulièrement importantes. En effet, l'ordinateur est fait pour être connecté au
réseau Ethernet et permet une navigation quasi transparente sur les différents
éléments du réseau (imprimantes, …). En outre, le « STAR » intègre le
multitraitement et la métaphore du « Bureau ». Enfin, et non des moindres, c'est la
notion même de document qui devient centrale au sein de ce système et permet
de créer, modifier, déplacer et supprimer de manière simple les documents ainsi
créés. On peut également noter l'abandon des fenêtres modales qui bloquent
l'utilisateur au profit de boîtes de propriétés propres à un document.
En outre, les types d'applications se sont également diversifiés. Les applications de
dessins furent les premières à apparaître, suivis des logiciels de traitements de
textes. Mais les plus grandes innovations apparaissent au cours des années 1970,
comme nous l'avons déjà évoqué. En effet, l'apparition de feuilles de calculs, mais
également de logiciels basés sur l'hypertexte, viennent redéfinir les notions
d'application et mettent en lumière tout l'intérêt de la notion de document, notion
aujourd'hui centrale dans la plupart des systèmes d'exploitation (Windows,
Ubuntu, ...).
Ce n'est qu'au début des années 1990 que vont apparaître de nouveaux concepts
révolutionnaires dans l’interaction Homme-Machine. En effet, les chercheurs et les
inventeurs abandonnent peu à peu le concept et l'idée de créer des réalités
virtuelles au profit de la réalité augmentée. L'idée est d'intégrer les informations
des systèmes informatiques aux objets physiques, au lieu de les confiner à un
usage informatique au travers des ordinateurs. C'est notamment l'invention du
Digital Desk de Pierre Welner, grâce à des projecteurs et des caméras qui permet
la manipulation d'objets physiques sur un bureau. Cette interaction sert à projeter
des informations ou encore lancer des applications, qui peuvent alors être
manipulées à même le bureau.
Cette courte synthèse concernant l'histoire de l'Interaction Homme-Machine nous
montre que la plupart des concepts sont anciens. Nous verrons ultérieurement
l'état actuel du web au sein de ces IHM. Avant cela, nous souhaitons cependant
Mickaël Malandran-Banos 24 / 86Mémoire de Master Informatique et Document
définir des concepts importants qui nous permettrons d'analyser l'interface web de
l'outil de Gestion du Temps que nous avons développé.
1.2 Fondements théoriques et paradigmes
Pour mettre en évidence les fondements théoriques et les paradigmes actuels de
l'IHM, nous allons d'abord nous intéresser aux concepts fondamentaux de celui-ci
suivie d'une typologie des interactions.
1.2.1 Concepts fondamentaux de l'IHM
L'interaction Homme-Machine consiste en l'étude de différents composants :
• l'utilisateur
• la machine
• la tâche
• l’interaction
L'utilisateur est l'élément le plus important de la conception d'interface. En effet,
sans utilisateur, l’Interaction Homme-Machine perd de sa substance. Les
utilisateurs sont à la fois uniques et semblables. Ils sont uniques dans la mesure où
leurs connaissances et représentations du monde sont différentes, et semblables
dans la mesure où face à une machine le stress et la fatigue les atteignent tous, de
ce fait leur volonté principale est de s'économiser.
La machine est également un composant important. La machine est à comprendre
dans le sens le plus large : cela peut être un Iphone, un ordinateur, une
télévision, ...
La tâche correspond à l'action à mener. La question à se poser est « QUOI » ? La
tâche est liée au concept d'activité, la partie visible de celle-ci et répond à la
question « COMMENT » ? La plupart du temps, la tâche est liée à une interaction,
dite tâche secondaire. Afin de développer au mieux un système interactif, il est
Mickaël Malandran-Banos 25 / 86Mémoire de Master Informatique et Document
souvent recommandé de construire un arbre des tâches détaillant ainsi l'action en
différentes sous-parties pour permettre de construire un programme le plus
logique possible. La tâche peut ainsi être exécutée par la machine ou par
l'utilisateur en fonction de la capacité et de la connaissance de l'utilisateur et de la
machine.
Avant de définir l’interaction, nous souhaitons présenter la différence entre
communication et interaction pour bien préciser l'objet d'étude des IHM. Cela nous
permettra ensuite de spécifier les concepts de l'IHM.
Des deux schémas (Dessin 3 et 4) nous permettent de mettre en évidence les
différences entre la communication et l’interaction. Ainsi, dans une situation de
Mickaël Malandran-Banos 26 / 86Mémoire de Master Informatique et Document
Dessin 3: Situation de communication
Destinateur
construit le message
Destinataire
reconstruit le message
Langage ou code commun
Dessin 4: Situation d'interaction
Agent Agent
Système de conventions communes qui se découvre
et évolue au cous de l'interaction
communication, destinateur et destinataire échangent des informations tout en
s'influençant de manière réciproque, alors que la situation d’interaction
conditionne, voire contraint les différents échanges à travers le contexte et les
conventions existantes. En outre la situation de communication est orientée ce qui
n'est pas le cas de la situation d'interaction.
Ainsi une interaction est le résultat d'une initiative soit de l'utilisateur, soit de la
machine. L’interaction est véritablement le dialogue qui s'instaure entre l'être
humain et la machine. Le tableau (tableau 1) suivant définit les propriétés de ce
dialogue.
Type de propriété Agent ButInitiative Utilisateur / MachinePermettre aux utilisateurs expérimentés de garder
leurs potentiels de décisions et aux utilisateurs novices de pouvoir utiliser une application
Contrôle Utilisateur Permettre à l'utilisateur de prendre conscience de sa nécessité dans le processus.
Cohérence Machine Uniformiser les commandes et la présentationRetours /
rétroaction
Machine Doivent être immédiats et non ambigus pour permettre à l'utilisateur d'être informé du déroulement de sa tâche.
Complexité Machine Doit proposer des menus structurés pour permettre à l'utilisateur de ne pas se perdre.
Tableau 1: Propriété du dialogue entre l'homme et la machine
Ce tableau nous montre que le rôle de l'utilisateur dans l’interaction doit être le
plus faible possible. En effet, le principe de l'économie pour l'utilisateur doit
s'appliquer : l'interaction doit donc être précise, rapide et simple.
Cela nous amène à nous intéresser aux différents types d’interactions existants.
1.2.2 Typologie des interactions
On distingue différents types d'interaction.
• Désignation directe : Le dialogue instauré par ce type réside dans le fait que la
machine propose et l'humain désigne ces choix à l'aide d'un dispositif de pointage.
L'avantage de ce type de langage et que l'être humain doit simplement savoir
désigner. C'est le « point and clic ».
Mickaël Malandran-Banos 27 / 86Mémoire de Master Informatique et Document
• Manipulation directe : on désigne par manipulation directe le fait qu'un utilisateur
agit directement par manipulation des objets à l'écran, dans un environnement
informatique simulé. Le retour est immédiat et les modifications sont directement
visibles. L'utilisation de la manipulation directe repose sur un lien, voir une
analogie avec le monde réel, amenant parfois certains auteurs à parler de réalité
virtuelle. Par exemple, lorsqu'un utilisateur utilise un système d'exploitation
Windows et qu'il glisse et dépose un document dans la corbeille : il s'agit d'une
manipulation directe de l'objet au centre de la tâche et d'une analogie du monde
réel.
• Manipulation indirecte : On parle de manipulation indirecte, dès lors que
l'utilisateur doit avoir recours à une boîte de dialogue permettant de définir les
propriétés d'un objet, l'utilisation de palette et de menu.
• Manipulation textuelle par langage de commande : il s'agit d'une interaction
textuelle à travers laquelle les commandes sont lancées à l'aide de textes pré-
enregistrés dans le système. La principale difficulté de ce système réside dans le
fait qu'il est nécessaire, pour l'utilisateur, de se documenter et de connaître les
mots-clés utilisés pour lancer les commandes.
On distingue également différents niveaux d'interactions :
• Lexical : niveau des unités élémentaires d'informations directement
utilisables (icônes, touche du clavier...)
• Syntaxique : ce niveau définit la manière avec laquelle les unités lexicales sont
combinées et utilisées. Dans le cadre d'un style d'interaction (menu, langage
naturel, formulaire, ...), les dispositifs physiques d'interaction (souris, ...)
permettent de capter temporellement les mouvements, qui sont assemblés
spatialement en phrases puis interprétés par l'application. Par exemple la
sélection d'un item dans les menus hiérarchisés (voir illustration 1).
• Sémantique : définit ce que fait une opération, ses arguments, les effets attendus,
le retour d'information, les erreurs possibles et leurs effets. Par exemple le glisser
déposer d'un fichier sur la corbeille a pour sémantique la destruction de ce fichier.
Mickaël Malandran-Banos 28 / 86Mémoire de Master Informatique et Document
Tout ceci nous amène à spécifier deux approches des IHM : l'une visant à augmenter
l'intelligence de la machine en essayant de lui permettre de communiquer en langage
naturel. Cette approche est dîtes dialogique. L'autre en donnant les moyens à l'utilisateur
d'agir directement sur la machine, de contrôler son fonctionnement et de ne pas induire
d'erreur. Cette approche est dîtes manipulatoire.
Tout ces éléments possèdent des implications dans la conception et l'architecture des
logiciels.
Après avoir fait un état de l'art synthétique concernant les savoirs en IHM nous souhaitons
nous intéresser plus spécifiquement au web et aux interfaces riches et aux relations
qu'elles entretiennent avec le courant de l'IHM.
1.3 Web, IHM et interfaces riches
En premier, lieu nous souhaitons nous intéresser au fonctionnement du web et des
requêtes HTTP (illustration 2).
Mickaël Malandran-Banos 29 / 86Mémoire de Master Informatique et Document
Illustration 1: sélection d'un item de menu par pointage du curseur de la souris
dans des menus hiérarchisés
Une requête HTTP se forme de la manière suivante : un visiteur, utilise un poste
client, et envoie une requête à un serveur qui lui renvoie la page. Ainsi, les
premières applications web se sont formées autour de formulaires remplis par
l'utilisateur, qui envoie alors son formulaire au serveur. Le serveur traite alors le
formulaire et retourne la réponse (une nouvelle page) au visiteur. Aujourd'hui
encore, la plupart des applications web utilise ce fonctionnement. De manière un
peu triviale, nous pourrions comparer le web à un Minitel auquel on aurait ajouté
des images et du graphisme.
C'est pourquoi nous avons aujourd'hui recours à un terme inventé en 2002 : les
interfaces riches, ou encore Rich Internet Application. Ce terme ne possède pas de
définition précise mais recouvre l'ensemble des nouvelles applications web pour
lesquelles un soin particulier est apporté au temps de chargement, qui permettent
souvent l'ajout de composants personnalisables ou encore qui s'intéressent
particulièrement à la dimension interactive de l'internet.
Historiquement le web était destiné à une mise à disposition de documents reliés
entre-eux par des liens hypertextes, comme l'avait imaginé Vannevar Bush en
1945. En se basant sur ce qui existait précédemment en terme de lecture, la page
a été reconstruite sur le web. C'est cette notion même de page que l'Internet Riche
a déconstruit pour permettre une interactivité plus grande.
Pour cela, certaines évolutions et innovations techniques sont à mettre en avant.
En premier lieu, le développement de script exécuté côté client a permis
Mickaël Malandran-Banos 30 / 86Mémoire de Master Informatique et Document
Illustration 2: requête HTTP
d'accélérer les retours de la machine vers les utilisateurs. En effet, si l'on considère
un formulaire, celui-ci n'est plus forcément validé uniquement côté serveur, mais
peut également l'être côté client. Plus encore que cela, la véritable révolution vient
de la technologie AJAX7. En effet, en permettant un échange asynchrone entre le
client et le serveur, AJAX permet de recharger des parties de pages sans pour
autant recharger l'intégralité de la page. Il s'agit d'un gain en interactivité très
clair, qui permet de sortir de l'échange illustré plus haut (illustration 5). En outre, le
javascript peut, sans révolutionner les interactions entre l'homme et la machine,
rendre celle-ci plus fluide et plus aidée, notamment grâce aux différents
framework existants. Il est alors possible de créer des widget8, d'avoir recours au
drag and drop9, autrement dit, de soigner particulièrement l'interface utilisateur.
D'autres technologies existent, nous pouvons par exemple cité FLEX, basé sur le
flash. Néanmoins, notre intérêt s'oriente logiquement vers le javascript puisqu'il
s'agit du langage que nous avons le plus utilisé pour développer l'application de
Gestion du Temps.
Ainsi, nous avons pu découvrir et appréhender les enjeux de l'Interaction Homme-
Machine à travers l'histoire de celle-ci, mais également les concepts fondamentaux
de cette discipline. Nous avons également vu que le web ne se prêtait pas
forcément à des interfaces poussées, mais que les interfaces riches peuvent, dans
une certaine mesure, changer la donne. Une interface web peut également être
appréhender à travers une autre approche, dérivée de celle-ci, qualifiée
d'ergonomie.
2 Ergonomie
L'ergonomie est à l'origine un domaine pluridisciplinaire de la recherche cherchant
à étudier les relations que l'humain entretient avec ses outils de travail. La société
d'ergonomie de langue française en donne cette définition : « la mise en œuvre de
7 Asynchronous Javascript And XML
8 Contraction des termes windows et gadget
9 Glisser déposer
Mickaël Malandran-Banos 31 / 86Mémoire de Master Informatique et Document
connaissances scientifiques relatives à l'homme et nécessaires pour concevoir des
outils, des machines et des dispositifs qui puissent être utilisés par le plus grand
nombre avec le maximum de confort, de sécurité et d'efficacité ». Appliquée au
web, l'ergonomie étudie les activités de traitement de l’information et de
représentations mentales chez l’être humain, afin de les rendre compatibles avec
le fonctionnement des systèmes automatisés et poursuit plusieurs objectifs :
• utilisabilité : c'est à dire la facilité de l'utilisation de l'interface
• accessibilité : c'est à dire rendre accessible l'application web pour tous les
individus.
• Facilité d'apprentissage : c'est à dire rendre aisé la compréhension de
l'environnement et du fonctionnement de l'application.
• Attrait visuel pour l'interface.
Ainsi l'ergonomie est en quelque sorte la branche psychologique et cognitive de
l'IHM, dans la mesure où celle-ci va se centrer sur l'être humain et ses processus
cognitifs afin de rendre sa navigation sur le web simple, logique et intuitive.
L'ergonomie web s'intéresse à différents processus cognitifs :
• la perception : il s'agit du processus par lequel l'individu perçoit et
structure les données sensorielles reçues.
• L'attention : il s'agit du processus par lequel l'individu va se focaliser sur
certains stimulis et en ignorer d'autres.
• La rétention : Il s'agit des différents processus de mise en mémoire des
individus.
Ainsi, ces différents processus nous amène à présenter deux axes de l'ergonomie:
l'architecture de l'information d'une part et d'autre part,la structuration d'une page
en fonction de critères davantage liés à l'aspect et à la mise en forme d'une page.
Mickaël Malandran-Banos 32 / 86Mémoire de Master Informatique et Document
2.1 Architecture de l'information
L’architecture de l’information peut être définie comme l’art et la science de
former et organiser des contenus, dans le but de faciliter l'apprentissage et la
compréhension de l'application web.
L'architecture de l'information comprends quatre composantes principales :
1. Le système d’organisation, consiste en l’énumération, la catégorisation et la
structuration des informations que nous souhaitons voir apparaître sur
l'application web (illustration 3).
2. Le système d'étiquetage, s’intéresse à la manière dont les éléments sont
nommés, comme par exemple les noms des liens d’un menu .
3. Le système de navigation, concerne la navigation et les mouvements que
nous pouvons opérer au sein de l'application web.
4. Le système de recherche, concerne l’intégration d’un moteur de recherches
au sein de l'application.
Partant de ces quatre composantes, il est recommandé aux concepteurs de ne pas
imposer leurs logiques mais plutôt de partir de celles des utilisateurs. Cela
souligne l'importance de la conception.
Mickaël Malandran-Banos 33 / 86Mémoire de Master Informatique et Document
Illustration 3: définir un système d'organisation
Nous souhaitons dresser une liste de recommandation concernant l'architecture de
l'information.
• Concernant le système d'organisation, il est recommandé de trouver un
juste équilibre entre largeur et profondeur. S'il y a trop de profondeur, les
utilisateurs n'iront pas jusqu'au bout pour trouver des informations. S'il y a
trop de catégories différentes les utilisateurs pourront se sentir perdus.
• Concernant le système d'étiquetage, il est recommandé d'utiliser un
maximum le texte comme code et de mettre les liens en exergue par
rapport au reste du contenu. En effet, le code textuel est le mieux compris
par l'ensemble des individus.
• Concernant le système de navigation, il est recommandé de réaliser un
système qui empêche l'utilisation des boutons « suivant » et « précédent »
des navigateurs. Il est particulièrement important d'avoir des menus de
premier et de deuxième niveau, éventuellement de troisième niveau. Nous
tenons également à préciser certaines choses concernant des systèmes de
navigations particuliers :
▪ concernant les onglets : ceux-ci doivent être correctement dessinés,
un onglet particulier doit être sélectionné par défaut, et une mise en
valeur suffisante doit exister.
▪ Concernant les menus déroulants : sélectionner une rubrique puis
une sous-rubrique dans un menu déroulant implique deux
mouvements. Cela nécessite donc une certaine précision avec la
souris, puisqu'un mouvement en diagonal ne permettra pas de
sélectionner l'item choisi. Les contenus des menus déroulants sont
plus difficilement mémorisables et résultent d'un apprentissage (par
exemple, nous avons appris et mémorisé que sous le menu fichier se
trouvait l'item ouvrir).
Mickaël Malandran-Banos 34 / 86Mémoire de Master Informatique et Document
2.2 Structuration et présentation du contenu
En premier lieu, je souhaiterais présenter le résultat d'une enquête de eye-
tracking. Les enquêtes de eye-tracking montre le parcours visuel des individus sur
une page web.
Dans l'illustration 4, les zones en rouge montrent les zones les plus regardées, les
zones en jaune sont de second plan, suivies des zones en bleu et en grisé les
zones de troisième plan. Cela nous donne des indications en ce qui concerne la
définition de la structure d'une page.
En outre, l'utilisation de la couleur doit être fait avec raison. En effet, la couleur
doit être utilisée de manière à venir qualifier le contenu.
Mickaël Malandran-Banos 35 / 86Mémoire de Master Informatique et Document
Illustration 4: exemple de résultat d'une enquête de eye-
tracking
Il est recommandé de laisser 40 à 60 % d'espace blanc sur le contenu d'une page
web, afin de diminuer les temps de lecture et de parcours.
En outre, il importe également de garder une homogénéité tout au long de la
navigation.
Ainsi, nous avons pu voir que l'architecture de l'information ainsi que sa
représentation constituent des éléments importants dans la conception d'une
interface web. D'une certaine manière, il s'agit d'améliorer et de donner de la
profondeur à nos interfaces grâce à cette discipline. Néanmoins, aujourd'hui, les
interfaces sont le point de rencontre entre les êtres humains et des systèmes
informatiques. Dans ce cadre, les notions d'usages et d'appropriations des outils
au travers des interfaces entretiennent une importance toute particulière.
3 Usages et Appropriation
La question de l'usage est devenu centrale depuis une trentaine d'année. Si
auparavant, la considération de l'objet (technique) primait sur la considération de
l'individu, un changement s'est opéré pour analyser un objet du point de vue de
son usage. Cependant, la notion d'usage est une notion difficile à définir et à
appréhender.
3.1 Définitions
En premier lieu, il convient de préciser que la notion d'usages n'est pas à
confondre avec la notion d'utilisation. L'utilisation est prévue à priori alors que
l'usage ne peut se constater qu'à posteriori. En d'autres termes, l'utilisation se
contente de s'attacher au mode d'emploi alors que l'usage s'intéresse à la manière
dont les individus vont s'approprier les objets.
À ce titre, nous tenons également à opposer l'usage aux pratiques. En effet, les
pratiques sont collectives alors que l'usage est individuel.
Mickaël Malandran-Banos 36 / 86Mémoire de Master Informatique et Document
Ainsi les usages sont la manière avec laquelle les individus s'approprient les objets
en fonction de leurs représentations personnelles du monde qui les entoure.
Ainsi, pour analyser des usages, il importe de se concentrer sur les représentations
individuelles pour comprendre les logiques qui sont à l’œuvre dans l'appropriation
(ou non) des objets et des dispositifs techniques.
Ainsi, usages et appropriation sont des concepts transdisciplinaires faisant appel à
la sociologie, la psychologie et les sciences cognitives.
3.2 Usages et approche orientée usager
Les études des usages se sont pendant un certain temps concentrées
essentiellement sur le tout technique ou au contraire dans une perspective anti
technique. L'approche orientée usager de l'analyse des usages tente à faire limiter
les déterminismes techniques et sociaux, en donnant aux usagers une autonomie
dans l'appropriation des techniques.
À ce titre, nous pouvons voir que dans de nombreuses entreprises,
l'investissement accru dans les technologies de la communication ne faisait pas
progresser la productivité. Une des explications fournies s'axe autour de l'usage
des techniques. C'est en effet, l'usage, c'est-à-dire la manière avec laquelle les
salariés vont utiliser les techniques qui vont permettre ou non d'effectuer des
gains de productivités. En d'autres termes, ce que l'on suppose ici, c'est qu'au lieu
de s'intéresser à la « bonne technique » ou au « bon contexte » il convient plutôt
de s'intéresser à la « bonne utilisation ».
Ainsi, l'approche orientée usager, propose de dépasser les deux pièges
épistémologiques à savoir le déterminisme technique et le déterminisme social.
3.3 Usages des outils de gestion interne
Un des premiers éléments à souligner lorsque l'on parcourt la littérature
concernant les outils de gestion interne concerne la diversité des disciplines qui
Mickaël Malandran-Banos 37 / 86Mémoire de Master Informatique et Document
peuvent y être rattachée : Sciences de l'Information et de la Communication et
Sociologie, Sciences de Gestion, Psychologie et Sciences Cognitives.
Outre ce premier constat, une des conséquences de l'approche orientée usager de
l'analyse des usages des outils de gestion interne est l'apparition de la théorie de
« l'human agency ». Inspirée de la théorie structuraliste de Giddens (1984)10, la
théorie de l'human agency permet d'expliquer pourquoi différents usages sont
possibles d’un même artefact technique par des utilisateurs différents et ce dans
des contextes spatio-temporels variés . Cette théorie est définie de la manière
suivante par Emirbayer & Mische : « l’engagement, construit temporairement, par
les acteurs situés dans des différents contextes spatio-temporels et relationnels
qui, à travers les interactions entre leurs habitudes, leurs imaginations et leurs
jugements sur le futur, reproduisent et/ou transforment les structures existantes
de leurs actions ». Cette théorie est donc constituée par trois éléments
interconnectés :
• l'itération : se réfère à la réactivation sélective des éléments connus (et
donc passés) par les acteurs en vue d'influencer leurs modes de réflexions.
• La projection : concerne la génération imaginative par les acteurs des
trajectoires potentielles (donc futures).
• L'évaluation pratique : consiste en l'élaboration des jugements par les
acteurs dans le but d'analyser les actions.
Cette théorie permet notamment d'analyser les usages d'un dispositif technique de
type ERP ou CRM, c'est-à-dire orientée vers la gestion interne. En effet, les outils
de gestions peuvent expliquer les différents usages en fonctions des facteurs
espace, temps et contexte (annexe 3, p 82).
10 En effet, de nombreux auteurs s'inspire de la dualité de structure pour l'appliquer à la dualité de
la technologie et analyser ainsi les organisations et leurs rapports à la technologie.
Mickaël Malandran-Banos 38 / 86Mémoire de Master Informatique et Document
3.4 Usages et Conception
Usages et conception semblent contradictoires. En effet, l'analyse des usages
s'effectue lorsqu'une technique possède suffisamment d'existence pour pouvoir
révéler les différents types d'utilisation. Néanmoins certains éléments peuvent
venir contredire cela.
Nous souhaitons ici citer deux méthodologies qui permettent de lier usages et
conception.
La conception d'un outil est avant tout lié à des intentions d'usages. Il est alors
possible de tester ces intentions d'usages auprès des utilisateurs finaux. Cela
permet d'avoir au moins une vision partielle des usages qui seront effectifs.
Une deuxième méthodologie s'attache à mettre en place une méthode de co-
conception avec les utilisateurs. Cette méthode souligne l'importance de
l'implication des différents usagers et de la mise en place de scénario d'usage à
répéter en fonction de boucles itératives.
Ainsi, nous avons pu voir que l'usage constitue une part importante du succès ou
non d'un outil. Néanmoins, l'usage ne s'intéresse pas directement à l'interface,
mais plutôt à l'outil dans sa globalité (possibilités de calculs, ...). L'interface n'est là
que pour orienter l'usage.
Pour conclure ce second chapitre, nous pouvons voir que les trois approches
présentent des points communs et des divergences. Des divergences dans la
mesure où elles ne sont pas issues des mêmes disciplines et de ce fait utilisent des
méthodologies et des aspects théoriques différents. Mais c'est plutôt sur les points
de rencontre qu'il convient de s'arrêter. En effet, chacune d'entre elle accorde à
l'être humain, qualifié alors d'usager, d'utilisateur une place prépondérante.
La dénonciation d'approche techno-centrée ou anti technique permet de redonner
de la valeur à la place que doit posséder l'être humain. Il faut également souligner
que c'est l'utilisation de l'outil qui donne de la valeur au travail de développement
fourni. En effet, une application, aussi belle et ergonomique soit-elle, ne sera
Mickaël Malandran-Banos 39 / 86Mémoire de Master Informatique et Document
valorisée qu'au travers de l'utilisation de celle-ci. Ceci nous amène à considérer
que l'approche en terme d'analyse des usages est sans doute plus importante que
les deux premières. C'est également une approche chronophage, qui est donc très
coûteuse. De ce fait, les organisations ont tendance à la négliger fortement, bien
que des efforts aient été faits pour orienter le travail de l'usage dès la phase de
conception.
Mickaël Malandran-Banos 40 / 86Mémoire de Master Informatique et Document
Chapitre 3 : analyse de l'interface de l'application de Gestion du Temps
La première difficulté de l'analyse que nous proposons de faire, réside dans le fait
que l'interface que nous nous proposons d'étudier est, par définition, interactive,
alors que le papier sur lequel nous allons appuyer cette analyse ne l'est pas. C'est
pourquoi, nous commencerons, dans une première partie par présenter, de la
manière la plus détaillée possible l'application de Gestion du Temps. Cela nous
permettra, dans une seconde partie d'analyser l'interface de l'application et dans
une dernière partie, dégager une grille d'analyse et d'évaluation plus générale des
applications web.
1 Description de l'application de Gestion du Temps
L'objectif de l'application de Gestion du Temps est de permettre aux collaborateurs
d'une structure de saisir du temps, afin de permettre au personnel encadrant
d'analyser les répartitions de temps sur des périodes. Nous ne pouvons pas ici
détailler l'intégralité de l'application. Nous avons opéré une sélection des différents
éléments qui nous apparaissaient importants ou caractéristiques de l'application
(pour plus d'information, annexe 1, p 73 et annexe 4, p 83). Nous présenterons
donc l'application de Gestion du Temps selon deux aspects : le paramétrage et la
saisie d'activité.
1.1 Paramétrage de l'application de Gestion du Temps
L'application de Gestion du Temps a été développée comme un module d'un
logiciel de CRM11. Une fois connecté à la plateforme du CRM, dans le module de
Gestion du Temps,l'utilisateur arrive sur la page suivante (illustration 5) :
11 Content Relationship Management
Mickaël Malandran-Banos 41 / 86Mémoire de Master Informatique et Document
Le bandeau rose, en haut, désigne le menu de l'application CRM. En violet, au
dessous, à droite de l'écran, il s'agit du menu de l'application de Gestion du
Temps. À droite de l'écran, en bleu ciel, il s'agit d'informations toujours présentes à
l'écran.
Nous nous intéresserons pour l'instant au paramétrage de l'application. Nous
n'allons pas détaillé tous les modes de paramétrages de l'application, qui sont bien
trop nombreux, c'est pourquoi nous en avons sélectionné certains.
Les utilisateurs sont créés au niveau du CRM. Pour pouvoir utiliser l'application de
Gestion du Temps, il est nécessaire que ces derniers possèdent au niveau de celle-
ci, un rôle (qui servira pour la gestion des droits), ainsi que des semaines types
(qui permettrons la saisie de temps).
Pour cela, nous nous rendons dans le menu « administration » au niveau « rôle et
équipe » (illustration 6).
Mickaël Malandran-Banos 42 / 86Mémoire de Master Informatique et Document
Illustration 5: Page sur laquelle l'utilisateur est dirigé lors de la connexion à l'interface de
Gestion du Temps
Le menu déroulant ne possède que deux niveaux. Il est impossible de cliquer sur le
premier niveau. On note également un changement de couleur lors du survol d'un
lien du deuxième niveau.
Une fois le lien « Rôles et équipes » activé, nous arrivons sur la page
suivante (illustration 7 ):
Mickaël Malandran-Banos 43 / 86Mémoire de Master Informatique et Document
Illustration 6: Menu déroulant de l'application de Gestion du Temps
Illustration 7: La page rôle et équipe lors de l'arrivée sur celle-ci
Lors de l'arrivée sur la page « rôle et équipe », nous pouvons voir tout en haut,
l'endroit ou nous nous trouvons. Il s'agit d'une sorte de fil d'Ariane, qui mentionne
le premier et le deuxième niveau du menu. Au dessous, nous avons un bouton qui
permet de rafraîchir la liste des utilisateurs issue du CRM. Au dessous encore, nous
avons une liste d'utilisateurs.
Cette liste d'utilisateurs présente ces derniers par ordre alphabétique. Certains
possèdent un fond orange à côté desquels se trouvent un point d'exclamation
orange. Cela signifie que ceux-ci possède un compte sur le CRM, mais ne
possèdent pas de rôle et n'ont donc pas d'accès à la plateforme de Gestion du
Temps.
Nous pouvons également voir que lors du survol d'un utilisateur, le cadre devient
orange.
Lors du clic sur un utilisateur, le côté droit de la page se remplit, sans
rechargement de page (illustration 8).
Mickaël Malandran-Banos 44 / 86Mémoire de Master Informatique et Document
Illustration 8: Page rôle et équipe lors d'un clic sur le nom d'un utilisateur
L'écran est alors divisé en trois parties. En haut, nous avons un bandeau, à
l'intérieur duquel se trouve un tableau, listant tous les rôles actifs pour l'utilisateur
sélectionné. Le nom de l'utilisateur sélectionné se retrouve également en haut du
cadre.
Au dessous de ce premier cadre, à gauche se trouve un formulaire pour créer un
nouveau rôle pour l'utilisateur sélectionné.
À droite de ce cadre, nous trouvons un dernier cadre, qui liste tous les rôles
archivés pour l'utilisateur.
En ce qui concerne le premier cadre, on voit dans la dernière colonne (« action »)
une icône représentant un crayon écrivant. Lors du survol, une info-bulle précise
qu'il s'agit de la modification du rôle en cours. Lors de l'activation par un clic de
cette icône, le formulaire permettant de saisir un rôle change et se pré-remplit
avec les données du rôle sélectionné, cela sans recharger la page (illustration 9).
Mickaël Malandran-Banos 45 / 86Mémoire de Master Informatique et Document
Illustration 9: Formulaire de modification d'un rôle
Les champs dates de début et dates de fin présentent une petite icône à droite.
Cette icône représente un calendrier. Dès lors que le champ est actif, un calendrier
se déplie. Il s'ouvre par défaut à la date du jour, qui est alors différente de toute
les autres dates, de part sa couleur de fond (illustration 10).
Ainsi, nous avons vu comment définir des rôles et des équipes pour les
intervenants. Nous allons maintenant voir, la manière avec laquelle il est possible
de créer des semaines types.
Mickaël Malandran-Banos 46 / 86Mémoire de Master Informatique et Document
Illustration 10: Calendrier du
champ date de début et date de
fin de la page "rôle et équipe"
Illustration 11: état de la page "semaine type" lors de l'arrivée sur celle-ci
L'écran est composé à gauche d'un emploi du temps qui recense toutes les heures
et à droite d'une liste de semaines.
La présence d'une flèche à gauche d'une semaine indique qu'il est possible de
l'activer. Lors de l'activation de celle-ci par un clic, une liste déroulante apparaît au
dessous d'elle et l'emploi du temps à gauche se remplit (illustration 12), cela sans
recharger la page.
Nous pouvons remarquer que la couleur de fonds sur laquelle est inscrit le libellé
de la semaine type et les plages sur l'emploi du temps sont de la même couleur.
En outre, nous pouvons remarquer trois icônes. La plus haute représente un
calendrier sur lequel il y a un « plus » blanc sur fond vert. Au dessous, à côté de la
semaine type, il y a une icône représentant un calendrier avec un crayon écrivant
sur celui-ci, permettant de modifier la semaine type. À droite de cette icône, il y a
une dernière icône représentant des individus, qui permet d'attacher des individus
à une semaine type.
Le clic sur l'une de ces trois icônes ouvre des nouvelles boîtes de dialogue modal
qui permettent alors de remplir des formulaires, pour créer, modifier et spécifier
Mickaël Malandran-Banos 47 / 86Mémoire de Master Informatique et Document
Illustration 12: état de la page lors de l'activation d'une semaine type
des plages calendaires, ou encore attacher des individus à ces semaines types.
Nous allons présenter chacune de ces trois boîtes de dialogue.
La boîte de dialogue pour l'ajout d'une semaine type est assez sommaire
(illustration 13). Les champs obligatoires sont spécifiés par un symbole
« attention » devant le champ. On note la présence d'un champ couleur. Lors de
l'activation de celui-ci, une palette de couleur se déplie permettant à l'utilisateur
de choisir la couleur voulue. Au dessous de cette palette se trouve dix petits carrés
représentant les dix dernières couleurs sélectionnées ou à défaut, dix couleurs
« classiques ».
On retrouve également les champs date de début et date de fin, qui active un
calendrier.
Mickaël Malandran-Banos 48 / 86Mémoire de Master Informatique et Document
Illustration 13: Boîte de dialogue pour l'ajout d'une semaine
type
La boite de dialogue permettant la modification et l'ajout d'horaire pour une
semaine type est plus complexe (illustration 14). En haut, on retrouve les champs
de la précédente boîte que l'on peut modifier, ainsi que la durée actuelle, en
heures des horaires actuellement saisis. Chaque horaire déjà saisi n'a pas le fond
orangé et une petite poubelle avec une case à cocher permet de le supprimer. Les
champs heures de début et heures de fin sont alors représentés par un curseur
que l'on déplace le long d'une ligne, qui va alors modifier l'heure.
Mickaël Malandran-Banos 49 / 86Mémoire de Master Informatique et Document
Illustration 14: Boîte de dialogue permettant de modifier une semaine type
La boîte de dialogue de l'illustration 15 permet pour les précédents intervenants
de saisir une date de fin, ou de les supprimer en cochant la case de droite. Elle
permet également de sélectionner un ou plusieurs intervenants.
À chaque soumission de formulaire, une boite de dialogue apparaît. Celle-ci est
temporaire et encadrée en vert, si l'action s'est déroulée correctement. Elle
apparaît en rouge et de manière permanente et modale si une erreur est survenue
durant l'action.
Mickaël Malandran-Banos 50 / 86Mémoire de Master Informatique et Document
Illustration 15: Boîte de dialogue permettant d'attacher des utilisateurs à des semaines
types
1.2 Saisie et workflow d'une activité
Le temps saisi, au sein de l'application, se fait sous la dénomination d'activité. Une
activité comprend une date et une heure de début et une date et une heure de fin.
La saisie d'activité se fait à partir de l'écran sur lequel nous arrivons. Il s'agit de
l'écran correspondant au menu « activités », puis « planning hebdomadaire »
(illustration 16).
En haut à gauche de l'écran, nous voyons quatre petites icônes. Celle-ci
permettent de se déplacer au sein du planning hebdomadaire, en allant à la
semaine précédente, la semaine suivante, la semaine en cours, ou en
sélectionnant une semaine grâce au calendrier qui se déplie lors d'un clic sur
l'icône la plus à droite.
En haut à droite de l'écran, nous apercevons une liste déroulante. Cette liste
contient le nom de tous les utilisateurs. Lorsque nous sélectionnons un individu, les
activités correspondantes à celui-ci apparaissent dans le planning, alors que les
précédentes s'effacent, cela sans rechargement.
Mickaël Malandran-Banos 51 / 86Mémoire de Master Informatique et Document
Illustration 16: page du planning hebdomadaire
Le planning représente une semaine. Chaque colonne représente les jours de la
semaine et chaque ligne représente des heures. Lors du survol d'une cellule, celle-
ci change de couleur, et la ligne sur laquelle se trouve le curseur change
également de couleur.
Les activités sont représentées par des rectangles colorés (en fonction de la
catégorie de rubrique, voir annexe 1, p 73 et annexe 4, p 83). La zone plus claire
que nous voyons sur les activités de l'illustration 17 signifie une pause. Lors du
survol d'une activité, des informations apparaissent dans un cadre concernant
celle-ci (illustration 20).
Lors d'un clic sur le planning hebdomadaire, un formulaire apparaît dans une boite
de dialogue. Il y a alors deux possibilités : si le clic a été effectué sur une activité,
alors le formulaire est pré-rempli avec les informations concernant l'activité, si le
clic a été effectué en dehors, auquel cas, le formulaire n'est pré-rempli qu'avec les
heures et date pour lesquelles le clic a été effectué et il s'agit d'un formulaire
d'ajout d'activité (illustration 18).
Mickaël Malandran-Banos 52 / 86Mémoire de Master Informatique et Document
Illustration 17: apparition d'un cadre informatif lors du
survol d'une activité
Plusieurs points nécessitent notre attention en ce qui concerne l'illustration 18.
Tout d'abord, le type de saisie horaire va remplir automatiquement les champs
date et heure. Il y aura par la suite simplement la possibilité de modifier les dates.
Si la date de début et la date de fin sont différentes alors l'activité sera répétée
depuis la date de début jusqu'à la date de fin, créant ainsi X activités.
Intéressons nous aux dates. Lors de l'activation des champs date de début ou date
de fin, nous pouvons sélectionner une date. Néanmoins, des mécanismes
permettent de contrôler la saisie. En effet, lorsque l'on saisit une date de début,
celle-ci ne peut être postérieure à la date de fin et inversement (illustration 19).
Mickaël Malandran-Banos 53 / 86Mémoire de Master Informatique et Document
Illustration 18: Boîte de dialogue d'ajout d'une activité
Concernant les champs heures, nous voyons qu'une horloge apparaît à la droite de
ces champs. Lors de l'activation de ces champs, un cadre apparaît et permet de
sélectionner des heures et des minutes (illustration 20).
Une activité créée possède le statut « en attente de validation ». Il faut par la suite
que celle-ci soit validée ou refusée par un administrateur. Pour cela il faut se
rendre dans le menu « activités », puis « gestion des statuts » (illustration 21).
Mickaël Malandran-Banos 54 / 86Mémoire de Master Informatique et Document
Illustration 19: fonctionnement des dates de début et de fin
concernant les activités
Illustration 20: sélection d'une heure
lors de l'ajout ou la modification d'une
activité
Cette page présente les activités sous différents onglets. Chaque onglet contient
un tableau entièrement paramétrable. Il est possible de sélectionner le nombre de
lignes à afficher, en choisissant cela dans le menu déroulant en haut à gauche. De
trier le contenu en fonction des colonnes en cliquant sur les petites flèches. Il est
également possible de faire un tri multiple en maintenant la touche «<ctrl> »
enfoncée. Enfin grâce au champ en haut à droite, il est possible d'effectuer une
recherche sur tous les champs.
La dernière colonne permet de sélectionner l'activité en cochant la case, et en
cliquant sur le bouton « valider » ou « refuser » en bas de la page. Il est ainsi
possible de valider ou refuser les activités par lot.
Les trois premiers onglets sont informatifs et concernent les activités de la
personne connectée. Les autres concernent les activités de tous les individus et ne
sont visibles que pour les administrateurs.
Ainsi, nous avons pu voir un panorama assez large de toutes les interactions et de
toutes les interfaces de l'application. Nous allons maintenant pouvoir effectuer une
analyse et voir si une grille d'évaluation peut se dégager de notre travail.
Mickaël Malandran-Banos 55 / 86Mémoire de Master Informatique et Document
Illustration 21: Page gestion des statuts
2 Analyse de l'application
Nous détaillerons notre analyse selon quatre points. Nous verrons qu'en dépit du
soin apporté aux interactions, l'interface reste assez traditionnelle, et que la
conception de la page reste assez chargée, bien que les couleurs soient
pertinentes, et en troisième point que l'architecture de l'information présente des
parties inégales. Enfin nous nous attacherons plus spécifiquement à l'usage.
2.1 Des interactions soignées pour une interface
traditionnelle
2.1.1 Prédominance de la désignation directe
Lorsque l'on effectue une typologie des interactions mise en place concernant
l'interface de l'application de Gestion du Temps, nous pouvons voir que la
désignation directe possède une place prédominante (tableau 2).
Désignation Illustration Type d'interactionMenu déroulant de l'application de Gestion du
Temps
Illustration 6 Désignation directe
Liste des intervenants de la page rôles et équipes Illustration 7 Désignation directeIcônes modification du rôle Illustration 8 Désignation directeChamps dates, calendrier de sélection Illustration 10 Désignation directeActivation d'une semaine type Illustration 12 Désignation directeSélection d'une couleur Illustration 13 Désignation directeSélection de l'heure (page des semaines types) Illustration 14 Manipulation directeSélection de l'heure (saisie d'activité) Illustration 20 Désignation directeCase à cocher Illustration 14, 21 Désignation directeBouton de soumission Tous les formulairesDésignation directe
Tableau 2: Typologie des interactions de l'application de Gestion du Temps
Cette prédominance est intéressante, car elle permet de voir que pour cette
application, la machine suggère et l'utilisateur n'a plus qu'à choisir. Néanmoins,
peut être que nous aurions pu utiliser davantage de manipulation directe,
notamment grâce à des éléments tels que le « drag and drop ». Cependant, en
terme de technique, la désignation directe est l'élément le plus simple à mettre en
place pour des interfaces web. En outre, la manipulation directe aurait, pour l'objet
Mickaël Malandran-Banos 56 / 86Mémoire de Master Informatique et Document
qui nous intéresse, nécessité une plus grande réflexion : quel objet présenter ?
Comment organiser la manipulation ?
Ensuite, la désignation directe permet d'éviter de nombreuses erreurs de saisies,
ce qui permet de garder une cohérence des données.
Enfin, notons que le public qui sera amené à utiliser l'application n'est pas très
aguerri en ce qui concernent les technologies de l'information. De ce fait, la
désignation directe semble particulièrement appropriée.
Pour ces raisons, nous pensons que les interactions ont particulièrement été
soignées.
2.1.2 Retours d'actions et retours d'information importants
Les retours d'actions et les retours d'informations sont particulièrement importants
dans une application web. En effet, la machine est la seule capable de savoir si la
tâche effectuée s'est correctement déroulée ou non. Il impute donc à la machine
d'informer l'utilisateur du déroulement correct de l'action (voir tableau 1 sur les
propriétés du dialogue entre l'homme et la machine, p 27).
L'application de Gestion du Temps que nous avons développée, a accordé une
importance toute particulière à cette propriété. En effet, chacune des tâches
d'interaction avec la base de données, effectuée offre un retour d'information sous
la forme d'une boîte de dialogue, encadrée de vert si l'action s'est déroulée
correctement, en rouge si non.
En outre, de nombreux retours existent dans l'application de Gestion du Temps,
notamment au survol de l'élément, ce qui permet de donner des indications
concrètes à propos des propriétés de l'élément. Nous pouvons, par exemple, citer
les info-bulles présentes lors du survol d'une icône, les noms des intervenants qui
s'encadrent en orange lors du survol de l'élément dans la liste des intervenants
(illustration 10), ou encore le retour d'information sur l'activité lors du survol de
Mickaël Malandran-Banos 57 / 86Mémoire de Master Informatique et Document
celle-ci dans le planning hebdomadaire. Nous avons ainsi une grande interactivité
au sein de cette application.
Le Javascript permet d'effectuer des actions en fonction d'événements, tels que le
survol ou le clic. Cela correspond en d'autres termes au niveau lexical. Une
certaine tendance semble se dégager de notre application. En effet, lors du niveau
lexical correspondant au survol, la sémantique de la rétroaction est purement
informative, alors que le clic signifie le déclenchement d'une action. Cela est
cependant à nuancer, notamment lors des interactions correspondant au
remplissage de formulaire. En effet, un clic sur une case à cocher, ou sur un
calendrier ne déclenche pas une tâche au sein du système. Nous avons, sans
doute, instauré une hiérarchie entre les différents éléments cliquables. Ainsi, les
icônes et les boutons de soumission déclenchent une action. Nous avons rendu ces
éléments relativement identifiables, en leurs accordant, de ce fait, une sémantique
spécifique.
2.1.3 Métaphore discrète voire absente
Nous avons évoqué, lors de notre partie sur l'IHM que des courants de pensées
s'orientaient vers le développement des réalités virtuelles. En contre-pied, de ce
courant, un autre s'est attaché à instaurer un nouveau paradigme autour des
réalités augmentées. Nous ne nous attacherons pas aux réalités augmentées, cela
reste trop complexe à notre niveau.
Les réalités virtuelles sont basées sur des métaphores pour recréer un
environnement particulier (comme la métaphore du bureau pour les systèmes
d'exploitation ). On peut alors s'interroger sur la métaphore que nous avons
instaurée au sein de l'application de Gestion du Temps.
Il semble, cependant, que nous n'avons pas de véritable analogie au sein de cette
application. Disons plutôt que les analogies que nous avons réalisées se basent sur
des éléments existants. Nous utilisons par exemple un planning pour présenter des
données temporelles, des tableaux proches de ce que nous pouvons envisager
Mickaël Malandran-Banos 58 / 86Mémoire de Master Informatique et Document
d'un tableur, ou encore, la saisie se fait sous forme d'activité, terme suffisamment
neutre pour s'appliquer à des réunions comme à du travail. Il ne faut cependant
pas nier que cela peut constituer une carence de notre interface.
On peut alors s'interroger sur ce qui nous aurait permis d'utiliser une métaphore
pouvant conduire notre interface vers une sorte de réalité virtuelle. La chose n'est
pas aisée. Il aurait sans doute fallu trouver un élément à mettre au cœur de notre
système et insister davantage sur une analogie particulière.
2.2 Une conception de page chargée aux couleurs
pertinentes
Nous verrons que la conception des pages est chargée, mais que pour pallier à
cette lacune, un code couleur pertinent a été utilisé. Malgré cela, nous verrons qu'il
existe certaines incohérences entre les différentes présentations des pages,
pouvant nuire à la compréhension de l'utilisateur.
2.2.1 Des pages chargées
À la vue des différentes illustrations de l'application, il n'en demeure pas moins
que la présentation est assez chargée. En effet, sur chacune des pages, on trouve
de nombreuses informations, cela de manière très éparpillées sur la page. En
outre, les interactions possibles entre l'utilisateur et la machine sont présentes à
de nombreux endroits. Si l'on ajoute à cela que l'application de Gestion du Temps
est en fait un module d'un logiciel CRM, on comprend alors que le design soit si
lourd.
En se basant sur l'illustration 8, nous pouvons voir qu'il existe déjà un premier
menu propre à l'application CRM. Un menu propre à l'application est également
présent. D'ores et déjà, les utilisateurs novices peuvent se sentir perdus et ne pas
forcément comprendre la liaison qui existe entre les deux menus. D'autres
informations sont également présentes à l'écran, comme un encart informatif en
haut à droite, ce qui peut conduire à perdre un peu plus l'utilisateur. Cependant,
Mickaël Malandran-Banos 59 / 86Mémoire de Master Informatique et Document
cet encart, qui contient des informations concernant la saisie de l'utilisateur est
relativement bien placé. Il se trouve à l'endroit où les sites de e-commerce placent
leurs « paniers ».
Toujours à propos de cette illustration, nous pouvons également voir que dans la
deuxième partie de la page de nombreuses interactions sont possibles. Il est
permis de changer de semaine (quatre boutons à gauche), de changer d'utilisateur
(liste déroulante à droite), créer une nouvelle activité en cliquant sur le planning,
soit au minimum six interactions différentes. Cependant, cela est nécessaire, pour
laisser aux utilisateurs le choix de leurs modes d'utilisations.
Une des solutions que nous proposons pour avoir un design mois chargé est de
sortir l'application de Gestion du Temps du logiciel de CRM. Cela aurait permis de
ne pas être dépendant de l'interface de l'application de gestion de relation client
que ce soit au niveau du menu, du pied de page ou encore de sa structure sous
forme de tableau. Néanmoins cela aurait été bien plus long en terme de
développement.
Ainsi, cette conception chargée implique un apprentissage de l'application. La
documentation utilisateur, les formations utilisateurs sont donc à notre sens une
partie intégrante et nécessaire des métiers du développement. En outre la
lourdeur de la conception des pages peut être nuancée par le soin apporté aux
couleurs.
2.2.2 Un code couleur soigné
Les couleurs sont soignées. En effet, le choix de celles-ci permet une mise en
valeur, voire une qualification de l'information et des données présentées. Lors de
la présentation des tableaux de la page de gestion des statuts (illustration 21),
nous pouvons voir qu'une ligne sur deux possède un fond coloré dans le but de
faciliter la lecture. Plus illustratif encore, l'encart informatif qui apparaît lors du
survol d'une activité (illustration 17), présente une structure et des couleurs
Mickaël Malandran-Banos 60 / 86Mémoire de Master Informatique et Document
lisibles d'une part (écriture en noir sur fond clair). Cela pourra aider les utilisateurs
à faire naître des réflexes vis à vis de celle-ci.
Le survol des éléments a particulièrement été soigné. Que ce soit au niveau du
menu (illustration 6), de la liste des intervenants dans la page « rôle et équipes »
(illustration 7), des cellules du planning hebdomadaire (illustration 16) le
changement des couleurs offre à l'utilisateur un retour d'information important.
2.2.3 Manque d'homogénéité des interfaces
La conception des interfaces peut laisser l'impression d'une certaine incohérence
du point de vue de la présentation des données.
En premier lieu, les formulaires requièrent notre attention. Sur la totalité des
pages, les formulaires sont accessibles après un clic qui ouvre une boîte de
dialogue contenant le formulaire, excepté sur la page « rôles et équipes ».
En deuxième lieu, la structure de certaines pages est, selon certains aspects,
différente. Si l'on compare par exemple la page « rôles et équipes » et la page
« semaine type » on s'aperçoit que l'une contient une liste des utilisateurs à
gauche alors que l'autre contient une autre liste des utilisateurs à droite. La page
du « planning hebdomadaire » quant à elle, contient également une liste des
utilisateurs, permettant une interaction similaire à celle permise dans la page
« rôles et équipes », présentée sous la forme d'une liste déroulante.
En dernier lieu, l'utilisation de sous-menu sous la forme d'onglet ne se fait que sur
la page Gestion des Statuts. Cela conduit donc à une interface à la structure et à la
hiérarchie de l'information assez différentes des autres pages.
Tout ces éléments nous amènent à penser que les pages manquent d'homogénéité
dans leurs conceptions.
Mickaël Malandran-Banos 61 / 86Mémoire de Master Informatique et Document
2.3 Une architecture de l'information aux parties inégales
Le découpage en rubriques et sous-rubriques semble particulièrement inégal. En
effet, certaines pages proposent une grande quantité d'information, alors que
d'autres proposent des informations plus succinctes. Une des explications se
trouve dans la personnalisation du contenu en fonction de l'utilisateur connecté. En
effet, cette personnalisation des différents éléments rend difficile la définition
d'une architecture claire.
Cela nous amène à une question de toute première importance qui remet en cause
notre cadre théorique : à quel titre pouvons-nous parler d'architecture de
l'information au sein d'une application web ? Ou plus exactement, l'architecture de
l'information peut-elle s'appliquer aux logiciels web ?
La réponse est négative. L'architecture de l'information s'attache à catégoriser et
hiérarchiser des informations, or les objets gérés au sein des applications web sont
des données. C'est la mise en forme des données par le système, associée à une
interprétation humaine, qui transformera celles-ci en informations. Ainsi, au sein
d'une application web le menu ne sert pas de table d'orientation au sein de
l'information contenu, mais plutôt de points d'accès aux différentes interactions
possibles avec le système. Il s'agit donc d'étudier davantage le système de
navigation que véritablement la structure de l'information.
Ainsi l'ergonomie perd de son poids au niveau de l'analyse d'une application web,
puisque il est impossible d'analyser une application en fonction de son architecture
de l'information.
2.4 Méthodologie de conception qui pallie à l'absence
d'étude d'usages
Nous verrons les raisons qui nous ont poussées à ne pas faire d'étude d'usages.
Cependant, ceci est à nuancer puisque notre méthodologie de conception est
centrée sur l'usager. Nous avons ainsi pu dégager des usages potentiels.
Mickaël Malandran-Banos 62 / 86Mémoire de Master Informatique et Document
2.4.1 Absence de réelle étude d'usages
Nous n'avons effectué aucune étude d'usages. Nous pensions avoir le temps de
développer l'application plus rapidement pour proposer par la suite une étude
d'usages pour véritablement comprendre l'enjeu que représente une interface
dans l'utilisation d'une application web. Nous n'avions pas connaissance de la
possibilité de mener des études d'usages au cours de la conception.
En outre, nous nous questionnons sur la pertinence d'une étude d'usages dans
l'analyse d'une interface. Il apparaît, au cours de la description de notre cadre
théorique, que c'est la vue d'une application comme un outil qui permet d'en
analyser les usages. C''est donc davantage l'appropriation des données et leurs
transformations par les êtres humains en informations qui aurait pu nous donner
des indications sur les potentialités de notre système. Ce n'est donc pas, comme
nous le supposions dans notre introduction, le fait que l'interface soit le point de
médiation qui rend l'étude d'usage intéressante.
Néanmoins, nous aurions pu conduire une étude d'usages auprès des futurs
utilisateurs pour comprendre le rôle qu'avait les interfaces web dans
l'appropriation des outils. Associer à cela, nous aurions également pu conduire une
étude sur les usages potentiels de l'outil.
2.4.2 Méthodologie de conception orientée usager
Bien que nous n'ayons pas mis en place d'étude d'usages au moment de la
conception, nous avons utilisé une méthode de développement orientée usager qui
a permis de placer au centre les attentes du directeur de l'association, notre
interlocuteur. C'est un aller-retour constant entre le directeur et les développeurs
qui a permis de cerner les demandes de manière précise.
Cependant, il aurait fallu impliquer davantage d'autres types d'utilisateurs au
moment de la conception. Le directeur de l'association allait posséder sa propre
logique d'utilisation de l'outil, or, tout ce qu'il a mentionné comme étant les
logiques de ses collaborateurs nous sont parvenus à travers ses représentations.
Mickaël Malandran-Banos 63 / 86Mémoire de Master Informatique et Document
L'analyse de l'application nous a aidé à voir la prédominance de l'Interaction
Homme-Machine comme moyen d'évaluation d'une application. En effet,
l'interactivité qui s'instaure entre l'individu et le système doit être particulièrement
fluide.
3 Grille d'analyse et d'évaluation
En nous basant sur l'analyse de l'application de Gestion du Temps, nous proposons
une grille d'analyse et d'évaluation d'une application web. Pour cette grille, nous
proposons d'écarter la notion d'usage pour nous concentrer sur les interactions et
leurs analyses. Nous n'écartons pas la notion d'architecture de l'information, car
celle-ci nous permet tout de même d'analyser le système de navigation de
l'application.
Nous proposons donc la grille suivante (tableau 3), qui n'est pas parfaite.
Cependant elle permet de balayer les principaux aspects de l'interface d'une
application web.
Cette grille nous permet de définir des axes d'analyses en rapport avec le cadre
théorique que nous nous sommes fixés. Celle-ci nous permet de dégager plusieurs
éléments. En premier lieu, nous pouvons voir que cette grille accorde une
importance toute particulière à l'Interaction Homme-Machine. En deuxième lieu,
nous pouvons également noter l'absence de la question de l'usage. En effet, celle-
ci ne peut être vue au travers d'une grille et nécessite une analyse propre de la
situation, chaque situation étant singulière. De plus, la question de l'usage ne
s’intéresse pas uniquement aux interfaces.
Concernant l'architecture de l'information, nous pouvons voir que nous avons
écarté le système d'organisation à la vue de l'analyse que nous avons fournie, pour
nous intéresser uniquement au système de navigation, d'étiquetage et de
repérage.
Mickaël Malandran-Banos 64 / 86Mémoire de Master Informatique et Document
I. Interactions
Typologie des interactions
Manipulation directe
Désignation directe
Manipulation indirecte
Textuel
Articulation des niveaux lexicales, syntaxiques et sémantiques pour les
interactions claire
Respect des propriétés du dialogue entre l'homme et la machines
Initiative (homme / machine)
Cohérence (machine)
Retours (machine)
Contrôle (par l'utilisateur)
II. Conception des pages
Lisibilité
Choix des couleurs
Police, taille
Structure d'une page (simplicité et utilisabilité)
III. Système de navigation et repérage
Navigation primaire pertinente
Navigation secondaire (présence et pertinence)
Autres éléments de navigation (présence et pertinence)
Élément du système de repérage
Système de recherche
IV. Nommage et étiquetage
Icônes / Nom
Clarté / compréhension des éléments
Tableau 3: Grille d'analyse d'une application web
Nous ne pensons pas qu'il soit pertinent de détailler chaque ligne de notre grille,
dans la mesure où ces éléments ont tous été étudiés et présentés dans notre
analyse de l'interface de l'application de Gestion du Temps.
Ainsi ce chapitre nous a permis de tester notre cadre théorique tout en définissant
une grille qui permet d'analyser différentes applications web.
Mickaël Malandran-Banos 65 / 86Mémoire de Master Informatique et Document
Conclusion
La pertinence de notre cadre théorique a été démontrée. L'ergonomie et
l'Interaction Homme-Machine fournissent leurs propres outils, en fonction de
l'histoire et des concepts de ces disciplines. L'analyse des usages doit-être faite
pour chaque situation, puisque chacune d'elle est unique.
Nous avons d'abord pensé que l'usage primait pour analyser la pertinence d'une
interface. Cependant, l'usage ne s’intéresse pas simplement à l'interface, puisque
les données proposées jouent également un rôle important. La question de l'usage
est transversale à tous les moments de la conception et de la réalisation d'un
projet. À ce titre, nous avons d'ailleurs vu que désormais, certaines méthodologies
de conception permettaient de mettre les usages au centre de la conception.
L'ergonomie web s'applique, quant à elle, parfaitement à l'analyse d'une interface
à travers la conception d'une page, les systèmes de navigation, de recherche et
d'étiquetage. En outre cette discipline permet de formuler clairement des
recommandations concernant la mise en forme d'une page web. Néanmoins, nous
pouvons discerner certaines lacunes de cette discipline. L’intérêt porté à
l'information peut paraître handicapant, dans la mesure où la plupart des
applications présentent des données, qui interprétées par les êtres humains
deviennent des informations. Ceci nous permet d'opposer applications web et sites
web, puisqu'un site web fourni des informations. En outre l'interactivité des
applications web ne peut être analyser qu'avec l'ergonomie.
C'est pourquoi il est nécessaire d'avoir recours à une autre discipline qui est
l'Interaction Homme-Machine. Les interactions sont au cœur de tout programme
applicatif et permettent de déclencher les tâches liées à une interaction. Les
concepts et la logique de l'Interaction Homme-Machine permettent de mener à
bien cette analyse.
Mickaël Malandran-Banos 66 / 86Mémoire de Master Informatique et Document
Ainsi, il est clair que ces différentes approches doivent être complémentaires pour
mener une analyse fine et précise. L’Interaction Homme-Machine en est, sans
aucun doute, la composante principale. Les deux autres approches, bien que
importantes, le sont moins du point de vue de l'interface (c'est le cas de l'analyse
des usages), ou ne fournissent pas l'intégralité des outils pour mener une analyse
complète (c'est le cas de l'ergonomie).
Mickaël Malandran-Banos 67 / 86Mémoire de Master Informatique et Document
Bibliographie
1. Amandine Pascal, Catherine Thomas. « Penser l'appropriation d'une solution
TIC dès la conception : une méthodologie de co-conception orientée usage »
[en ligne]. In : hal science de l'homme et de la société. 2008. Disponible sur
<http://halshs.archives-ouvertes.fr/> Consulté le 20 août 2011.
2. Azan Wilfrid , Beldi Adel. « « Human agency », ERP et CRM: vers des
approches centrées sur les utilisateurs ? » [en ligne]. 2007. Disponible sur
<http://www.aims2007.uqam.ca/actes-de-la-
conference/communications/azanw274/at_download/article.pdf> Consulté le
20 août 2011
3. Baesler Sylvie. « Guide de recommandations ergonomiques : site et
applications web ». 2005. Disponible sur
<http://www.dsi.cnrs.fr/methodes/ergonomie/documentation/Guidergoweb2
005.pdf> Consulté le 20 août 2011.
4. Beaudouin-Lafon Michel. « 40 ans d’interaction homme-machine : points de
repère et perspectives » [en ligne]. 2007. In : « interstices.info ». Disponible
sur <http://interstices.info/> Consulté le 20 août 2011.
5. Boukacem Cherifa. « Analyse des Usages ». Cours de Master 1 Informatique
et Document. 2009
6. Brisset Antoine. « Mise en place d'un site dynamique pour optimiser la
communication web d'un établissement muséal » [en ligne]. 2009. In :
memSIC. Disponible sur <http://memsic.ccsd.cnrs.fr/mem_00430584/fr/>
Consulté le 20 août 2011.
7. Cozic Frederic, Deshayes Fabien. « Que sont les applications riches (RIA) ? »
[en ligne]. 2007. Disponible sur <http://blog.cozic.fr/que-sont-les-
Mickaël Malandran-Banos 68 / 86Mémoire de Master Informatique et Document
applications-riches-ria-partie-1-definition-et-usages-195> Consulté le 20
août 2011.
8. Dumas Cedric, Duval Thierry, Girard Patrick et al. « Composants
pédagogique en IHM » [en ligne]. 2009. Disponible sur
<https://cape.emn.fr/IHM/IHM/> Consulté le 20 août 2011.
9. Guitton Pascal. « Une bonne interface, c'est une interface convivial » [en
ligne]. 2010. In : « interstices.info ». Disponible sur <http://interstices.info/>
Consulté le 20 août 2011.
10.Faure Claudie. « Conception» [en ligne]. In : « Support de cours :
L'interaction Homme-Machine ». Disponible sur <http://perso.telecom-
paristech.fr/~cfaure/ENSEIGNEMENT.html> Consulté le 20 août 2011.
11.Faure Claudie. « Dialogue» [en ligne]. In : « Support de cours : L'interaction
Homme-Machine ». Disponible sur <http://perso.telecom-
paristech.fr/~cfaure/ENSEIGNEMENT.html> Consulté le 20 août 2011.
12.Faure Claudie. « L'utilisateur humain» [en ligne]. In : « Support de cours :
L'interaction Homme-Machine ». Disponible sur <http://perso.telecom-
paristech.fr/~cfaure/ENSEIGNEMENT.html> Consulté le 20 août 2011.
13.Fereyre Florian. « LA PLACE D’UNE TECHNOLOGIE D’INFORMATION ET DE
COMMUNICATION DANS LE PROCESSUS DE STRUCTURATION D’UNE
ORGANISATION : Le cas de l’usage d’une messagerie électronique » [en
ligne]. Sciences de l'Information et de la Communication. Lyon : Université
Jean Moulin, 2010. Disponible sur <http://tel.archives-
ouvertes.fr/docs/00/55/22/.../PDF/ThA_se_Florian_Fereyre.pdf> Consulté le
20 août 2011.
14.Horchani Meriam. « architecture des systèmes interactifs » [en ligne]. In :
Meriam Horchani. Disponible sur <http://mhorchani.free.fr/> Consulté le 20
août 2011.
Mickaël Malandran-Banos 69 / 86Mémoire de Master Informatique et Document
15.Horchani Meriam. « Communication humain-machine, historique et
courants » [en ligne]. In : Meriam Horchani. Disponible sur
<http://mhorchani.free.fr/> Consulté le 20 août 2011.
16.Horchani Meriam. « conception et évaluation des systèmes centrés sur
l’utilisateur » [en ligne]. In : Meriam Horchani. Disponible sur
<http://mhorchani.free.fr/> Consulté le 20 août 2011.
17.Horchani Meriam. « systèmes interactifs d’aujourd’hui et de demain » [en
ligne]. In : Meriam Horchani. Disponible sur <http://mhorchani.free.fr/>
Consulté le 20 août 2011.
18.Leplat Jacques. « Encyclopédie Universalis » [en ligne]. 2008.
« L'ergonomie ». Disponible sur <http://www.universalis-edu.com/>
Consulté le 20 août 2011.
19.Milon Marite. « Webergos : l'ergonomie des interfaces web » [en ligne].
2010. Disponible sur <http://www-public.it-sudparis.eu/~milon//index.php>
Consulté le 20 août 2011.
20.Myers Brad. « A brief history of human-computer interaction technology »
[en ligne]. 1998. Disponible sur
<http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html> Consulté le 20
août 2011
21.Réseau ANACT. « Analyser les usages des systèmes d'information et des
TIC » [en ligne]. 2009. Disponible sur
<http://www.anact.fr/portal/pls/portal/docs/1/1456354.PDF> Consulté le 20
août 2011.
22.Wikimedia Foundation. « Wikipedia : l'encyclopédie libre » [en ligne]. 2011.
« Interface homme-machine ». Disponible sur
<http://fr.wikipedia.org/wiki/IHM> Consulté le 20 août 2011.
Mickaël Malandran-Banos 70 / 86Mémoire de Master Informatique et Document
23.Wikimedia Foundation. « Wikipedia : l'encyclopédie libre » [en ligne]. 2011.
« Rich Internet Application ». Disponible sur
<http://fr.wikipedia.org/wiki/Rich_Internet_Application> Consulté le 20 août
2011.
24.Wikimedia Foundation. « Wikipedia : l'encyclopédie libre » [en ligne]. 2011.
« Utilisabilité du Web ». Disponible sur
<http://fr.wikipedia.org/wiki/Ergonomie_Web> Consulté le 20 août 2011.
Mickaël Malandran-Banos 71 / 86Mémoire de Master Informatique et Document
Annexe 1 : cahier de spécifications techniques pour la
mise en place de l'outil de gestion du temps
Objet : Étude fonctionnelle de l'application "Analyse d'investissement de temps"
A: Alain Malice – Horizon 9
De : Alain Scieur - Capensis
Version: 1.1
Date :
23 juin 2010
Date et Signature pour validation:
Notre référence : 301HORI09
Étude fonctionnelle
Intégration et développement
Développement de l'application d'analyse
d'investissement temps des éducateurs et des
équipes
Capensis
30 Rue du Triez
59290 Wasquehal
Tel. 03 59 39 13 40 – Fax. 03 59 39 13 49
SARL au Capital de 20 000€ - RCS Roubaix 444 390 777 – APE 6202A
Mickaël Malandran-Banos 73 / 86Mémoire de Master Informatique et Document
I. Environnement
L'application de gestion de temps sera développée en temps que module de
l'application vtiger.
Son framework sera ainsi mis à contribution, et notamment son mécanisme
d'authentification des utilisateurs.
II. Paramétrage de l'application
• Délai de verrouillage automatique d'une saisie d'activité
• Nombre de lignes maximum autorisées pour disposer d'un export pdf ou csv
d'un rapport ou d'un tableau de bord.
III. Administration générale
Les actions
Cette table système répertorie les actions (saisie d'activité, modification
d'utilisateur, création d'une équipe, ...) qu'il est possible d'effectuer avec
l'application, pour permettre l'affectation de permissions aux utilisateurs, sur ces
actions.
Les statuts
Une activité peut se voir attribuer un statut (validée, verrouillée, refusée, ...).
Cette table permet d'en gérer la liste.
Définition des horaires
Ce formulaire permet d'enregistrer les horaires habituels de fonctionnement de la
structure, et de créer des plages en fonction du jour et de l'heure.
Mickaël Malandran-Banos 74 / 86Mémoire de Master Informatique et Document
Il est possible d'attribuer un horaire à un intervenant en particulier, cet horaire
aura alors priorité sur l'horaire général.
Exemple: Du lundi au vendredi, de 18h30 à minuit: horaires de nuit, ...
Définition de semaine type
Une semaine type peut être vue comme un horaire spécifique.
Et comme pour les horaires, une semaine type peut s'attribuer à un utilisateur en
particulier. Ceci permet de gérer par exemple des semaines ponctuelles à 39h, ou
à mi-temps. Si une semaine type n'est pas attribuée à un utilisateur, elle remplace
la définition générale des horaires.
Ceci permet par exemple de gérer des "semaines hautes" ou "basses" s'appliquant
à tout le personnel.
Horaires prédéfinis
Il s'agit d'une liste de tranches horaires proposée lors de la saisie d'activités.
Exemple: Matinée "camp": 12h00-18h00
Les jours fériés
L'application permet de calculer/enregistrer les jours fériés pour l'année en cours
et les années à venir.
Ces jours fériés seront automatiquement affectés sur les calendriers des
utilisateurs.
Les lieux
La table des lieux renseigne les différents lieux qui seront présentés dans une liste
de choix lors de la saisie d'une activité.
Mickaël Malandran-Banos 75 / 86Mémoire de Master Informatique et Document
Les actions particulières
Pour permettre l'édition de tableaux de bords/rapports pour des projets
spécifiques, une table d'actions particulières est mise en place. Lors de la saisie
d'une activité, en plus d'y associer une rubrique, il est possible de sélectionner une
"action particulière".
Une action particulière est définie sur une plage calendaire.
Gestion des profils
Les profils représentent les grandes catégories d'utilisateurs de l'application.
Pour Horizon9, ces profils seront "Éducateur", "Secrétaire", "Chef d'équipe",
"Directeur", "Observateur", "Administrateur", .. .
Cette liste n'est pas exhaustive et reste modifiable à tout moment par l'interface.
Un profil se voit affecter une liste d'actions autorisées, conditionnant ce qu'un
utilisateur de ce profil a le droit de faire dans l'application.
Gestion des équipes et sous-équipes
Les utilisateurs se classent dans des équipes, lesquelles peuvent se diviser en
différentes sous-équipes. Une équipe peut être constituée de différents utilisateurs
de différents profils. Il n'y a qu'un seul niveau de sous-équipe.
Gestion des utilisateurs
La création d'un utilisateur consiste à créer une fiche avec ses nom, prénom,
adresse, téléphones, email, ...
Le détail des attributs est précisé dans le cahier des charges.
Mickaël Malandran-Banos 76 / 86Mémoire de Master Informatique et Document
Les attributs "date d'entrée/sortie d'équipe" sont déportés dans la table des
"Rôles" (voir plus bas).
L'attribut "Type Semaine" est assuré par la table des "semaines type", et l'attribut
"Niveau" est assuré par la gestion des droits au niveau du profil.
Après renseignement de ces éléments individuels, l'utilisateur doit être associé à
un profil, et éventuellement à une équipe et une sous-équipe.
L'affectation de l'utilisateur à un profil défini les actions auxquelles il sera autorisé
dans l'application (voir "Gestion des profils" ci-dessus).
Il est possible de changer un utilisateur de profil, ou d'équipe ou sous-équipe, au fil
du temps (voir "Notion de rôle" ci-dessous).
Notion de rôle
Un utilisateur est donc associé à un profil, une équipe, une sous-équipe.
Cette association n'est pas définitive ni immuable.
Il est possible qu'au fil du temps l'utilisateur change d'équipe, ou de profil.
Un rôle est donc une association "profil – équipe – sous-équipe" à un instant t.
Changer d'équipe, ou de profil, consiste donc à se voir attribuer un nouveau "rôle".
Les rubriques, les catégories de rubriques, et la liaison rubrique-profil
Les rubriques permettent de classifier les activités saisies.
Une rubrique peut être "comptabilisable" ou pas, ce qui signifie qu'une activité
associée sera comptabilisée dans les tableaux et rapports ou pas.
Les rubriques sont classées par catégories.
Les catégories permettent de constituer les trois grands groupes de rubriques de
Mickaël Malandran-Banos 77 / 86Mémoire de Master Informatique et Document
Horizon9: "Charges directes", "Charges indirectes", "Charges liées au droit du
travail".
Il est possible d'associer une rubrique à un ou plusieurs profils, ce qui aura comme
conséquence de n'afficher cette rubrique que pour ce ou ces profils.
Exemple: Seul un utilisateur du profil "Chef d'équipe" peut créer une activité de
rubrique "réunion hebdomadaire".
De plus il est possible, lors de l'association, de définir un ou des profils "cible", ce
qui permettra à l'utilisateur possédant cette rubrique de créer une activité pour un
autre utilisateur, avec cette rubrique.
Exemple: un utilisateur de profil "Secrétaire" crée une activité de rubrique "RTT"
dans le calendrier d'un utilisateur de profil "Intervenant".
Une table "previsionnelRubrique" est prévue pour permettre de définir des taux,
par rubrique, équipe, profil, et sur une plage calendaire.
Ceci permet de calculer un delta entre un taux d'activité horaire effectif, et un taux
prévisionnel.
Exemple: actions sur le terrain: taux défini à 70%, taux effectif saisi 82%
Archivage
L'archivage consiste à enregistrer dans un fichier toutes les saisies d'activités
jusqu'à une date donnée.
Ces saisies sont ensuite effacées de la base de données.
En conséquence, les rapports et tableaux de bords ne pourront pas être demandés
pour une date de début antérieure à la date de saisie de la plus ancienne activité
présente dans la base de données.
IV. Les activités
Mickaël Malandran-Banos 78 / 86Mémoire de Master Informatique et Document
Sur l'interface de saisie des activités, l'utilisateur a la possibilité de définir la
semaine à afficher par défaut.
Saisie d'une activité
La saisie d'une activité consiste à renseigner les informations suivantes:
• une date/heure de début
• une date/heure de fin
• un utilisateur (autre que soi-même, si le profil de la personne l'y autorise)
• une rubrique (sélectionnée à partir de la liste des rubriques autorisées pour ce
profil)
• un commentaire libre
• un lieu (choisi à partir d'une liste)
La saisie de date/heure de début et date/heure de fin peut être remplacée par une
sélection dans la liste déroulante d'horaires prédéfinis.
Modification d'une activité
La modification d'une activité saisie reste possible pendant un temps défini par
l'administrateur, ensuite la saisie est verrouillée.
Une saisie peut être validée, ou refusée, par les profils autorisés.
Un profil autorisé peut ponctuellement déverrouiller une saisie afin d'en permettre
sa modification, par le créateur de la saisie, ou par lui-même.
Par principe, aucune activité ne peut en chevaucher une autre.
V. Affichage de tableaux de bords
Mickaël Malandran-Banos 79 / 86Mémoire de Master Informatique et Document
Les tableaux de bords affichent la ventilation et la synthèse des heures saisies,
pour l'intervalle de temps sélectionné.
Le profil de base est autorisé à voir le détail de ses saisies, la ventilation dans les
rubriques, et la consolidation des saisies de son équipe.
Le profil "chef d'équipe" est autorisé à voir le détail de ses saisies, le détail des
saisies de chaque membre de son équipe, et la consolidation des saisies de son
équipe.
Le profil "directeur" est autorisé à voir le détail de toutes les personnes de la
structure, et la consolidation de toutes les équipe.
Le détail de l'affichage d'un tableau de bord est décrit dans le cahier des charges.
L'utilisateur a la possibilité de définir des valeurs par défaut pour l'affichage de ses
tableaux de bords:
• plage calendaire à utiliser
• rubriques à sélectionner
L'interface permet d'exporter le tableau de bord affiché, en pdf ou en csv, si celui-
ci ne dépasse pas un nombre maximal de lignes défini dans les paramètres
généraux par l'administrateur.
VI. Affichage de rapports
L'affichage de rapports suit les mêmes règles que celles définies pour l'affichage
des tableaux de bords.
Le détail des rapports est présenté dans le cahier des charges.
La liste des rapports implémentés sera définie ultérieurement, en fonction du
temps de développement disponible.
Mickaël Malandran-Banos 80 / 86Mémoire de Master Informatique et Document
Annexe 2 : Modèle de données pour l'application de
Gestion du temps
Mickaël Malandran-Banos 81 / 86Mémoire de Master Informatique et Document
Annexe 3 : exemple d'analyse d'usages des outils de
gestion à partir de la théorie de l'human agency
Ce tableaux nous permet de voir clairement l'analyse en fonction de l'espace, du
temps et du contexte de l'action. Il s'agit d'une étude d'usage québécoise
concernant l'usage d'un CRM.
Mickaël Malandran-Banos 82 / 86Mémoire de Master Informatique et Document
Annexe 4 : guide d'utilisation de l'outil de Gestion du
Temps
L'application de Gestion du temps
Le principe général de l'application de Gestion du temps et assez simple. Il doit permettre
la saisie du temps de travail des employés pour permettre d'analyser le temps de travail.
Débuter avec l'application
Avant de commencer, il faut d'abord paramétrer l'application. Pour cela, il faut se
connecter en tant qu'admin a vtiger.
Puis : outil > Gestion du temps.
Définir des équipes et des profils
Il faut en premier lieu définir des équipes et des profils (éventuellement des sous-
équipes).
Pour cela administration > tables. Puis sélectionner la table équipe, puis l'onglet ajouter
une équipe. Faire de même avec profil.
Les profils permettent la gestion des droits sur l'application. (tel profil a tels droits).
Les équipes permettent de paramétrer des droits avancés (tel profil a le droit de faire tels
choses sur son équipe).
Créer des rôles
Une fois cela effectué, il faut créer des rôles pour les intervenants. Pour créer un rôle
administration > Équipe.
Mickaël Malandran-Banos 83 / 86Mémoire de Master Informatique et Document
La liste de gauche présente les intervenants vtiger. Lorsqu'ils sont sur fond orange, il ne
sont pas pris en compte dans l'application (car ils n'ont pas de rôle).
Pour créer un rôle :
1. cliquer sur un intervenant
2. sélectionner un profil et une équipe.
3. Sélectionner une date de début, la date de début de validité de profil. Sélectionner
éventuellement une date de fin. Un rôle est ainsi défini. Le rôle est valable tant
qu'il n'a pas de date de fin ou tant que la date de fin n'est pas passée.
Une intervenant peut avoir plusieurs rôles.
Gérer les droits
Pour chaque profil, il est possible de définir des droits.
Pour cela cliquer sur un profil. Puis sur le petit livre qui apparaît à côté du profil. Mettez les
droits qui conviennent et enregistrer.
La gestion du temps
Saisie du temps
Chaque individu peut saisir du temps de travail.
Activité > activités. Puis un clique sur le planning hebdomadaire fait apparaître une popup
permettant d'ajouter une activité. Si une activité est déjà présente dans le planning et
qu'un clique est effectué sur celle-ci, alors la popup contient les détails de cette activité
que l'on peut modifier et enregistrer.
Il est également possible de supprimer une activité grâce à cette même popup.
Une rubrique correspond soit à une opération vtiger. Dans ce cas, au moment de la saisie,
le système vérifie que la rubrique est bien en cours. Ces rubriques sont classés dans la
catégorie opérations.
Vous pouvez également créer vos catégories et rubrique (ex : travail interne, réunion...).
Pour cela administration > table.
Mickaël Malandran-Banos 84 / 86Mémoire de Master Informatique et Document
Pour les rubriques, il suffit de taper les premières lettres du titre d'une opération ou d'un
client et de sélectionner la rubrique souhaitée dans la liste déroulante qui apparaît en
dessous.
Workflow d'une activité
Une fois l'activité saisie, celle-ci est considérée comme nouvelle pendant 15 jours. Pendant
ces 15 jours, pour les personnes qui en possède le droit, l'activité peut être validée ou
refusée. Au bout de 15 jours l'activité est verrouillé. Elle doit être déverrouillée pour être
validée.
Pour gérer le statut des activités : Activités > statut. Il est alors possible de voir le statut
de ses activités, (onglet mes activités). De valider ou refuser des activités (onglet activités
à valider), si l'utilisateur en possède le droit. Un commentaire est obligatoire lors de la
validation d'une activité. Il est également possible de voir toutes les activités validées,
refusées et verrouillées.
Les +
Horaires types
Il est possible de définir des horaires types et d'en inclure certains dans des calculs
statistiques. Par exemple si l'on souhaite voir qui travail le week end. Des horaires types
sont d'ores et déjà créer. Pour les modifier administration > Horaire Type.
Semaines Types
Il est également possible de définir des semaines types (du lundi au dimanche). Les
semaines types sont valable sur une période pour un intervenant. Cela est
particulièrement utile pour effectuer des prévisions horaires. Ainsi, il est possible de définir
une semaine de travail à 35 H pour un (des) intervenant(s) sur une période, puis sur une
autre période une semaine de vacance à 0H pour un des intervenants...
Reporting
Les rapports et tableaux de bords
Mickaël Malandran-Banos 85 / 86Mémoire de Master Informatique et Document
Des rapports et tableaux de bords peuvent être générés. Pour cela, les horaires types et
les semaines types sont particulièrement important. Un rapport s'applique à une période
donnée pour un intervenant ou une équipe.
Le reporting sur les opérations
Un reporting est également effectué sur la vue détaillée d'une opération dans vtiger. Sont
accessibles les heures saisies et les heures validées par l'application gestion du temps.
Mickaël Malandran-Banos 86 / 86Mémoire de Master Informatique et Document