Interface utilisateur
Ensemble d'éléments qui permettent à un utilisateur de se servir d'un système ou d'un logiciel. De manière plus générale, l'interface utilisateur est aussi un moyen de communication entre l'homme et la machine.
Trois aspects
Différents aspects qu'il faut prendre en compte et à considérer lors de l'utilisation ou la conception d'une interface utilisateur, tout cela dans le but d'augmenter la productivité.
Physique
Périphériques (clavier souris, écrans tactiles, etc)
Documents de travail (livres de référence, documents imprimés, formulaires saisis, etc)
Espace de bureau (ergonomie)
L'éclairage
Matériel informatique
Perceptuel
À tout ce que l'utilisateur voit, entend ou touche.
Données et instructions qui sont affichées à l'écran
Formes, traits, nombres, mots, sons
Objets à l'écran (menus, boites de dialogue, etc)
Conceptuel
Selon Grudin
L'interface utilisateur selon Jonathan Grudin1).
Questions à se poser
Facteurs importants
Ce sont les facteurs qui ont apporté les interfaces utilisateurs dans les postes de travail d'aujourd'hui.
Ergonomie
D'une façon très générale, l'ergonomie est l'adaptation de l'Homme au travail. Un outil ergonomique doit être adapté aux caractéristiques de l'utilisateur. C'est la capacité de répondre efficacement aux utilisateurs et à fournir un confort de navigation tout en tenant compte de la diversité de profils.
L'ergonomie est une science pluridisciplinaire :
Ingénierie
L'informatique
La linguistique
La psychologie
Il y a deux principes : l'utilité et l'utilisabilité.
L'utilité
Capacité à répondre à un besoin. Les fonctionnalités et l'interface doivent servir à quelque chose qui est en relation avec les objectifs de l'utilisateur.
L'utilisabilité
Capacité de l'outil à être employé par l'utilisateur pour sa tâche et dans un contexte de travail.
Cela regroupe :
Paramètres
Les paramètres qui sont à considérer lors de la conception d'une interface.
Les attentes des utilisateurs
Les habitudes des utilisateurs (comportements acquis)
L'âge de l'utilisateur
Capacité d'adaptation
Rapidité de navigation
Le niveau de connaissances de l'utilisateur
Démarche ergonomique
Dès l'utilisation du projet et tout au long de l'information jusqu'à la conception du logiciel.
Équipe de conception d'interface
Trois phases importantes :
Collecte des données
Analyse
Propositions
Collecte des données
Il y a collecte des données sur
L'utilisateur
La tâche et les activités de l'utilisateur
Le système existant
Outil de travail avec ses performances techniques et les performance fonctionnelles
Effets ressentis (satisfaction, stress, etc)
Documents de travail
Contexte de travail (environnement)
Identifier la tâche de l'utilisateur et ses besoins
<html><br/></html>
Lorsqu'on conçoit une interface utilisateur, il faut être conscient que ne partage pas :
Le même vocabulaire
Les mêmes expériences
Les mêmes perceptions
Les mêmes valeurs
<html><br/></html>
Avant d'utiliser les techniques, on doit définir :
La popultion cible
Les objectifs
Liste des sujets à aborder
Questions
Avant les démarches l'informaticien devra récolter le plus d'informations possible sur la tâche, sur la documentation et les intrfaces existantes
<html><br/></html>
Techniques utilisées pour recuiellir de l'information :
Observation de l'utilisateur en situation de travail
Regarder les échanges d'information
Rassurer l'utilisateur (pas là pour tester la personne, mais observer le système utilisé)
Exprimer à haute voix (verbaliser) les actions de l'utilisateur
Normes
La norme Z67 de l'AFNOR 2) définit un cadre général de la qualité du logiciel. Définit aussi les caractéristiques d'une interface de qualité. Cette norme comprend sept critères, dont les fonctions sont de :
<html><br/></html>
Les critères sont :
Compatibilité → capacité à s'intégrer dans les activités des utilisateurs, à convenir au contexte physique et social (comprend par exemple la culture d'entreprise) dans lequel le logiciel est utilisé.
Guidage → capacité du logiciel à guider l'utilisateur dans l'utilisation du logiciel. L'objectif est de faciliter l'apprentissage de l'utilisateur. Deux types de guidage :
Homogénéité → capacité du logiciel à respecter une logique d'utilisation, à être constant dans l'utilisation de ses éléments :
Graphisme (style, couleurs, caractères, menus, etc)
Localisation des informations
Le vocabulaire et la syntaxe (
exemple)
Souplesse → Capacité du logiciel à s'adapter aux dfférents contextes d'utilisation éventuels. Plusieurs moyens pour atteindre un même objectif (moyens complémentaires).
Contrôle utilisateur → sur les traitements effectués par le logiciel. Capacité à rendre autonome l'utilisateur dans son interaction avec le logiciel. Donner le contrôle du processus à l'utilisateur.
Traitement des erreurs → capacité du logiciel à protéger l'utilisateur à d'éventuelles erreurs ou les minimiser.
Protection des erreurs
Correction des erreurs
Concision → Minimiser les informations que l'utilisateur doit entrer. Capacité du logiciel à minimiser chez l'utilisateur le nombre d'information à mémoriser/considérer et le nombre d'actions élémentaires qu'il doit réaliser.
Techniques sur les critères ergonomiques
Pour chacun des critères, différentes techniques utilisées dans les applications.
Compatibilité
Utiliser un langage technique propre à l'application et à l'utilisateur
Utiliser des commandes en accord avec la tâche de l'utilisateur
Présenter les informations de façon similaire à celles des autres supports de travail
Respecter la « culture » d'entreprise
Guidage
Faire afficher un message à l'utilisateur sur le déroulement des travaux
Faire afficher un message dans le cas d'erreurs système
Griser les commandes inactives
Afficher des indications à l'utilisateur lors de la saisie d'une donnée
Regrouper des informations de même nature (format ou position)
Présentation distincte pour des informations distinctes
Fournir un système d'aide à l'utilisateur
Homogénéité
Agencer les fenêtres avec le même type d'agencement
Utiliser une syntaxe et une sémantique identiques pour les messages et les commandes du logiciel
Utiliser les mêmes polices de caractères et les mêmes couleurs d'un écran à l'autre
Disposer de façon la plus symétrique possible
Souplesse
Permettre à l'utilisateur des accès multiples aux commandes : par menu, par raccourci clavier, souris
Permettre à l'utilisateur de configurer le logiciel selon ses préférences
Permettre le déclenchement de commandes fréquentes à partir de plusieurs fenêtres
Contrôle utilisateur
Donner à l'utilisateur l'occasion de mettre fin à des traitements
Permettre à l'utilisateur le retour en arrière
Valider les commandes qui entraînent des pertes de données irréparables
Traitement des erreurs
Mettre en gris les commandes non disponibles
Lors de la saisie d'information, donner une liste de valeurs possibles à l'utilisateur
Minimiser les saisies au clavier par l'utilisateur
Favoriser la saisie des données par la souris plutôt que le clavier
Prévenir les risques éventuelles de perte de données
Afficher les messages d'erreur clairs et concis
Mettre le champ en erreur
Concision
N'afficher que les informations pertinentes
Minimiser la saisie des données
Faire afficher toutes les données qui peuvent se calculer automatiquement
Dans la mesure du possible fournir, une liste des valeur à saisir
Si une information est utilisée dans plusieurs fenêtres, faire afficher celle-ci dans chacune des fenêtres concernées pour éviter que l'utilisateur n'ait à mémoriser de l'information
Disposition des champs de saisie
Chaque champ de saisie doit être précédé d'un libellé clair et précis
Disposer les champs de saisie le plus près possible des libellés
Employer un graphisme homogène
Préciser le format de saisie
Indiquer les champs de saisie optionels et obligatoires
Fournir une liste de valeurs possibles
Accelerer les saisies fréquentes
Alignement des champs de saisie
pour éviter le dérangement de l'oeil
pour éviter la confusion
Étiquettes
À gauche de chaque champ de saisie
En lettres minuscules, majuscule sur le premier mot
Le deux-point (:) précédé d'un espace à la fin de chaque libellé
Boutons
Étiqueter et ordonner les boutons de commande de manière homogène
Indiquer explicitement ce que fait le bouton de commande. Par exemple Ouvrir au lieu de OK.
Texte concis et clair pour le texte des boutons
Ne pas utiliser de boutons de commande pour naviger d'une page à l'autre. Utiliser plutôt des onglets
Regouper les boutons de commande par similarité fonctionnelle
Localiser les boutons de commande dans la zone à laquelle ils s'appliquent
Utiliser le texte grisé pour indiquer qu'un bouton de commande n'est pas disponible
Séparer les boutons de commande du reste de la fenêtre de dialogue par des espaces
Prévoir pour chacune des fenêtres
Diagramme Tâche, Objet, Événement (TOE)
Étapes
Identification des tâches
Identification des objets
Identification des événements
Diagramme classé par objet
Stratégies d'exploration visuelle
Quatre facteurs influencent l'exploration visuelle chez l'utilisateur :
Symétries
Titres
Graphismes
Utilisation des espaces
Il y a deux éléments pour l'agencement de l'écran
Règles
Graphisme
Donner un aspect esthétique à l'interface
Permettre la mise en évidence des informations
Donner une lisibilité correcte des informations
Éléments
Couleurs
Icônes
Polices de caractères
Techniques de mise en évidence
Couleur
Peut être utilisé pour la mise en évidence (par exemple le syntax highlighting)
Règles :
Minimiser le nombre de couleurs (7 (+- 2 couleurs))
Contraintes d'utilisation (couleurs qui ont des significations culturelles)
Choix des couleurs
Utiliser des couleurs contrastées pour exprimer une différence
Utiliser des couleurs complémentaires (rouge/cyan, bleu/jaune, vert/bleu, blanc/noir)
Couleurs peu contrastées pour regrouper des objets correspondant (rouge/rose, jaune/orange, bleu/violet, blanc/gris)
Grandes surfaces
Éviter les couleurs vives (favorise la fatigue visuelle)
Fond d'écran → utiliser des couleurs neutres et claires (exemple : gris)
Petits objets : éviter le gris, le rouge saturé et le bleu saturé
Le bleu pour l'encadrement
Méthode de choix de la couleur :
Déterminer les choix de couleur :
Caractères
Minimiser le nombre de polices de caractères (maximum 4)
Police différente pour chaque type d'objet
Texte en minuscules - première lettre en minuscules
Police droite (sans-serif)
Lettres sombres sur des fonds clairs
Quelques lignes longues de préférence à plusieurs lignes courtes (idéalement 50-55 caractères par ligne)
Texte aéré (entre les colonnes, l'interligne, etc)
Icônes
Avantages
Indépendante de la langue
Occupe moins d'espace que le texte
Interprétation plus rapide
Important de valider le graphisme des icônes par le test d'usabilité.
Critères de construction des icônes :
Ressemblance → image fidèle de l'objet (exemple : bouton «Imprimer»)
Aspect descriptif → L'objet avant et après l'exécution de la commande sur lequel elle porte (exemple : bouton «Copier»)
Exemple → Une application typique de l'objet (exemple : bouton «Souligner»)
Analogie → Liens sémantiques avec l'objet (exemple : bouton «Loupe» pour l'aperçu avant impression, ou le bouton «Ciseaux» pour couper le texte)
Abstraction → Image abstraite de l'objet
Arbitraire → Symbole arbitraire
règles d'utilisation
Icônes pour objets et commandes fréquemment utilisés
Accompagner l'icône avec son nom, ou info-bulles
Maximum de 12 icônes
Techniques de mise en évidence
Règles d'utilisations :
Pour être efficace, la mise en évidence doit rester discrète.
Ne pas abuser des techniques
Limiter le nombre de techniques (maximum de 5)
Ne pas utiliser plusieurs techniques sur le même objet
Techniques :
Clignotement (utiliser avec prudence)
Inversion vidéo
Caractères gras
Taille
La police de caractères
Soulignement
Forme
Puces
Structurer un texte
Peu de surcharge
Proximité
Encadrement
Son
Dialogue Humain-machine
Interface matérielle
Interface visuelle
Selection d'objets (souris)
Saisie de texte (clavier)
Organisation du dialogue
Structure du dialogue entre l'humain et la machine repose sur cinq principes qui doivent être respectées :
Présenter les commandes et les données à l'utilisateur
Regrouper les informations relatives à une même activité dans un même espace (fenêtre) ou sous un entête de menu
Laisser le contrôle à l'utilisateur
Guider l'utilisateur pour l'aider à naviguer
Éviter de rendre la navigation complexe
Fenêtres et composants
Il y a divers types de fenêtres qui existe et avec différents usages spécifiques. Chaque fenêtre comprend un nombre minimal de commandes.
Fenêtre de travail
Fenêtre ou boîte de dialogue
Fenêtre surgissante ou intruse
Fenêtre flottante
Fenêtre palette ou palette d'outils
Type de présentation des fenêtres
Présentation plein écran
Présentation multi-fenêtrage
Division de l'écran en espaces de travail
Avantage → flexibilité, plusieurs activités en paralèlle
Inconvénient → demande un apprentissage
Règles à suivre pour la gestion des fenêtres
Être uniformes, standards
Être facile à utiliser
Être facile à mémoriser
Doivent s'inspirer idéalement des standards de gestion communs
Fenêtre active doit être au premier plan et doit être mis en évidence
Autoriser la mémorisation de l'arrangement des fenêtres
Minimiser la quantité d'information à mémoriser dans une fenêtre
Limiter le contenu d'une fenêtre à une tâche précise
Trouver un équilibre entre l'information et le nombre de fenêtres
Modes d'affichages
Mode par carrelage (mosaïque)
Un à côté de l'autre
Présentation fixe des fenêtres
Aucune possibilité de déplacement
Inconvénient → Espace manquant au fur à à la mesure que l'on ouvre des fenêtres supplémentaires
Par recouvrement (cascade)
La nouvelle fenêtre masque celle déjà à l'écran
Redimensionnable et déplaçable
Force l'utilisateur à mémoriser
Par remplacement
La nouvelle fenêtre remplace celle qui est active
Affichage linéaire, oblige l'usage à suivre un tracé prédéterminé
Aucun déplacement
Par cadre
Règles à suivre pour déterminer le contenu des fenêtres
Que des informations pertinentes
Afficher les composants selon leur ordre d'utilisation
Faciliter l'accès aux composants les plus fréquemment utilisés
Mettre en évidence les éléments les plus importants
Regrouper les objets ayant un lien entre eux
Éviter les fenêtres trop chargées
Aide contextuelle dans la zone de messge (dans le bas de l'écran)
Titres courts, non ambigus
Rendre uniforme la terminologie et la syntaxe
Diminuer les saisies au clavier le plus possible
Optimiser l'occupation de l'écran
Accès rapide aux utilisateurs expérimentés
Guider l'utilisateur
Composants
Avantages :
Sur un même niveau, on retrouve l'ensemble des commandes disponibles à un moment donné.
Le contnu et la position des commandes sont faciles à mémoriser
Le risque d'erreur minimisé
Types :
Menus déroulants
Menus contextuels
Avantages :
Menus toujours accessibles (barre de menus)
Simples à utiliser
Faciles à comprendre
Faciles à mémoriser
Désavantages :
Lorsque ouverts, masquent une partie
Choix et la quantité de commandes sont limités
Règles :
Limiter le nombre d'items par menu (7, +-2)
Au besoin, on ajoute un sous-menu
Organiser les options du menu selon leur importance d'utilisation
Utile de séparer visuellement les items de menu qui ont une fonction semblable
Quand plusieurs choix possibles pour un même item, il est utile d'offrir une sélection par défaut
Avantages :
Spécifique à un objet
Le contenu est variable
Pratique pour les utilisateurs expérimentés
La souris
Homogénéité dans l'utilisation des boutons.
Dans le cas de commandes de destruction, s'assurer que le déclenchement n'est pas irréversible. Il est facile avec la souris de cliquer rapidement et effectuer les mauvaises actions.
Gestion du temps d'attente
Temps d'attente global
temps reçus pour réaliser une tâche complète
temps de réponse du système
temps d'affichage
temps de lecture, compréhension et d'analyse des messages
temps de décision des actions à mettre en oeuvre
temps perdu à cause des erreurs
Adaptation de l'utilisateur à condition que le temps d'attente soit constant
Temps d'attente local
temps exigé par le lancement d'une application, avec beaucoup de recherche, ainsi que de nombreux calculs
temps d'attente entre 2 et 6 secondes
faire apparaitre un indicateur visuel indiquant que l'opération est en cours (ex: sablier, horloge, petite montre, ballon de plage, etc)
temps d'attente de plus de 6 secondes
Gestion des erreurs
Types d'erreurs
Erreurs d'intention ⇒ mauvaise compréhention du système (ex: utilisation d'une mauvaise commande pour une tâche)
Erreur de perception ⇒ occasionnés par une présentation similaire des données
Erreur de mémorisation
Erreur de manipulation
Prévention
Afficher des boîtes de confirmation
Griser les commandes non disponibles
Rendre actif les champs selon le contexte
Correction
Signaler l'erreur le plus rapidement possible
Donner à l'utilisateur la possibilité de corriger
Favoriser les retours arrières
Permettre les interruptions de commande (pour les longues opérations)
Réponses possibles face à une erreur
Blocage total par le logiciel
Mise en garde par un message ou un signal sonore
Correction automatique
Règles à suivre concernant les messages d'erreurs
Un message d'erreur comprend deux éléments
Description de la cause de l'erreur
Expliquer à l'utilisateur la correction à effectuer pour corriger l'erreur
Règles :
Description explicite du problème
Ne pas culpabiliser l'utilisateur et le rendre responsable de l'erreur
Utiliser une syntaxe homogène
Éviter d'attribuer au logiciel des réactions humaines (anthropomorphisme)
Aide en ligne
Il y a un accroissement significatif de la complexité d'utilisation des logiciels. Le paradoxe c'est que les logiciels ont des systèmes d'aide en ligne évolués, mais qu'ils sont rarement utilisés par l'utilisateur.
La constatation est qu'il y a vraiment divergence entre le but visé par les concepteurs est de permettre d'apprendre à l'utilisateur à se servir du logiciel, alors que le but de l'utilisateur à trouver de l'aide à une situation urgente.
Les problèmes spécifiques à l'élaboration d'aides en ligne consistent à :
La nature de la tâche
Une situation où il est confronté simultanément à deux tâches différentes:
Comportements et attitudes des utilisateurs non informaticiens
Évolution : Au départ, l'aide en ligne était des texte d'aide disponibles sur un système informatique à distance. Ensuite, la documentation électronique intégrée à un logiciel, y compris celle utilisée en local.
Principles de base :
L'aide en ligne doit être en rapport avec le métier de l'utilisateur. Il faut faire reposer l'aide, où autrement dit la structurer, sur la tâche de l'utilisateur
L'aide doit participer à l'apprentissage du logiciel
Types
L'aide contextuelle / aide en ligne → par un manuel en ligne (pages/onglets)
pages pour un didacticiel (sommaire)
page qui répond aux comment (index)
page qui explique la facon de mettre en oeuvre les procedures pour lesquelles l'application est couramment utlisée (recherche de mots)
Bulles d'aide (texte court)
Règles de conception
Phrases courtes et simples
Éviter les subordonnées et les relatives
Éviter les négations
Vocabulaire approprié à l'utilisateur
Paragraphe courts
Séparer les paragraphes par des lignes blanches
Ligne = 50-55 caractères par ligne