User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Here's a picture of my site:
Now, ignoring the "erased" stuff, is there any way I can make this interface be reasonable? It will never fit on the screen no matter what I do, even if I go to 2 lines per row, which is tricky using ASP.Net Datagrids - I would have to write a custom template, no big deal but I thought I'd ask the experts first!
Again, the question is, how to make a reasonable interface for this data if side-scrolling is not the way?
Side-scrolling a Table is Fine
There’s nothing wrong with side (horizontal) scrolling of tables. Users of Excel do it all the time. You just need to have fixed (non-side-scrolling) row headers to identify the rows no matter where the user has scrolled in the table. That is, the table should by default have “frozen panes,” to use Excel’s term.
Like maps, Gantt charts, and various other forms of data visualization, tables are inherently two-dimensional. It's best if these visualizations use a simple, standardized, and consistent way to view content horizontally and vertically. Building for horizontal scrolling allows users to set the window size to what they want for their conditions, rather than forcing them to adopt a width you've dictated.
Side-scrolling Prose is Not
The rule against horizontal scrolling in web sites applies to prose not tabular content. Making users scroll sideways to read each line in a paragraph makes for a lot of scrolling around, which is a pain. It also can make it difficult to print out the content in any reasonable readable way. You also, obviously, wouldn’t want users to have to scroll to the right to find a side bar menu or other key controls or content. That’s not where users expect the sidebar menu to be. What they expect on the right is irritating animated advertisements to be avoided. But, again, that's only for prose-oriented pages, not tables.
Discoverability?
Your main challenge is to make the availability of side-scrolling obvious to the users. Because it’s underused in web apps, users may not think to look for the horizontal scrollbar. Users are used to doing the F-pattern scan of a web page, which means they could miss the scrollbar which tends to be in the bottom right. It may be sufficient to borrow a mobile technique of truncating the rightmost column to signal there’s more to see beyond the right margin. That could prompt users to look specifically for the usual a control to move sideways. Testing would help you find what is necessary.
Alternatives?
That said, there are alternatives to side scrolling that may be better in your case. You’ll find them in the answers to a more general form of your question at Best way to display more table columns and rows than I have room for? As a first-cut, estimate which alternative means the least clicking and dragging for your users for their typical tasks, and make that your prototype for initial testing.
Without understanding what the actual data is it's tough to recommend how to collapse but chances are users don't need to look at all of these columns at the same time. In fact since there is a scroll right now they can't look at them at the same time so you could easily swap out the scrolling interaction with the ability to collapse columns.
So, I'd do what Benny suggests and make a list of the priority of the data and more importantly which columns need to be compared to each other based on the use cases of the user. Then you can make some guesses about what columns must be expanded by default and which can be collapsed.
And for columns that are empty, I would auto-collapse those by default and somehow indicate that they were empty so the user doesn't have to open each one of them to check.
Horizontal scrolling is not OK when displaying data. Instead you need to implement data visualisation that reveals more the wider the viewport, and less the narrower the viewport. Implement drill-down techniques, responsive web design and adjust font sizes, white spaces, margins, paddings and borders to make your data understandable in any case.
To do this right, mke a list in descending order of importance to show in the grid - and you'll come long way in designing for the future and for your users. It takes a lot of effort, but your users will love you for it.
