Vscode: Rename "Debug" to "Run"

Created on 11 Feb 2020  路  20Comments  路  Source: microsoft/vscode

Motivation: new users do not know how to run their apps and are not aware that debugging can be used to achieve this when no breakpoints are set or with Debug: start without debugging action.

  • [x] Rename Debug viewlet and top menu bar to "Run"
  • [x] Gather feedback from insiders
  • [ ] Look into a user study
  • [x] Investigate into changing the icon - I personally would not do this, since users are very sensitive to changes here. However just in case @misolori has some good idea. The overall notion was that we should experiment play should get visual priority over the bug icon.

Current state

Screenshot 2020-02-10 at 15 48 12

debug under-discussion

Most helpful comment

Made the play bigger, see below for before (left) and after (right). I also had to adjust the thickness of the stroke to match the others, before it was a few px above:

All 20 comments

@luabud are you maybe planning to do more of the python user studies in the near future? I am asking since we renamed the Debug viewlet to Run and I am wondering if this will have a positive effect.

@isidorn Definitely! We have one coming up on Feb 20 around the same subject 馃憤. We'll use VS Code Insiders then 馃槉.

I do have an alternate icon (based on @weinand's suggestion) we can use. We can create a custom build for this or enable on Insiders to test this if we want to:

image

@misolori I actually like that icon. Let's just go crazy and push it to insiders. You only live once. I will handle the haters on GitHub.

@luabud great, let us know how it goes. Thanks a lot!

@misolori Yes, that icon is an excellent start. Could we make the "bug" a tad smaller and its strokes a bit thinner. Similar to the round thing on top of the Terminal (remote Explorer icon):

2020-02-12_12-10-45

I actually like the current strokes and size so it is larger than the number notification that can appear on the right corner (number of sessions). But we can experiment with different strokes.

We want to convey the message that with this view a user can "Run" the program (corresponding to the newly renamed menu "Run").
Whatever helps to conveys this message is fine by me.
The new icon shows bug and play arrow with the same size, but because the bug sits on top of the arrow, it "dominates" and says "debug".
Having it smaller like the round things in the Remote Explorer icon, would makes it less dominant, and would convey that "Debug" is just an aspect of "Run".

I can definitely tweak the size and stroke of the bug. I鈥檒l add it to Insiders today.

Great, thanks!
Makes sense Andre.

I've tweaked the icon a bit, it was hard to make it smaller as it became tiny in relation to the rest but this was the best I could get to:

This is now in via https://github.com/microsoft/vscode/commit/e4c77cdd6e98849e17763a5eb73ea1834e739e6c and should be in tomorrow's Insiders

Thanks @misolori I just got the new icon. It works for me.
My only complain is that it looks 10% smaller than the other activity bar icons. Is it possible to increase it's size a bit?

yes, increase the size of the arrow (but not the size of the bug).

Made the play bigger, see below for before (left) and after (right). I also had to adjust the thickness of the stroke to match the others, before it was a few px above:

I really like the new icon. Speaks two things at once!

So far feedback has been very positive.
Thus closing this issue.
However we are of course still listening to feedback and are looking forward to the results of the python study.

We did a run study last week with 8 participants for Settings Sync and one of the scenarios was to install the Python extension and run a python file. Most went to the terminal to run it, when asked to try an alternate way in the editor they used the "Run" menu. Two noticed the green "play" button and ran it that way, and two others went to the debug viewlet (when asked why they both said they've used the debugger before).

@luabud let us know if you were able to run any other quick pulse studies that tested the new updates.

We did! It was with 4 students, 2 went for the "Run" menu at first, and 2 went for the green play button on the top right. When we asked to try an alternate way, two right clicked on the editor, and the other two went for the "Run" menu. On the 3rd time, 3 of them went for the debug viewlet, and one for the run button on the top right - and for this one, the debug viewlet was the 4th alternative.

When we asked about their preference, they all said they preferred the green run button on the top right as it's a one-click solution, and 2 of them mentioned the green colour as being what called their attention.

@luabud thanks for letting us know and for running this study!
Looking at the results it seems that in this study 3 out of 4 participants went to the debug viewlet to start debugging.
In the previous study 0 out of 4 participants did this.

So there seems to be a postiive effect.

Yes, definitely!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mrkiley picture mrkiley  路  3Comments

DovydasNavickas picture DovydasNavickas  路  3Comments

lukehoban picture lukehoban  路  3Comments

biij5698 picture biij5698  路  3Comments

sirius1024 picture sirius1024  路  3Comments