0

I am "fixing" a pre-existing website, with minimal changes as possible, because the site is due to a redesign in few months, anyways (probably).

This site has a navigation bar that opens a list of primary navigation elements.

Here's a quick mockup how it looks now (this is not the REAL page, just a mockup).

enter image description here

When the user clicks on a primary navigation item, a new site page loads.

The new default page has the same name as the primary element and includes an overview info about the said element / category.

However, many of the categories have sub-elements that further on explain the topic.

Also, mind the breadcrumbs, the path currently looks like this:

Home / Group 1 / Primary element 1 / Primary element 1

And if you select a sub element, it looks like this:

Home / Group 1 / Primary element 1 / SUB element 1

enter image description here

Is there a way to visually separate the "primary element" page from the sub-pages?

By that I mean, so a person should see it and say, OK this page is primary, others are not equal to this one - this is the one I have to click to get the overview.

I am also aware, that the color should not be the only way to show something is different, and by that I mean a color change, where there is not enough contrast between state 1 and 2.

Thank you for all your help!

Ah, to add:

I this mockup - the first element in the subnavigation is ALWAYS pink (in this example), if the user clicks on the other element, it only gets underlined, but the first one still stays pink (to show it's the main element)

Improve this question
1
  • I think the second image is clear enough, not sure if I understand your question correctly
    – Devin
    Dec 14, 2020 at 21:01

2 Answers 2

Reset to default
1

Have you thought about adding this button as a large, huge picture with text?

Take a look at mega menus. That might be the solution you are looking for.

Some websites state this clearly, by making primary elements a big, huge element in the page, so it's an unmissable part of the menu (or page), that way the user can right away see its importance.

Improve this answer
0

If you want to visually separate elements maybe you could try something like this:idealo categories tree

Active State: Color + Bold Font enter image description here

Improve this answer
2
  • The thing is that the first element in the sub-nav is also the parent of other elements in the sub nav (what they clicked in the primary nav). Which means it has content. In your example this would mean "Computing" would have its own page about what computing is. And I would like to visually show the users this is the page they clicked, and the rest is additional content.
    – user1509923
    Dec 15, 2020 at 20:27
  • Ok, then maybe the page the users clicked could have a different visual treatment, something like color and bold font for elements with active state.
    – Jordi Jove
    Dec 16, 2020 at 15:26

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.