I'm working with a store landing page that displays the main five product categories. All five category images are displayed inline, and are same height and width. Each has an appropriate label and icon/picture. Essentially, each product category is the same as/equal to the others in importance.

Only three of the product categories qualify for the promotion that will be displayed as a full-width banner/hero at the top of the page, directly above all five product categories. The banner has a link with details as to what qualifies, legal stuff, etc.

Should I call out the three product categories that qualify? Perhaps changing the icon the brand color/white rather than grey/white or in some way highlighting them?

My concern is that the different colors will just be seen as discordant rather than indicative of relevance to the promotion.

enter image description here

enter image description here

  • A picture would be very helpful! Mar 25, 2016 at 6:40

2 Answers 2


I think your second version with the "get rewarded" label should suffice to convey the message you want to give.

However, there's some cognitive load that makes the message a bit hard to grasp at simple sight, and it's because of the scrim or semi-transparency you're using on the images. Many times, the semi-transparency is used for disabled elements and IMHO, this semi-transparency works this way in your samples, your labels are close, yet not enough.

I'd try notching down the scrim a bit, or even use imagery and scrims as Material Design suggests. You may find that simply taking off the scrim would be just what you need.

As for scrim techniques, Material has some good recommendations and guidelines, but you culd take a look to NNG's article Ensure High Contrast for Text Over Images which deals with some techniques, examples and explanations for what you need.

In the end, it all comes down to test, test, test!


Your concern about color confusion or mis-coding is valid. Instead of color, consider adding a symbol to the button(e.g.,Blue ribbon with a gold center or a plain blue ribbon) to those categories that have a "deal". Here is an examples using a gold centered and a plain blue ribbon.Buttons with blue ribbon = categfory with a deal

  • The notoriously poor usability of icons would not tend to indicate that adding a ribbon to indicate "deal" would mean anything more than a color shade. Mar 25, 2016 at 19:06
  • 1
    mousing over the button with the deal could reveal a message "sale items" that there are sale items under this category... Mar 25, 2016 at 19:24
  • Bye the way, the button designs suggested in the question need to be tested with the target audience to validate user understanding of the intended meaning. Mar 25, 2016 at 19:28
  • Okay, I'm really glad to know I'm on the right track. While I was waiting for replies, I went with something I thought would be indicative but fairly unobtrusive. I updated the original question with another image. Mar 25, 2016 at 20:48

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.