Cati SICPA - Forge DGA

Cati SICPA
Systèmes d’Informations et Calcul
pour le Phénotypage Animal
Charte ergonomique et graphique
pour les applications développées au sein
du Cati SICPA
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 2/19
Table des matières
1
Glossaire ............................................................................................................................. 4
2
Introduction ........................................................................................................................ 5
2.1
Contexte ....................................................................................................................... 5
2.2
Objectifs ....................................................................................................................... 5
2.2.1
Bonnes pratiques ergonomiques........................................................................... 5
2.2.2
Homogénéisation des interfaces ........................................................................... 5
2.2.3
Standardisation des développements .................................................................... 5
2.2.4
Enrichissement continue ...................................................................................... 5
2.3
3
Périmètre d’application ................................................................................................ 5
Concepts et définitions ....................................................................................................... 6
3.1
3.1.1
Application client/serveur .................................................................................... 6
3.1.2
Application web ................................................................................................... 6
3.1.3
Application mobile ............................................................................................... 6
3.2
4
Différents types d’applications .................................................................................... 6
Approches logicielles ................................................................................................... 6
3.2.1
Approche par fonctionnalité ................................................................................. 6
3.2.2
Approche par objet ............................................................................................... 6
3.2.3
Quelle approche choisir ? ..................................................................................... 6
Recommandations générales .............................................................................................. 7
4.1
Cohérence et homogénéisation .................................................................................... 7
4.2
Les éléments à rendre cohérent .................................................................................... 7
4.3
Charte identitaire Inra .................................................................................................. 7
5
Structure et agencement des écrans .................................................................................... 8
6
Contenus et éléments visuels.............................................................................................. 9
7
Fonctionnalités / Actions .................................................................................................. 10
8
Les Messages et les notifications ..................................................................................... 11
9
Les listes ........................................................................................................................... 12
10
Les formulaires ................................................................................................................. 13
10.1 Organisation des informations ................................................................................... 13
10.2 Regrouper les informations selon leur thème............................................................. 13
10.3 Enchainement des zones de saisies ............................................................................ 13
10.4 Les différentes sortes de formulaires ......................................................................... 13
10.4.1 Les formulaires simples ..................................................................................... 13
10.4.2 Les formulaires avec onglets .............................................................................. 13
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 3/19
10.4.3 Les assistants ...................................................................................................... 13
10.4.4 Les formulaires maître-détail ............................................................................. 14
10.4.5 Les formulaires de saisie en tableau ................................................................... 14
10.5 Positionnement des informations ............................................................................... 14
10.6 Aide à la saisie ........................................................................................................... 14
10.6.1 Liste déroulante .................................................................................................. 14
10.6.2 L’auto-complétion .............................................................................................. 15
10.6.3 Rapatrier une valeur ........................................................................................... 15
10.7 Gestion des erreurs et validation des informations saisies ......................................... 15
10.8 Eléments constituant un formulaire ........................................................................... 15
10.8.1 Le Titre du formulaire ........................................................................................ 16
10.8.2 Les onglets.......................................................................................................... 16
10.8.3 Les groupes de champs ...................................................................................... 16
10.8.4 Les boutons d’actions ......................................................................................... 16
10.9 Les mécanismes d’enregistrement ............................................................................. 16
10.9.1 L’enregistrement du formulaire.......................................................................... 16
10.9.2 La cinématique d’enregistrement ....................................................................... 17
11
Les recherches .................................................................................................................. 18
12
Les éditions ...................................................................................................................... 19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Tronc commun
1 Glossaire
CATI
CSS
GA
IHM
HTML
PHASE
SICPA
Centre Automatisé de Traitement de l’Information
Cascading Style Sheets
Langage qui décrit la présentation des documents HTML
Génétique Animale
Interface Homme Machine
Hypertext Markup Language
Langage de balisage permettant d’écrire des pages web
PHysiologie Animale et Systèmes d’Elevage
Systèmes d’Information et Calcul pour le Phénotypage Animal
Page 4/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 5/19
2 Introduction
2.1 Contexte
Le Cati SICPA porte, au sein des départements GA et PHASE, une approche intégrée des
données de phénotypage animal, depuis l’acquisition jusqu’au traitement statistique et à la
valorisation de ces données. Depuis la création du Cati, les applications développées doivent
donc répondre aux besoins à la fois de génétique animale et de physiologie animale. De plus,
les interfaces hommes machines devront désormais avoir une cohérence ergonomique et
graphique.
2.2 Objectifs
2.2.1 Bonnes pratiques ergonomiques
L’objectif principal de cette charte est de proposer aux développeurs d’application, travaillant
au sein du Cati SICPA, les éléments pour mettre en œuvre de bonnes pratiques ergonomiques
dans leurs développements, afin d’harmoniser les interfaces. Elle a donc pour objectif de
proposer :
 des façons d’organiser l’information au sein des écrans de l’application
 des solutions dans la dynamique entre les différents écrans
