0

On our website we have a section with the top sales products of each brand. The sections are headed with a big title. Clicking each brand top sale button shows a group from five up to ten different products.

enter image description here

The problem: nobody interprets the buttons as such, they continue navigating without knowing by clicking on each button the products of the lower part change.

Adding each brand logo worsens the design by the difference in shape and proportions of each:

enter image description here

What can be done to make this function more evident? I guess it's a design problem.

Other data:

  • It's possible to change the button's shape, style or color

  • We can not use different colors for each button

  • We can not show the products with a rollover on each button, it must be a click.
  • The buttons are inside a responsive flexbox
  • The five default products displayed when loading the page belong to the first brand button
  • Only show five at a time, the products are in a static jssor slider with a Show More indicator
  • Are all the brand buttons 'on' to start with? In other words, what are the top row of products showing by default? And can there only be the top 5 from a specific brand at one time? – Mike M Jun 16 at 13:03
  • Question updated with the answers to your comment – Danielillo Jun 16 at 13:16
  • Could these controls be changed to radio buttons? Is there an implementation restriction for the control type? This way you have a 'selected' state by default, which you could label. – Mike M Jun 16 at 13:33
  • OMG, this comment shows how blind someone can get when designing, I didn't realise the active and non-active state of the buttons, actually I'm showing them all active. I will try this and see what happen. BTW, your comment is an interesting answer, you should add it. – Danielillo Jun 16 at 13:39
  • 1
    Just added. Hopefully your devs can change controls. From there, I'm sure with your graphic design strength you can make it obvious what's selected. – Mike M Jun 16 at 13:43
1

Try changing the control to radio buttons, and the default choice can show selected.

You may choose to make these more 'button like', but this way you have a selected state. You could add the text for selection if needed, but the selected state could suffice.

enter image description here

You could even show the brand logo to reinforce the products showing, one at a time:

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.