Dépendances des valeurs d'entrée
J'ai actuellement un curseur comme indiqué dans l'image ci-dessous.
Si l'utilisateur ajuste la valeur Drawdown, la valeur Annuity est également affectée et vice versa. Cela semble simple, cependant, si un utilisateur souhaite augmenter, par exemple, le montant de la rente via le curseur, il a tendance à faire glisser le pointeur vers la rente, ce qui augmente en fait la valeur de Drawdown et réduit la valeur de la rente.
À l'origine, le curseur contenait deux couleurs, ce qui a un peu aidé, mais en raison des contraintes de notre système, les couleurs ne peuvent pas être ajoutées.
Quelqu'un peut-il, s'il vous plaît, vous conseiller sur la manière de procéder?.
Toute suggestion sera grandement appréciée.
Suivez le courant
Il me semble que vos utilisateurs vous disent la solution: faire un bon mouvement augmenter la proportion de rente.
Vous voyez le curseur comme une sorte de graphique à barres empilées horizontales, mais pas vos utilisateurs. Ils le voient comme le contrôle AC/chaleur d'une voiture. Alors ne le combattez pas.
Faire un graphique à barres empilées plus comme un graphique à barres empilées
Si vous devez vraiment que l'espace entre les zones de texte représente des proportions, vous pouvez essayer de le faire plus comme un graphique à barres empilées - tournez le curseur sur le côté. Rendez la piste large. Et oui, utilisez les couleurs. Colorez les étiquettes et les valeurs de la zone de texte pour qu'elles correspondent aux couleurs de la "barre" pour créer l'association. Placez les étiquettes à côté des barres, pas aux extrémités du curseur (haut et bas pour une verticale), de sorte qu'il soit associé aux barres plus qu'à la direction du mouvement. Les crochets dynamiques peuvent aider.
De toute évidence, cela devrait être un contrôle personnalisé (par exemple, dans Flash), qui ne vaut peut-être pas les ressources de développement. Je suis sceptique, vous aurez suffisamment de succès en utilisant un curseur standard, car tout le problème est que vous créez un curseur qui fonctionne en face de ce que les utilisateurs attendent d'un curseur (où glisser vers une étiquette à une extrémité en obtient "plus") ). Pour éviter ce problème, vous devez faire du contrôle ne pas ressembler à un curseur standard.
Seul un test d'utilisabilité va vous dire si aller verticalement, plus épais, déplacer les étiquettes et les zones de texte, faire correspondre les couleurs et ajouter des crochets dynamiques va amener les utilisateurs à penser "c'est une barre de pile" plutôt que "c'est comme un Contrôle de la climatisation/du chauffage ", mais il semble que vous fassiez des tests d'utilisabilité pour que vous puissiez le découvrir pour vos utilisateurs.
FWIW, j'ai essayé le dessin ci-dessous sur cinq personnes dans mon bureau ce matin (y compris une petite itération de refonte), demandant "Que feriez-vous si vous vouliez augmenter la rente à 75%?" Un an et demi a déclaré qu'il tirerait le curseur vers le haut. Trois et demi ont dit qu'ils abaisseraient le curseur. ("La moitié" parce qu'un utilisateur a changé d'avis de "haut" à "bas" après y avoir regardé de plus près). Je dirais qu'il a encore besoin de travail, mais c'est peut-être mieux que ce que vous obteniez avec un curseur ordinaire, donc, encore une fois, si vous sentez que vous doit avoir l'espace entre les zones de texte représente des proportions , alors cette approche peut être un bon point de départ.
Le conseil le plus général est que si vous allez utiliser une métaphore ou une association, comme un "graphique à barres empilées", alors plus vos graphiques invoqueront cette métaphore/association, mieux cela fonctionnera.
Pas de curseur
Peut-être que vous ne voulez pas du tout de curseur. Les curseurs sont préférables lorsque l'utilisateur effectue un ajustement au point où il "semble bon" (ou sonne bien, dans le cas d'une présentation audio), plutôt que d'essayer d'atteindre une valeur spécifique connue à l'avance. Avant, pendant ou après avoir effectué le réglage, les curseurs sont parfaits pour donner aux utilisateurs une impression générale en un coup d'œil de leur position sur une échelle.
Cependant, si les utilisateurs arrivent presque toujours à la page avec une valeur spécifique à l'esprit, vous pouvez être mieux avec simplement deux zones de texte. Les curseurs sont une sorte de douleur pour atteindre une valeur précise (par exemple, exactement 33%), et ne sont pas si bons pour vérifier une valeur précise (33% contre 30%). L'utilisation de zones de texte permet également d'économiser des biens immobiliers. La recherche d'utilisateurs vous dira quel est l'accord.
Deux zones de texte modifiables peuvent être coordonnées de sorte que les modifications apportées à l'une mettent à jour l'autre en temps réel pour maintenir les pourcentages au total à 100. Voir, par exemple, comment Google coordonne les zones de texte pour son convertisseur d'unité (Google, par exemple, " mètres en pieds "pour le voir).
Rassemblez les zones de texte dans un cadre intitulé "Drawdown vs. Annuity" afin que les utilisateurs soient plus susceptibles de les voir comme associés. C'est à peu près tout ce que Google fait et peut être tout ce qui est nécessaire. Si cela crée de la confusion, il peut être utile d'avoir du texte statique en lecture seule sous les deux zones de texte indiquant qu'elles totalisent (toujours) 100%. Si vous êtes prêt à créer un contrôle personnalisé, vous pouvez essayer d'ajouter un petit graphique non interactif entre les zones de texte affichant les proportions relatives. J'irais avec un graphique à secteurs plutôt qu'avec une barre empilée pour éviter toute confusion avec un curseur.
Bien sûr, vous pouvez avoir à la fois le curseur et les zones de texte modifiables si certains de vos utilisateurs passent par des regards tandis que d'autres ont une valeur en tête à l'avance. En fait, j'ai supposé que c'était ce que vous faisiez.
Marmonne à soi
Pourquoi ne puis-je jamais donner une réponse simple et courte? J'aurais peut-être dû arrêter avec la première phrase.