Is there an effective way of displaying a sale on a product swatch which is universally recognizable?

I have read the following NN article, which suggests icon and color are the best way of displaying this on a product grid such as a listing page. https://www.nngroup.com/articles/visual-indicators-differentiators/

My initial thoughts were a percentage symbol within a circle, but my concern is this is too obtrusive?

Any thoughts much appreciated.

enter image description here

  • 1
    It's an interesting problem and I haven't seen anyone really do this successfully (yet). If you have the ability to split test this then you will get an answer if you're headed in right direction for your customer. Personally I think it's hard to say if this design would be successful or not but the approach seems sound.
    – Wes
    Aug 27, 2019 at 14:05

1 Answer 1


I would add a badge that is in strong contrast with the product on sale. Inside the badge make sure you specify how big the sale is. While there is no universal symbol for a product sale if you write inside a badge something like "-15%", your users will understand. Of course, test the solution!

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.