2.2.2 Homogénéisation des interfaces
De nombreux utilisateurs sont amenés à travailler avec plusieurs de nos applications.
L’homogénéisation des interfaces leur permet de retrouver les mêmes concepts ergonomiques
et graphiques réduisant ainsi l’effort d’apprentissage.
L’objectif est aussi d’obtenir des applications avec une identité graphique la plus homogène
possible. La cohérence et la simplicité des interfaces permettent de faciliter l’adhésion des
utilisateurs.
2.2.3 Standardisation des développements
La charge de développement, pour la mise en place d’un système d’informations, peut être
relativement importante. La standardisation de la conception d’application permet
d’homogénéiser les développements et donc réduire cette charge.
Pour chaque application, le temps d’analyse peut ainsi être consacré plus sur la
compréhension du fonctionnel que sur le moyen de le mettre en œuvre.
2.2.4 Enrichissement continue
La prise en compte des retours, au fur et à mesure de son utilisation par les développeurs,
mais aussi par les utilisateurs de nos applications, doit permettre d’enrichir et d’améliorer la
charte régulièrement.
2.3 Périmètre d’application
Cette charte concerne toutes les applications développées au sein du Cati SICPA. Toutefois,
en fonction de leur particularité, des annexes seront rédigées pour détailler plus précisément
sa mise en œuvre pour :
 Les applications client/serveur
 Les applications web
 Les applications mobiles
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 6/19
3 Concepts et définitions
3.1 Différents types d’applications
3.1.1 Application client/serveur
L’application est installée sur le poste de l’utilisateur ou sur un serveur. Le poste (le client)
établie ensuite une connexion directe à la base de données.
L’avantage est de bénéficier des interfaces très riches offertes par le système d’exploitation.
3.1.2 Application web
L’application n’est pas installée sur le client mais sur un serveur web. Elle est accessible
grâce à un navigateur.
Les possibilités graphiques et matérielles sont désormais aussi riches qu’en client/serveur
grâce aux nouvelles technologies (HTML 5, CSS3, Javascript).
3.1.3 Application mobile
L’application installée sur l’appareil mobile doit pouvoir fonctionner en autonome (sans
connexion) et avoir accès aux ressources de l’appareil (lecture RFID, Bluetooth, …).
L’interface doit être le plus simple possible pour s’adapter aux contraintes de l’appareil (petit
écran, clavier numérique uniquement, …).
3.2 Approches logicielles
3.2.1 Approche par fonctionnalité
Cette approche donne à l’utilisateur l’accès à des fonctionnalités précises, prédéfinies pour
manipuler les objets.
3.2.2 Approche par objet
Cette approche donne à l’utilisateur des outils pour manipuler, consulter, trouver des objets
dans différents contextes. Il peut ainsi, en partant des objets, enchainer des fonctionnalités
simples pour réaliser des opérations complexes.
3.2.3 Quelle approche choisir ?
Pour des services ponctuels, l’approche par fonctionnalités peut être choisie car l’utilisateur
est occasionnel. Il faut donc lui proposer une interface simple qui le guide dans ses
fonctionnalités à réaliser.
Pour des applications métiers, l’approche par objet permet à l’utilisateur de manipuler à sa
guise les objets sans être guidé par un processus. Une solution pourrait être une répartition
intelligente de ces deux approches en fonction des fonctionnalités à traiter par l’utilisateur ;
avec un choix vers une orientation objet de préférence tout en proposant un mode fonctionnel
quand cela s’avère nécessaire.
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 7/19
4 Recommandations générales
4.1 Cohérence et homogénéisation
L’objectif majeur est la cohérence et l’homogénéisation de tous les aspects de l’IHM. Il est,
en effet, préférable d’avoir une ergonomie perfectible mais cohérente plutôt que des écrans
très ergonomiques mais disparates dans leur logique de fonctionnement.
4.2 Les éléments à rendre cohérent





