8

I'm working on a legacy webapp that's mainly focused on reporting large amounts of data - ie tables with 20+ columns reporting financial data. The main problem is table layout inconsistency depending on user interaction and data itself. For example, the width of a particular column changes depending on how big the number/word in the cell is or whether the user has decided to sort that column - an ascending or descending arrow in the header messes up the entire column width. User ends up with a "jumpy" table where the navigation is in a different place with each action.

On top of that, it's an international app meaning the translation also messes up the column title width in different languages.

We're requiring a very small minimum resolution, yet most of our tables are about 1200-1400px wide to fit everything.

Are there any guidelines on how to design a business webapp efficiently and more importantly in a way that the usability doesn't suffer?

Improve this question

1 Answer 1

Reset to default
2

What i have done in a similar case is use tables with a fixed layout (so it would not jump), and whatever information overflows is hidden. Then inside the title-tag i placed the complete contents.

Not sure if that applies to you, but i had a lot of columns that were rather small, and a limited set of columns containing some sort of description (so that could easily grow and mess up the layout). So i used the fixed table layout.

The advantage was that the user still had the instant overview, and had access to the complete information when needed (just hover over the element and the title-contents appeared).

[EDIT: understanding that limiting the columns is not option]

Ok, I understand limiting the columns in any way is not feasible. In that case it seems to me the only problem you are having now is with the appearance of the sorted asc/desc icon, and the different translations of the column header.

The first is relatively simple to solve: using css you add a class whether your column header is sorted_asc, sorted_desc or not_sorted and in each you make room for an icon (which in the unsorted case is either not there, or grayed out or something).

The second: would it be an option to use abbreviations? I would imagine in the financial world their could be globally valid abbreviations, and the on hover show the translated value? Would something like that be an option? I am assuming you do not control the translations enough to make sure they are all of similar length. Otherwise the font-size of the column header could be really small?

Assuming that the column header text is not as important, you could let that overflow?

Improve this answer
3
  • Most of my columns are financial data, so hiding overflown information would be a big problem.
    – eagerMoose
    Commented Mar 29, 2011 at 8:06
  • It am not familiar with that business, but are all columns equally important always? Otherwise it could be an option to supply different views on the same data, each with a different set of columns visible (using virtual tabs or something similar to switch views), and on hover the complete row of data is visible? Is that feasible? Secondly, i am assuming the numbers vary from e.g. 0 to very large numbers. Maybe it is handy to some sort of visual/textual shortcut, like >1M (a category of sorts) and on sort show the actual value? Just thinking out loud.
    – nathanvda
    Commented Mar 29, 2011 at 8:20
  • Well, it's a banking app so accurate values are very important. And unfortunately it's not an option to offer a different set of views than what we have at the moment.
    – eagerMoose
    Commented Mar 29, 2011 at 8:30

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.