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
I have 4 tab container in 1 page and Users have to use scroll bar because lack of the space.
The problem is There is already scroll bars in the grids and the design looks horrible.
1-) I hate scrollbars on dashboard applications and I dont want to use it.
2-) I really need your ideas that how can i use disappear the scrollbars with a great design ideas :)
Here is the SS, The problem is as you can see the scrollbars in the the red lines;
There's a couple of things going on here:
The scroll bars are too close to each other on the right hand side - there needs to be some separation between them so that the ones associated with tables are clearly related to the tables. I would also try lightening the colour between the tab containers to separate them more clearly.
Because of the colour scheme, it's not even obvious which part of the scroll bar is the 'handle'. Is it the darker or the lighter part? Maybe because the arrows are dark, I was convinced the handle was also the darker part - until I saw the right-most bar has two similar dark parts, meaning the handle must be the lighter part (as you'd normally expect in a dark theme) and page must be scrolled halfway down. Scroll bars shouldn't appear ambiguous, but for some reason I got misled here.
Here's a quick modification showing these changes:
As for ways to get rid of scrollbars altogether, then options might include
Overview vs Detailed view: Allow users to toggle between Dashboard and Explore mode. Because what you have now isn't so much a dashboard mode - there's too much information here for a dashboard. The dashboard mode should show essential information at a glance (highlighting anything I need to care about), and shouldn't need scrollbars. If this was on an actual monitor on a wall somewhere, would you show the same information?
Pagination rather than Scrolling, but that's not so friendly is it?
More & Less for each table. Expand to show all items, Collapse to show top 5. This is a sort of compromise between the Overview vs Detailed option.
Expand & Collapse for each grid. Collapse one grid to a single bar to give more space to others. This could be a per-user customization, but might not get rid of all your scrollbars completely depending on the amount of data. Alternatively, let the user customize which panels are shown at all.
Full screen option per grid. Again, another compromise that lets the user focus on the data of interest in a full screen mode, in a way where you shouldn't end up with nested scrollbars.
I'm sure you can think of more options along similar lines that are suitable for your particular scenario.
Before you waste time redesigning anything, you should test the design with current users to ensure that this is actually a problem
I hate scrollbars
This fact should have nothing to do with your decision to use a particular component. What if you hated buttons? Then you'd be in trouble.
Too often, designers get too focused on particular design elements because of personal preference, or because of a single comment by a stakeholder, whereas in reality the users don't care about that thing and suffer from different problems.
We think that users share our likes and dislikes, but more often than not they don't.
I recommend having some test users carry out some key tasks that involve interaction with these tabs. If most of your users encounter issues associated with the scroll bars, then think about a redesign, otherwise you might be wasting your time.
