Side Panel instead of Dialog
Posted on: 2018-10-04
During my time at Microsoft on the product Visual Studio Online (renamed to Visual Studio Team Services), my team had to build the new dashboard. One feature is the configuration which consists of selecting widgets that can be part of the dashboard with a specific configuration. For example, you could choose a chart with the number of bugs or a widget that display the list of open pull requests, etc. Each widget can be updated once added or removed. The initial idea was to use a modal dialog, and the MVP (minimal viable product) was built using this user interface pattern. I was against it, still against it and I modified it.
My issue with dialog (and modal dialog) is by experience I know it never ends very well. It is even worse with the web. First of all, a dialog often requires to open other popups hence result in many layers of dialog. For example, it can be a configuration dialog which has another dialog to select a user from a list of existing user or it can be a color picker etc. Second, the goal of the dialog is mainly to display information within the context of the actual page. For example, the dashboard you want to add a dashboard's widget. However, these dialogs are oversized and remove visibility of the underlying main page. The modal defeats the purpose. Third, the most dialog does not handle well responsiveness. Changing the browser size or simply being under a small resolution fail. Forth, many web pages that use dialog does not handle well scrolling.
A better pattern is to have a side panel that can open and close. This is what I ended up building for Visual Studio Team Services and worked very well. The configuration or the addition of a widget was simple and allowed a user to drag and drop and the proper location the widget. On the right side, you can select the widget you desire, configure this one and position it. All that with a visibility on the actual dashboard allowing the user to always have in focus what is already in place.
Recently, in my work at Netflix, I had to migrate from an older system to the new one the creation of users. Originally, the design was with a dialog. The problem is that you cannot copy information from the existing list, neither see if a user was already created and it was not mobile friendly (small resolution). I opted to use a side panel. Here are a few interactions possible.
Partner Portal User Management Side Panel
Overall, the biggest gain is the reduction of layer ordering bugs. From Jira to Twitter or other systems that have dialog, there are always issues. It can be an error message that should be displayed on the main page but will be half on top of the dialog or that a dialog opens a dialog that reopens the first dialog creating a potential never-ending dialog. It increases the complexity of the user interface but also in term of a state which can grow exponentially. The simple pattern of the side panel reduces the complexity and increase the user visibility to the main task by not covering information that is valuable to the task.