2

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:

enter image description here

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:

enter image description here

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:

enter image description here

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:

enter image description here

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):

enter image description here enter image description here enter image description here

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.

2
  • In response to the edit: When you mention circular buttons do you mean in regards to the top left forward/back buttons, which in the original post were circular forward/back buttons? I think having the top left set be circular was a good choice, as it differentiated it's action with the other set of buttons in the section header. Is the concern that the section header set seems cluttered with the third page?
    – Tory
    Sep 7, 2016 at 21:36
  • I changed the top left navigation buttons to be more inline with the rest of the icon buttons (they used to all be in circles), sorry to confuse. I might change it back. I've edited to add a mock up of what I was trying to describe.
    – Joe
    Sep 8, 2016 at 9:24

1 Answer 1

1

Material Design - Navigation

I agree that having two sets of forward/back buttons does feel odd, but I don't think it causes any major problems, but I have some suggestions:

Remove the nested back/skip buttons with the label "Select a preconfigured report". Based off the video demo, it seems like the back/skip buttons perform the same operation as the second set of forward/back buttons. Remove duplication of actions. You lose the label text, which may give a more verbose explanation of what the user should be doing on that page, however; you already have a label above the file explorer to select a report. Perhaps emphasize that label, and remove the "select preconfigured report".

Disassociate the primary page content header from the sidebar. When I say primary page content header I mean the header that contains the "3 tabs". Currently, the content header/navbar looks connected with the sidebar nav, which can cause some confusion, especially since they each have a forward/back button set. Change the color and/or dp (density-independent pixels) of these two elements to differentiate and apply visual hierarchy to them. (The dp may actually be different, it's just difficult to tell from the video demo.)

I believe making these changes should help in removing ambiguity as well as increase navigation flow. Keep in mind that I don't know the full context of the interface, and that it is up to you to discern the proper steps forward in order to conform to that context.

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.