AnnexeWeb-SICPA-CharteErgonomique - Forge DGA

Cati SICPA
Systèmes d’Informations et Calcul
pour le Phénotypage Animal
Annexe WEB à la 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
Réf. : CEG_TC
Version : 0.3
Date : 29/01/2015
Page 2/38
Annexe applications web
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 Périmètre d’application ................................................................................................ 5
3 Concepts et définitions ....................................................................................................... 7
3.1 Différents types d’applications .................................................................................... 7
3.1.1 Application client/serveur .................................................................................... 7
3.1.2 Application web ................................................................................................... 7
3.1.3 Application mobile ............................................................................................... 7
3.2 Approches logicielles ................................................................................................... 7
3.2.1 Approche par fonctionnalité ................................................................................. 7
3.2.2 Approche par objet ............................................................................................... 7
3.2.3 Quelle approche choisir ? ..................................................................................... 7
4 Recommandations générales .............................................................................................. 8
4.1 Cohérence et homogénéisation .................................................................................... 8
4.2 Les éléments à rendre cohérent .................................................................................... 8
4.3 Charte identitaire Inra .................................................................................................. 8
5 Structure et agencement des écrans .................................................................................... 9
6 Contenus et éléments visuels ............................................................................................ 12
7 Fonctionnalités / Actions .................................................................................................. 19
8 Les Messages et les notifications ..................................................................................... 21
9 Les listes ........................................................................................................................... 26
10 Les formulaires ................................................................................................................. 28
10.1 Organisation des informations ................................................................................... 28
10.2 Regrouper les informations selon leur thème............................................................. 28
10.3 Enchainement des zones de saisies ............................................................................ 29
10.4 Les différentes sortes de formulaires ......................................................................... 29
10.4.1 Les formulaires simples ..................................................................................... 29
10.4.2 Les formulaires avec onglets .............................................................................. 32

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
Page 3/38
Annexe applications web
10.4.3 Les assistants ...................................................................................................... 32
10.4.4 Les formulaires maître-détail ............................................................................. 33
10.4.5 Les formulaires de saisie en tableau ................................................................... 33
10.5 Positionnement des informations ............................................................................... 33
10.6 Aide à la saisie ........................................................................................................... 34
10.6.1 Liste déroulante .................................................................................................. 34
10.6.2 L’auto-complétion .............................................................................................. 34
10.6.3 Rapatrier une valeur ........................................................................................... 34
10.7 Gestion des erreurs et validation des informations saisies ......................................... 34
10.8 Eléments constituant un formulaire ........................................................................... 35
10.8.1 Le Titre du formulaire ........................................................................................ 35
10.8.2 Les onglets .......................................................................................................... 35
10.8.3 Les groupes de champs ...................................................................................... 35
10.8.4 Les boutons d’actions ......................................................................................... 36
10.9 Les mécanismes d’enregistrement ............................................................................. 36
10.9.1 L’enregistrement du formulaire.......................................................................... 36
10.9.2 La cinématique d’enregistrement ....................................................................... 36
11 Les recherches .................................................................................................................. 37
12 Les éditions ...................................................................................................................... 38

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
Page 4/38
Annexe applications web
1 Glossaire
CATI
Centre Automatisé de Traitement de l’Information
CSS
Cascading Style Sheets
Langage qui décrit la présentation des documents HTML
GA
Génétique Animale
IHM
Interface Homme Machine
HTML
Hypertext Markup Language
Langage de balisage permettant d’écrire des pages web
PHASE
PHysiologie Animale et Systèmes d’Elevage
SICPA
Systèmes d’Information et Calcul pour le Phénotypage Animal

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
Page 5/38
Annexe applications web
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.
Une démo est disponible à l’adresse suivante : 147.99.156.182/cati
L’archive est disponible à l’adresse suivante : 147.99.156.182/cati.zip
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