12

I have a quoting form in which I want users to have the ability to add a discount. The discounts can be added as percentage or absolute values. My current design is a text field and a dropdown for selecting absolute or percentage values:

enter image description here

Is there a better way of displaying the discount form?

Improve this question
3
  • 1
    Can I ask why that has to be the case and not just sticking to one input?
    – UXerUIer
    Commented May 15, 2015 at 14:36
  • 1
    For my use case, there are no standard discount values or sub totals.
    – topher
    Commented May 15, 2015 at 14:47
  • 1
    Maybe you should establish one?
    – UXerUIer
    Commented May 15, 2015 at 15:13

7 Answers 7

Reset to default
21

You could use a toggle switch ABSOLUTE | PERCENTAGE and have the user select which one he wants to use. For example: (don't mind the $ sign I did it quickly)

enter image description here

and let the user select between the two options.

This format works very well in use cases that I deal with. Buyers and bidders have to make numerous (100+) decisions in a day. It's easy to select and easy to scan a screen and to see quickly and easily what needs to be done and / or what has yet to be done.

Improve this answer
9
  • 1
    +1 this is the simplest and clearest way I can think of to present the field.
    – tohster
    Commented May 15, 2015 at 14:51
  • 10
    And make sure that if I type $ or % in the field the corresponding box is automatically selected, please. Don't make me use the mouse.
    – wchargin
    Commented May 16, 2015 at 19:10
  • 1
    I would prefer tohster's suggestion instead. It doesn't require an extra control, takes no additional screen real estate, is natural, fast, works into the tab / keyboard flow with no effort (and without disrupting tab order by introducing unit selectors into the flow), lends itself to future support for other units without UI changes, and takes care of the issue WChargin mentioned in the above comment all in one go.
    – Jason C
    Commented May 16, 2015 at 22:32
  • 1
    @WChargin - you're absolutely correct. If the user types in % the associated field ought to be activated.
    – Mayo
    Commented May 16, 2015 at 23:08
  • 2
    @Rikki - If I was to decide this my first inclination would be to put the $ and the % on the left side of the number as well. I wanted to emphasize the toggle idea and not bring in other aspects into consideration.
    – Mayo
    Commented May 17, 2015 at 22:18
29

@Mayo has, I think, the answer with the clearest affordance.

But, if the discount field is going to be used frequently, an approach that has been proven to work with many professional and productivity application is the polymorphic input box.

enter image description here

Applications like Microsoft Word, PowerPoint, Photoshop, AutoCAD, Illustrator, and others use these boxes effectively to allow users to enter units quickly in a single input action without involving additional mouse clicks or tabs.

Polymorphic inputs are a little more difficult for users to learn, but once they understand how to use them they are often the fastest interface to use. For forms with multiple fields, they also allow users to complete by tabbing through and filling fields without needing to pause to grab a mouse.

Here's a sketch for a discount field:

enter image description here

  • In this case I've used a placeholder to instruct users around what to do. You may want to add a ? info icon or a tooltip if you think your users need more explanation.

  • Note that it's important to include default behavior if the user types in a number without a unit (in this case, I've defaulted that to a $ amount).

One more thing...

For discount fields, number signing can often be confusing. It's good practice to add some error reporting to show users what the correct signing is:

enter image description here

Improve this answer
4
  • Nice answer. For the number signing issue, why not just remove the minus sign from the field rather than report an error? There is no ambiguity about what the user meant.
    – user31143
    Commented May 18, 2015 at 7:31
  • @dan1111 that would work but many UX designers prefer not to enforce that kind of validation silently because users can feel frustrated with typing a - and having it not show up. In this case I think the design logic isn't strong enough to make it an antipattern so it's just a matter of preference.
    – tohster
    Commented May 18, 2015 at 14:12
  • 1
    Hmmm. How about a dialog box popping up that says "Are you sure you don't not want to make your discount unpositive?"
    – user31143
    Commented May 19, 2015 at 14:31
  • +1 for "Polymorphic inputs are a little more difficult for users to learn, but once they understand how to use them they are often the fastest interface to use" When the (majority of) target users are going to be using a form dozens or hundreds of times a day, it can be better sacrificing a little "obvious to use" in favour of "quick to use".
    – TripeHound
    Commented Feb 1, 2018 at 10:52
7

I recommend Gustav's option #2. You can give both, allow both to be editable, and have the counterpart update to reflect the change, either as they type, or upon the input field losing focus.

This would also take care of the need to round. I could type 20% for the discount, and then tab to the absolute input field and round to the nearest dollar. In cases like this, sometimes a chain link icon is used to indicate that the two input fields are linked:

Absolute-Relative Input Wireframe

Improve this answer
3
  • 13
    A non-functional chain icon may be confusing, because it can often be used to link or unlink the two values (such as length and width when resizing an image).
    – user31143
    Commented May 15, 2015 at 14:30
  • I like this approach. However, in your image above, I'd put the absolute value on the left and the percentage on the right so that it ends up written out like we write it normally - $32.43 and 0.64% instead of %0.64 and 32.43$.
    – user1118321
    Commented May 17, 2015 at 15:23
  • That's a great point. I had it that way initially, for the reason you state, but I suspect that % is the more commonly-used option. If this is true, it makes sense to have it first, so that users are presented with the option they prefer first, and so they can tab to it more easily with the keyboard.
    – Phillip Quintero
    Commented May 18, 2015 at 16:29
5

The answers so far all focus on ease of understanding. This is important, but if the tool will be frequently used, ease of use is also something to consider.

If the typical user is likely to use this feature many times, I would let the option be set by typing % or a currency symbol directly in the field along with the value. This will allow an expert to set the discount in only one action, rather than two.

This need not replace another, easier to understand way of setting the value. You could also have a drop-down (or one of the other suggested paradigms) that you keep in sync with what is shown in the field.

Improve this answer
3

I see 3 options:

1: The switch.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Use common symbols like $ | %

2: Show both.

32.43 (0.64%)

3: Take over responsibility.

And decide what's the best for your users. Ask what they want to see, why they want to see it.

  • Marketing purposes: go for the one which suits better the discount-value ratio. E.g. Use percentage on lower values, except if the the discount is very high. More: Power of comparison, Price experiments
  • Billing: Use absolute values
  • Something else: Know your user group, what do they expect? What matches the business goals?

I can't imagine any situation where a user action would make the UI more usable and comfortable.

Improve this answer
4
  • They require both. I would prefer percentages. However, as in the example above, they sometimes use the discounts to round up a figure.
    – topher
    Commented May 15, 2015 at 13:18
  • Would it make sense to offer an option "round up" so they don't have to enter the value manually?
    – Gustav
    Commented May 15, 2015 at 13:26
  • If I did I would have to give them the ability to select a round down level i.e ones, tens, hundreds etc. Seems like overkill.
    – topher
    Commented May 15, 2015 at 14:02
  • Your answer is just as good as Mayo's but unfortunately I can only mark one as the answer. +1.
    – topher
    Commented May 15, 2015 at 16:18
1

If somebody writes 40% it's clear that it is a perecentage, and not an absolute value. Why not use that?

If the last character in the input field is an '%' you can store the value as percentage, otherwise as an absolute value. Next to the input field you could show an hint like 'enter absolute or perecentage value'.

Improve this answer
1
  • 2
    There is the chance of someone forgetting to input the '%'. A visual indication as in the other answers is useful in such a case.
    – topher
    Commented May 17, 2015 at 9:41
0

The accepted answer is good, but I prefer the $ symbol go on the left. Thus, I created a widget that preserves the normal positions of these symbols:

Figma design for $/% input

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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