6

I have a use case in which we need to support an analyst to 'peek' into a particular record to see all the related records and entities associated with it. This is within an CRM enterprise space, where most of the interface are lists and form elements ie. I'm constrained to those types of UI components.

I've designed an interaction which on-click of a particular record on the 'Master' table, the 'Detail' Table appears below. To illustrate it, I have a minimal mockup of the same.

Minimal Mockup depicting the interaction

I cannot disclose more details due to confidentiality issues, but I'd like to get feedback around similar interactions within the enterprise space.

  • Is this a common interaction paradigm?
  • What are some of use-cases you've seen this interaction being used in?
  • Any other feedback on the same.
Improve this question

2 Answers 2

Reset to default
3

These are the cases as I see them:

  • Receive the information in the point of the interaction: Feels more natural but changes the layout, either adding extra content inside or covering it with extra content.
  • Receive the information in a place different to the point of the interaction: The bigger the distance between the interaction point and the extra content position the more difficult (and inconvenient) it is to follow the interaction+response.

As @asiegfried states in his answer, having the response where the interaction (first case) feels more natural. The way to accomplish it could be with either expandable panels, a popover that appears where the interaction happens, etc.

For the second case, the shorter the distance the better. The second case could be the one you propose, or with a different layout.

enter image description here

enter image description here

There is a third case which is a dialog or a different page where there is no connection at all between the origin and the response.

Take a look at these other questions: this and this.

Improve this answer
2
  • Good summary and good alternatives!
    – asiegf
    Jan 24, 2017 at 19:29
  • Thanks Alvaro, great feedback. Summed up various strategies well! :)
    – sacnayak
    Jan 25, 2017 at 0:31
7

This pattern is a known one, yes. I have seen it implemented in popular datagrid library components such as devexpress. However, it is not a widely spread one because it is not that easy to action something at one area in order to see something at another (sounds like a game puzzle right?).

A more usable Master-Detail pattern would display the information just underneath a selected row - it feels more natural to trigger something on the location of the action.

dxDataGrid Master-Detail

If this is not feasible, then you may want to consider other forms of navigation like modals or even another dedicated page.

Improve this answer
5
  • 2
    Exactly, an expandable container or similar in place. @sacnayak you might want to take a look at this other question.
    – Alvaro
    Jan 24, 2017 at 9:25
  • @asiegfried yes, I agree. That's what was unsettling me - and I'm having a hard time getting access to actual users to get feedback. Having said that, I actually did consider this pattern - hierarchical lists. One of the main use-cases or interaction goals of the design is to enable the user to quickly switch between 'Master' rows to draw correlations, and perform certain actions on (both)master-detail lists. The drawback with in-situ expansion is the extra real estate it consumes and the additional clicks it takes to collapse the rows etc. But, does this deserve a new pattern? Thoughts?
    – sacnayak
    Jan 24, 2017 at 18:29
  • @Alvaro thanks! The problem being solved there is similar and it did spark some thoughts. Your thoughts on my particular use case?
    – sacnayak
    Jan 24, 2017 at 18:30
  • @sacnayak Let me add an answer.
    – Alvaro
    Jan 24, 2017 at 19:06
  • This pattern is very useful and efficient. I once half-jokingly dubbed it "pop-in".
    – Dvir Adler
    Apr 29, 2017 at 7:13

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.