best way to represent horizontal reports?

Question

i need to display reports with various fields, column wise. The length of each column could go along 50px appx. So , the overall report length would go upto 2k-3k px , since i need to display them in the column itself, the user has to scroll horizontally to see the end field. it looks awkward obvioulsy

So, question is , how to display such lengthy records? is their a standard for displaying such reports?

EDIT: I need to avoid scroll if possible. So any better technique?

Answer 1

There's a trade-off here between:

• showing all the data, but having to scroll
• limiting the amount of data displayed and avoiding scrolling

The main thing to ask yourself is if your users can interpret 50 columns of data at once, or if there are different values within the set that different people will want to check on. It also depends whether the intention is to compare values within a row - e.g. Joe Doe makes lots of spelling mistakes, but is good on everything else, or to compare between rows e.g. Fred Bloggs is much better at spelling than the rest of the team.

A few approaches you could consider to tackle this tradeoff.

1. Vertical scrolling - If there are typically only a few rows of data, transpose the report, so there are now a few columns (one per team member), but lots of rows. Vertical scrolling being more acceptable than horizontal scrolling
2. Hide data. Can your users really interpret 50 columns of data at once? You could show a few important columns and have the rest hidden. Perhaps have expandable sections that users can use to show other columns, or drill down into subsections (even if they are a bit artificial
3. Let the users choose. When running the report, let users select which columns they're interested in
4. Customise for user role - perhaps the boss wants to check different metrics to a writer, to an editor, etc. Find out what each of your user types want and create smaller several reports to meet each of their needs
5. Divide and conquer. Split the table into several smaller tables, trying to group related information together. This will make the information easier to digest.
6. Single record view - show a single row as a more easily understood table of information, and then use paging to display each record in turn. If you need to compare between records, perhaps allow several records to be selected and shown in a tabular form next to each other.

I'm sure there are more, but that's hopefully food for thought

Answer 2

Separate the data into two or three types. Like Dependent data or important data type. Use “Tabs” system to show the data in a table. This will avoid the horizontal scroll bars in a table or page.

User will get the required information in different tabs.

Answer 3

You should have to use horizontal scroll bar in my opinion. User easily scrolls the scroll bar to view the other area. But the horizontal scroll bar should comes only the parent div. Then you can avoid the browsers scroll bar.

You don't want to apply scroll bar then go for split the tables