1

The scenario: An enterprise software platform uses a collapsible left panel for its navigation and a collapsible right panel to show customer info. The customer info panel would be used side-by-side with the information in the main section.

When fully collapsed, there is a lot of room for the main gridview.

Three column screen with side panels collapsed

When fully expanded, the panels push the gridview's content in. We thought this wouldn't be much of a problem.

Gridview with columns fully expanded, looking tidy

But, that's not how gridviews look in real life, right? They're looking more like this:

Squished grid view

The question: The left nav can collapse when the mouse leaves it (and re-expand when the mouse enters), but what should happen when the user opens the customer panel, and there isn't really enough room to compress the gridview?

We thought about opening the panel over the gridview (vs. pushing it) but it seems like the right-most gridview content will get covered up, and the user wouldn't be able to see it without hiding the panel, which isn't ideal.

Customer panel covering part of the gridview

Improve this question
6
  • Did you tried using horizontal scroll only for the table? What are the maximum number of columns you have in you table?
    – Alam Khan
    Commented Jan 18, 2022 at 4:01
  • It's an option for us... some tables go on very, very long. Our users would rather have scrolling than lots of clicks to get to the information.
    – Izquierdo
    Commented Jan 18, 2022 at 13:04
  • 1
    How do you solve the problem of large tables on a smaller Screen? Because in effect all the right panel does is making the main area smaller - the same as if the user would view the table on a smaller Laptop. - The same solution could apply to both (e.g. horizontal scrolling, pivoting data, clustering data in multiple views ...)
    – Falco
    Commented Jan 18, 2022 at 14:33
  • Can you give more context? What do users do with this view and when? What are the important parts, do users even show and hide content or do they leave it as it is provided by default?
    – jazZRo
    Commented Jan 19, 2022 at 11:06
  • One use case: the customer panel will contain contact info and things like the customer's allergies and preferences. The user of the system will be calling the customer and reading items from the table over the phone to confirm that they still need each items and that their selection is ideal. Is that enough context?
    – Izquierdo
    Commented Jan 19, 2022 at 14:19

6 Answers 6

Reset to default
5
+100

The correct layout depends on your user needs in context (what is exactly the scenario ?).

  • Do they need both the information in side panel and data table at the same time ?
  • Do they need all the columns of the data table ? Can they rely on the first ones if the side panel hide some ?

Case 1 : The user needs all the columns of the grid view, and rarely customer info.

I would choose the side panel that go over the grid view.

The user can find customer information without changing the page and can close the side panel after that. enter image description here

Case 2 : The user needs often the first columns of the grid view, and often customer info.

I would choose the side panel that go over the grid view.

Because in most case, it doesn't hide the information the user needs.

However, if this page is designed only for this scenario, we could find a better design where from start the user doesn't need to open the side panel.

Case 3 : The user needs all the columns of the grid view, and often customer info.

I think about two different ways.

  1. Implementing a responsive behavior for the data table and let the side panel push the grid view. When it becomes too small, the data table changes to tiles. This way, the user can still access everything in a clear way. However, there is more "layout shift" when opening-closing the side panel. enter image description here

