I have a responsive dashboard web app, as shown in screenshots. The left navigation menu has two levels of navigation, and then there is a blue tab strip running along the top for the third level. There have been some users who have not noticed that blue strip of tabs. What change might make it more noticeable? I'd currently like to avoid major changes to the layout. Perhaps a color or style change?

enter image description here enter image description here


There's possibly quite a few things going on here - some with more effect than others, but for example:

  1. The colour of the blue strip seems to have no reason for being that colour.
  2. There isn't consistency in the colour s used for the breadcrumbs and the left navigation - e.g. settings icon white in the breadcrumbs, grey in the left-nav; Users is cream in the breadcrumb and darker grey in the left nav.
  3. For a dark them I'd expect the left-nav to gradually show brighter boxes for deeper selections - so for example you have generally a very dark grey - then Settings is mid grey and Users should be even lighter grey, not darker again.
  4. Things that are strongly related to the same thing should be the same colour
  5. There seems to be too many colours going on generally - including two blues
  6. White text on blue background often needs the text to be bold to stand out. The Defaults tab actually looks disabled.

Possible changes - most of them quite subtle on their own!

  1. Change the Demo Company background to the same as The main colour of the left-nav - this gets rid of a colour that's not used anywhere else.
  2. Change the third item of the breadcrumb to a light grey (perhaps same as the Columns and Export buttons) rather than cream.
  3. Change the Users item on the left-nav to the same light grey colour.
  4. Change the blue strip to the same light grey colour again - so it relates all the 'Users' references together as if to say Users over here is the same as users up there and these are the tabs that belong to the Users section.
  5. On the strip - perhaps underline both tabs, but as well as emboldening the selected tab, underline it with a thicker line.
  6. Don't use the orange underline colour unless that's a recognized colour for selection elsewhere (it's not used elsewhere on the page)
  7. Don't put the underline so low down on the strip - put it nearer the label
  8. On the strip use a fore ground colour to match the same as the Users section of the breadcrumb and left-nav.
  9. Be consistent about icon colours.
  10. Make the left-nav expand/collapse arrows bigger so it's clearer that Settings is open - it wasn't clear before
  11. Embolden labels of the selected 'Users' items - to match that of the selected tab.

By now, you've reduced the number of colours in the navigation to a slightly more digestible palette; tied together related aspects, and generally made the navigation look less patchy and more ordered and structured, with just a few colour changes. You could of course just do the changes related to the blue strip area but that's just part of the story!

The combined effect of all this might be something like below. I also added a vertical strip between the left-nav and the content, to physically connect the Users button to the tab strip.

enter image description here

| improve this answer | |
  • 1
    Wow that's amazing! You just blew me away! Thank you! – jacob Feb 4 '19 at 21:56

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.