1. Bonjour tout le monde ! Veillez consulter la Politique de forum pour comprendre nos règles, Merci a vous !
    Rejeter la notice

Ergonomie de l'interface

Discussion dans 'Formations & Apprentissage' créé par suenodesign, Avr 7, 2018.

  1. suenodesign

    suenodesign Well-Known Member
    MEMBRE WX

    Inscrit:
    Jan 1, 2018
    Messages:
    511
    J'aime reçus:
    740
    Ergonomie de l'interface

    C'est très intéressant de penser à l'ergonomie de son logiciel. Voici donc quelques conseils à suivre pour réussir ses progiciels.

    Ce n'est pas MOI l'auteur de ces conseils. Je les ai trouvés sur mon ordinateur comme par enchantement.

    1. Les fenêtres de saisie

    Des fenêtres ergonomiques doivent satisfaire deux exigences:
    - Réduire l'anxiété de l'utilisateur
    - Etre agréable à utiliser


    1.1 Comment réduire l'anxiété de l'utilisateur?
    Voici quelques méthodes visant à rassurer l'utilisateur.

    - Une saisie assistée
    . Utilisez les mécanismes d'aide standards: le message d'aide et la fenêtre d'aide.
    . Si nécessaire, proposez une aide en ligne avec parcours et recherche du type WinHelp.
    . Si possible, donnez accès à un tutoriel utilisable depuis le programme lui-même.

    - Des termes clairs
    . Utilisez un glossaire des termes techniques et des concepts .
    . Limitez-vous, si possible, aux termes habituels de l'utilisateur.
    . Soyez aussi précis que possible, aussi concis que nécessaire.

    - Des messages d'erreur positifs
    . Ne culpabilisez pas l'utilisateur avec des messages accusateurs.
    . Rendez positif les messages d'erreur en les remplaçant par des messages
    d'information.
    . Rassurez l'utilisateur en proposant pour chaque erreur les solutions disponibles.

    - Des contrôles de saisie
    . Rassurez l'utilisateur en contrôlant toutes ces saisies.
    . Utilisez les masques de saisie (majuscule automatique, formatage, ....).
    . Contrôlez la saisie obligatoires des champs importants.

    - La protection des fonctions dangereuses
    . Demandez confirmation avant toute exécution d'une fonction dangereuse
    (suppression, modification irréversible,
    . Les fonctions dangereuses doivent être différenciées des autres fonctions (saisies de
    mot de passe pour la gestion du niveau de l'utilisateur, accès depuis un menu
    spécifique, ...).

    - Une interface directive
    . Proposez pour chaque champ une valeur par défaut.
    . Mémorisez les derniers choix effectués pour les proposer par défaut, si aucune autre valeur par défaut n'est calculée.
    . Affichez toutes les valeurs possibles pour un champ de saisie (liste, combo ou sélecteur).
    . Rendez grisés ou invisibles les champs non disponibles.

    - L'annulation des traitements
    . Proposez systématiquement le bouton d'annulation sur chaque fenêtre de saisie.
    . Proposez, si possible, une annulation de la dernière fonction validée.

    - La visualisation des temps d'attente
    . Répondez immédiatement à chaque action de l'utilisateur
    . Visualisez le déroulement des traitements longs (sablier, animations, jauges de progression si possible)
    . Autorisez l'interruption des tâches longues (plus de 10 secondes)

    1.2 Comment rendre agréable l'utilisation du programme?
    Voici quelques méthodes qui facilitent l'utilisation des programmes.

    - Une présentation cohérente
    . Décrivez des règles de présentation à respecter pour chaque fenêtre (position des boutons, alignement des champs, position des libellés).
    . Limitez le nombre de styles.
    . Utilisez des styles de même famille (même relief, même encadrement, ...).
    . Différenciez les boutons de validation, d'abandon et d'aide des autres boutons qui appellent des "sous-fenêtres".
    . Respectez une taille identique pour les boutons et les dessins dans les boutons.
    . Eviter de mixer des boutons textes et des boutons graphiques.

    - Des fenêtres aérées
    . Ne surchargez pas les fenêtres.
    . Limitez le nombre de champs en saisie et en affichage sur la même fenêtre (utilisez des fenêtres d'informations complémentaires).
    . Evitez les encadrements multiples inutiles.
    . Employez au maximum la surface de l'écran.

    - Des textes lisibles
    . Evitez l'italique et les polices trop petites.
    . Evitez les polices non standards qui risquent d'être absentes de la machine de l'utilisateur final. Dans ce cas, la police risque d'être déformée.
    . Utilisez peu de couleurs, sauf si cela est nécessaire.
    . Terminez le libellé d'un champ par le caractère ":" si le libellé et le champ ne font pas partie d'un même cadre.
    . Utilisez les accents et les minuscules.

    - Un fonctionnement cohérent dans tout le programme
    . Conservez la même représentation pour les actions fréquentes: validation, annulation,
    aide, recherche, liste des fichiers, ...
    . Associez toujours la même fonctionnalité au clic droit de la souris (validation, aide, boîte à outils, utilisation spécifique).
    . Respectez les touches du standard Windows:

    - Ret =validation
    - Echap =abandon de la saisie
    - F1 =appel de l'aide
    - Tab =passage au champ suivant
    - shift Tab =passage au champ précédent
    - F3 = suivant

    - Des représentations visuelles
    . Utilisez un style particulier pour les champs en affichage seulement (couleur du cadre, couleur du fond, etc) .
    . Respectez les règles de cadrage standard: à droite pour les numériques, à gauche pour les textes.
    . L'état grisé doit être utilisé pour les champs dont l'inactivité temporaire est évidente.

    Dans les cas où l'inactivité d'un champ est spécifique, il vaut mieux autoriser le champ en saisie et afficher un message explicatif si une modification est tentée.
    Par exemple, si la quantité commandée est inférieure à 3, aucune remise n'est autorisée si la commande doit être envoyée à l'étranger. Un message expliquant cette règle de gestion est préférable à la désélection, sans raison apparente, du champ de saisie de la remise.
    . Représentez visuellement les valeurs saisies (graphique ou image). Par exemple, le choix de l'orientation du papier sera visualisée par une petite feuille horizontale ou
    verticale.
    . Si possible, intégrez des dessins dans les listes.

    - Un positionnement efficace des champs
    . Respectez le standard pour l'ordre général de saisie (la fenêtre doit être saisie dans un ordre qui correspond à la lecture d'une page; à partir de la ligne du haut, de gauche à droite).
    . Encadrez les groupes d'informations, avec un titre général au groupe.
    . Gérez un ordre spécifique pour les champs regroupés dans un groupe visuel (par
    exemple, dans le cas de deux groupes de champs situés dans deux cadres, côte à côte, il faut saisir un groupe puis passer à l'autre groupe).
    . Placez les informations prioritaires en premier (en haut de la fenêtre).
    . Alignez les libellés en colonne. Cet alignement est plus lisible. Il permet de parcourir plus rapidement les libellés pour retrouver une informations à saisir.
    . Intégrez les boutons spécifiques à un champ à côté ou dans le même cadre que le champ (par exemple, un bouton permettant de consulter les valeurs autorisées).

    - Une saisie rapide
    . Associez une lettre d'appel à chaque champ ou à chaque groupe visuel de champ (pas de lettre d'appel pour le bouton en validation, associé à Ret, ni pour le bouton en abandon, associé à Echap).
    . Associez une action au clic droit de la souris (validation de la fenêtre, par exemple).
    . Associez des touches de fonctions à des actions génériques, communes à tout le projet (F1=aide, F3=fiche suivante, Alt F3=Fiche précédente, F8=détail, etc).
    . Autorisez la fin de saisie automatique, dans le cas d'une saisie constituée uniquement de champs à fin de saisie automatique.
     
    #1 suenodesign, Avr 7, 2018
    Dernière édition: Avr 7, 2018
    Tags:
  2. suenodesign

    suenodesign Well-Known Member
    MEMBRE WX

    Inscrit:
    Jan 1, 2018
    Messages:
    511
    J'aime reçus:
    740
    2. Les messages d'erreur
    Les messages d'erreur prennent une part importante dans la qualité d'un programme.
    Dans certains cas, le message d'erreur est un guide très utile.
    Voici les caractéristiques principales d'un bon message d'erreur:

    - Clair
    Tous les messages doivent correspondre à des phrases complètes, avec articles, sujet et verbe.
    Par exemple, au lieu de "Quantité trop grande", préférez plutôt "La quantité saisie est trop grande".
    Chaque message doit être vérifié par un "service qualité" (cohérence, orthographe, compréhension, opportunité, etc).

    - Compréhensible
    Si possible, seul le vocabulaire habituellle de l'utilisateur doit être employé. Un
    glossaire des termes utilisés doit être décrit et respecté. Il pourra être disponible dans
    l'aide en ligne.
    Si le message est une erreur de fonctionnement (erreur système, erreur de configuration, ...) le message doit signaler que l'erreur ne vient pas d'une mauvaise manipulation.
    Dans tous les cas, le message doit s'adresser à l'utilisateur. Le message ne doit donc pas contenir des informations techniques destinées au développeur.

    - Positif
    Un message ne doit jamais frustrer l'utilisateur. Eviter les termes négatifs tels que "erreur", "illégal", "mauvais", "invalide" etc.
    Par exemple, au lieu de "Erreur de saisie: la quantité est invalide", préférer plutôt "La quantité saisie doit être comprise entre 1 et 999".

    - Directif
    Dans les messages, préciser le but puis les actions nécessaires.
    Par exemple, au lieu d'écrire "Utilisez la touche Entrée pour commencer la leçon", préférez "Pour commencer la leçon, utilisez la touche Entrée".

    - Constructif
    Le message doit indiquer comment remédier à l'erreur.
    Par exemple, "Cet article n'existe pas. Voulez-vous le créer?"

    - Précis
    Le message d'erreur doit être aussi spécifique et précis que possible.
    Posez-vous la question: Dans quels cas est-ce que cela arrive?
    Le message doit contenir toutes les informations de contexte disponibles.
    Par exemple, au lieu de "Numéro de client déjà existant", préférez "Ce numéro est déjà affecté au Client DUPONT".

    - Vraiment nécessaire
    Durant les tests utilisateurs, si certains messages apparaissent régulièrement, il peut être important de revoir l'interface (masque de saisie, valeur par défaut, aide visible, proposition des valeurs habituelles, etc).
     
    #2 suenodesign, Avr 7, 2018
    Dernière édition: Avr 7, 2018
    joker, Fouedusa et JHDSoft aiment ça.
  3. suenodesign

    suenodesign Well-Known Member
    MEMBRE WX

    Inscrit:
    Jan 1, 2018
    Messages:
    511
    J'aime reçus:
    740
    3. Les messages d'aide
    Contrairement à un message d'erreur, on ne peut pas être certains de la lecture d'un message d'aide affiché dans la barre de message. Il doit donc être utilisé pour un complément d'information (un condensé d'aide en ligne).
    Voici quelques recettes pour rendre un message d'aide efficace.

    - Ne pas reprendre le libellé du champ
    Si le message ne fait que reprendre le libellé du champ, en plus long, il ne sera pas lu.
    Un message trop général n'aide pas l'utilisateur.
    Il vaut mieux ne pas mettre de ligne d'aide dans ce cas.

    - Donner une information directement intéressante pour la saisie
    . Les contrôles effectués (par exemple: "la date saisie doit être supérieure à la date du jour")
    . L'utilisation future, pour motiver la saisie (par exemple: "cette caractéristique sera utilisée dans les statistiques mensuelles").
    . La dépendance avec d'autres champs (par exemple: "le taux de remise habituel dépend de la quantité commandée")

    - Ne pas utiliser la barre d'aide pour des messages d'erreur
    Un message d'erreur doit être affiché dans une fenêtre spécifique, de façon à être obligatoirement lu.

    - Faire référence à l'aide en ligne si nécessaire
    Si la largeur du message d'aide est trop courte pour afficher une aide suffisante, faire
    référence à l'aide en ligne, en décrivant son contenu (par exemple: "appelez l'aide en
    ligne pour consulter les règles de calculs des tarifs de location").
     
    #3 suenodesign, Avr 7, 2018
    Dernière édition: Avr 7, 2018
    joker, Fouedusa, Tixa et 1 autre personne aiment ça.
  4. suenodesign

    suenodesign Well-Known Member
    MEMBRE WX

    Inscrit:
    Jan 1, 2018
    Messages:
    511
    J'aime reçus:
    740
    4. L'aide
    Pour un utilisateur averti, l'aide WinHelp est très pratique. En revanche, l'utilisateur novice hésite à en faire usage. S'il ne trouve pas directement l'information qu'il recherche, il se trouve vite perdu dans la masse d'information disponible.
    L'aide doit proposer différents niveaux, suivant l'état de connaissance et l'assurance de l'utilisateur:

    - Le libellé et le message d'aide
    Il propose un premier niveau d'aide qui ne demande aucun effort pour l'utilisateur.

    - Les assistants
    Un assistant décompose les saisies complexes en opérations élémentaires où l'utilisateur est guidé dans ces réponses.
    En général, un assistant correspond à une saisie champ par champ avec visualisation constante de la fenêtre d'aide contextuelle relative à chaque champ (voir le paragraphe suivant).

    - Le didacticiel
    Un didacticiel est une démonstration s'effectuant sur le programme ou sur une simulation du programme.
    Le didacticiel ne peut pas décrire tout le programme, il doit présenter deux types d'informations:
    . Les concepts de bases
    . Les principales manipulations à connaître

    - La fenêtre d'aide en ligne contextuelle
    Ces fenêtres d'aides rassurent l'utilisateur qui est certain de trouver des informations intéressantes sans manipulations complexes.
    Ces informations sont directement relatives à la saisie du champ en cours:
    . Les concepts relatifs au champ
    . Les contrôles effectués
    . L'utilisation future et les calculs effectués
    . La dépendance avec d'autres champs

    - La recherche dans l'aide en ligne
    Une aide en ligne hiérarchisée permet à l'utilisateur averti une meilleure recherche des informations.
    Une aide du type WinHelp correspond à cette demande:
    . Un accès immédiat à la page d'index qui constitue le sommaire de l'aide
    . Le parcours séquentiel des pages relatifs à un sujet
    . Un accès direct à une page d'aide suivant un mot clé associé à cette page
    . Le retour rapide aux pages précédemment affichées

    - L'utilisation avancée
    L'aide peut donner quelques informations avancées sur les champs et les règles de gestion:
    . Le paramètrage
    . Les modifications possibles aprés validation
    . Les limites des contrôles de saisie
    . Les limites techniques des traitements réalisés (éviter les informations trop techniques ou inutiles)
     
    #4 suenodesign, Avr 7, 2018
    Dernière édition: Avr 7, 2018
    joker, Fouedusa, Tixa et 1 autre personne aiment ça.
  5. suenodesign

    suenodesign Well-Known Member
    MEMBRE WX

    Inscrit:
    Jan 1, 2018
    Messages:
    511
    J'aime reçus:
    740
    5. Les menus
    - Le menu général
    Il doit permettre l'accès direct aux principales fenêtres du programme. Le découpage
    du menu doit être effectué suivant les objets ou les concepts manipulés.
    La sortie du programme doit être proposée en bas de la première option du menu.
    L'appel de l'aide doit être situé à droite du menu général.
    Chaque option du menu général doit avoir au moins une sous-option (même si cette sous-option reprend le libellé du menu général).

    - Les menus complémentaires
    Un menu complémentaire est utilisé dans une fenêtre qui propose beaucoup trop de
    boutons. Ce menu suit les mêmes règles que le menu général.

    - Le nombre d'options
    Le nombre d'options, pour un niveau de sous-menu, doit être inférieur à 20.
    Pour éviter de dépasser cette limites:
    - Utilisez des sous-menus
    - Regroupez les informations cohérentes dans la même fenêtre (paramètrage,...)

    Les barres de séparation facilitent la sélection et aèrent le sous-menu.
    Le nombre de sous-menus doit être limités à trois, sauf pour des options très rarement utilisées.

    - La barre de boutons
    Les boutons permettent l'accès direct à des options du menu. Ces boutons peuvent faire partie d'une barre d'icones ou être à tout emplacement de l'écran (cas des boutons d'accès aux fonctionnalités les plus fréquements appelées).
    Dans la fenêtre contenant le menu, toutes les actions accessibles à partir des boutons doivent être disponibles sous la forme d'une option dans le menu.
    L'utilisation de bouton permet l'accès aux options du menu par les touches de fonctions et lettres d'appels Alt+Lettre.

    - Les libellés
    Les règles suivantes du standard Windows doivent être repectées, pour chaque libellé:
    - La lettre d'appel de l'option doit être unique dans tout le sous-menu.
    - La première lettre de chaque option doit être en majuscule, même s'il ne s'agit pas de la lettre d'appel.
    - Si l'option ouvre une fenêtre, le libellé doit être terminé par trois points (...)
    - Le libellé doit contenir de préférence des verbes à l'infinitif ("Supprimer" au lieu de "Suppression")
    - Les touches accélératrices (touches de fonctions, Alt+lettre) doivent être cadrées à droite.
    Les libellés doivent être concis pour faciliter leur lecture et leur reconnaissance. Il faut éviter d'utiliser les termes "Gestion de ...", "Information sur ...", "Description de ...", etc.

    - Le message d'aide
    Dans le cas d'une option d'appel de sous-menu, le message d'aide peut citer les sousoptions.
    Pour les options terminales, les règles relatives aux messages en général doivent être
    respectées (reportez-vous à ce paragraphe).

    6. Trucs et astuces

    . Deux approches sont possibles pour chaque traitement:

    - Demander à exécuter une action, puis sélectionner l'objet sur lequel sera exécuté l'action
    - Sélectionner d'abord l'objet puis l'action à exécuter.
    La seconde approche est préférable. Elle correspond au fonctionnement des outils standards Windows.
    . Le titre de la fenêtre permet de rappeler la saisie en cours. Un icone, en haut de la fenêtre, facilite aussi la reconnaissance de la fenêtre et son accès à partir de boutons qui comporteront la même image.
    . Ne pas mettre les boutons "géré par la touche Tab". En effet, lorsqu'un bouton est en
    cours, la touche Ret valide ce bouton, au lieu d'activer le bouton de validation. Ne demandez la "gestion par la touche Tab" que dans les cas suivants:

    - Lancement d'un autre programme (si le bouton n'est pas "géré par la touche Tab",la fenêtre reprendra la main ur le programme lancé).
    - Seuls des boutons sont présents dans la fenêtre
    - Pas de retour à la fenêtre en cours, une fois le bouton validé.
    . N'abusez pas des sons. Si possible, paramétrez leur utilisation (pas de son, son en cas d'erreur seulement, etc).
     
    #5 suenodesign, Avr 7, 2018
    Dernière édition: Avr 7, 2018

Partager cette page

Chargement...