6

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: enter image description here

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

  • 1
    I wonder what kind of use case requires mixing up percentages and absolute values, and how much thought you've given into the consequences of users mixing each symbol up and sending £50 instead of 50% of some £10 'value'. Also relevant: percents of what? – Steve Dodier-Lazaro Nov 2 '16 at 1:55
  • This is for marking up prices in the backend of an e-commerce management application. So, a price markup can be $5 or 5%, for example. – Joe Z Nov 2 '16 at 1:57
  • Right! I would suggest you write a "preview" of the resulting price on the side of the input field, to provide continuous feedback and help users spot gross unintended mistakes when using the wrong sign. – Steve Dodier-Lazaro Nov 2 '16 at 10:42
9

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.

  • I like this from a UX perspective. What are your thoughts about putting both on one line? – Joe Z Nov 2 '16 at 2:09
  • 1
    How about: ( ) Fixed Price $[_____] ( ) Percentage [_____]% ? – Joe Z Nov 2 '16 at 2:11
  • How about this Option 6? – Joe Z Nov 2 '16 at 2:24
  • 1
    Not too happy about it, as you can get inconsistent input (user selects radio button for fixed, but enters the number for percentage); and it requires more interaction than necessary. Ideally, you want the user not to have the ability to enter things wrong, and with minimal effort; simply picking one of the text boxes should be enough. – Amadan Nov 2 '16 at 2:26
  • 1
    I wanted to vote for the first answer, but not for the edit... I think the solution in the edit is confusing. – Yoav Moran Nov 2 '16 at 7:07
1

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).

  • We could put "$ USD" as a dropdown option, but it would be completely new from a UI perspective. In 500 other places, we put '$' on the right. That said, this seems to be the best approach so far. – Joe Z Nov 2 '16 at 1:48
  • 2
    That symbol is ILS – Joe Z Nov 2 '16 at 1:52
  • Also, they would never be choosing from multiple currencies. It's either [their currency] or % – Joe Z Nov 2 '16 at 1:53
  • 2
    The generic currency symbol is ¤ isn't it? as Joe Z pointed out, ₪ is the Israeli Shekel (ILS) – Tom Nov 7 '16 at 22:51
1

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.

0

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

  • This is for marking up prices in the backend of an e-commerce management application. The "users" here are not customers, but rather our client, who is paying a lot of money for our software (we provide training, etc.) So, a price markup can be $5 or 5%, for example. That said, it's clear fixed options is not viable. – Joe Z Nov 2 '16 at 1:51
  • then as I said, use a stepper. You simply can't mix both approaches, it has to be clearly separated and the user has to know what's going on. Just imagine the difference on a product that costs $2 and the user wants to add 10% and adds $10 instead. This alone should be enough to convince you, and it's just one of many other problems you'll face down the road – Devin Nov 2 '16 at 3:15
0

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€.

  • I don't know about Finland, but in the days of the Deutsche Mark the DM could be found on either side of the amount without confusing anyone: DM 5.50 or 5.50 DM. I should think the same is true with the Euro: €5.50 or 5.50 € – MMacD Nov 13 '16 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.