Responsive table - question about improvement

Bgolden67 commented 8 years ago

Is there any way to alter the table responsive class to add the scroll to the top as well as the bottom of a table? It's never clear to see that there is a horizontal scroll on the table. If it's a long table, it means scrolling down the page to scroll horizontal and then back up to try to find what line you were looking at again. At least if the scroll was visible at the top as well it could be a little more helpful, unless you have a better suggestion for indicating the table is wider than is showing?

Bgolden67 commented 8 years ago

anyone have any thoughts on this?

RobJohnston commented 8 years ago

I have an idea. I've seen others add a visual clue to the right edge of the table to indicate that the table can be scrolled horizontally. Check out this page by the-haystack.com, which builds upon work by 456BereaStreet, which was inspired by MaxDesigns.

Bgolden67 commented 8 years ago

I see a few good examples, I like the one that changes the display format (another example from one of the links (http://blog.cloudfour.com/picking-responsive-tables-solution/)

however, the other option of adding the shadow isn't enough, aside from being purely visual and even then may not always be noticed, if the table is long it still means scrolling down to the bottom of the table in order to scroll horizontal, before scrolling back up to find where you were before. At least if the scroll could be at the top as well, you could at least see right away what columns are not showing.

DK-TBS commented 8 years ago

I’m with Brian on this one; having scrollbars appear only at the bottom is likely to cause problems in cases where the bottom of the table isn’t visible onscreen.

I think we should see if we can convince someone to try and alter the responsive table class so that it includes a horizontal scrollbar at the top as well as the bottom. That would be the most basic improvement, and probably represents the smallest development effort.

At that point, we will have at least mitigated the usability problems associated with the current tables. After that, maybe then we can look into some of the more advanced solutions. Having those developed would probably take a lot longer than the basic fix, but they’re pretty nifty, and probably worth pursuing at some point.

Shout outs to @shawnthompson and @masterbee, just to get this on their radar. Shawn, Mario – have you guys been thinking about the responsive tables at all? I’m guessing it’s pretty low priority compared to all the other stuff you’re busy with, but maybe you’ve had some discussions about this already?

shawnthompson commented 8 years ago

Being a Mac user, I only see scroll bars when I actually scroll on a page.

As you can see from this screenshot, when I view this thread at 1054x608, there is no scroll bar in Firefox. There wouldn't be one in Chrome or Safari either. It's something Mac OSX decided in getting rid because they thought it took up too much real estate. So when you scroll on Macs, the scroll bar appears with low opacity... for a little bit of time.

Curious if @neoinsight did any studies on this.

shawnthompson commented 8 years ago

But I do like the drop shadow on the table!!!!

DK-TBS commented 8 years ago

Ach. Hiding the scrollbars on MacOS is one of the worst decisions I've seen them make in a while, it drives me nuts. The drop shadow stuff would at least help provide a visual cue, making that problem slightly less rotten.

Incidentally, I'm on IE11 on Win8 and none of the shadows show up at all. Sad story.

shawnthompson commented 8 years ago

You need to get a you a Apple Magic Mouse, scrolling is awesome in with it. Just like scrolling on an iPhone or smart phones, they don't have scroll bars either (I think).

nschonni commented 8 years ago

Upstream issues would be https://github.com/wet-boew/wet-boew/issues/3402 and https://github.com/wet-boew/wet-boew/issues/6351

shawnthompson commented 8 years ago

I remember those but neither of them really talk about the scroll bar. Not a fan of styling native browser behaviour

nschonni commented 8 years ago

Yes, both of those are about adding responsive tables functionality to the toolkit, which as far as I know hasn't been done yet. I could be pretty wrong on that at this point though. The scrollbars appear because we don't have a responsive tables solution.

neoinsight commented 8 years ago

@shawnthompson -Hmm, we have seen some horizontal scrolling issues during WET testing, but mostly on mobile, when people simply didn't realize there WERE more columns, particularly when the column margin hit the edge of the screen, thus ensuring there were no visual cues at all.

I too prefer to let the browser handle those kind of things, particularly since there are gestures involved. -We haven't seen people struggling with the bottom scroll bar although I can see @Bgolden67's initial point. Am not totally keen on the visual complexity of adding it at the top too - some of those other solutions posted look really interesting in terms of handling complex data.
The table problem we've seen often, that is far more lethal to task success, is that the table headers don't float. So people scroll down, and then can't map what they're looking at to the header, scroll back up to figure it out, scroll back down to look at the data - argh. But that's a whole separate issue that I should post.

wet-boew / wet-boew-styleguide

Responsive table - question about improvement #274