3

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

Improve this question
1
  • A picture would be very helpful!
    – Paula Chuchro
    Mar 25, 2016 at 6:40

2 Answers 2

Reset to default
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!

Improve this answer
0

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

Improve this answer
4
  • 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.
    – Nicholas Pappas
    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...
    – Usable Insights
    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.
    – Usable Insights
    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.
    – Maigen Thomas
    Mar 25, 2016 at 20:48

Your Answer

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

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