That's my first question in stackexchange!

We are designing a datatable view for scientistic users. They get this table after they input a bunch of filters and press search. The table is already quite big - 13 columns. However we know that often our users want to know more detailed information about each of rows. Each item(row) has quite a lot of additional information. As this is a research tool, our users want to find some interesting items from this table, and sometimes they just want to glance over table quickly and check detailed information of interesting items, or go one-by-one item and view detailed information for each of them. Also we know that our users might want to copy some text in that datatable in order to e.g. search that term on the internet. Also some rows are links to external websites with additional information.

So what we came up with:

• Detailed information about an item is quite heavy information to squeeze in popup's on hovering some columns, so we decided to go for master detail pattern.

• We could put the detailed view of each item just below the table, however we have content on the page above the table, so it might be not so easy for users to keep everything aligned nicely in the screen. Therefore we decided to show detailed view on the side of table, while minimizing the table on demand.

So there are two modes basically:

Mode 1 - Full table mode:

Mode 2 - Minimized table+detailed information mode:

1. Mode 1. Full table mode, where users can go over items basic information. Clicking on e.g. Name1 will open 1st item in Mode 2. Clicking Value4 of first item will also open 1st item in Mode 2, however it will also open a 2nd subtab "Info2" in the detailed view, instead of default subtab "Info1".

2. Mode 2. Minimized table+detailed information mode, activated clicking on the name cell of an item. Here users can see detailed information about an item. And there is an easy way to go back to detailed view (blue arrowed control). Minimized table provides some way for them to distinguish the items and go quickly over them one by one. To switch to another item, use click on Value 2 (alternative name to Name1 that makes sense in that context)

The problem we have is that only name + 2 other columns of the datatable that are opening the detailed information about an item. However it can be possible that users want to switch often between mode 1 and 2, so we are not sure it's very natural/fast way to do via clicking on some links inside rows.

We can't make the whole row clickable, because then it will be hard for our users to copy values from the table. Also we want both minimized and full tables work in the same way, therefore we would also need to have same kind of mechanism for switching items in detailed view. Clicking on a particular cell in the minimized table to change the item might be agains expectation of users regarding how master-detail view should work.

Somebody asked a similar question Is it worth making an exception to a single-click master/detail pattern? however in our case some cells have links to external websites and we don't think so far right click is a good way to go.

What would be most natural solution here?

Any input is welcomed!

Cheers, Max

EDITED:

Solution we ended up with

In the end we have ended up with the following solution:

• We still use togglable detail pane with all the content about row in several tabs in it. Michael proposed to split content into pieces and show only part of information in the detail view, e.g. only information about Value4 when user clicks on it. The problem was that the object had quite some more information chapters (tabs) than were represented in the row in master view (basically some of the tabs in the detail view would have no link in the master view).
• We open the relevant tab in the detail pane, depending on if user clicks on e.g. Value4 or Value5. However because our users want to quickly compare e.g. Value4 details between different rows, we keep the previous tab opened in the detail view, when user clicks on Name links. We think this should be quickly discoverable.
• We indicate the difference between internal/external links by showing different icons next to links on hovering the link.
• We highlight the whole row in the master view when opening the detail view, so user clearly sees what she is viewing.
• We left the toggle control (blue error) about quite bulky as it is in the wireframe, so make it faster to switch (easier to click) between the modes.
• We show detail view on the right-hand side, as this is more natural position for details (thanks Michael!)
• We do not have an extra toggle for table view - since most of the times the user always want to see the table (e.g. for fast switching between the items to view in detail view)

Problems left to address

• The detail view is quite bulky - it might be that user does not need most of the time all the information at once. Main requirement was that the user can quickly browse/compare different information between the items. Another possible solution to this would be to take an advice of Michael and show only relevant information to the link that was clicked. Then to view the whole information about the object we could add a link in each detail view View the whole object data, which would display all the tabs with the information about object in a different page/modal window.
• It is not obvious to user that clicking on Name would allow to quickly iterate over objects and comparing the previously opened tab in detail view between the objects

I will keep this question open for a while in hope to get some hints to the remaining problems

EDITED 2:

Just wanted to get back and share out insights after testing this with our users. Most of advices from Michael turned out working well in practice. However some things we observed/still assume:

• We have kept the multi-tab detail pain as in Mode 2 - Minimized table+detailed information mode: mockup, since all of the parts of that complicated object rows are related and somehow interconnected (the parts to which e.g. Name, Value4, Value5, etc. links would lead). It would confuse users that different links show different parts of the object, and user does not seem connection between them (which switching tabs would show).
• Pure links are confusing our users. They don't see that the whole row "contains" detailed information about the row, and they see links on the rows are something that would not show details/summary. about the whole item. Now we see best approach to have the whole row clickable (which will drop user to the default tab of the detail view), and specific in-row links just lead to the particular tabs of that detail view (as a shortcut). External links are show with a icon that gives a needed hint.
• Specially-styled toggle button as in the wireframe seems to be well received by our users
• There is indeed problem with the space - its hard to fit both part of master view together with content of the subtabs. Minimizing master view with a toggle would be a great solution to that.