Comment montrez-vous un curseur verrouillé?
J'ai une application avec un curseur, mais je dois pouvoir verrouiller le curseur et faire clairement comprendre à l'utilisateur qu'il est verrouillé - le désactiver simplement n'est pas une option. Par verrouillé, je veux dire que vous ne pouvez pas le changer avant d'avoir effectué une autre action. Cette action peut être basée sur un paramètre ou un type de compte, mais ne fait pas vraiment partie de la question.
Une maquette initiale de l'option la plus probable pour le moment:
Visuellement, quelle est la meilleure façon de montrer qu'un curseur est verrouillé? Les exemples ou maquettes existants seraient formidables.
Edit 1: Cela doit fonctionner à la fois sur PC et mobile, donc rien de ce qui repose sur le survol ou un curseur n'est possible.
Edit 2: L'idée d'un curseur verrouillé est plus en termes de curseur étant une fonctionnalité verrouillée à laquelle vous ne pouvez accéder qu'en faisant quelque chose. Dans ce cas, en étant membre premium. Il s'agit donc en grande partie d'une contrainte marketing.
Nous ne pouvons pas mettre les curseurs verrouillés sur une page différente, car il y a un curseur principal qui doit être affiché en même temps que les autres (potentiellement) verrouillés. Donc, sauf si nous dupliquons le curseur principal, nous avons un problème.
Il y aura un texte expliquant pourquoi ces curseurs sont verrouillés, etc., mais cette question concerne spécifiquement la meilleure façon d'indiquer visuellement qu'un curseur est verrouillé plutôt que désactivé.
Placez une boîte semi-transparente sur le curseur, avec une étiquette diagonale "Fonctionnalité Premium" en travers.
Cette conception peut également être appliquée à un autre contrôle.
Je pense que le concept d'un curseur verrouillé qui n'est pas désactivé n'est pas quelque chose que vous devez mettre en pratique, et vous ne devriez tout simplement pas montrer le curseur en premier lie.
L'indice est que vous demandez Visuellement, quelle est la meilleure façon de montrer qu'un curseur est verrouillé? Ce n'est pas votre objectif ultime derrière cela - vous avez un problème plus important pour lequel ce curseur verrouillé a été proposé, et maintenant vous avez deux problèmes.
Au lieu de cela, prenez du recul et regardez la vue d'ensemble. Montrez ce que vous devez montrer et ajoutez par tous les moyens des messages supplémentaires pour indiquer que l'utilisateur pourrait avoir plus de fonctionnalités si certaines conditions sont remplies, et faites-lui savoir ce que cette fonctionnalité pourrait être, mais montrer les commandes verrouillées elles-mêmes n'est pas nécessaire.
Trouvez un autre moyen de informez l'utilisateur du message réel que vous souhaitez transmettre, et faites-le plus directement que ce rond-point manière de verrouiller la fonctionnalité qui soulève simplement des questions dans l'esprit de l'utilisateur sur le curseur, pas sur ce que vous voulez réellement qu'il pense, c'est-à-dire comment obtenir plus de fonctionnalités.
Si le curseur est verrouillé, ne l'affichez pas du tout - affichez l'élément uniquement si l'utilisateur peut interagir avec lui.
Au lieu de cela, affichez simplement une barre de progression avec la valeur:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Étant donné que la valeur n'est pas modifiable, votre exigence est d'informer l'utilisateur de la valeur de l'objet. L'objet lui-même n'est pas le curseur, le curseur n'est que le mécanisme par lequel vous interagissez avec l'objet. Si l'objet ne peut pas interagir avec, alors le curseur n'est pas du tout approprié. Utilisez plutôt quelque chose pour communiquer visuellement l'état de l'objet (comme une barre de progression).
Modifier
Si vous avez un contrôle qui ne peut pas être modifié, la façon dont vous le communiquez à l'utilisateur est de le désactiver. Un utilisateur sait ce qu'est un contrôle désactivé et ce qu'il signifie.
Par exemple:
Cliquer sur le verrou active les commandes désactivées et l'utilisateur peut modifier leurs valeurs.
Cela ressemble au même cas d'utilisation que celui décrit dans votre question.
Il semble que votre question soit "comment puis-je rendre un contrôle désactivé sans le désactiver" qui n'a pas une bonne réponse à mon avis.
Si vous avez un contrôle qui n'est pas désactivé, l'utilisateur s'attendra à ce qu'il se comporte comme s'il était activé. Tout ce que vous ajoutez (icônes, messages) va A) être différent de toute autre interface qu'ils ont utilisée parce que vous ne respectez pas la convention standard et B) les icônes/messages que vous ajoutez que vous ajoutez uniquement pour annuler l'opportunité que vous avez créée en premier lieu en utilisant le contrôle.
Si vous ne pouvez pas désactiver le contrôle pour une raison quelconque, vous ne devez pas du tout utiliser le contrôle. Au lieu de cela, montrez à l'utilisateur la valeur du paramètre en utilisant autre chose qu'un contrôle de curseur. Il n'est pas nécessaire que ce soit une barre de progression, c'était un exemple.
Mon intuition dit que montrer l'icône du cadenas sur la poignée du curseur est une mauvaise idée. Ceci est ambivalent et pourrait également essayer de communiquer, que le curseur est verrouillé dans cette valeur particulière (par opposition au mécanisme coulissant étant verrouillé).
Si vous souhaitez afficher une icône de cadenas, faites-le à gauche ou à droite du curseur.
La norme commune pour les entrées désactivées de toute sorte est de les griser avec un gris à faible contraste. De plus, vous pouvez:
- afficher une info-bulle en survol/toucher
- afficher un texte d'information à côté/sous le curseur désactivé
- désactivé la forme de la souris en changeant son curseur lors du survol (bureau uniquement)
Utilisez le widget "curseur" par défaut sur ce système (ou quelque chose d'aussi similaire que possible - s'il s'agit d'un site Web, choisissez simplement une conception de curseur bien connue et imitez son comportement). Ces widgets par défaut ont des états "verrouillés" (parfois appelés en lecture seule, parfois appelés "désactivés"), qui communiquent clairement cet état (par exemple, le curseur est grisé).
Ce comportement est bien connu de l'utilisateur, et la plupart des utilisateurs associent un curseur grisé à "J'ai besoin de changer quelque chose pour activer ce curseur". Pour cette raison, vous devez simplement utiliser ce comportement au lieu d'essayer de réinventer la roue d'une manière non standard. Même si vous avez un curseur personnalisé, le griser clairement (par exemple, définir un jeu de couleurs désaturées et une opacité de 50%) sera bien compris par presque tous les utilisateurs - certainement mieux que toute autre apparence "verrouillée" personnalisée non par défaut.
Je suppose qu'avec "désactiver simplement ce n'est pas une option", vous voulez dire "simplement le rendre non mobile sans l'indiquer", ce qui va de soi. Si vous voulez dire "utiliser le comportement/l'apparence du curseur non mobile/désactivé par défaut n'est pas une option", j'aimerais entendre la très bonne raison qui est nécessaire pour s'écarter des normes d'interface utilisateur bien connues.
Garder l'option de verrouillage (ed) sur le bouton coulissant est une bonne option. En plus de cela, la diminution de l'opacité du curseur et du bouton de la diapositive serait également utile. (Ne diminuez pas l'opacité de l'icône de verrouillage et ###%)
Si l'application n'est pas tactile et si l'utilisateur utilise la souris, l'image du curseur peut être changée en signe bloqué en survolant la zone du curseur.
Montrez-le simplement sous la forme d'une ligne verticale ou d'une barre "I" plutôt que d'une poignée. Il est clair qu'une ligne indique toujours la position, mais elle est indiscutable.
Pour renforcer l'idée, vous pouvez la rendre grisée ou insérée comme la plupart des entrées de formulaire désactivées.
Vous pouvez également réduire la piste du curseur pour donner l'impression qu'elle est verrouillée en place. Cela vous permettra de garder une poignée de curseur de plus petite taille (car il n'aura pas besoin d'avoir une icône de verrouillage). Si le curseur de verrouillage est à côté d'autres curseurs actifs, la piste verrouillée doit être évidente.
Votre conception actuelle me fait penser que l'icône de cadenas est destinée à montrer le but du curseur. Par exemple, le curseur actuel peut signifier que quelque chose est verrouillé à 70% ou sécurisé à 70%. Ceci est évidemment en contraste avec l'objectif prévu de montrer que la position du curseur est verrouillée.
Pour remédier à ce problème, ma suggestion est de rendre le cadenas plus réaliste . Par exemple, si vous vouliez créer un curseur physique qui se verrouille, la piste du curseur et le bouton du curseur auraient probablement des trous afin qu'une broche puisse verrouiller le bouton sur l'une des positions de la piste. Ainsi, la version déverrouillée ressemblerait à ceci:
Curseur déverrouillé:
Ensuite, lorsque vous souhaitez verrouiller le curseur à un certain point, vous feriez glisser une épingle à travers le trou et le bouton appropriés, puis verrouillez la broche en place avec un cadenas. Ainsi, la version verrouillée ressemblerait à ceci:
Curseur verrouillé:
Sidenote: Bien que Roger soulève un très bon point , je pense qu'il existe encore des utilisations valables pour afficher un curseur verrouillable. Par exemple, si vous avez entré un grand nombre de données à l'aide de curseurs dont certains sont verrouillés et d'autres déverrouillés, il serait visuellement cohérent d'afficher les valeurs verrouillées de manière similaire aux valeurs déverrouillées.