Quels indices puis-je utiliser pour éloigner les utilisateurs de la définition de valeurs extrêmes sur un curseur?
J'ai une application photo mobile qui permet aux utilisateurs d'ajuster des choses comme la luminosité, le contraste et la saturation via des curseurs. La valeur par défaut pour tous les curseurs est la position centrale entre deux extrêmes. Alors que les valeurs aux extrémités de l'échelle sont valides, et parfois appropriées à ce que l'utilisateur veut faire, dans la plupart des cas, le démarrage de l'une de ces choses au maximum ou au minimum produit des résultats moches. C'est un problème parce que lors des tests d'interface utilisateur, j'ai constaté que certains utilisateurs, dans la mesure où ils utilisent ces curseurs, semblent seulement prendre la peine d'essayer les valeurs par défaut (centre), min et max, et ne sont alors pas satisfaits des résultats.
Je veux les encourager à choisir principalement des valeurs dans la plage de mi-chemin entre le min et le centre à mi-chemin entre le centre et le max, tout en permettant l'utilisation des min et max en cas de besoin. Je préfère ne pas afficher de texte pour expliquer cela en raison de l'espace d'écran limité et des problèmes de localisation. Je préfère également ne pas esquiver le problème en introduisant une réponse non linéaire étrange à la position du curseur ou en faisant de la magie de traitement d'image automatique sous le capot pour toujours la rendre belle, quelles que soient les entrées, car cela rendra l'interface moins intuitif et prévisible et certains utilisateurs pourraient vouloir le comportement extrême.
Comment puis-je afficher un curseur qui transmet visuellement la signification de "ajuster dans une plage, mais qui reste principalement au milieu de la plage"?
Modifier: capture d'écran de l'interface utilisateur actuelle sur le petit écran.
Approche 1: - Les valeurs extrêmement basses et élevées peuvent être découragées par la couleur faisant le curseur en utilisant la coloration dégradée, comme indiqué ci-dessous: -
Couleur verte au centre pour indiquer la valeur autorisée et sûre, les extrémités sont colorées en rouge pour indiquer les valeurs autorisées mais non sûres.
les couleurs doivent passer linéairement du vert au rouge, car il n'y a pas de démarcation claire entre les valeurs sûres et les valeurs extrêmes.
Approche 2: - Une autre façon peut être de rendre le curseur plus large au centre et plus étroit aux extrémités.
Les deux approches indiquent visuellement qu'il est sûr de définir une valeur autre que les extrêmes.
Aucun indicateur visuel ne devrait être nécessaire, car il s'agit d'un modèle omniprésent. Presque tous les logiciels de retouche d'image ont des contrôles comme celui-ci, et généralement les résultats semblent mauvais aux extrêmes. Ce n'est vraiment pas un problème tant que l'utilisateur peut voir instantanément l'effet du déplacement du curseur et le corriger s'il va trop loin. Étant donné que vous avez indiqué que vous disposez d'un aperçu en direct de l'image, je ne vois aucun problème avec cet aspect de la conception.
Je soupçonne que le problème est autre chose. Quelques possibilités:
- Les tests ne sont pas similaires à une utilisation réelle (comme suggéré par Ades dans un commentaire). Les testeurs peuvent ne pas vraiment se soucier d'optimiser l'image et déplacent simplement arbitrairement les commandes.
- n vrai problème avec la qualité de l'effet pourrait aussi être la raison pour laquelle les testeurs ne l'aiment pas.
- n autre défaut de conception de l'interface utilisateur empêche les utilisateurs de comprendre comment utiliser correctement la fonctionnalité. Par exemple, si votre aperçu était trop lent pour apparaître, les utilisateurs pourraient apporter une modification avant d'avoir vu l'effet, puis être déçus. Ou si le curseur n'avait pas une apparence typique, les utilisateurs pourraient ne pas comprendre qu'il s'agissait d'un curseur.
Mise à jour: une autre possibilité
- La fonctionnalité, pas l'interface, peut être la chose que les utilisateurs ne comprennent pas. En tant que créateur de logiciel d'édition d'images, vous pouvez supposer que le réglage de choses comme la luminosité et la saturation est universellement compris. Mais ces fonctionnalités peuvent être plus avancées que vous ne le pensez. Notez que la plupart des logiciels d’image destinés aux consommateurs ont des fonctionnalités telles que "l’amélioration automatique". C'est une bonne preuve qu'une partie importante du marché ne sait probablement pas ce que signifie la "saturation" ou quoi en faire.
Faites coller votre curseur (ignorez toute saisie tactile) à environ 70% de la plage, ce qui fera croire à l'utilisateur qu'il a atteint 100% du curseur pendant quelques secondes lorsqu'il regarde son aperçu de l'image.
S'ils veulent toujours le régler à 100%, ils devront relâcher et "saisir" (toucher et maintenir) ce curseur à nouveau pour le régler à la position souhaitée.
Voilà comment Apple le fait avec leur élément de contrôle du volume par défaut (au moins en Europe), quand il est réglé à un niveau bas, avec la première capture, vous ne pouvez pas le régler à plus de ~ 60 % de la valeur (il reste bloqué à 60% et clignote en jaune). Si vous voulez aller plus haut, vous devez le déplacer à nouveau.
Un motif que j'ai utilisé précédemment combine un spinbox et un curseur.
Le curseur a une plage réduite qui est à la fois facilement utilisable et utile et qui le rend également plus facile à utiliser car il produit moins de valeurs.
La partie spinbox a cependant une gamme plus large dans le cas où c'est ce que l'utilisateur veut vraiment faire. Les boutons fléchés parcourent l'ensemble des valeurs et la partie modifiable du spinbox permet également d'accéder à une plage de valeurs plus large.
Tant que la plage réduite englobe tout ce qui est généralement nécessaire, la plage extrême acceptée par le spinbox modifiable s'adresse à l'utilisateur expert qui a une valeur spécifique en tête.
Cela correspond également à la façon dont les curseurs sont généralement utilisés:
- Les curseurs sont des commandes "floues" gênantes, utiles pour explorer une plage pour voir l'effet.
- Les Spinbox permettent facilement des incréments contrôlés et le réglage de valeurs spécifiques.
J'ai trouvé que c'était un excellent moyen de garder les utilisateurs hors de problèmes tout en n'empêchant pas les gens de se plonger dans des valeurs moins utilisées s'ils en avaient besoin. Il est également particulièrement utile lorsque la plage extrême est considérablement plus large que la plage généralement utile.
Notez qu'il existe certains problèmes de découverte à résoudre, mais il existe un signal visuel dans la mesure où les boutons fléchés de la boîte de sélection numérique sont désactivés lorsque la valeur est à une limite inférieure ou supérieure. Dans ce cas, le fait de déplacer le curseur à l'extrême n'entraînerait pas la désactivation des flèches, indiquant ainsi qu'il existe encore un espace de valeur utilisable au-dessus ou en dessous.
En tenant compte du fait que vous n'avez pas besoin de tous les curseurs à l'écran en même temps, voici juste une maquette (à l'exclusion de tout autre menu/contrôle ok/annuler, etc.) de ce à quoi cela pourrait ressembler sur un appareil mobile - tout d'abord en explorant le plus plage de valeurs utiles (par exemple -50 à +50) avec le curseur puis la plage de valeurs la plus extrême (à +/- 100) avec le spinbox.
J'ai été dans la même position plusieurs fois.
J'aime vraiment éviter d'utiliser des couleurs (comme la réponse de Chetan).
Les couleurs peuvent créer des problèmes avec les personnes daltoniennes et la visibilité en fonction de la couleur de l'arrière-plan.
Je fournis au curseur de petites marques verticales (7-9 ou plus sur la longueur de la barre du curseur) pour indiquer qu'il y a plus d'étapes que simplement min/middle/max.
Ressemble à un curseur de contrôle du volume physique.
En réalité, le curseur a un dégradé régulier, mais les marques indiquent à l'utilisateur qu'il y a plus de possibilités que les positions extrêmes.
Presque tout le monde semble être capable de saisir ce concept à première vue.
Cela prend très peu d'espace à l'écran, les marques peuvent être plus courtes que la largeur du curseur. Vous pouvez grandement simplifier la conception pour l'adapter à un style d'interface utilisateur minimaliste et ne pas perdre le repère visuel pour l'utilisateur.
J'ai 2 suggestions:
Avoir des préréglages dans une liste déroulante comme "faible", "moyen", "élevé" et "manuel". Lorsque l'utilisateur choisit l'un de ces paramètres, l'utilisateur peut voir le curseur se déplacer, mais il ne peut pas le faire glisser (car il est grisé). Cependant, une fois que l'utilisateur sélectionne "manuel", le curseur devient disponible pour se déplacer.
Ayez une étiquette% à côté du curseur. La position centrale indiquera 0%. L'extrême droite lira quelque chose comme 200%, et l'extrême gauche lira -200%. Les utilisateurs comprendront peut-être qu'ils doivent alors le maintenir entre 100% et -100% et ne pas aller jusqu'au bout.
Le problème est qu'il existe deux cas différents. Certains utilisateurs, comme moi, ont tendance à préférer choisir parmi un petit ensemble de préréglages tandis que d'autres préfèrent le curseur. Vous devriez peut-être proposer deux modes différents pour traiter ces deux cas. Vous conservez le mode curseur pour ceux qui le souhaitent et vous ajoutez un mode discret pour ceux qui le préfèrent. J'imagine que le mode discret pourrait ressembler un peu à la sélection de filtres sur Instagram, mais avec moins de choix.
Qu'en est-il de donner une sorte d'avertissement visuel lorsque le curseur est réglé sur une valeur en dehors de la plage "normale".
Par exemple, il pourrait afficher une marque d'explication (!) Qui pourrait être colorée de manière appropriée, pourrait être plus lumineuse que le curseur, pourrait rebondir brièvement lorsqu'une valeur extrême est sélectionnée ou (une fois que vous êtes vraiment fatigué d'essayer d'accommoder les quelques utilisateurs possibles qui ne sera probablement jamais en mesure de l'utiliser correctement mais se plaindra toujours qu'il s'agit d'un problème avec votre application) un symbole de mise en garde GRAND ROUGE (mais ne clignotant pas si vite qu'il pourrait déclencher une éventuelle crise).
J'aime utiliser une lueur douce et pulsant lentement d'une teinte différente de celle du curseur normalement indiqué pour indiquer un paramètre discutable. De plus, plusieurs des idées suggérées pourraient être combinées d'une manière ou d'une autre si cela aidait dans l'ensemble.
Ce n'est pas exactement un curseur, mais on pourrait peut-être trouver cela pertinent de toute façon. Voici ce que Apple fait dans iOS 8 pour l'indicateur de volume:
- Le titre passe de "Casque" à "Volume élevé"
- Les points indicateurs de valeur passent du blanc au jaune et au rouge.
Dans l'application Appareil photo Nokia de mon Lumia 1020, les éléments prennent un soulignement rouge lorsque les curseurs en demi-cercle sont poussés dans des plages déconseillées.
Cela me semble un bon design car il utilise une logique en arrière-plan pour déterminer quels paramètres présentent un problème dans quelle combinaison de plages et me permet de les ajuster jusqu'à ce que les soulignements rouges disparaissent ou simplement de prendre la (mauvaise) photo sans trop d'intrusion.
Utilisez un curseur circulaire (rotatif) sans point final. Ayez la carte 0-180 degrés à 0-100% et la carte 180-360 à 100-0%.
Un curseur circulaire n'a pas de positions minimum ou maximum.