2

I'm working a desktop app and I need to display a list of task to the user needs to complete. When clicking on a task (row), a side panel appears from the right to the left to display additional informations and actions related to the selected task. The panel shares the same space has the list since it's related, so it's not an overlay.

We have a lot of column to display and users need to be able to navigate quickly between row to display all the tasks details.

What should be the behavior of the left content (list/datable) when the side panel is displayed?

We have many solution in head but we are not sure which is the good one:

1. Horizontal scroll enter image description here

2. Display only column that enter in the space allowed. If the users resize the side panel, he will be able to see more of less columns enter image description here

3. Push the content under the same row. Many of the articles suggest to push the content, but we don’t really want this behaviors since its reduce the number of tasks displayed and we have a lot of content.

enter image description here

We made many research but we didn't find one that does not answer to our needs:

Improve this question

4 Answers 4

Reset to default
1

Normally clients ask for this kind of a solution when they want the details of one item visible while they browse for other items.

In a nutshell, the No.1 Horizontal scroll would be best because you won't need to worry about the content's responsiveness in the background. Yes, the content will be blocked by the side panel but you will be showing the same details in the panel anyway I guess.

But generally, keep in mind this view is best for advanced users, like Jira. If the users are not very tech-savvy, I would choose a simpler view, even if they have to navigate to another page to view the details.

Improve this answer
1
  • Yes, the information will also be displayed in the panel. It's an interface for advanced users. Thank your for your answer!
    – Leane
    Commented Jan 28, 2022 at 19:50
0

First, a few challenges ;-) :
How do the users use this list? Is it necessary that the details appear for each selection? Usually it is recommandable that the user have control over this, so that you display the details only after the user expressly requested that (by clicking somewhere or pressing a special key).

If it is only necessary to show the details for one task at a time: maybe an accordion could be an alternative? You can still use the whole width of the screen and go to a different row quickly.

Are the actions only accessible in the panel? Maybe they can be displayed at the bottom of the list (I do not know: either it's a table, then at it's bottom, or in some sort of sticky footer).

Having everything, details AND actions in an extra part sounds unnecessarily complex.

Regarding your three options:
There is no rule that forbids showing information redundantly if it makes sense. Put all the information from the columns into the overlay as well. That way the users won't have to remember what is where and can concentrate on the comprehensive overview in the details.
An overlay is the most flexible way to display information if you have to consider variable widths (which you usually do).

Improve this answer
1
  • Yes it's a lots of challenges, Users will open the task list to have an overview of what they need to do. (The details are closed as default). They will open the details to view to see more information or take actions such as postponing the reminder date or add comments. They need to be able change quickly the selection of another task event if the previous task selected has the details opened. Somes actions are still available in the task if the user click on a kebak menu at the end of the row. Regarding your answer, I will consider the option 2! Thank you for answering :)
    – Leane
    Commented Jan 27, 2022 at 19:09
0

Does the user need to see the whole list, when the sidebar is open? If I were the designer, I would do this: Make the sidebar like your first design, and put a dark blurry overlay on the whole list.

Improve this answer
1
  • Yes, they want to be able change between the details of the tasks quickly.
    – Leane
    Commented Jan 28, 2022 at 19:50
0

In our design choice, we opted for a horizontal scroll approach that overlays the main content. A advantage of this choice is its versatility, suitable for both web and mobile dimensions.

The other two solutions present issues with truncation when the side panel consumes too much space, leaving minimal room for the main content.

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.