La logique applicative : navigation entre les objets, même logique d’enchainement
d’opération…
Le style de rédaction : utiliser toujours les mêmes tournures de phrases dans les
messages, info-bulles, libellés, …
La présentation de l’information : construire les formulaires, les listes avec une
logique toujours identique
Le positionnement des composants : placement du label, du champ de saisie, …
Le style graphique : police de caractère, couleur, …
Des pictogrammes communs : utiliser les mêmes pictogrammes sur les contextes (ex :
messages d’information, d’avertissement, d’interdiction, …). Le plus possible ils
devront être choisis dans une bibliothèque d’images commune.
4.3 Charte identitaire Inra
Une charte identitaire Inra est disponible sur intranet : https://intranet6.inra.fr/charteidentitaire.
Cette charte est essentiellement orientée vers la publication de document. Toutefois, elle
pourra guider les annexes sur les parties éditions, police de caractère et présentation globale
d’une page web.
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
5 Structure et agencement des écrans
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 8/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
6 Contenus et éléments visuels
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 9/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
7 Fonctionnalités / Actions
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 10/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
8 Les Messages et les notifications
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 11/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
9 Les listes
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 12/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Tronc commun
Page 13/19
10 Les formulaires
Les formulaires permettent la consultation, la saisie ou la modification des informations de
l’objet concerné.
10.1 Organisation des informations
De manière générale, il conviendra d’éviter les gros formulaires. Ceux-ci présentent, en effet
les inconvénients suivants :
 L’apprentissage par l’utilisateur est plus long
 Le contrôle des règles de gestion peut devenir très complexe et long à développer
 La maintenance peut s’avérer plus difficile
