Pourcentage cumulé entre 4 contrôles
J'ai une demande délicate qui nécessite que l'utilisateur puisse modifier les valeurs sur 4 vecteurs. Le hic, c'est que les quatre vecteurs entre eux doivent totaliser 100%.
Ma pensée initiale est d'aller avec 4 curseurs.
Cela signifierait que, comme le total doit être de 100%, l'utilisateur devrait abaisser une valeur avant d'en augmenter une autre. Est-ce assez intuitif?
Peut-être du texte d'aide et une étiquette rouge/verte pour les valeurs inférieures à 100% (rouge) et à 100% (vert)?
Si quelqu'un a une solution plus élégante pour cela, j'adorerais la trouver!
Facilitez le travail de l'utilisateur
Demandez-vous si c'est le système ou l'utilisateur qui est concerné par une précision de 1%. L'utilisateur veut-il vraiment penser aux pourcentages distribués, ou simplement à la priorité de chaque point?
Demandez des valeurs relatives simples
Si un niveau élevé de précision est purement le domaine du système, pensez à demander à vos utilisateurs à quel point ils se soucient de chaque point sur une échelle relative. Vous pouvez décomposer cela sur le back-end et calculer le pourcentage pour eux. Aucun humain ne fait de maths.
Laissez l'ordinateur faire les choses difficiles
Donc, dans cette illustration ...
L'utilisateur voit:
Faible
Moyen
Haute
Le système voit:
"Meh" = ((1*20)*(100/((1*20)+(3*20)+(5*20))) = 11.11111%"Sure" = ((3*20)*(100/((1*20)+(3*20)+(5*20))) = 33.33333%"OMG!!!" = ((5*20)*(100/((1*20)+(3*20)+(5*20))) = 55.55555%
Facile pour l'utilisateur, facile pour l'ordinateur. C'est un monde parfait!
Vous pouvez utiliser une seule barre, partitionnée en quatre sections, étiquetée (ou éventuellement colorée, comme je l'ai utilisé dans mon exemple d'image) en conséquence. La zone où chaque partition se réunit serait les poignées de redimensionnement, et le redimensionnement augmenterait et rétrécirait en conséquence les partitions adjacentes, tandis que la barre entière est plafonnée à 100%.
Avec une légende montrant les pourcentages exacts de chaque couleur.
Est-il nécessaire d'utiliser des curseurs? Notez qu'un curseur est un bon choix lorsque vous savez que les utilisateurs considèrent la valeur comme une quantité relative, pas un chiffre Par exemple, contrôle du volume ou de la luminosité.
Si l'utilisateur doit déterminer la valeur, vous pouvez également fournir une interface de saisie de valeur simple avec un indicateur "Valeur restante". Un peu comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
De cette façon, vous pouvez:
Évitez d'utiliser la souris. Le clavier est le support préféré pour toute activité de saisie de données.
Actions moindres - L'utilisateur n'aura pas à faire des allers-retours entre l'organisation de la valeur des curseurs.
Fournit un meilleur contrôle pour gérer les valeurs numériques.
Il est également possible d'utiliser quatre curseurs pour normaliser les résultats, c'est-à-dire que s'ils totalisent x%, multipliez chaque valeur par 100/x. Ensuite, vous n'auriez pas à inquiéter l'utilisateur avec des contraintes tout en conservant les proportions souhaitées par l'utilisateur.
Lorsqu'un curseur est ajusté, ajustez automatiquement les autres curseurs déverrouillés pour maintenir leur total à 100%
Vous pouvez présenter une interface utilisateur simple qui permet de définir les quatre valeurs à la fois. I créé une maquette qui illustre ce principe. Notez que je ne me suis pas particulièrement concentré sur la vérification que l'interface utilisateur ne présente pas toujours exactement 100% (en raison de l'arrondissement). Je laisse cela comme un exercice au lecteur.
Ce schéma de contrôle est un "schéma de contrôle inversé", où plus vous vous rapprochez du point de sélection d'un paramètre, plus l'effet est fort. Bien que cela soit généralement intuitif (l'image ne rend pas justice), vous pouvez également opter pour une implémentation plus simple:
J'ai également créé un maquette pour cela également. Vous remarquerez que la grande différence est que maintenant, au lieu de "se déplacer vers" un contrôle pour augmenter la valeur, vous "augmentez la taille de la zone". Les deux interfaces utilisateur devraient être également intuitives pour les utilisateurs, donc je considérerais cela plus comme une préférence personnelle.
Modifier (# 2)
Il a été remarqué que certaines combinaisons de valeurs ne peuvent pas être sélectionnées. Ce n'était pas mon intention, mais plus pour souligner le fait que si les quatre valeurs sont verrouillées, l'utilisateur doit avoir une association visuelle avec les quatre contrôles et leurs valeurs. Cela signifie que les curseurs provoquent une dissonance cognitive.
J'ai créé une version troisième (et finale) d'une interface utilisateur qui permettrait aux utilisateurs de sélectionner n'importe quelle combinaison de valeurs où le total sera toujours égal à 100%. Cette version souligne toujours l'importance de lier visuellement les quatre contrôles afin que les utilisateurs puissent déterminer comment le déplacement d'un point affectera les autres.
