Comment utiliser de nombreux curseurs avec de longues descriptions textuelles
J'ai le problème suivant:
Sur mon site Web, il y a une page de paramètres personnels, où l'utilisateur est en mesure de définir des niveaux de santé pour ses parties du corps spécifiques.
Pour mélanger un peu, le niveau de santé de certaines parties du corps peut être défini sous différents aspects (par exemple, l'épaule).
Les niveaux de santé ont une échelle à 5 niveaux, que vous pouvez voir dans la légende de la partie Concept2 de la maquette jointe.
Je pense à utiliser des curseurs, car c'est le meilleur moyen de définir ces nombreux paramètres.
Je ne peux pas intégrer d'image dans ce post, mais voici mes concepts:
Comme vous pouvez le voir, les curseurs verticaux côte à côte ne correspondent même pas à la page, car nous avons 13 parties du corps, et avec le concept n ° 2, mon problème est qu'il est trop de monde et difficile à visualiser.
La largeur maximale des disponibles est de 650 ou 750 pixels maximum.
Je veux une belle approche propre pour mes utilisateurs: /
J'utiliserais le deuxième concept, mais avec quelques changements importants.
Premièrement, ce n'est pas un curseur, ce sont des choix distincts; les boutons radio seraient le contrôle Windows le plus approprié pour cette sélection. L'exemple similaire le plus approprié est une enquête dans laquelle vous évaluez votre service client.
Deuxièmement, comme il s'agit d'une échelle continue du pire au meilleur, je modifierais vos icônes pour qu'elles soient plus continues. Ils sont actuellement très différents les uns des autres et n'offrent aucune indication visuelle qu'ils sont disposés selon une échelle ascendante de santé articulaire.
Troisièmement, je mettrais les étiquettes conjointes à gauche, déplacerais la plage d'icônes uniquement vers le haut (en-têtes de colonne) et mettrais dynamiquement l'icône sélectionnée à droite lorsqu'un choix est fait. Cela condense la liste pour une navigation plus facile, ainsi qu'une liste en bas à droite qui peut montrer la santé globale des articulations en un coup d'œil. Si vous organisez les articulations de haut en bas anatomiquement, vous obtenez encore plus de valeur de l'arrangement.
Exemple:
Je pense que le concept n ° 2 est génial. Il est utile d'associer des images à des échelles de type "Comment vous sentez-vous" pour rendre les valeurs réelles un peu moins cliniques et un peu plus mémorables. Si vous avez retiré les images sous chaque curseur et que vous les aviez juste en haut et en bas de la liste (toutes sur une rangée), vous pouvez afficher la valeur d'image sélectionnée de cette partie spécifique à la fin du curseur.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Sur la base de la proposition de tout le monde (pour laquelle je suis vraiment reconnaissant), j'ai trouvé le concept actuel n ° 3, je serais vraiment heureux si vous le commentiez.
Le raisonnement derrière ce concept:
Les flèches fonctionnent comme un haut-bas numérique, mais les descriptions de niveau choisies sont affichées.
Raisons d'utiliser ceci plutôt qu'un tableau avec des en-têtes et des boutons radio dans les cellules ou les curseurs s'étendant sur les colonnes de niveau:
Vous voulez afficher la description du niveau choisi dans chaque ligne, car il y a beaucoup de parties du corps, et si l'utilisateur défile vers le bas, il/elle ne verra pas les en-têtes (je sais que certains d'entre vous ont proposé d'en-tête sous le tableau, mais ...).
Vous voulez afficher la description du niveau choisi, pas seulement l'icône, car il est impossible de dire la signification entière dans une icône. De plus, je ne veux pas essayer d'éduquer les utilisateurs sur la signification des icônes.
Il y a 13 parties du corps et 5 niveaux. Cela signifierait 65 boutons radio. Il ne serait probablement pas beau et facilement visualisable. Je sais que ce n'est qu'une pression sur un bouton pour sélectionner le bouton radio approprié, et dans ce concept, il peut y avoir 4 pressions sur le bouton pour sélectionner la description de niveau appropriée, mais je m'attends à ce que la plupart des utilisateurs soient à près de 100% en bonne santé pour chaque partie du corps , donc seulement un ou deux bodyparts devront être réglés sur un niveau de santé inférieur.
Les curseurs seraient OK, mais je veux quand même montrer la description du niveau choisi pour chaque partie du corps, et je ne suis pas sûr que la description s'intégrerait bien dans une 7e colonne. Je préfère utiliser des polices plus grandes et des colonnes plus larges.
L'arrière-plan du niveau de santé sélectionné serait coloré et aurait une plage allant du rouge au vert.
Peut-être qu'il est préférable d'utiliser des combobox/dropdowns au lieu de 'numericupdowns'? Ensuite, il n'y a pas de coloration, mais peut-être plus utilisable?
Vous n'avez pas besoin de curseurs pour cela. Vous ne voulez pas non plus de curseurs, car ils induisent l'utilisateur en erreur en suggérant qu'il s'agit d'une échelle continue, plutôt que de 5 valeurs distinctes.
Ce que vous avez ici est un tableau. Vous avez un léger problème avec la largeur car vous avez de nombreux paramètres, mais heureusement, vous n'avez que 5 valeurs possibles, vous pouvez donc inverser le tableau.
Vous devez faire quelque chose à propos de ces longs titres de colonnes (reformuler ou diviser en deux lignes), mais sinon, cela devrait s'en occuper.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
