I'm building an application in which the user can select categories by clicking on the first heading (Leather), the image, or the second heading (12 Novelties). The categories are displayed as material cards, as seen in the following example:

enter image description here

The difficulty is, that a click on "Leather" (click area 1) should navigate to a different route, than a click on the image or "12 Novelties" (both click area 2), so we have two click areas:

enter image description here

My question is: How do I visibly distinguish the two click areas while trying to stay as close to the current design as possible? I want to make it clear to the user, that, without hovering the mouse on one of the two click areas, they lead to different routes.

For clarity: "Leather" (click area 1) refers to a category, and "12 Novelties" (click area 2) refers to the latest twelve products in the category "Leather".

Thank you.

  • 1
    I would set an image linked to the 'Leather' category instead of 'Novelties'. That way, it is clear that the user will go to the category (which, I presume, will be the main goal). The 'Novelties' bar will then be a child (anchor) of the category. – Levano Feb 14 '18 at 14:44
  • @Levano thank for your answer. But how do i visibly distinguish the two click areas, even if I do as you suggest? – user3096156 Feb 14 '18 at 15:07


Users are familiar with chevrons at the end of list items. They know that on click it takes them to a deeper page.
You could also add a width difference to the '12 Novelties' card to show that it comes under 'Leather'

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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