I'm trying to follow material design (don't mind not following it to the letter), but would like some feedback/advice on multiple navigation systems that are in place.
Here's the basic layout of my desktop application:
There's the top bar with title. Navagation is on the left side. The rest of the space is reserved for the "page", which can have a page specific options panel on the right.
There's a common "3 tabs" that appear in lots of the lower level pages, so they look something like this:
There's an addition of the tabs to the left of the page title, and a page specific tools area (menu bars, buttons etc) on the right.
It's all worked very well up until now, when the "Analysis" page has jumped in complexity significantly. The original page threw the user in the deep end a little. The page was so customizable, you started with a blank screen and added components/drag and dropped items on to it.
So I tried to ease the user into it and it's almost like a "wizard" now, in that it guides the user through a few steps. However, now we've got the page navigation, the tab navigation and now this "next/previous" navigation and it's suddenly feeling very messy...
A quick tour of the offending section:
I'm a programmer more than a UX designer - any advice on how to manage this nested navigation? My boss likes the left-right wizard ("feels like an app" apparently) but I'm not sure I like how it sits with the rest of the application. Particularly how there's a new set of "forward/back" buttons that are performing different operations!
Also, any other feedback is welcome.
Edit - Changes
I've taken Tory's advice, which I agree with, changing the header color so it's more firmly associated with the navigation sidebar. Looks much better.
I've also removed the duplicated header bar on the reports page:
My only worry is it won't be clear to the user they can go back and forwards. It's quite natural if you're following the typical path (i.e. selecting a chart type, or "report" then "loading" the report. It might not be clear that the user then has to use the arrows at the top to go back.
I was thinking maybe a more obvious circular button on the left/right for navigation like this (warning: Paint mock-up):
It would work well on the first two pages, but the last one is very busy and screen real-estate is important to devote a whole section for a back button.