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?

  • 3
    Hi and welcome to Stack UX! First note, the question in your title doesn't match up with what you're asking in the question at all. Second note, can you explain more about what you need? Check out the faq and tour pages as well as this question on User Experience Meta to get an idea of how to ask good questions.
    – elemjay19
    Commented May 15, 2013 at 19:01
  • 1
    Please don't give me the noob smack down, I've been in this field over 30 years, and have participated in these sites since before they were launched. There's two questions here - the one designed to grab attention, and it's a legit question, and the sub-question - if side-scrolling is bad, what are the other options. I'll edit to be more clear, but please don't assume people are noobs and deserving of the boilerplate reprimand.
    – Jasmine
    Commented May 15, 2013 at 19:05
  • 6
    I'm sorry if my comment comes across that way, that wasn't my intention. I was confused by what you're looking for with your question so I asked for clarification. Since this was in the "first posts", I also included links to useful resources, there's no reprimand there.
    – elemjay19
    Commented May 15, 2013 at 19:08
  • Oh sorry I didn't realize it flags people as noobie posters. Sorry to get all testy :)
    – Jasmine
    Commented May 15, 2013 at 19:34

3 Answers 3


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.


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.


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.

  • Well yes, I'm lucky enough to be in a position where I have the time to give my users what they need, and the time to actually figure that out. I'll be doing that exact meeting a little later today and prioritizing everything and finding out the common use cases. I'm finally in a position where "a lot of effort" isn't frowned upon, and I gotta say, it's kinda nice. We can do whatever it takes, in this case.
    – Jasmine
    Commented May 15, 2013 at 18:59

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