Sélection de plusieurs plages dans une seule plage
Je crée une application qui requiert que les comptes individuels soient segmentés par revenus. J'essaie de trouver le moyen le plus simple pour l'utilisateur de créer ces segments. Cette tâche implique de diviser une seule plage de revenus - dans cet exemple 1 à 10 000 $ - en plusieurs plages plus petites.
Les relations: - L'application a une fourchette de revenus (la plus grande). - Chaque segment a une fourchette de revenus dans la fourchette de revenus des applications. - Chaque compte a un numéro de revenu mensuel récurrent.
Ci-dessus se trouve ma solution actuelle: un tableau avec le nom du segment et des champs permettant à l'utilisateur d'entrer des plages basses et hautes pour le segment. Je crains que cela ne soit déroutant et ne montre pas où ces plages se situent dans la plage totale de l'application.
J'ai envisagé de passer à une série de curseurs dans un curseur, peut-être la façon dont Photoshop gère les dégradés, mais je crains que cela ne soit plus déroutant.
Le chevauchement de ces plages est acceptable, mais pas préféré.
Quelqu'un a-t-il déjà abordé ce problème ou réfléchi à la meilleure façon de le résoudre?
MISE À JOUR 10.7.2016
J'aurais peut-être trouvé une meilleure solution à ce problème. Il existe une bibliothèque appelée Elessar , qui tente de faire quelque chose comme le sélecteur de dégradé de Photoshop.
La bibliothèque présente un curseur avec une plage. Le survol d'une zone vous permet de créer une nouvelle plage dans la plus grande plage. Une fois qu'une nouvelle plage est créée Les bords peuvent être glissés pour s'étendre et se contracter dans les deux sens. L'outil ne permet pas les plages qui se chevauchent.
Hors de la boîte, il n'apparaît pas qu'il existe un moyen de supprimer un segment. Je pense que la solution la plus simple serait d'avoir un X qui apparaît en vol stationnaire. Survolez, cliquez sur le X, êtes-vous sûr? et le segment est supprimé. Je suis un peu inquiet de la façon dont cela pourrait apparaître sur le segment plus petit.
Quelques autres problèmes possibles avec cette solution:
- Les curseurs ne sont pas aussi précis que la saisie en nombres exacts. Par exemple, obtenir le curseur pour atteindre exactement 499 $ pourrait être difficile.
- De très grandes plages peuvent rendre difficile la précision.
MISE À JOUR 10.10.2016
Je pense que l'approche de Madalina est probablement la meilleure à adopter avec cette fonctionnalité: conservez le curseur comme représentation des données, mais limitez l'édition au tableau.
En utilisant le graphique à barres pour représenter la plage de revenus des applications et les plages plus petites qui s'y trouvent, l'utilisateur a plus de facilité à visualiser la taille des segments.
De plus, cela prendra beaucoup moins de temps à développer qu'avec un curseur.
Je pense que vous devriez garder le curseur comme représentation des données modifiées dans le tableau uniquement, sans possibilité de changer les données là aussi.
Après la mise à jour de la ligne, l'intervalle peut également être mis en surbrillance sur le curseur. Si vous trouvez facile d'utiliser un curseur de plage, vous pouvez en utiliser un dans un modal/popup lorsque l'utilisateur met à jour la ligne, mais je préfère la modification en ligne. Vous avez dit que vous avez besoin de quelque chose de moins déroutant, alors restez simple, pas plus compliqué.
La solution avec plusieurs curseurs de plage est plus rapide, mais pas vraiment intuitive pour la sauvegarde des données.