Mise en page

Une mise en page judicieuse est essentielle à la création d'une interface utilisateur de qualité. Cette rubrique aborde les meilleures pratiques en matière de mise en page, notamment les titres, la densité des données, les onglets, les vignettes, etc. Regardez la vidéo pour en savoir plus. 

Toute interface utilisateur doit présenter une mise en page structurée de manière logique. La mise en page doit répondre à un but précis. 

Passez attentivement en revue les relations logiques entre les différentes informations figurant sur la page, puis structurez la mise en page en fonction de l'importance de ces informations. 

Pensez à la structure d'un journal. Les journaux sont divisés en sections logiques, dont le contenu est classé par ordre d'intérêt probable pour le lecteur. Sur la première page d'un journal, les informations principales se trouvent à gauche, tandis que les articles d'opinion se situent à droite. Cette organisation par type d'informations est cohérente ; l'utilisateur apprend où regarder pour trouver telle ou telle information en fonction de ses besoins.

L'organisation du contenu permet à l'utilisateur de parcourir rapidement les différentes options de navigation, des références rapides aux informations boursières, météorologiques et sportives, jusqu'aux grands titres. Sous les grands titres figurent des liens vers des articles connexes. Ces liens sont placés sur une base contextuelle. Les informations secondaires, les articles d'opinion et la sélection de la rédaction sont affichés en dernier.

Nous devons aborder l'organisation des données d'une application métier comme les rédacteurs d'un journal, en réfléchissant longuement à l'organisation idéale.

L'un des objectifs essentiels de l'expérience utilisateur est d'aider les utilisateurs à bien appréhender les informations pour mener rapidement à bien leurs tâches. La densité des données est un défi : l'utilisateur doit disposer sans perdre de temps d'informations pertinentes. Si vous choisissez d'afficher toutes les données possibles et de laisser les opérateurs du centre de contact faire le tri, vous n'atteindrez pas vos objectifs métier. Et même si les écrans n'ont jamais été aussi grands, l'espace disponible est limité. Veillez à guider vos utilisateurs vers les données qui leur seront le plus utiles.

Cet exemple montre comment sélectionner les informations à afficher et améliorer la lecture et la compréhension des données grâce à quelques modifications mineures de mise en page.

Il suppose que nous ayons déjà réfléchi aux données dont un utilisateur, tel qu'un agent de centre de contact, a besoin sur un compte lié à une carte de crédit. Le plus difficile est de déterminer quelles sont les données indispensables. Le reste de l'exercice est simple.

Maintenant que le plus gros du travail est fait, nous pouvons ajouter des options de modification pour l'agent.

La question de la densité des données est en général résolue en affichant d'abord des informations générales ou un récapitulatif, avec les données considérées comme les plus importantes, comme ici sur ce compte. On peut ensuite donner la possibilité d'accéder à des informations plus détaillées, comme avec ce lien vers l'historique des paiements.

Comme toutes les décisions concernant la conception, les décisions relatives à la densité des données doivent tenir compte du contexte. Les utilisateurs qui regardent les mêmes écrans, heure après heure, jour après jour, se construisent une carte mentale de l'emplacement des données et peuvent ainsi intégrer encore plus de données. 

Les capacités d'interface utilisateur dynamique de Pega constituent un avantage considérable à cet égard. Pega peut fournir les bonnes données au bon moment, sans avoir à afficher toutes les informations. Cette fonctionnalité change la vie de vos utilisateurs ; mais pour en tirer parti, vous devez connaître vos utilisateurs et leurs workflows, comprendre leurs besoins et investir dans la solution de conception.

Les titres constituent d'indispensables repères dans une interface utilisateur ; ils aident les utilisateurs à parcourir rapidement une page et à comprendre ce dont ils ont besoin. Les titres doivent être concis et répartis logiquement sur l'ensemble de l'écran, à l'instar de la vue d'ensemble d'un document Word. En fait, c'est exactement ce que fournissent les titres, une structure semblable à un plan. Chaque page ne doit comporter qu'un seul titre de niveau 1, le titre de la page ou de la fenêtre modale. Les sections principales situées en dessous du titre 1 doivent être regroupées sous des titres 2, puis des titres 3 et ainsi de suite. 

Vous devez veiller à bien utiliser les différents niveaux de titres.

Les titres dans Pega peuvent aussi servir à afficher ou à masquer des blocs de contenu « repliables ». Si le contenu d'un bloc est rarement nécessaire, vous pouvez limiter son affichage au titre. Les sections repliables ne doivent jamais être imbriquées.

Il est également possible d'utiliser des onglets pour fractionner de manière logique le contenu affiché à l'écran. Les onglets représentent des niveaux parallèles de contenu.

Le découpage doit être fait de manière logique, afin que l'utilisateur puisse deviner facilement ce qu'il va trouver dans chaque onglet. Les onglets doivent être classés, de gauche à droite, par ordre d'importance ou de fréquence de lecture, le premier onglet étant affiché par défaut.

Vous devez utiliser au maximum cinq onglets, ce qui est déjà trop pour les petits écrans.

Assurez-vous de ne pas créer d'onglet sans contenu suffisant. Un onglet au contenu très limité semble étrange, demandez-vous si vous ne pourriez pas réorganiser les informations.

Les cartes, ou vignettes, sont des zones d'affichage dotées de bordures, d'un espacement ou de toute autre caractéristique visuelle qui aident l'utilisateur à faire la distinction entre des données regroupées logiquement. Pour la majeure partie du contenu d'un écran ou d'un onglet, les titres suffisent à séparer les blocs de contenu. Les vignettes doivent donc être utilisées de manière judicieuse. En effet, elles peuvent créer une distraction visuelle et prennent plus de place en hauteur qu'un simple titre.

Même si le service informatique de votre entreprise édicte des règles précises en matière de matériel, vos interfaces utilisateur seront probablement affichées sur des écrans de différentes tailles. Vous devez donc déterminer l'éventail des appareils probablement utilisés, et vérifier l'affichage de toutes vos interfaces utilisateur déployées en fonction des différentes hauteurs et largeurs d'écran.

Nous recommandons aussi de tester l'affichage sur Webex ou tout autre outil de collaboration ou de réunion, car vos interfaces utilisateur pourront être utilisées par votre équipe commerciale ou vues par des partenaires lors d'une réunion en ligne. De plus, les outils de collaboration imposent parfois des résolutions inattendues.

Vérifiez vos connaissances avec l’interaction suivante.