Currently I'm working on creating an interface for a web application. The main menu is at the top, a sub-menu is collapsible on the left side and another collapsible bar (pretty thin) on the right side. This setup leaves a lot of space on large screens in the middle area. We have a few views that consist out of a list with items the users create themselves.

Now the thing is that the rows in the list do not have a lot of information in them and if I stretch it over the whole horizontal space between the left and right menu it looks pretty silly (little information scattered very spacious).

How can I handle a situation like this best? Is the best practice here to stretch it, only use part of the available space and leave the rest empty or are there other options?

enter image description here

  • 3
    Do you have any wirefames that you can share which will assist us in giving inputs
    – Mervin
    Commented Mar 3, 2014 at 8:38
  • Good idea, will add one in a minute!
    – Levi
    Commented Mar 3, 2014 at 8:49
  • Your rep might not allow you to add one, best would be to host it to some image hosting site and someone with sufficient rep can edit your question and add the image
    – Mervin
    Commented Mar 3, 2014 at 8:51
  • 1
    Its a very common problem with applications dealing with data tables. Thanks for bringing this up! Commented Mar 3, 2014 at 10:49

1 Answer 1


Going by your navigation I would assume that the sub menu on the left hand side does assist users in navigating the content and is more important than the content on the right hand side.

Hence I would recommend keeping the left hand menu expanded at all times which will utilize the screen space and not require you to stretch out the content in the entire space.

This will allow the user to quickly navigate as the sub menu will be among the first thing he will notice while scanning from left to right.

That said you can allow the user flexibility to collapse the sub menu by providing a collapsible option which allows him to use the full screen estate if desired.

enter image description here

This can be particularly useful if the user has a smaller monitor or screen and hence might not be interested in the side content as opposed to the main content

  • The menu on the left is indeed meant to be used to navigate through the content of the current view. Users can also add certain views as favorites, which are accessible from anywhere through that menu. The menu on the right side is a feed where users can see what other people in their group are doing and notification which are relevant to them. So what you are saying is that the menu on the left should be open at any time unless the user chooses to close it himself? This sure is worth a try. Do you also have tips to use the vertical blank space? Some lists contain only a few items.
    – Levi
    Commented Mar 3, 2014 at 9:41
  • @Levi does the number of columns remain the same?
    – Mervin
    Commented Mar 3, 2014 at 10:19
  • No, it changes per view. The view with the least amount of columns has 4 and the view with most has 6.
    – Levi
    Commented Mar 3, 2014 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.