13

Whats a better user experience:

  1. A scrollable table by using overflow css settings in a DIV?
  2. A full size table allowing the browser window to do scrolling?
Improve this question

9 Answers 9

Reset to default
13

A full-size table allowing the browser's scroll bar (2) to do the scrolling of the data is a better user experience, since multiple scroll bars on the same page would tend to confuse users and be a bit infuriating.

Of course, this only applies if the data we're talking about scrolling here is the main focus of the page, in which case, it would be acceptable to have a scroll bar dedicated to that portion of the screen.

Improve this answer
2
  • 4
    Similar to Charles' comment below (but inverse?), a nice touch here is to make the column headers a fixed position once you scroll past them, and anchor them to the top of the page, so the context stays in view. +1 for only 1 scrollbar on the page
    – cbosco
    Aug 17, 2010 at 18:56
  • In general people have a lot of trouble even notice that there is a scrollbar inside the dokument. I've implemented this twice (yeah, how stupid I know) with poor results. Youtube used to have a list of related videos inside a scrollable div but when they removed the scrollbar and revealed all the videos in full glory the clickfrequence went up.
    – Tony Bolero
    Dec 13, 2011 at 14:59
3
  1. Multiple vertical scrollbars in the same browser window can be confusing, especially when using a scroll wheel.
Improve this answer
2

As long as it makes sense in the context of the interface, either method can be used. I try not to use scrolling DIVs within DIVs as general rule, however, as they get messy. When the user scrolling hits the bottom of one DIV, the browser often starts scrolling the next DIV or the page, which can be jarring.

In my experience, a less-intricate interface will have a shorter acceptance/learning curve, all other factors equal.

Improve this answer
2
  • Where is he talking about divs within divs?
    – Charles Boyung
    Aug 16, 2010 at 21:14
  • @Charles, I think I know what he means... I think he is trying to say "scrolling within scrolling". That is, Having the usual browser scroll bar, and then having the additional inner scroll bar for the overflow div.
    – 7wp
    Aug 16, 2010 at 21:46
2

I would say that if you have a very large table of data, the best way to do it is to use CSS to set the overflow on your <tbody> tag in the table. That way, your header (stored in <thead>) will remain visible no matter how much the user scrolls. This will give the user an experience similar to what can be provided in a standard app when viewing tabular data.

I think this is the best solution because with lots of scrolling, the user is bound to need to remember what those column headers are, and if you can make it so they can always see the headers, then you are definitely giving them a better experience (Remember the immortal words of Steve Krug - "Don't Make Me Think").

Improve this answer
3
  • I would agree with you that this is an ideal solution, but I find it becomes problematic when the table contains thousands of rows. The overflow method seems to work rather sluggishly, also, overflow scrolling does not work at all in iPhone browser :-(
    – 7wp
    Aug 16, 2010 at 21:20
  • @NoobTech - I think when you start having tables that size, you really need to consider paging the data. That's going to be slow (at least slow loading) no matter how you handle scrolling.
    – Charles Boyung
    Aug 16, 2010 at 21:39
  • Yes, Paging data was looked at too, but even with a massive table, we found our internal users preferred a huge scrollable table over a paging table. Reason being that it was faster/easier for them to browse through data using a scroll wheel/scroll bar than using a combination of scrolling and/or clicking next/previous page buttons.
    – 7wp
    Aug 16, 2010 at 21:48
2

Happened upon a perfect example of very bad implementation of a scrollable window within the browser window right after reading this post. I think its clear how awkward this is to use.

I first tried to use the outer scrollbar which scrolled all the dogs away, moving the mouse within the inner window scrolls the dogs but now I'm seeing only half of the window and have to go back to the first scrollbar to move it back. Primary content shouldn't be relegated to a small inner frame like this.

Improve this answer
2

Go with option 2. Scroll within scroll always confuses users and its annoying when you get to the bottom and the page flies down.

My question is, do you have any way to sort the data so that the dataset being displayed is smaller to begin with? Either by hiding with a mix of JavaScript and CSS or by using some kind of scripting? Displaying many rows of data is never all that user friendly. Unless the user understands the wonders of ctrl+f, a lot of time can be wasted scrolling around.

You can also think about adding headers that float at the top of the list as they scroll. That way, users wouldn't have to scroll back up to the top to find out what the column names are.

Improve this answer
2

It depends on the usage you envisage.

There are lots of good reasons to avoid nested scrollbars, but there are also cases where the table should be scrolled. Here are some:

  1. Apart from the table, everything else fits on the screen. If this is the case then you don't have nested scrollbars (i.e. the browser doesn't have them), and there might be good reasons to make only the table scrollable.
  2. The main use of the table is to reference some small part of it against something else on the page. For example, you have to fill in three pieces of information based on something in the table which the user has to look for (the 'something' being too intuitive to automate). If you make the whole page scrollable then the user has to search the table for what they want, and then scroll to the top to fill in the info, then search again etc. If you make the table scrollable then the 'filling in' part of the UI stays on screen.
Improve this answer
1

vertical scrolling let the browser handle horizontal scrolling (you should eliminate totally) use css overflow settings to handle.

Studies have shown that user don't mind scrolling down but hate scrolling across.

Improve this answer
7
  • Sorry I can't quite make sense of what you wrote, if I understand you correctly, you are saying to let the browser handle vertical scrolling? As in NOT using css overflow?
    – 7wp
    Aug 16, 2010 at 20:52
  • thats right. If you only need vertical scrolling scroll the entire page and not the div. When a div scrolls in a page it is confusing.
    – Sruly
    Aug 16, 2010 at 21:03
  • I have to disagree with you because of your clarifying comment. I haven't seen anyone really confused about scrolling content within pages in a very long time.
    – Charles Boyung
    Aug 16, 2010 at 21:15
  • @charles have you ever scrolled with the wheel and wondered why you werent going down nd then noticed you were inside a div with scrolling. It happens to lots of people and it's annoying, so unless the contents is long and boring (EULA) it is not a good pratice to scroll it. I stand by my point.
    – Sruly
    Aug 17, 2010 at 6:34
  • Sorry, I've never seen that problem - there's a great visual cue that a div scrolls - a scrollbar. If you can't see the scrollbar right there, then you've got some bigger problems.
    – Charles Boyung
    Aug 17, 2010 at 16:39
1

Generally nested scrollbars should be avoided. The only time they should really be used is if you have controls below the table that might be missed if the table is very long.

Improve this answer

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.