When using a grid for a web app, does a sidebar /side tray fall within the grid or outside of it?

Question

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.

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.

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

Answer 2

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.