4

I've seen a couple of link related posts but I feel this one is a little different.

I'm currently working on an application where we have links to other products at the top of the screen, and we're trying to think of the best solution with minimal development work.

(Side note: We use blue links in the app to indicate actionable/clickable text links within the content)

Version A: Blue text = clickable links

Version A

Version B: Blue text = highlight current app you are on (Which I know breaks the logic of colouring links on the rest of the app)

Version B

Version C: Is most similar to what we have with the grey links, but with additional indicator bar. I personally prefer this one as it pushes it back so the content of the page visually, but I've been cursed with knowledge of the app... Reason to why I'm here scratching my head.

Version C

I guess my question is which one should I go with, and is breaking that logic okay in this situation?

Improve this question

4 Answers 4

Reset to default
3

I agree with others that it's a base design issue but if you can only change the top bar...

Because of the colors used in the navigation of the "current product," you should use color to separate the product navigation from the current product.

enter image description here

Use colors to disable buttons. You could left-justify the top navigation to separate it further.

EDIT/ADDITIONS...

If you're going to have a top menu that controls the current page, it has to be visually separated otherwise it's simply incorrect - your users will have a broken site experience.

The design of the bar should express its function.

If your page is centered and has a "fixed" width, putting a separate logo/name and justifying to the left/right edges of browser will separate the bar from the current page further.

If you want users to switch between the bar items freely/often, the design should be something like:

enter image description here

If the users are only usually going to use one product, the bar should look more like this:

enter image description here

Improve this answer
1
  • Thanks for mocking that up moot! Much appreciated. In the past we did have a coloured bar at the top which actually drew too much attention, hence us pushing it back by using white. The other downside to making it a coloured bar means a third colour added to the palette. The rectangular highlighting is an idea I didn't think! so nice one!
    – Choizilla
    Apr 1, 2015 at 11:14
2

Version C, with the underlines, is superior because it does not rely purely on colour but also has that additional visual clue. That makes it more accessible to people who have difficulty or simply cannot interpret differences in colour.

I would however include colour as an additional clue in addition to the underline.

Improve this answer
3
  • Colour the text or the border? I've tried a variation where the text is an off-black (to avoid the same problems as blue being links) but it again it's adding another element. I just tried to make the borderline blue and this also brings too much attention. hmm...
    – Choizilla
    Mar 27, 2015 at 16:11
  • @Choizilla I think I'd make the text and the thick underline blue, leaving the line grey. But that's just my opinion - it's subjective.
    – Matt Obee
    Mar 27, 2015 at 16:14
  • I think you're right, I've just made the borderline thinner in blue, text is also in blue and it seems to really work on first look.
    – Choizilla
    Mar 27, 2015 at 16:21
2

None of the above?

I mean this in a constructive way.

Issues:

  • You have 3 layers of navigation onscreen at the same time, which is pretty complicated for users.

  • On top of that, the visual layout is confusing because you have a top navigation, and then a break for page title, then 2 more layers of navigation that are visually related by the tab idiom ("tab within a tab").

If you want to just fix the top bar, then the other thoughtful answers will work well.

If you are willing to fix the underlying problem of disorienting nav hierarchy, I think the breadcrumbs pattern or (in a rare cases) a sidebar nav that shows the hierarchy more clearly would work better for overall layout.

Improve this answer
1
  • Hey there, sorry for the delayed response. I did should have added that this is a temporary fix until we deploy the redesign of the whole application navigation which should hopefully fix what you have mentioned above.
    – Choizilla
    Apr 1, 2015 at 11:09
1

Additionally for clarity, one could also try altering the messaging of the "Home" button in the tabbed navigation, given that's the primary area a user will think to navigation. For example, you could try something like:

Home - Accounting

I also agree a combination of mockups A & C would work, with the underline being the most effective visual cue. A small triangle jutting out of the center of the underline pointing up might make it even more clear.

Improve this answer
1
  • Ah thanks for that Danny, to keep work minimal we'll probably not have the arrow as that would mean extra image/css, I agree with the home idea though to clarify the nav.
    – Choizilla
    Mar 27, 2015 at 17:34

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.