1

I am working on a mobile application which will have two different areas in same app.

Suppose:

  • Area 1 -> Learning Management System
  • Area 2 -> School Management System

Both areas will have its own dashboard. I am trying to create a design where a user can switch the dashboard from one to another. However, when the dashboard changes the sidemenu changes too.

My Question is, What would be the best way to Switch the dashboard?

Here is the mockup i have created but i think there is a more better and easy way.

dashboard pages

With Menu

with menu open

  • 1
    I agree with ntnlbd that changing the side menu will confuse the user. Since you are adding those option inside side menu user may never notice. In addition to this bad UX. – NB4 Jul 12 '18 at 7:36
  • You would get more specific answers if you added a few details. How many options are there in the hamburger menu, how often does the user have to switch between LMS and schools, and maybe the general user flow in this app. Right now we kind of have to guess. – Big_Chair Jul 12 '18 at 11:31
  • @Big_Chair I have updated my question – umanga shrestha Jul 13 '18 at 5:11
0

Adding a bit to ntnlbd's answer:


You can either have the main, top-level nav in the navigation drawer (the hamburger menu) and the secondary stuff in a linear hierarchy

hand drawn mockups

Or keep the tabs and use the linear hierarchy together with a preview of the dashboard (similar to what ntnlbd meant with cards)

hand drawn mockups

Or anything else that clearly separates primary and secondary navigation.


Some explanation

The point is that the top level navigation has to be very clear to the user and he always has to know in which one he currently is. Notice how I used the app bar in the first example to always display the chosen category.
You'd have to be careful here with the linear navigation, as you need to visualize the path the user has taken to get here. Something like breadcrumbs:

enter image description here

There also has to be a clear distinction between primary and secondary navigation. As Google shows well in the following image, using too similar looking elements results in confusion.
Bad example:

enter image description here

You have 2 top categories and a handful secondary categories, visually that means that the secondary ones have to follow after the primary selection. The user expects the process to be like this:
enter image description here

In your case having the secondary navigation in the hamburger menu would be like the opposite in the user's mental model, choosing the primary on the second level and the secondary on the first level.

Further reading: Understanding Navigation by Google


Just make sure to follow these basic rules and I'm sure any design you come up with will be understandable for your users.

  • Thank you very much. This has helped me a lot with the issue. I will follow this rules. – umanga shrestha Jul 16 '18 at 8:46
1

The hamburger menu is primary - Tabs are secondary

The solution you presented seems a bit counterintuitive. A menu hidden behind a hamburger icon is usually used as primary menu, while tabs usually play a secondary role for navigation. In your design, as far as I understand, those 2 are switched, which may result in users being confused why primary menu items have changed when a user navigates to the secondary (tab) menu.


Solution Ideas

One solution would be to put learning and school into the primary hamburger menu and place secondary navigation into scrollable horizontal tabs (I assume you have quite a few items there)

Here is an examples from the material guidelines.

- or -

If you only have 3-5 items in the secondary nav, use the bottom bar navigation pattern.

But don't use both as it will flood the screen with navigation options.

Alternatively, you can stick with the design you currently have. Instead of adding secondary navigation to the hamburger menu, reserve that for other functions, like user info and logout. Use cards to segment items for each dashboard in one long scrollable space.

  • Great thanks. You got it right and my solution is totally not the right approach. Users would definitely get confused when the primary menu changes according to the navigation on the top. – umanga shrestha Jul 12 '18 at 14:47

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.