Whats a better user experience:
- A scrollable table by using overflow css settings in a DIV?
- A full size table allowing the browser window to do scrolling?
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 communityWhats a better user experience:
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.
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.
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").
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.
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.
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:
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.
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.