0

I have a page with tables that can have a large amount of data depending on the customer you're looking at.

Each customer can have multiple entities and each table represents an entity. Please note that there can potentially be hundreds of these entities for each customer account.

Because of technical limitations, we are only able to display 10 rows under each entity. If the user wants to see more, they can click on the "Show 10 more invoices" button.

So my question is - is it necessary for there to be a "Collapse" button?

The reason why currently, we did not any any, is because you don't generally have to "collapse" tabular data. If you're looking for an invoice, for example, once you find what you're looking for, do you really need to collapse it to be able to see the rest?

enter image description here

6
  • Does "10 more" show a total of 20 (or 15 in the examples), or does it show only 10 with the current values going away? (And is "Total" for those shown or for all invoices?) ¶ But why not just use a scrollbar? Jul 10, 2023 at 0:47
  • Some clarifications might be needed about how these tables work. You said that each Entity table can only display 10 rows, and I assume this is by default or if there are less than 10 rows then you just show as many rows as there are? How are they expanded in the first place, and what does collapsing the table mean?
    – Michael Lai
    Jul 10, 2023 at 2:35
  • When you say collapse button. What do you mean, your design design show any drop down for entities? Jul 10, 2023 at 3:18
  • @RayButterworth That's a good point. It will show total for ALL invoices including the ones that are collapsed, so that needs to be communicated better. What do you mean scrollbar? Where?
    – J Bo
    Jul 10, 2023 at 4:45
  • @MichaelLai By default, 10 rows under each table will be displayed due to a tech limitation. If the user clicks on "Show 10 more invoices...", the additional rows will be appended. So my question is, since there is an "expand" button (the "Show 10 more...", is there a need to collapse it (ie, a "Show less" button).
    – J Bo
    Jul 10, 2023 at 4:46

4 Answers 4

2

In our online store, we have tables with a maximum height and vertical scrolling with a "highly visible" scroll button and it works perfectly with the users:

enter image description here

1
  • 1
    Yes, and if this is implemented using the standard HTML tags, it also eliminates having to write any extra code to handle it or to worry about what device it is displayed on. ¶ (To be even better, also allow the user to manually stretch the container to a different height to show more or fewer entries. I use a large 4K screen, and it's frustrating to have a tiny selection of items surrounded by massive whitespace. For frequently used sites I end up writing a browser extension to by default display many more items. E.g. I might add .J-M {max-height 100%;} for the class of a drop-down menu.) Jul 10, 2023 at 13:03
1

No need for that. I'd go with Danielillo's approach; it's easy to understand, easy to implement, and an extremely common pattern.

But...

You mention that users may have many entities in their accounts. Thus, a massive display of tabular data would result in a high cognitive load. I mean, as a user, "What data am I looking at? Which entity? How do these clusters of data create meaning?" And here is where I see where you're coming from.

So I think the problem is not to collapse the table, which is really weird, and as far as I remember, I can't recall ever seeing it.

What you need to collapse is the ENTITY.

By doing this, now I, as a user, can check one sub-account or entity in my account, then collapse it and see another, and I'll always be in control .

Keep users in control.

Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don’t want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary information, and inability to produce their desired result.

Furthermore, if the user needs to compare entities, you can add drag and drop behavior so the user can arrange entities at will and have two open at the same time.

Then again, for the tables themselves, I'd go with Danielillo's option.

0

The reason why currently, we did not any any, is because you don't generally have to "collapse" tabular data. If you're looking for an invoice, for example, once you find what you're looking for, do you really need to collapse it to be able to see the rest?

This is exactly the kind of question to ask the users of the software.

It is entirely possible that the workflow terminates after the invoice in question has been found and the page gets closed. However, it is equally possible that your users use this page as their hub from which they find everything and keep the page open forever, coming back to it many times - and in that scenario, having a method to simplify the page is useful.


I will also say though that as far as UX goes, your technical limitation of only loading 10 items at a time is going to be the more frustrating one. If I want to reach the last entry in the list, the current "show 10 more" -> wait for the list to update -> "show 10 more" -> ... is going to be endlessly more tedious than a "jump to entry" input field or just being able to scroll down there.

0

If you had more than one section/table in a page, the collapse trigger is important. Imagine if user click the expand button in the first table and there are hundred of data there. It's would be effortful for user to scrolling down to see the other table/section on that page.

In my opinion, user behaviour could be like this:

  • See the datas on the first table
  • Expand the first table
  • Collapse the first table
  • See the datas on the second table
  • Expand the second table
  • Collapse the second table

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.