L'utilisateur choisit entre% ou $
Je travaille sur une application de commerce électronique et j'ai rencontré ce scénario plusieurs fois. L'utilisateur doit saisir un montant, qui peut être en dollars (n'importe quelle devise) ou en pourcentage. Le nœud du problème est que $ va à gauche, tandis que% va à droite.
Certes, certaines devises placent le symbole à droite, mais notre principale base d'utilisateurs utilise l'USD, qui se place à gauche.
Les options auxquelles je peux penser sont:
- Liste déroulante à gauche
- Liste déroulante à droite
- Boutons radio à gauche
- Boutons radio à droite
- Radios divisées
Voir toutes les options ici : 
Rien de tout cela ne me semble juste. Des idées pour l'interface utilisateur?
Je serais en faveur d'une option distincte. Si l'utilisateur sélectionne un balisage fixe,
- Marge de prix: fixe | pourcentage
- Montant de majoration:
Si le pourcentage de majoration est sélectionné:
- Marge de prix: fixe | pourcentage
- Pourcentage de majoration: %
Cela devrait permettre aux utilisateurs de mieux comprendre ce qui se passe, même si cela rend le formulaire un peu plus long. (Assurez-vous également que le basculement du type de balisage ne laisse pas la valeur de balisage inchangée; suivez-les séparément ou effacez-les en bascule).
EDIT: Quelque chose comme ça pourrait également fonctionner, si vous avez l'espace horizontal pour le retirer:
Majoration fixe: $ ou majoration en pourcentage: %
Peut-être que si un utilisateur entre quoi que ce soit d'un côté, atténuez et effacez l'autre côté: (et effacez la gradation si l'utilisateur efface la valeur).
Balisage fixe: $ ou Balisage en pourcentage: %
Majoration fixe: $ ou majoration en pourcentage: %
Avec cette approche, vous enregistrez le clic sur le bouton radio, car il est inutile (le côté avec la valeur l'obtient).
EDIT2: Quelques maquettes rapides ici . Les lignes simples économisent un clic à l'utilisateur; celui de deux lignes oblige l'utilisateur à faire un choix explicite.
Tout pris en compte, je pense que nité de montant est un modèle plus universel que montant d'unité, bien que £ 6 soit la convention.
Attention, nous disons 5 Dollars et non Dollars 5, ce qui m'a fait me demander si vos utilisateurs connaissent le symbole de toutes les devises (trivia: ₪).
Mettre la devise également en mots supprimera non seulement la nécessité de décoder les symboles monétaires, mais cela pourrait également réduire le temps d'exécution des tâches car les utilisateurs peuvent taper sur le clavier pour sélectionner rapidement la valeur souhaitée.
J'avais donc opté pour avoir l'unité à droite avec des mots inclus (peut-être seulement lorsque la liste déroulante s'ouvre).
Je pense que l'observation clé ici est que l'utilisateur doit entrer des dollars OR pour cent.
Que se passe-t-il si un utilisateur entre les deux? Est-ce que cela provoque une erreur? Est-ce que l'un aura priorité sur l'autre? Cela semble être quelque chose que vous voudrez activement empêcher l'utilisateur de faire.
Il me semble que l'option 4 est la bonne. Les sélections mutuellement exclusives sont exactement l'endroit où les boutons radio doivent être utilisés ( https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/ ), et puisque les gens lisent de gauche à droite, ils doit sélectionner le contexte du numéro saisi en premier.
Cependant, je ne sais pas assez comment fonctionne votre système; la saisie d'un% vous donne-t-elle l'équivalent en dollars et vice versa? Si tel est le cas, l'affichage des deux à la fois semble être une partie nécessaire de la conception et ne doit pas être supprimé. Dans ce cas, vous devriez virer davantage vers votre original. Une réponse définitive ne peut être donnée sans comprendre le contexte de l'utilisateur.
À mon humble avis, plus important que la position d'un signe est la quantité de friction de vos approches actuelles. Pensez-y: au lieu de fournir une option unique aux utilisateurs, vous fournissez les éléments suivants:
- montants aléatoires: les utilisateurs peuvent saisir n'importe quel montant
- signes déroutants: les utilisateurs peuvent utiliser un pourcentage ou une devise
- signe + montant déroutant: les utilisateurs peuvent saisir un montant en pensant qu'il est fixe et ils sélectionnent un pourcentage. Par exemple: 30 $ n'est pas la même chose que 30%
De plus, je ne sais pas quel type de service pourrait être où les utilisateurs entrent le montant qu'ils veulent et en plus de cela, ils pourront choisir s'il s'agit d'un montant fixe ou d'un pourcentage, nous avons donc besoin de beaucoup plus d'informations ici, mais dans le cas des pourcentages, ils sont un pourcentage de quelque chose, ça ne peut pas être aléatoire.
En bref, sauf information supplémentaire, voici ce que je suggère:
- Commencez à définir les prix. Personne n'achètera jamais quelque chose sans connaître le prix
- Définissez vous-même les pourcentages et offrez-les en tant qu'options définies (par exemple: si le produit coûte 50 $, vous pouvez proposer
$12.5, $25, $37.5, $50par incréments de 25%) - Restez sur place avec un seul moyen: montant ou pourcentage fixe, ne confondez pas vos utilisateurs
- Ne faites pas réfléchir les utilisateurs!
Et si, pour une raison quelconque, vous avez vraiment, vraiment, vraiment besoin que l'utilisateur choisisse des pourcentages ou des montants fixes, utilisez simplement un stepper , dans lequel l'utilisateur a décidé à l'avance quelle méthode utiliser. De cette façon, si l'utilisateur choisit un pourcentage, vous afficherez un % sign. Sinon, vous afficherez un $ sign. De cette façon, vous pourrez également valider des montants.
Là encore, je suggère de vraiment réfléchir à cela et d'aller avec une seule méthode. Et quelle que soit la méthode que vous choisissez, jamais, jamais, que ce soit aléatoire
Si vous prévoyez de faire une internationalisation plus tard, veuillez noter que "le symbole de devise est sur le côté gauche" ne sera tout simplement pas vrai. Ex. 10 €.