3

I'm trying to make evident the correlation between the selection of a main table and it's drilldown panel.

When you open the page, you see just the first panel. Once you click one of the table rows, a drilldown panel appears. With this flow, the correlation is clear.

But what if the user open a link where the drilldown panel is already opened? Or if he see a screenshot?

How could I improve the correlation between the two?

layout

  • Why not use the selection itself as the header and drill down below the selection, inside the table itself. With some clever background coloring it becomes obvious where the content is coming from. If you have too much content though, it may become obnoxious so choose carefully for your situation. – Andrew Gies Jun 8 '15 at 20:04
  • totally off topic: are you the guy behind Bootstrap Material? – Devin Jun 11 '15 at 19:17
  • @Devin yes I am. – Fez Vrasta Jun 12 '15 at 7:47
  • @AndrewG Thanks, but my drilldown is way to big to being placed inside the table :( – Fez Vrasta Jun 12 '15 at 7:48
1

If you're not limited by horizontal space you could move details to right. enter image description here

But if you're limited by space and technology, you could add a line connecting active row with details and use same highlight color (you could also consider meaningful animation which shows the line first and then the box with details).

enter image description here

  • Thanks for the ideas! Unfortunately the first solution can't work on my UI because the drilldown panel is very very big and the table has lot of columns... The second idea is probably the best, but again, I can't use it because my team don't want to "waste" that space on the right :/ – Fez Vrasta Aug 15 '15 at 10:41
  • You can make the connecting line very small, like 2px. This can still convey the relation between items. – Maciej Sawicki Aug 15 '15 at 18:12
1

You have not specified which technology you are using, but by writing "...open a link...", I presume it is about html/css/js.

I can think of three types of highlighting.

  1. Adding an .active: You could add a class, which somehow highlights the drilldown, by using a correlating color, changing font weight, adding shadow or/and transformations. This all can be done by css.

  2. Adding an .inactive: Reduce the visibility, alpha and color of the inactive sections.

  3. Implement icons: By using icons you could show the user that a certain entity is open. Examples could be an open and closed folders, triangle arrows or plus/minus etc. Font Awesome is a nice example to accomplish that.

In case of "...open a link...": If for example an anachor is already set, instead of already display the drilldown on load, you could set a timeout, scroll to the section, open it and let it flicker once. This can be easily done by jQuery.

The position of the drilldown should be inside of the table rows. Also do not overdo it. Sometimes less is more.

Bootstrap has some buildin functions to accomplish your thoughts. Maybe you should take a look.

  • the most important part is the In case of "...open a link..." because it should work both if user open link or if user see screenshot.. And your solution doesn't handle both :( – Fez Vrasta Jun 9 '15 at 11:01
  • If a user opens a link i would trigger a js event which hints the user "this section is open". The "this drill down is connected with that section" should be done by css, independently of the state. This way a screenshot will show the connection too. An very simple example of an collapse can be found here: jsfiddle.net/zGRSF – Mruf Jun 9 '15 at 16:00

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.