(Vuetify data table for example, https://vuetifyjs.com/en/components/data-tables/)

  1. Change the page layout and incorporate customer info before the data table. We could fix the customer information and the data table header to keep them visible when scrolling. enter image description here
Improve this answer
1
  • There is so little known about how it's being used or how many items are shown in the grid and customer info, this answer shows the importance of that information before being able to provide an answer. While I don't like the idea of changing the grid to tiles, which can be very confusing, I like the last example with the customer info on top.
    – jazZRo
    Commented Jan 19, 2022 at 11:01
2

Put the customer information into the lower right corner, as a flyout menu which can be opened and closed with a click. And make sure to add extra scrolling room in the main area, so one can scroll the whole content into view with the information overlay being open.

In this way the overlay will always take up a minimum of space, regardless of a wide or long table.

View of a table with a flyout overlay in the bottom right corner

Improve this answer
3
  • I really like this concept. I wonder if it gets confused with in-app chat, which we don't support today? But everyone using our system will be an existing customer, so they'll learn quickly...
    – Izquierdo
    Commented Jan 18, 2022 at 15:00
  • @Izquierdo The placement and icon are probably what's reinforcing the chat appearance. Pinning it on the top left with an (i) icon or something might help convey that it's the source of all the records you are viewing rather than separate.
    – Nathan Rabe
    Commented Jan 19, 2022 at 15:03
  • 1
    @Izquierdo you can do some testing with another icon and maybe a rounded square instead of a circle. Furthermore you can add a floating hint for first time users (like the tutorial on first visit in many apps) which reads "Contact Information is here ->" -- Or alternatively you can start with this panel expanded by default, until the user minimizes it the first time and then save his preference.
    – Falco
    Commented Jan 21, 2022 at 11:02
2

What problem is your interface trying to solve? Only user testing or observing real-world use can tell you for sure, but there are many common patterns you can use.

I've worked on many similar interfaces over the years, and while the ideal solution depends on your users and use cases, there are some common themes that should be applicable.

The nav on the left is transient in usage so it doesn't need to occupy space in the UI (beyond the width of the collapsed view). It can cover the primary UI for the couple seconds the user interacts with it, and then collapse when done. This is a win/win since you don't need to devote much space to this element, and you don't have to reflow the UI constantly when the nav is opening and closing.

If the panel on the right contains mission critical data, you should plan your layout with that in mind. Yes, that might mean horizontal scrolling, but it's not the absolute evil that people claim it is.

The odds are quite high that your users will be familiar with spreadsheets (in all their horizontal scrolling glory) and will likely want something similar in this interface. If you are going to try to do something "better" you have to define what better means for your users and then you'll have a direction to focus your layout.

Maybe you want to speed up some action on this page so you have an opportunity to move the columns around so that the most important ones are on the left to reduce how much scrolling has to happen. Maybe you have multiple use cases all trying to use the same interface and need to let the users select which columns they see, so that if they really want to go wide you can see if there are trends and then iterate (one random user vs. the whole customer service team). Maybe values from the columns are being cross-referenced with other data points and you need to explore floating panels that aren't locked to a specific side. The only way to know for sure is to see it in action in the real world.

Improve this answer
1

Now that it's clear what users actually do with this I understand your current design better. Users will be using this on a desktop computer so there is no need to talk about mobile screen sizes. They benefit greatly from having overview while they are talking to customers. There can be a lot to show about the customer and the right panel seems to provide enough space. So the design makes sense to me except from the collapsed customer panel. Transforming this into a small arrow won't make it easy to click, and for newcomers it can be unclear what it is or contains. The first change I suggest is to make this bigger. The second is to make the table as wide as it needs to be and use a horizontal scroll when needed.

enter image description here

Don't let the customer panel overlap the table. It can be annoying when information is partially obscured. When people are on the phone their attention is already occupied so don't make them think how to get rid of that annoyance. Adjust the visible space for the table whether the customer panel is shown or not. So not the table is responsive but the container around it is. The table still claims the same width and requires its container to add a horizontal scroll bar. This prevents content from shifting and needs at most a bit of scrolling to stay focussed on a particular column, instead of having to rescan the whole table because the layout changed.

enter image description here

I have to assume that the table is the best way to present the data but if there are too many columns it can become a problem. Perhaps then you should look into a way to split the data up into smaller chunks, maybe multiple tables with columns grouped by category. Or even a filter for the columns to show or hide can be an option. It depends on the needs of the user though what to suggest here.

Also if the horizontal scroll concerns you, there are other ways to scroll besides the default scroll bar. The following idea shows a zoomed out view of the columns below the table with the current scope highlighted. Clicking or sliding makes it possible to quickly change the scroll position of the table. It's just an idea (badly designed and maybe too difficult to implement). It can also be a table of contents with clickable items that scroll the table into position.

enter image description here

Improve this answer
0

Move the customer info button to the bottom of the blue sidebar. When clicked the user should be taken to a profile page with the rest of the info.

You don't need the customer info present and available at all times as it is now.

Improve this answer
5
  • 2
    We have some cases for it. For example, a customer service agent calls a customer and walks through their order line-by-line to confirm each item before shipping. The customer panel provides the info on who to call, at what number, and other important details.
    – Izquierdo
    Commented Jan 14, 2022 at 22:15
  • I would do a bit more research on how the Customer service dashboards trends are, and again you need the customer details once, no need to keep on showing the number once you have called them.
    – Imran Khattak
    Commented Jan 15, 2022 at 13:19
  • Also, I believe tables are not very useful when columns or information exceed a certain limit. Try using Timelines and Modal popups effectively to provide Customer Service people all the information they need.
    – Imran Khattak
    Commented Jan 15, 2022 at 13:21
  • @Izquierdo you should put this information in the question. How the Info-Panel is used in combination with the main view is very important for a possible solution!
    – Falco
    Commented Jan 18, 2022 at 14:35
  • @Falco I agree, though there are going to be many different use cases and this is just one.
    – Izquierdo
    Commented Jan 18, 2022 at 15:02
0

Opening the panel on the right (covering a part of the table) shouldn't be much of an issue. The user has clicked on an item and their attention is focused on the new panel. The drawback of this approach is if the user needs to compare data from the panel with data from the table.

Another solution to your problem would be expanding the table item inline, below the current table item or replacing it entirely. This would allow you to have multiple items opened so the user would be able to compare multiple expanded items.

Improve this answer

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.