Interface utilisateur

Voici quelques bonnes pratiques à garder à l'esprit lors du développement des interfaces utilisateurs.

Rétroaction

L'interface doit fournir une rétroaction à l'utilisateur comment par exemple : un indicateur de chargement, une demande de confirmation, un message d'erreur, etc.

Demande de confirmation

Toujours demander à l'utilisateur de confirmer une opération sensible. Exemples d'opérations sensibles :

• La suppression de données.
• Quitter sans sauvegarder.
• Se déconnecter.

Utilisation de confirm
Il faut éviter l'utilisation de l'instruction JavaScript confirm pour faire une demande de confirmation. Ce n'est pas recommandée pour les raisons suivantes : problème d'accessibilité et apparence non conforme au reste du site. Il est préférable d'utiliser une boîte de dialogue personnalisée.

Indicateur de chargement

Si un temps d'attente est nécessaire, l'utilisateur doit en être informé avec par exemple, un indicateur de chargement ou une barre de progression. La plupart du temps, l'attente est due à des opérations asynchrones (communication avec un service d'échange, téléchargement, lecture d'un fichier, etc.).

Informer l'utilisateur

Il est pertinent d'informer l'utilisateur d'une opération réussie (ou non).

Exemples d'opérations réussies :

• Une mise à jour de données.
• La création (ajout) de données.
• La suppression de données.

Exemples d'opérations non réussies :

• Pour se connecter, l'utilisateur n'existe pas ou son mot de passe est invalide.
• Lors de la création d'un compte, l'utilisateur existe déjà.
• Un utilisateur accède à une page qui est inexistante.

Utilisation de alert

Il faut éviter l'utilisation de l'instruction JavaScript alert pour informer l'utilisateur. Ce n'est pas recommandée pour les raisons suivantes : mauvaise expérience utilisateur, problème d'accessibilité et apparence non conforme au reste du site. Une alternative par exemple est l'affichage de notifications.

Affichage des exceptions

Toujours informer l'utilisateur lorsqu'une exception se produit. Exemples d'exceptions :

• Impossible de se connecter à un serveur.
• Réseau inexistant.
• Impossible d'ouvrir un fichier ou une base de données.
• Impossible de se localiser.

Convivialité

La convivialité (ou l'ergonomie) d'une interface se réfère à la facilité d'utilisation et à la qualité de l'expérience utilisateur. Une interface conviviale doit :

• Être facile à comprendre, à apprendre et à utiliser.
• Être organisée de manière que l'utilisateur puisse facilement trouver ce qu'il cherche.
• Permettre à l'utilisateur d'effectuer des tâches de manière efficace, rapide et avec un minimum d'efforts.
• Être cohérente et uniforme avec toute l'application (disposition, couleurs, apparence, menu, etc.).
• Être accessible et compréhensible par tous les utilisateurs.

Éléments de l'interface

Voici quelques ergonomies à garder à l'esprit lors du développement d'éléments de l'interface.

Les listes

Par défaut, les éléments d'une liste doivent toujours être affichés en ordre croissant.

Recherche

Par défaut, une recherche par mot clé devrait :

• Chercher dans toute la chaîne, peu importe l'emplacement du texte.
• Ne pas considérer la casse.
• Ne pas considérer les accents.

Navigation

La navigation entre les pages doit être pertinente et logique. Exemples :

• Après s'être connecté, un utilisateur ne devrait pas pouvoir revenir en arrière et afficher la page de connexion. Pour revenir à la page de connexion, il doit se déconnecter.
• Après l'inscription, l'utilisateur devrait être redirigé sur le site et ne pas avoir à se connecter.
• Un utilisateur non authentifié fait une action nécessitant une authentification : il est informé qu'il doit s'authentifier et ensuite il est redirigé vers la page de connexion.

Couleurs

Exemple de contraste optimal :

Exemple de contraste à éviter :

Ressources

Un bon point de départ pour trouver plus d'information : https://m3.material.io/