1

I am trying to design an enterprise application and I have a situation where I have multiple (More than 20) tables to be displayed in the page as a result of user interaction.

I cannot limit the number of columns of the table or number of tables that are being displayed as all the information has to be shown and are important and are dynamic and i have no control over it. The problem with the approach is it will result in the following page structure.

enter image description here

If I make the columns as same width it will result as

enter image description here

As you can see, the second table will have too much of unused column space which makes it look bad.

Is there any way this can be done in a way user sees it in a better way visually.

Thanks.

  • I think the second one is better. Just make sure that smaller table's columns have a comfortable with to read data in it – Sashko Valyus Mar 21 at 12:10
  • There's no one right answer for this, unfortunately. But you've got a lot more options than just the two you've shown. Some tables it may make sense to have all columns equal width, some it may make sense for the width to vary. It may make sense to center a table with few columns so it doesn't take up the whole width, but isn't shoved off to the side. It may make sense to put two tables on the same line, and combined they take up the whole width. If it's important enough to spend time on, customize it, if it's not, just pick one size to fit all and move on. – Jason Mar 21 at 12:53
  • are these tables ordered in any way? do they have their own categories / titles? I'm trying to think about ways to order the overwhelming amount of info the user has to deal with. if you can add more specificity here, or in your answer, that may prompt some more answers. – Mike M Mar 21 at 14:17
  • There is no specific order for the data. Its just the data which is the result of scanning some object. There could/n't be heading/titles/categories. What i mean is in some cases there would be categories and in some case there wouldn't. But if you have a suggestion assuming there would be categories/titles, i am all ears to hear the options. :) – Vikhyath Maiya Mar 21 at 14:38
  • I see...how do users then use this scanning information? do they read, looking across the tables? are they trying to compare pieces of data? copy data to other systems? and how many rows could one table possibly contain? – Mike M Mar 21 at 14:49
2

With a deluge of information, concentrate on some kind of order (if possible), and search / filter. The table widths are less important than the ability to quickly search data.

Assuming you're right in that all the information has to be shown to the user as a result of the scan, all efforts should work towards helping your users find/retrieve, search, and filter. Anything to help them with pinpointing that which is important.

Allow for search.

There must be some meaningful manner in which users are going to seek out relevant information. At the very least, allow a search field, ideally providing advanced filters to pare down information.

enter image description here

Categorize.

Instead of providing ALL the information in one pane, you can categorize, and place into tabs or some organization manner.

enter image description here

layout concerns: You'll still have to deal with tables wider than the viewport in many cases.

As for your question about table layout, my opinion (yes, only an opinion), is to keep tables a specific width, and allow for reponsive table layout for tables with more columns than the viewport supports.

This way you won't have to deal with each individual table and its specific data; if it's only 3 columns, you can have it wider, where you won't need to worry about truncation. If it's 15 columns, you'll still need to deal with spatial limitations.

enter image description here

  • Totally makes sense and seems nice too . Thanks a lot for the detailed answer :) – Vikhyath Maiya Mar 21 at 17:05
1

This is a navigation problem, not a layout problem.

A user confronted with a screen dumped full of different tables will be scrolling not only up and down, but left and right on the page to find what they want. Even if you force them all to be the same width, smaller tables will have columns stretched so wide that it becomes difficult to read a single row, and larger tables may have columns squashed so small they are illegible.

It would be better to create a way to search and navigate between these tables, and only show one table at a time to the user. If the user really must be able to compare tables then perhaps give the option to select 2 for display side by side. You could represent the available tables with a list of contents which slides open to reveal a single table when you click it. Perhaps you could include additional information under the title such as a description and column names (clicking a plus reveals the additional info). You may also want to provide a way to search for specific column names, as well as categories and table names.

  • Yup search is totally an option here. But my problem is with alignments and stuffs. As i specified, i donot have control over the data thats coming in , instead i only have control over how to present in a good visually nice way. There is no relation between tables as such. – Vikhyath Maiya Mar 21 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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