Comment disposer correctement plusieurs contrôles interactifs en utilisant le meilleur modèle UX?
Je travaille à repenser une page existante qui génère des rapports, en fonction des sélections des utilisateurs. Actuellement, il s'agit d'un brouillon de la mise en page:
- L'utilisateur doit toujours commencer à 1 et cette sélection modifiera la liste des liens à 5 à droite et l'arborescence à 5 à gauche.
- L'utilisateur peut également effectuer des recherches facultatives à 2 et 4, ainsi qu'une autre sélection par dates (dates prédéfinies) dans la liste déroulante à 3.
- La navigation gauche à 6 sert uniquement à quitter la page et n'entre pas dans les sélections pour les rapports.
- n point clé est que chaque sélection effectuée par l'utilisateur affectera 1, 5 (arborescence) et 5 (liste de liens). L'utilisateur peut également explorer la arborescence et cela affectera également ce qui est affiché dans 1 et 5 (liste de liens).
Le fait que vous ayez 6 widgets qui interagissent tous les uns avec les autres le rend plus complexe, mais le point de départ pour l'utilisateur est toujours au n ° 1. Les données disponibles sont en outre basées sur les rôles, mais elles sont couvertes par la logique métier principale, d'où la nécessité des interactions et de la mise à jour des widgets.
Alors, quel serait le meilleur modèle pour cette mise en page pour éviter l'aspect encombré actuel sur la page et rendre la navigation simple pour l'utilisateur?
Pour moi, c'est maladroit et difficile à suivre visuellement la première fois que j'ai travaillé avec.
Modifier:
Quelque chose que j'ai omis à l'origine, c'est que l'utilisateur aurait sélectionné un type de rapport qui se reflétera comme la sélection active dans la zone de liste déroulante principale à 1 avant d'arriver à la page. En d'autres termes, ils sélectionnent un type de rapport sur la page précédente et cette sélection remplit cette page lors du chargement, il y aura donc toujours une sélection sur la page. Il n'apparaîtra pas vierge sans données.
S'ils veulent un type de rapport différent après avoir été sur la page, ils modifient la zone de liste déroulante principale à 1 et les autres widgets se réinitialisent en conséquence. Le type de rapport à 1 entraîne la page, les autres widgets ressemblant davantage à des filtres pour la sélection d'origine.
Final:
Sur la base de l'entrée que nous avons reçue, nous avons décidé de refaire l'interface utilisateur et d'utiliser la barre d'outils pour tout sauf l'arbre en (5) et le leftNav en (6).
La liste déroulante principale (1) contient la liste en (5) comme deuxième niveau de la liste déroulante et les filtres sont tous à droite de la liste déroulante principale car ce sont des éléments facultatifs secondaires.
C'est une interface beaucoup plus propre maintenant.
J'ai récemment travaillé sur une interface similaire, donc je connais la douleur ... Voici ce que j'ai trouvé, adapté à vos besoins, j'espère.
Commençons par une ardoise vierge:
J'ai décidé (mais vous pouvez me prouver le contraire) que les deux premiers niveaux de choix sont toujours visibles à gauche, afin que l'utilisateur puisse voir où il/elle est tout le temps. Il y a cependant des inconvénients:
- il mange de l'espace, donc si vous avez beaucoup de données analytiques à afficher, vous devriez plutôt le cacher
- la liste peut s'allonger, masquer les liens externes à l'utilisateur, voire plus, devenir trop longue pour être utilisable elle-même
- en raison de son emplacement, il doit être assez étroit, donc les noms des éléments dans le sélecteur et la liste doivent être assez courts
Donc, en tant que partie vulnérable, c'est une question de raffinement, mais laissons cela comme ça pendant un moment.
Soit dit en passant, comme vous pouvez le voir, j'ai nommé les niveaux de sélection, en utilisant des mots: groupe, catégorie, puis "sélection de structure plus profonde".
Ensuite, vous avez un volet de filtres. Sur cet écran, il est contracté et comprend:
- Méga liste déroulante "Sélection de structure plus approfondie" (décrite ci-dessous)
- Sélecteur de date (travail sur la sélection pour éviter l'utilisation du bouton soumettre ici)
- Fonctionnalité 1/2 champs de filtre de recherche (filtrage des données à la volée, pour éviter l'utilisation du bouton de soumission ici)
La raison pour éviter de soumettre des boutons est que vous pouvez opter pour de nombreux boutons, ce qui rendrait l'interface trop compliquée ou un bouton, ce qui est une alternative. Vous mettriez simplement un bouton à l'extrême droite du volet des filtres. Cependant, comme nous avons cette méga liste déroulante qui est visuellement une zone différente pour l'utilisateur, avoir un bouton d'envoi sur le volet des filtres peut amener les utilisateurs à ne pas comprendre qu'après avoir fermé la méga liste déroulante, il est nécessaire de la soumettre pour que la sélection fonctionne.
Notez l'ardoise vierge. C'est inévitable, car aucune donnée n'est sélectionnée pour être affichée au début. Alors pourquoi ne pas l'utiliser? Doit contenir une explication de ce qui doit être sélectionné en premier, de manière textuelle ou graphique.
En ce qui concerne la méga liste déroulante, elle contient l'arborescence pour une sélection plus approfondie des éléments. Notez que vous devrez probablement fournir trois états de sélection. Les éléments de niveau le plus bas n'ont besoin que de deux, comme sélectionnés/désélectionnés, mais pour les niveaux supérieurs, vous devez également fournir un état pour "certains dans la branche sélectionnée".
Sous l'arborescence, vous pouvez voir un bouton de soumission - il est nécessaire ici, car il fait référence à plusieurs clics dans la structure de l'arborescence, et est visuellement fermé dans la méga liste déroulante, donc les utilisateurs ne doivent pas être confondus. Je pense également qu'il y aurait trop de demandes à l'entrepôt de données s'il fonctionnait à la volée. La structure des données ici peut être compliquée. Il existe également une annulation visuellement dégradée. La raison derrière la mise en place est que les utilisateurs peuvent ne pas être sûrs qu'en fermant la méga liste déroulante du volet des filtres, ils déclencheront ou non le filtrage.
Maintenant, comment montrer aux utilisateurs s'il y a quelque chose sélectionné dans la méga liste déroulante lorsqu'elle est fermée? Vous ne pourrez pas refléter toutes les informations dans le volet des filtres. Au lieu de cela, optez pour changer "Sélection de structure plus profonde" en quelque chose comme "10 sélectionné". Lorsqu'il est suivi d'une flèche vers le bas, il indiquera à l'utilisateur qu'il peut toujours cliquer à nouveau pour déclencher une méga liste déroulante et sélectionner d'autres éléments. Il le connaît déjà après tout.
J'espère que cela répond à votre question. Je m'excuse, mais je ne pourrai peut-être pas améliorer cette réponse au cours de la journée, mais peut-être que certains commentaires seront utiles.