Discounts UI/UX: Dollars Off or Percent Off
I was recently working on a web app that involved showing discounts. I could show it either as dollars off or percent off and so I set to do a little research as to what generates more sales.
I came across an article called Dollars Off Or Percent Off? by Craig Simpson. I highly recommend reading it. Here’s the quick take away from the article:
In general, the offer that sounds higher is the one that does best.
Let me simplify that a bit for you:
In general, the offer with a larger number ( whether it’s a percentage or a dollar amount) is the one that does best.
Example
Let’s say one of your products regularly sells for $300. If you were to offer a discount, I would predict that ‘$90 off’ would do better than ‘30% off’, even though in both cases the product is priced $210. Why so? Because 90 is greater than 30.
Similarly, let’s say another of your products regularly sells for $20. If offering a discount, I would predict ‘30%’ off would do better than ‘$6 off’. Again, the product is priced the same, $14 in this case. Why so? I’m sure you know why at this point… 30 is greater than 6.
But WHY does a greater number work in our favor here?
The answer: Psychology — to be a bit more precise: numerosity.
A quick note: When you can, using both works better than just one. But that might not always be feasible due to a number of factors such as screen real-estate or if you are aiming for a minimal design among other things.
Making It Dynamic
For a scenario like mine, we can benefit from switching to either dollars off or percent off based upon which is optimal for a discount as per our findings above. Let’s see how we can make it dynamic, because wouldn’t it be great if we can automate yet another boring task and let the computers do it for us? I mean, that’s what they are here for (until the tables turn).
Let’s take a web app into consideration, a system administrator has access to a dashboard where he/she can manage products — set prices, discounts and more. To be a bit specific, the user can set a discount by entering the offer price. The usual, but let’s add in a checkbox ‘Select Discount Unit Automatically’ — where the unit is either dollars or percent. If it’s toggled on (which it is by default) then it renders the discount based on our logic below.
A quick note: Aim for consistency. Make the discount unit dynamic for single or spread out elements like banners. For something like a list, go for a static unit.
Rendering The Discount
Rendering the discount requires one decision to be made — the unit. And that is quite simple, following are the steps:
- Subtract offer price from the regular price. This gives us the total discount in dollars.
- Divide the total discount in dollars by regular price and multiply the result by 100. This gives us the total discount in percent.
- Compare the numbers. If the number for the discount in dollars is greater than the number for discount in percent — display the discount in dollars else display the discount in percent. If they are both the same, you can display it as either.
The same in code, pseudo-code…
…but wait, there’s one more way
I love optimizations, I’m always looking for a faster (or efficient) way to do things. Let’s see what we can do about the above logic.
Let’s take a closer look at our deciding condition (for the if statement above).
Which can mathematically be represented and simplified as:
And look at that, it turns out all we were doing is checking if the base price (x) is greater than 100.
Let’s put the learning from this analysis into action, because every second (or in our case millisecond) counts.
Optimized pseudo-code
What’s great about this approach over the previous? The calculation for conversion to percent isn’t done for cases where it isn’t gonna be utilized.
Update: You can see this concept in action on my CodePen
Putting It Into Words
In general, if your regular price i.e base price is greater than 100 dollars, representing the discount in terms of dollars off will do best. If the base price is lower than 100 dollars, representing the discount in terms of percent off will do best. If the base price is 100 either should do fine.
Thank you for reading.
