web-dev-qa-db-fra.com

Comment réparer une interface utilisateur écrasante pour les rapports avec trop d'options?

J'ai du mal à organiser le nombre excessif de zones de liste pour un rapport qu'on m'a demandé d'écrire.

Ils veulent des tonnes d'options de filtrage avec plusieurs listes de sélection. Existe-t-il une meilleure façon d'organiser ces listes ou une alternative aux listes qui peuvent sembler plus propres? Je peux masquer les zones de liste lorsque les cases à cocher sont cochées, mais cela ne me semble toujours pas très bien.

Cela me fait mal aux yeux:

page layout with listboxes

Modifier:

J'ai décidé d'utiliser un modèle de conception de divulgation progressive pour nettoyer un peu cela. Je continuerai de l'améliorer à mesure que j'apprends. Merci Son Do Lenh pour la réponse!

new page layout

1
twistedaxe

Modèle d'interface utilisateur de divulgation par étapes est une option ici.

C'est une variante du modèle de divulgation progressive. Et Setup Wizard est un exemple classique de ce modèle.

Dans votre cas, je suggérerais ** de diviser l'écran de configuration trop complexe en plusieurs écrans qui nécessitent moins d'interactions avec les utilisateurs et sont moins écrasants visuellement.

En d'autres termes, vous pouvez essayer de

  • Divisez cette tâche de création de rapports en étapes distinctes qui ont peu d'interaction et laissez les utilisateurs les terminer une par une.
  • Vous aurez plus d'espace à chaque étape pour afficher plus d'éléments de données dans une zone de liste (au lieu de presser toutes les données et de laisser les utilisateurs défiler pour toujours).
  • N'oubliez pas de leur laisser voir le nombre d'étapes dont ils ont besoin pour avancer en tant qu'information contextuelle importante.

Wizard

Une alternative est Inline-expand/Collapse/Accordion UI pattern.

Il est utilisé lorsque:

  • Il y a trop d'éléments d'écran (fonctionnalités, contenu, options, etc.) pour tenir confortablement sur la page.
  • La plupart des utilisateurs n'auront pas besoin de tous les éléments tout le temps.
  • Il est important de montrer des éléments supplémentaires en contexte et sans cacher quoi que ce soit d'autre sur la page.

Collapse

Mise à jour: En lisant votre commentaire et votre nouvelle capture d'écran proposée, et en réfléchissant davantage à votre problème, je dirais que ces options de rapport n'ont pas nécessairement un ordre chronologique, et il peut donc être approprié d'utiliser également le concept de tabulation. Quelque chose comme la capture d'écran ci-dessous avec les onglets affichant les options et le bouton vert sous tous les onglets est Imprimer le rapport maintenant.

TabbingTabbing 2

Hypothèse prise pour cette réponse:

  • Toutes les options sont nécessaires. Si certains ne le sont pas, vous devez les supprimer ou au moins, les définir par défaut et ne pas forcer les utilisateurs à les sélectionner.
3
Son Do Lenh