Il est possible de développer différents formulaires pour le même objet si des processus
fonctionnels amènent à modifier différentes parties de l’objet. Ceci afin de n’afficher que les
données nécessaires. Au besoin, des liens entre ces formulaires peuvent être mis en place si
cela a du sens pour le processus.
Si une information est présente à plusieurs endroits de l’application, son libellé doit toujours
être le même.
Si la mise en place d’un gros formulaire s’avère nécessaire, il convient alors d’utiliser des
onglets.
10.2 Regrouper les informations selon leur thème
L’utilisation de groupe de champs de saisie (group box en C#, FieldSet en HTML) est
important pour faciliter la visibilité des différentes informations. En fonction du langage, ces
groupes peuvent se replier/déplier. Dans ce cas, il est conseillé de replier à l’ouverture du
formulaire, les groupes dont leur contenu n’est pas systématiquement modifiable.
La logique de regroupement doit être la même dans tous les formulaires de l’application.
10.3 Enchainement des zones de saisies
Le passage d’une zone de saisie à une autre doit pouvoir se faire avec le clavier (touche
tabulation principalement) et ceci de manière la plus cohérente possible (généralement de la
gauche vers la droite puis de haut en bas).
Au tant que possible utiliser les technologies pour basculer rapidement d’un champ de saisie à
un autre (masque de saisie, touche entrée, …).
10.4 Les différentes sortes de formulaires
10.4.1 Les formulaires simples
Ces formulaires présentent une saisie courte et directe de quelques données.
10.4.2 Les formulaires avec onglets
Ces formulaires doivent être développés quand les données à saisir méritent d’être organisées
par thème.
10.4.3 Les assistants
Les assistants permettent de faire saisir à l’utilisateur une tâche précise et ordonnée. Ils ont un
début et une fin et présentent une navigation séquentielle d’une étape à une autre.
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 14/19
Pour un processus de création complexe, l’utilisation de l’assistant simplifie le travail de
l’utilisateur car les différentes étapes le guide dans sa saisie.
10.4.4 Les formulaires maître-détail
Ces formulaires présentent à la fois une liste d’élément et une zone qui détaille les
informations de l’élément sélectionné dans la liste. En fonction du langage, le détail peut être
présenté par-dessus la liste dans une zone modale.
Dans tous les cas, l’affichage du détail se déclenche en cliquant sur une ligne de la liste.
Il est conseillé de forcer l’enregistrement à chaque changement d’élément.
Ces formulaires sont à la fois complexes à développer et difficiles à comprendre pour
l’utilisateur. Ils sont donc à réserver pour des besoins spécifiques. La logique écran de listes
séparées des formulaires reste à privilégier.
10.4.5 Les formulaires de saisie en tableau
Ces formulaires présentent plusieurs données modifiables sous forme d’un tableau. Les
actions possibles sont « Création », « Suppression » ou modification du contenu.
Cette saisie en tableau peut être présentée seule, sur un onglet d’un formulaire ou dans un
groupe de champs.
10.5 Positionnement des informations
Les champs de saisie sont alignés à gauche si la donnée est de type texte. Ils sont alignés à
droite si la donnée est numérique ou de type date.
Les libellés sont placés à gauche du champ de saisie (ou à défaut au-dessus) et sont alignés à
gauche avec le : pour séparer du champ de saisie.
Dans la mesure du possible, tous les couples libellé-champs de saisie doivent être alignés
verticalement entre eux (Cf. schéma ci-dessous).
10.6 Aide à la saisie
L’aide à la saisie est primordiale pour l’utilisateur. Pour cela, il est possible d’orienter
l’utilisateur par des aides contextuelles et, le cas échéant, des solutions d’interface de saisie
facilitant le choix d’une valeur.
L’utilisation d’info-bulle et zones d’aides est bien plus efficace que des descriptions sur le
manuel utilisateur. Elles sont, en effet, contextualisées et visibles sans quitter l’écran de saisie.
10.6.1 Liste déroulante
Elle permet à l’utilisateur de sélectionner une valeur pré-alimentée par l’application. Le
contenu de cette liste de valeur peut être modifiable en fonction du contexte.
Attention à ne pas proposer des listes déroulantes avec un trop grand nombre d’élément.
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Tronc commun
Page 15/19
10.6.2 L’auto-complétion
L’auto-complétion propose à l’utilisateur de compléter sa saisie automatiquement (des
suggestions lui sont faites au fur et à mesure qu’il frappe son texte).
Dans le cas où le nombre de valeurs possibles est trop important ce mode est saisie est
préférable par rapport à une liste déroulante (Ex : nom de commune).
L’auto-complétion peut aussi être combinée avec la liste déroulante. Dans ce cas, les éléments
proposés dans la liste se réduisent au fur et à mesure de la saisie de l’utilisateur.
10.6.3 Rapatrier une valeur
Il est parfois utile de proposer à l’utilisateur l’ouverture d’un formulaire pour récupérer une
information complexe. Cette page doit s’ouvrir dans une zone modale bloquant ainsi la saisie
du formulaire. Cette page peut proposer un formulaire de recherche pour aider l’utilisateur
dans son choix. De plus elle peut déjà être filtrée en fonction d’un début de saisie de
l’utilisateur (utilisation du « commence par… » pour l’initialisation du filtre). Le retour au
formulaire peut se faire soit par fermeture explicite de la zone modale soit par récupération de
la valeur par l’utilisateur.
10.7 Gestion des erreurs et validation des informations saisies
Lors de la création ou la modification d’un objet, l’utilisateur peut saisir des données erronées
ou incohérentes. La validation permet de définir des règles autorisant ou non l’enregistrement.
Une icône doit apparaitre à droite de la zone de saisie concernée. Lié à cet icône, une info
bulle affichera à l’utilisateur le message d’erreur. Le format des messages d’erreur est décrit
dans le paragraphe 8 Les messages et les notifications.
La validation se déclenche juste avant l’enregistrement du formulaire et sortie de chaque
champ de saisie.
10.8 Eléments constituant un formulaire
Un formulaire peut contenir l’ensemble des éléments présentés dans le schéma ci-dessous.
Avec certains éléments obligatoires :
 Titre du formulaire
 Une zone pour les boutons avec au moins un bouton « Annuler »
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 16/19
10.8.1 Le Titre du formulaire
Il contient un titre dynamique selon le contenu du formulaire faisant référence à
l’identification de l’objet présenté. Exemple : Propriétés du traitement Zenol.
Le texte du titre est aligné à gauche.
10.8.2 Les onglets
Les onglets permettent le découpage du formulaire en plusieurs sous parties. Le titre de
chaque onglet doit être concis et préciser son contenu.
10.8.3 Les groupes de champs
GroupBox en C#, FieldSet en HTML
Ils permettent de regrouper les champs de saisie afin que l’utilisateur ait une meilleure
perception des informations à saisir.
En fonction du langage, ils doivent être repliables et être déjà repliés si leur contenu n’est pas
systématiquement modifiable.
10.8.4 Les boutons d’actions
Ils doivent être positionnés en bas à droite du formulaire.
10.9 Les mécanismes d’enregistrement
10.9.1 L’enregistrement du formulaire
L’enregistrement du formulaire se fait par simple clic sur le bouton « Enregistrer ». Ce bouton
doit être systématiquement présent en mode création ou modification.
Dans le cas d’un assistant, il est conseillé d’enregistrer onglet par onglet à chaque changement
d’étape. Dans ce cas, il conviendra d’ajouter le bouton « Enregistrer et suivant > ».
L’enregistrement onglet par onglet peut aussi se faire sur un formulaire où le contenu des
onglets est dense. Dans tous les cas, l’option choisie doit être la même dans toute
l’application.
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 17/19
10.9.2 La cinématique d’enregistrement
En cas de succès de l’enregistrement du formulaire, il y a un retour à l’écran d’où a été ouvert
le formulaire (liste, module, …).
S’il y a échec, un message d’erreur doit s’afficher et le formulaire doit rester ouvert.
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
11 Les recherches
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 18/19
Charte ergonomique et graphique pour les
applications développées au sein du Cati SICPA
Tronc commun
12 Les éditions
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 19/19