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;

enter image description here

  • Design your dashboard like a kiosk application and you’ll never have to worry about scroll bars again. – Aaron Hudon Dec 24 '17 at 21:05

There's a couple of things going on here:

  1. 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.

  2. 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:

enter image description here

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.

  • 1
    Roger, Thank you for your all perfect ideas. This is the need that i want. Thank you so much <3 – john true Dec 23 '17 at 23:57

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.

  • Thank you for the answer. Well, Actually users told me that that right scrollbar confuses everything. and I can't find a solution over a week. – john true Dec 23 '17 at 17:13
  • Solutions usually come from the specifics of the problem. Did these users provide anything more than a report of general confusion. What specific issues are they suffering from? – dennislees Dec 23 '17 at 17:42
  • I wanted to feedback from users about everything. They reported the design problem. It looks ugly, and make everything mixed. I am 'minimalistic' person also. I don't want to see that scrollbar also. – john true Dec 23 '17 at 17:58

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.