86
UNIVERSITÉ CHARLES DE GAULLE LILLE III UFR Mathématiques, Sciences Économiques et Sociales Mémoire de Master Informatique et Document soutenu 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

UNIVERSITÉ CHARLES DE GAULLE LILLE III - GRAPPAmary/cours/stage/exemples/memoire-m2... · usage ; developement ; evaluation ; analysis ... Du point de vue du technicien, l'utilisation

  • Upload
    vonga

  • View
    219

  • Download
    0

Embed Size (px)

Citation preview

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

Annexes

Mickaël Malandran-Banos 72 / 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