Exemple d'interface utilisateur problématique

Dans cet exemple complet, vous verrez comment le manque de cohérence, de contexte et de simplicité peut nuire à l'expérience globale de l'utilisateur. Regardez la vidéo pour en savoir plus. 

L'exemple suivant montre (en une seule illustration) de nombreux problèmes d'espacement et d'alignement, ainsi que d'autres erreurs. Dans cet exemple, au moins trois grands principes (cohérence, contexte et simplicité) semblent avoir été ignorés.

Avant d'examiner un à un les problèmes de l'interface utilisateur, il convient de comprendre ce qui se passe du point de vue de l'expérience utilisateur. Il s'agit d'un workflow relativement simple qui implique un utilisateur et un système Pega. Le système fournit un service aux clients de la banque U+. L'utilisateur est la trésorière d'une entreprise cliente de la banque U+. Cette utilisatrice n'a pas un profil technique.

Le workflow est le suivant : le système Pega détecte un problème potentiel sur un paiement. Le système Pega informe la trésorière de ce problème potentiel et l'invite à vérifier le paiement. La trésorière choisit d'approuver le paiement ou de le bloquer.

Du point de vue de l'expérience utilisateur, les éléments essentiels sont la notification de la trésorière, avec suffisamment d'informations pour l'inciter à vérifier rapidement le problème potentiel, et le lien vers l'écran permettant de le passer immédiatement en revue. Il doit y avoir plusieurs notifications, certainement sur le portail de la trésorière, mais aussi au moins par e-mail, téléphone ou une autre méthode en dehors du portail.

Nous n'allons pas examiner la conception de cet e-mail, mais les éléments essentiels que nous avons abordés dans ce module (alignement, espacement, mise en page, organisation du contenu) s'appliquent à tous les cas d'usage, y compris les e-mails. Vous remarquerez l'affichage clair des principales données relatives à ce paiement et la présence d'une actions principale claire, avec le lien vers le tableau de bord du portail de trésorerie.

Sur ce tableau de bord, nous devrions maintenant voir une instruction claire - et c'est bien le cas en haut de l'écran. Un clic sur l'un des boutons Review permet d'accéder à notre exemple d'interface utilisateur.

Première chose, l'usage d'une fenêtre modale semble étrange. Une fenêtre modale sert à présenter une action principale à l'utilisateur, qui n'aura pas accès au reste de l'application tant qu'il n'aura pas réalisé l'action en question. Aucune action évidente n'est présente ici. En l'absence d'action évidente dans cette interface utilisateur, la présentation de données en lecture seule dans une fenêtre modale ignore le principe de cohérence, et ne correspond pas à l'usage standard. Une action principale doit être ajoutée dans cette interface utilisateur, même s'il n'y a pas de fenêtre modale. 

Intégrée dans une fenêtre modale, l'interface utilisateur est trop resserrée. La question de la taille de la fenêtre modale a été ignorée. Le contenu latéral pourrait-il être déplacé sous les détails de la transaction ?

Vous remarquerez qu'un bloc de contenu latéral est prévu pour afficher les articles consultés (« articles viewed »), ce qui semble n'avoir aucun rapport avec ce workflow.

Ce bloc est à supprimer. En réalité, l'ensemble du contenu latéral ne semble pas particulièrement utile.

Sa suppression libère de la place pour les données sur les transactions. 

Les titres sont aussi très problématiques. La fenêtre modale n'a pas de titre, alors qu'un titre serait essentiel à une bonne compréhension du contexte de cette interface.

Comme nous l'avons vu, le titre d'une fenêtre modale est l'équivalent du titre d'une page et doit donc commencer par une majuscule. 

Cela dit, ce workflow, s'il est lancé depuis le tableau de bord du portail, ne devrait pas être présenté sous forme de fenêtre modale. Sortons-le de la fenêtre modale.

Les problèmes d'espacement sont nombreux. Dans une interface utilisateur, les sections imbriquées créent des problèmes d'espacement, et c'est sans doute le cas ici. L'interface utilisateur imbriquée - illustrée ici - est entourée de beaucoup d'espace et intégrée dans une autre interface utilisateur, également très espacée. Cela double l'espace inutile dans l'affichage final. 

La meilleure approche consiste à ne pas utiliser d'espacement (ni de titre) sur une interface utilisateur imbriquée. Il est préférable de recourir à une section imbriquée uniquement pour afficher des données, sans éléments de présentation finaux comme des styles de vignette ou des titres.

Il est possible de redessiner cette interface utilisateur pour qu'elle soit à la fois plus facile à lire et à comprendre, mais aussi plus resserrée, ce qui permettrait à l'utilisateur de voir plus d'informations sans avoir à utiliser la souris ou le clavier. 

Une option possible est de transférer les données dans une structure tabulaire, ce qui faciliterait leur analyse (et leur tri, leur filtrage). Nous supposons pour cela que la trésorière pourrait avoir besoin de comparer des données telles que le montant des transactions. Il est recommandé d'analyser ce workflow pour évaluer la réelle nécessité ou l'utilité de telles comparaisons. Même si cette présentation est plus compacte, elle oblige l'utilisateur à regarder les en-têtes du tableau pour analyser les données, au lieu de lire les informations en ligne.

Si vous présentez les données dans un tableau, vous devez veiller à l'alignement des chiffres et des en-têtes de colonnes correspondants.

Ajoutons maintenant des actions, absentes depuis le début. 

Cette solution pourrait fonctionner, mais nécessite une meilleure protection contre toute erreur due à la précipitation. Dans ce cas, il faut ajouter une étape supplémentaire permettant à l'utilisateur de confirmer son choix. Cette étape est également indispensable si l'utilisateur peut sélectionner d'autres options.

Nous pourrions présenter ces mêmes données sous une forme non tabulaire. Cette version est moins compacte, mais pourrait être plus cohérente avec le portail web environnant, et permet d'intégrer un peu plus de données sur chaque transaction. Elle permet aussi d'expliquer clairement pourquoi le paiement a fait l'objet d'un signalement, et éventuellement de mieux faire ressortir la transaction problématique. Remarquez que l'explication peut être masquée pour laisser plus de place aux données sur les transactions, selon les préférences de l'utilisateur.

Dans les deux versions proposées, nous avons radicalement amélioré l'expérience utilisateur.

Nous venons de voir comment identifier les problèmes d'interface utilisateur les plus fréquents et comment les résoudre.

Nous sommes tous responsables de la qualité des logiciels que nous livrons. La qualité n'est pas uniquement du ressort des professionnels de l'expérience utilisateur ; chacun d'entre nous a le devoir d'identifier les problèmes et de les résoudre.

Vérifiez vos connaissances avec l’interaction suivante.