Méthode correcte pour la gestion des erreurs de curseur
J'utilise une valeur numérique modifiable de conception de matériau (pourcentage) avec curseur horizontal facultatif .
Quelle est la meilleure façon de montrer à un utilisateur que la sélection d'une certaine valeur à l'aide du curseur ou du champ produira une erreur?
Par exemple, une sélection inférieure à 20% sur le curseur produira une erreur. Dans le cas où l'utilisateur a sélectionné au-dessus de 20%, est-il correct d'afficher la couleur de remplissage sur le curseur jusqu'au pourcentage sélectionné? La zone du curseur inférieure à 20% doit-elle être affichée en rouge? Ou la zone ne doit-elle être affichée en rouge que si un pourcentage dans la zone a été sélectionné par l'utilisateur?
Considérez les difficultés des curseurs, lorsqu'une seule entrée avec du texte de conseil peut suffire.
Essayez d'abord une entrée simple avec un texte d'indication et un suffixe% immuable.
Je n'ai pas tout l'arrière-plan de votre cas d'utilisation, mais voici une première tentative basée sur les informations que vous avez fournies (mon texte de conseil pourrait être meilleur). Vous pouvez tester avec les utilisateurs pour voir les erreurs de saisie.
Si vous devez utiliser un curseur
Il y a du travail sur les curseurs du Nielsen Norman Group: Slider Design: Rules of Thumb
Les curseurs fonctionnent mieux lorsque la valeur spécifique n'a pas d'importance pour l'utilisateur, mais une valeur approximative est suffisante.
De votre maquette, vous avez une plage avec entrée à deux décimales. Il sera difficile pour un utilisateur d'obtenir cette précision. À ce stade, ils utiliseront probablement le champ de saisie pour plus de précision.
Vous n'avez également qu'une seule valeur à saisir. Les curseurs sont souvent utilisés spécifiquement pour une valeur min et max, une plage limitée:
Même ici, l'écran de gauche est problématique, car les champs de saisie sont couverts par le doigt de l'utilisateur sur mobile.
À gauche: les curseurs sur BrilliantEarth.com placent les étiquettes décrivant les incréments du curseur sous la piste du curseur, où ils seront masqués par le pouce de l'utilisateur pendant l'interaction. À droite: AirBnB.com affiche correctement les valeurs du curseur au-dessus de l'élément d'interface utilisateur, afin qu'elles restent visibles tout au long de l'utilisation.
Vous pouvez également envisager un élément d'interface utilisateur différent qui permet aux utilisateurs de taper ou même de taper pour spécifier leur choix plutôt que de s'appuyer sur des gestes de pression et de glisser.
Baymard a également un article sur: Sliders. Facilité d'utilisation du formulaire: 5 exigences pour les interfaces de curseur :
Lors du test de 18 sites de commerce électronique majeurs pour notre étude sur le filtrage du commerce électronique, l'une des interfaces de formulaire qui s'est avérée la plus problématique pour les sujets de test était les curseurs.