0

I'm designing a website and I have a problem with too many tabs. The website has information on 18 different box diets (each has its own price list). On the price list subpage, I want to show a price list with navigation of these diets so that the user can navigate between different price lists. The problem is that there are as many as 18 of these tabs and they do not fit in one row. My first idea was to use buttons (instead of tabs) but I found on the internet a lot of bad opinions about this solution. I have a problem with the computer view because on the mobile version the problem can be solved with the 'Select diet' button and the navigation bar that is rolled out on the side.

Can anyone advise on how to design desktop view so that it looks correct?

enter image description here enter image description here

Improve this question
1
  • 1
    Is it possible to group the diets into different categories? Maybe "vegetarian", "Vegan", and "omnivore" or something like that - Something that the user is unlikely to want to shift between. That would give you a smaller number of diets to deal with in one window and therefore fewer tabs.
    – Roux Martin
    Mar 14 at 10:00

1 Answer 1

Reset to default
1

I see a conceptual problem in the design of the application that, in the case of being a user, I would also be confused about.

First of all, the order of the titles in relation to the content is exactly the reverse:

enter image description here

Secondly, I see a hierarchy problem regarding the priority of what is being reported. In the upper selection, the selected item Diet nr8 directly related to the lower content is barely perceptible, which is why it is repeated in a title (Diet nr 8) which is redundant in my opinion. This has a graphic solution, and it is precisely by prioritizing each element with respect to its perceptual importance.

A raw example:

enter image description here

If the price list is fixed and only the content changes, you can try a solution with a slider or carousel in the top selector.

enter image description here

Source: personizely.net

Improve this answer
2
  • OP reported having a problem dealing with 18 different diet identifiers. Could you show your layout with 18 diet identifiers so that we can correctly see the advantage?
    – Roux Martin
    Mar 14 at 11:55
  • There are many solutions, but I am not the designer of the application. The image is a simple and coarse example of how to prioritize through design, not a final solution.
    – Danielillo
    Mar 14 at 12:07

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.