3

I have had this problem for a while. Designed many applications with a sidebar navigation but have never fully concluded on how to best use it within the grid.

enter image description here A, inside the in grid

just included using up a few columns, messes center of rest of grid due to outside margins.

B, outside the grid

not included in grid, actually adds to width (I could always change the grid to keep same width if this is the case)

C, squishing the grid

squishing the grid; the columns and gutter get smaller. showing this one in case sidebar is collapsible.

1

In addition to the "it depends on the app" answer, i'll throw in this: "It depends on the user's preference".

Therefore, if you want to really impress users, allow the option to do all 3. But of course this means more work.

Also, you should consider if the side menu is something that you'd expect users to keep open more often than not. If so, then perhaps an overlay approach might be too annoying/cumbersome for users.

| improve this answer | |
0

It depends on your application.

  • Will you be using any information on the table when doing something on the sidebar? If so, I would go with Method A (with or without transparency). It also seems to be best practices for a few style guides (check Google's Material Design for Navigation drawer at https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-behavior for an example).
  • I can imagine Method B may be okay if you don't have too much data. Method B will also shift the position of items which can increase cognitive workload if the user needs the data when using the sidebar, so keep that in mind. Additionally, if your table is a set size and gets pushed beyond the screen size by the sidebar, the horizontal scroll bar may pop in and out each time, which is very distracting.
  • Method C may be acceptable but has the same drawbacks as Method B (maintaining awareness of data location while the menu is up).

I would recommend going with Method A and treating the sidebar as an overlay (floating element) while leaving your grid intact.

UPDATE:
From the discussion on this answer...

@jonathanb It sounds like your application is different from what I expected. Based on your response, I would actually recommend Method B, but as AlvinfromDiaspar states, you should test it with your users just to be sure. I would add horizontal scrolling (think spreadsheet application), but only to the grid. Keep your sidebar docked to the left side of the application. The reason Method A will not be applicable is because you need it up while the user works in the grid. My initial recommendation was based on the assumption that you only needed the sidebar present temporarily.

| improve this answer | |
  • yeah think of sidebar as a secondary navigation a la Gmail. i always thought the navigation drawer slides over the content, making it not exactly in the grid? – jonathanb Jun 20 '16 at 21:35
  • @jonathanb Correct, it would either be docked to the side or over the grid instead of in the grid. Have you considered using regular menus or did you want the sidebar to be open while the user works in the grid? – Philip Barcelon Jun 20 '16 at 22:11
  • the sidebar would be open while the user works in the grid, so do you think it shouldnt be included? – jonathanb Jun 21 '16 at 1:12
  • @jonathanb It sounds like your application is different from what I expected. Based on your response, I would actually recommend Method B, but as AlvinfromDiaspar states, you should test it with your users just to be sure. I would add horizontal scrolling (think spreadsheet application), but only to the grid. Keep your sidebar docked to the left side of the application. The reason Method A will not be applicable is because you need it up while the user works in the grid. My initial recommendation was based on the assumption that you only needed the sidebar present temporarily. – Philip Barcelon Jun 22 '16 at 5:13

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.