Interactive table header (zoom into data)

Question

First of all, my apologies if my language is not great (English is not my first language). Also if I have missed other questions/threads on this subject, please let me know. Any help would be greatly appreciated. I will try to be to the point but give enough context. Apologies if the text/questions are still a bit long!

For an online (e-learning) platform I am working on consistency and clarity of tables. We have tables that show teachers information about the students.

A situation: a teacher goes to an overview screen of a class. A table shows the students (a student on every row) and the domains of the subject per column (for example: in English one might have grammar, words, reading etc.). The teacher can see the progress per domain. If one or more students are underperforming on a domain the teacher can zoom in on that domain to find out where in the domain the issue(s) are. When the teacher zooms in, the table will show the components of the parent domain per column. The zoom action can be performed in two ways: through a dropdown menu above the table in which one selects the domain to zoom in on or through clicking on the domain name in the table head.

See images for table as it is now: overview of domains in subject:

After zooming in on a domain:

The problem: in my mind there are two. 1. It seems unconventional to zoom in by clicking on the table head. Users might not expect to zoom in this way. Also with other interaction in that area (sorting arrows on the right) seem to create some friction for the usability. Looking at Material Design principle I couldn't find anything along these lines of interactivity. And I couldn't find anything saying that you should NOT do this. So my question: is this method of zooming in a no-go? Are there things I should be aware of?

2. If we continue with the current approach, we want to make it clear that there is interactivity there AND hint at what will happen on a click. I am still in the search for a 'holy grail' to do both these things. Below a few of the things I have tried. Feedback and tips on these would be much appreciated.

The icon here might help show that one can zoom in. Although in other applications the icon is used to zoom in the other sense: enlarging what you are looking at. This might communicate the wrong concept.

Buttons within the table might communicate interactivity, but don't say what will happen on a click.

Link form with a pink hover. The arrow icon might communicate that one is moving to another screen/moving on.

Hopefully I create a somewhat comprehensive story and questions. If any clarification is needed I am happy to do so!

Answer 1

There are different design patterns that can apply to data tables, but keep in mind that content density and the amount of interactivities are the most difficult things to manage with tables and data tables.

It is typical for navigation and content to be separately displayed on the page because you want a fixed reference point for navigation (so users can see easily where they are at any given time in different contexts) and the content to reflect the current user task or flow. While combining them in an interactive table header might be an interesting design pattern, its usability has to be tested because it is not a conventional pattern for data tables.

I see two different strategies you can apply to the problem you might have while still trying to make the information as simple and easy to understand for the user as possible. This also depends on the underlying data structure and relationship between the different data fields.

The first approach is to use some type of filtering that allows you to create a 'view' or a subset of the data from the entire dataset. That is, you don't change the structure of the table but simply show or hide different columns and/or rows.

The second approach is to use some type of hierarchy (tree or list interaction) that will progressively reveal more data, so you can expand or collapse additional subsections that are relevant.

By using one or both of the approaches where applicable to your data structure and relationships, you can minimize the amount and density of the content displayed at any given time while still making it simple enough for the user to locate the additional information.

Finally, if you have enough analytics to show the most used information and use cases, it is possible to set sensible default fields to show which will reduce the amount of times the users have to zoom into the data multiple times.