Plots: no clear connection between "circles" and plots view

[maxagin]

It is evident that users are confused about what the circle beside the EXPs is for. Also if the user opens Plots, but no EXPs are selected, the Plots view is empty and the user does not know how to add EXPs from the Table view. This issue is partially resolved with the ability to add experiments from the Command Palette. However, the education regarding how both views should accompany each other is missing.

References:

• https://www.notion.so/iterative/Dan-Martinec-feedback-for-VS-code-689d8945e5f54bdc8f6e064a06fccb28#c0b8c0d19ee943aea59af390cd169c71
• https://www.notion.so/iterative/Mikhail-Rozhkov-VSCode-DVC-Ext-106392d8bb9d4b69b02755419b8fe823#de2532d6020b43668de533f66eab07f1

I would like to propose a solution for both cases when the views are opened for the first time.

 

👉 Show a short explanation tooltip beside the EXP's circle when the user first time opens the EXPs table view.

To display the EXP in the Plots view click the circle beside the EXP name. Button text example: Got it

Do you have in mind any other functionality that we would like to show upfront?

 

👉 If no EXPs are selected and the user opens Plots, show information (use illustration for better understanding) that explains how the user can add EXPs to the Plots view from the EXPs view along with the button that adds EXPs from the Command Palette.

To display EXP in the Plots view activate the circle beside the EXP title in the Table view. You can add max 7 EXPs to the Plots.

Alternatively, click the button below to add EXPs from the Command Palette.

Figma

[mattseddon]

Related to #2041, #1958, #1383

[shcheklein]

We've introduced the ribbon to mitigate this. Users now should see it and be able to pick experiments there. (so, circles in the table become secondary or ternary after the side panel and the ribbon).

I also would try to avoid "first time show tooltips / overlays, etc" - it means that interface is bad in the first place. (thus e.g. ribbon was a better solution).

Saying that we can def keep implementing additional hints in VS Code style (when screen is empty for example), implement tooltips like we discussed, etc, etc.

[sroy3]

We've introduced the ribbon to mitigate this. Users now should see it and be able to pick experiments there. (so, circles in the table become secondary or ternary after the side panel and the ribbon).

Probably a controversial idea, but since we have the ribbon, how about we completely drop the toggling from experiments? The bullet would be a simple indicator (the color is the same from plots to experiments). That way, there is no danger of someone could toggle/untoggle an experiment and then wondering what happened (especially if the plots webview is closed).

[maxagin]

We've introduced the ribbon to mitigate this. Users now should see it and be able to pick experiments there. (so, circles in the table become secondary or ternary after the side panel and the ribbon).

Here we are covering a situation when no EXPs are selected.

---

so, circles in the table become secondary or ternary after the side panel and the ribbon

The first view to open is the Table. The selection of EXP/s for Plots needs to be unable and clear enough from the Table view I think. This is why I have combined both views here.

---

I also would try to avoid "first time show tooltips / overlays, etc" - it means that interface is bad in the first place.

This is something that you can find even on very well-crafted applications. A most popular question is: What are those circles for and why does nothing happen when I click on them? The simplest way to solve this issue is just to explain. I am sure this will be appreciated :)

[maxagin]

Changing this:

To this: Added: "You can add max 7 EXPs to the Plots."

[mattseddon]

2382 will help with this problem.

[shcheklein]

Probably a controversial idea, but since we have the ribbon, how about we completely drop the toggling from experiments?

I think we can do that. Since it's implemented it's fine probably to keep even though there is not enough value at the moment. Tooltips after you toggle and when you hover on it can help a bit also.

Here we are covering a situation when no EXPs are selected.

It means we can and should solve that first (show ribbon, show better empty screen etc) before we go and introduce band aids with overlays and guided tutorials.

[maxagin]

2382 will help with this problem.

How exactly @mattseddon , since the problem is that the behaviour of the visual elements is not clear?

[mattseddon]

Feedback was also received on April 29th before the "Experiments Selected for Plotting" indicator was added to the table.

[maxagin]

It means we can and should solve that first (show ribbon, show better empty screen etc)

This is exactly what I am proposing - "show better empty screen"!

show ribbon

Showing elements outside of context especially for the first time, won't bring any clarifications to the user. It is why I would like to believe that the proposal is good.

[maxagin]

Feedback was also received on April 29th before the "Experiments Selected for Plotting" indicator was added to the table.

This is right @mattseddon , but I want to mention that the top section has really poor noticeability and for the new user that clicks on the circle/EXP name this won't help at all.

[maxagin]

👎 (@mattseddon )

Personally, when clicking on the circle I am looking at the same spot and do not see anything that changes on top. Tests now.

[shcheklein]

This is exactly what I am proposing - "show better empty screen"!

right.

your suggestion looks too heavy. VS Code has empty screen and guides on them but usually they look softer.

• if we introduce ribbon on the empty screen it might also mitigate this w/o making too heavy tooltips, guides, etc.

[mattseddon]

How exactly @mattseddon , since the problem is that the behaviour of the visual elements is not clear?

See the demo in #2388

[sroy3]

See the demo in #2388

It feels like this was the missing link between both webviews.

[shcheklein]

More feedback from Dmitry:

Select plots. How to get the plots that I need? I was miss-leaded by the checkboxes and end up using this trick - select the exps I need by checkboxes, right click on “Plot and Show”, then click to the “Plots” icon to finally see them. Just “Plots” does not work, it does not work for a single exp 🤪 Super confusing experience. Later, Ivan showed me that the checkboxes are not related to plots and I suppose to click to the small round icons instead 🤦‍♂️

Another source of confusion - checkbox menu works differently for a single selected item and multipole items. I still do not understand why.

[maxagin]

Another source of confusion - checkbox menu works differently for a single selected item and multipole items. I still do not understand why.

(me) The context menu in case of a single EXP should have both Plots options - Plot/Plot and show. This also needs to work if the user just right-clicks on the EXP (without selecting it). Also, the right-click does not need to remove the row hover style.

[maxagin]

First of all, we can update the DVC: Get Started / Plots Dashboard, I think this will be already helpful. We can explicitly mention and show the screenshot of how to select the EXP for Plots.

The draft

Select (click the circle beside the EXP name) one or more up to 7 experiments in the table view to visualize in the Plots Dashboard. screenshot Use DVC: Show Plots from the command palette to open it. or table's row context menu

Screenshot example (do not use this one):

---

This suggestion has been added to the main description. Relocated to https://github.com/iterative/vscode-dvc/issues/1958

[dberenbaum]

Probably a controversial idea, but since we have the ribbon, how about we completely drop the toggling from experiments?

This has my vote. What about going even further here and dropping the experiments section from the sidebar altogether?

More generally, between the sidebar and experiments table view, it’s not obvious what each of the radio buttons, checkboxes, and stars do and why there are so many for each experiment. Why are the radio buttons in the experiments section of the sidebar if they control the plots?

[shcheklein]

Thanks @dberenbaum .

Let's keep it for now. First of all I doubt it would change the adoption / experience much (we have a way bigger onboarding issue), but more importantly it was and it is important to have a glue between the table, experiments, and plots. It's important to see the color <> experiment. And I think we need to see this connection in multiple places. All this give additional information, helps navigate, gives flexibility in how users setup their workspace (split, or only side panel, etc). Do we want to allow toggle? Again, I would keep even as an extra way to get people into plots + if they use split it makes it easier.

I would say, the ribbon was made initially as a band aid. And if anything, I would at some point reconsider its existence in the first place.

---

To make this ticket more actionable:

I think the only possible item that is left here - show some additional information "tips" under the table in the VS Code style about the plots panel and circles to toggle things.