0

I'm looking for guidelines when it comes to web app dashboards.

Specifically I'm designing a dashboard which has 3 main panels, these panels are expandable so the users can view each panel in more detail (see my rough sketch). enter image description here

As you can see on left is the main dashboard, and on the right is a expanded panel.

Now my question is when the user is the the expanded view (right side image), should they still be able to view the other two panels albeit scaled down? Or should they have to collapse/shrink the expanded view?

Additionally, the reason for expanding the panels is so the user can view a large amount of data in a table, thus, the size of the panel should be as large as possible to minimize the amount of scrolling (if any).

Many thanks for your thoughts.

Improve this question
2
  • Get rid of the border radius, it is making your task very difficult, causing problems.
    – Garik
    Commented Dec 12, 2017 at 16:39
  • I don't really agree with that Garik, and it has nothing to do with the problem at hand.
    – RobbyReindeer
    Commented Dec 13, 2017 at 7:58

2 Answers 2

Reset to default
1

is data in panel #1 related to data in panel #2 & #3? meaning, do you need to compare the data at the same time, do you need to interact with the panels simultaneously? is panel #1, for example, dependent on panel #2 or #3?

if you answer yes, then you probably would like to keep relevant panels visible at all times. if you are bounded by the space, then think about presenting important/current data in the largest panel and summarized or compressed data in 2 small panels.

i obviously don't know what you are working on, but use google analytics as an example.

hope this is helpful

Improve this answer
1
  • They are related at some level but they are not directly relational. It's more like information about students, teachers and courses. You could make adjustments in one without it effecting the other directly. However if the users would make some sort of comparison and relation, this would be done in the main view where all 3 panels can be viewed. Thanks for the thoughtful answer. If I could upvote it I would!
    – RobbyReindeer
    Commented Dec 13, 2017 at 8:06
1

Users should be able to see the other panels in a minimized state, so they can quickly access/maximize them. If none of the panels are maximized, they can revert to the default view above.

Improve this answer
4
  • yes indeed, +1, but how would you display the other panels once one of them is maximized? In its default state or minimized (yet visible)?
    – Devin
    Commented Dec 12, 2017 at 22:31
  • 2
    I'd opt for minimized yet visible. The maximized panel could "grow" and "push" the other panels into a minimized state. Or make the panels resizable with handles vs. a button, and let the user set the ideal size for each.
    – Izquierdo
    Commented Dec 13, 2017 at 0:00
  • Yes, sounds like a good idea :)
    – Devin
    Commented Dec 13, 2017 at 1:02
  • Thanks for the response. However In particular cases this solution gets a bit messy. If I have one panel (x) expanded and the other two (y, z) minimized - what then happens if I maximize one (y) of the two smaller ones? Then the size of X will change however the user didn't directly make an action to shrink X. Don't you think this would be an unexpected behavior? Furthermore how would I then get back to the equilibrium state of the left image where the proportions of the panels best fit the use case. Sorry for the long comment!
    – RobbyReindeer
    Commented Dec 13, 2017 at 8:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.