web-dev-qa-db-fra.com

Comment présenter les valeurs pondérées

J'ai une formule qui sert à calculer certains scores. La formule a certains paramètres (illustrés dans l'image ci-dessous), y compris un paramètre Weight qui est modifié dynamiquement (les autres entrées ne sont pas pertinentes pour le moment). La somme du poids doit être de 100, comme un graphique à secteurs.

Weighted Parameters

Je pense que ce n'est pas assez évident pour l'utilisateur, mais je n'ai pas trouvé de meilleure pratique à suivre dans cette situation. Peut-être que je dois visualiser les valeurs de poids d'une manière ou d'une autre, mais je ne sais pas comment.

Comment cela peut-il être amélioré ou changé pour être plus compréhensible? Connaissez-vous des exemples bien exécutés (ou des contrôles d'interface utilisateur personnalisés) pour ce type de données et de comportement?

13
Zoltan Veres

Souvent, les jeux de rôles ont rencontré un problème similaire. Le joueur doit équilibrer les points de caractère limités entre les différentes compétences.

Ils résolvent parfois cela avec des barres de défilement ou des boutons rotatifs. Mais la vraie magie (jeu de mots voulu) consiste à attribuer plus de points (ou de pourcentage) à un élément pour retirer automatiquement des points des autres éléments. Cela maintient une limite sur le nombre total de points attribués et maintient également les proportions entre ces autres éléments.

L'utilisateur peut comprendre rapidement le comportement du système, car ses actions (augmenter l'importance d'un article) affectent clairement et immédiatement les autres articles (en réduisant leur importance).

C'est une façon agréable et assez intuitive d'équilibrer le poids relatif de plusieurs articles.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

6
Dvir Adler

Du point de vue UX, il n'y a aucune raison pour que la somme soit de 1. Vous pensez peut-être en termes de pourcentages, mais il est trivial de les augmenter ou de les réduire pour rendre l'effet net 100.

Ce qui importe généralement dans la pondération, c'est le poids d'un seul article par rapport au poids total. Vous pouvez facilement calculer cela, il n'est donc pas nécessaire de surcharger un utilisateur avec vos exigences mathématiques.

Disons que le total de "Poids" est de 200 et que vous avez un article avec un "poids" de 50. Le poids relatif est juste:

poids relatif = poids réel * (poids total idéal) / (poids total réel)

Donc, poids relatif alors = 50 * 100/200 = 25

10
JohnGB

Un bon modèle serait également le modèle des panneaux divisés, uniquement verticalement.

Pour vous montrer une maquette rapide:

enter image description here

Les boutons sont là pour développer la perte du voisin et le signe <- | -> est un curseur de souris en vol stationnaire.

Les couleurs et les formes de connexion doivent rendre la relation visuelle.

Vraiment juste une idée, oui, la manière habituelle est le curseur de caractère, mais c'est ce qui m'est venu à l'esprit.

4
Aadaam

Si vous utilisez quelque chose qui résume à 100, utilisez pour cent, car c'est très clair ce que cela signifie. Vous pouvez également utiliser des marques comme 20 of 100, 20/100, mais l'idée d'avoir des barres de défilement est très bonne. Je me souviens des jeux Paradox (Europa Universalis, par exemple), on peut bloquer un curseur en double-cliquant dessus, donc modifier un autre curseur n'a aucun effet sur celui-ci.

1
Voitcus

Si vous voulez que l'utilisateur comprenne le concept de poids, je pense que vous devrez indiquer visuellement le "poids" qu'il peut distribuer. Vous avez besoin d'une sorte de conteneur de "poids" qui est vidé lorsque l'utilisateur le distribue.

C'est la même idée des jeux de rôle que Dvir Adler suggère, mais plus littéralement: l'utilisateur a X points à distribuer dans Y conteneurs.

La mise en œuvre visuelle de ce concept devrait inclure:

  • Représentation visuelle du conteneur initial et des conteneurs de destination
  • Contrôle pour déplacer le poids de l'initiale aux destinations
  • Contrôle pour déplacer le poids des destinations à l'initiale

Cela peut être délicat pour l'utilisateur si vous voulez beaucoup de détails sur la répartition du poids (100 points, par exemple), mais en simplifiant à 10, vous pouvez implémenter cette interface avec des barres d'informations et des boutons [+] et [-] dans chaque conteneur de destination.

1
PaRaP

En lisant la question, je le comprends comme si le "poids" n'était PAS censé être utilisé de manière interactive, mais faisait partie d'un feedback, et qu'il était calculé à tout moment.

Donc, si l'utilisateur change "Accélération excessive" de 1 à deux, le "Poids" devrait être recalculé automatiquement de 20, 20, 20, 20, 20 à 33, 17, 17, 17, 17 (grossièrement arrondi ce qui nous donne 101 %, Je sais - et c'est un autre problème avec les pourcentages).

Le moyen le plus simple de mieux comprendre les utilisateurs est de:

  1. Ne mettez pas le "poids" dans les zones de saisie.
  2. Ajoutez un signe% après chaque valeur de "poids", c'est-à-dire 20%, 20%, 20%, 20%, 20% au lieu de 20, 20, 20, 20, 20.
  3. Si vous voulez une visualisation simple, un graphique à barres pourrait être utile. Il devrait probablement ressembler à la partie droite de l'image d'Aadaams et devrait être de la même hauteur que la table. Vous pouvez également vouloir mettre des boîtes de couleurs correspondantes dans le tableau comme légende (attention au daltonisme, cependant).
1
CB Du Rietz