User choose between % or $

Question

I'm working on an e-commerce application and have come across this scenario multiple times. The user needs to enter an amount, which can be in dollars (any currency) or percent. The crux of the problem is that $ goes on the left, while % goes on the right.

Granted that some currencies put the symbol on the right, but our major user base uses USD, which places on the left.

The options I can think of are:

1. Dropdown on left
2. Dropdown on right
3. Radio buttons on left
4. Radio buttons on right
5. Split radios

See all options here:

None of these seem right to me. Ideas for UI?

Answer 1

I'd be in favour of a separate option. If the user selects fixed markup,

• Price markup: fixed | percentage
• Markup amount: $[_______]

If percentage markup is selected:

• Price markup: fixed | percentage
• Markup percentage: [_______]%

This should make it a bit clearer to the users what is going on, even if it makes the form a bit longer. (Also, be sure that toggling the markup type does not leave the markup value unchanged; either track them separately or clear them on toggle).

EDIT: Something like this might also work, if you have the horisontal space to pull it off:

Fixed markup: $[_______] or Percentage markup: [_______]%

Maybe if a user enters anything on one side, dim and clear the other side: (and clear dimness if the user clears the value).

Fixed markup: $[_______] or Percentage markup: [_____15]%

Fixed markup: $[______5] or Percentage markup: [_______]%

With this approach, you save the click on the radio button, as it is unnecessary (the side with the value gets it).

EDIT2: Some quick mockups here. The single-line ones save the user a click; the two-line one forces the user to make a choice explicitly.

Answer 2

All taken into account, I think amount unit is a more universal pattern than unit amount, albeit £6 is the convention.

Mind you, we say 5 Dollars and not Dollars 5, which made me wonder if your users know the symbol for all currencies (trivia: ₪).

Putting the currency also in words will not only remove the need to decode currency symbols, but it could also reduce task completion time as users can type on the keyboard to quickly select the desired value.

So I'd opted for having the unit on the right with words included (perhaps only when the dropdown opens).

Answer 3

I think the key observation here is that the user needs to enter dollars OR percent.

What happens if a user enters both? Does this cause an error? Will one take priority over the other? This seems like it is something you will actively want to stop the user from doing.

It seems to me that option 4 is the correct one. Mutually exclusive selections are exactly where radio buttons should be used (https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/), and since people read from left to right they should select the context of the number they are entering first.

However, I don't know enough of how your system works; does entering a % give you the equivalent in dollars and vice-versa? If this is the case then displaying both at once seems to be a necessary part of the design and shouldn't be killed off. In this case you should be veering more towards your original. A definitive answer cannot be given without understanding the user's context.

Answer 4

IMHO, more important than the position of a sign is the amount of friction of your current approaches. Think about this: instead of providing an unique option for users,you're providing the following:

• random amounts: users may be able to enter any amount
• confusing signs: users may use percentage or currency
• confusing sign + amount: users may enter an amount thinking it's fixed and they select percentage. For example: $30 is not the same as 30%

Also, I have no idea what kind of service could be where users enter whatever amount they want and on top of that they will be able to choose if it's a fixed amount or a percentage, so we need a lot more information here, but in the case of percentages, they're a percentage of something, it can't be random.

In short, barring more information, here's what I'd suggest:

• Start defining prices. Nobody will ever buy something without knowing the price
• Set the percentages yourself, and offer them as set options (for example: if product costs $50, you can offer $12.5, $25, $37.5, $50 for 25% increments)
• Stay put with just one way: fixed amount or percentage, do not confuse your users
• Don't make users think!

And if for some reason you really, really, REALLY need teh user to choose percentages or fixed amounts, just use a stepper, in which the user decided which method to use beforehand. This way, if the user chooses percentage, you'll show a % sign. Otherwise, you'll show a $ sign. This way, you'll also be able to validate amounts .

Then again, I'd suggest to really think about this and go with only one method. And whatever method you choose, never, never, EVER let it be random

Answer 5

If you plan to do any internationalization later on, please notice that "currency sign is on left side" just won't be true. Ex. 10€.