3

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: enter image description here

After zooming in on a domain: enter image description here

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. enter image description here

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

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

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

4
  • – 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 – Is the information shown in each zoom the same? Isn't this redundant?
    – Danielillo
    Sep 29, 2021 at 10:26
  • Thanks for your comment! As I see it, it is not redundant. In the first images the head text is generic placeholder text. Reality contains different names. In the last image I added you can see what the head text looks like (in the Dutch language). A more precise example: In the overview one might see results/progress for: - Words - Spelling - Verb Spelling When you zoom in on Spelling you would see the results/progress for the contents of Spelling. This could be: - Tailored Spelling 1 - Tailored Spelling 2 - Listening A0-A1 - Spelling 1F The names are not consistently the same.
    – Rubinat
    Sep 29, 2021 at 11:28
  • 1
    Do you need to be able to see grades of multiple students at once? What about edge cases, like the group has no subgroups to zoom into, or the group has a lot of subgroups that won't fit in one screen?
    – fri
    Oct 2, 2021 at 12:21
  • There is another place to view individuals. This screen is giving an overview of students in a class to get an idea if more students are running into issues on a certain subject of a course. The edge case with no subgroups being there does not exist at this time and I don't think that will change anytime soon. The other edge case where there are a lot of rows and columns does exist. In this case we allow both vertical and horizontal scrolling where the heads and column with the names are sticky. I hope this helps clarify things!
    – Rubinat
    Oct 4, 2021 at 7:13

1 Answer 1

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.

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.