Improve visibility of currently-executing-line indicator about codecombat HOT 14 CLOSED

Hi. I would like to work on this bug, would someone please assign this to me?

from codecombat.

You can't be assigned an issue if you are not a collaborator of the repo.

from codecombat.

Hi everyone.

I tried to approach this issue and came up with a solution. Now I would like to know your opinion. I consulted some non-programmer friends that occasionally use things such as CodeCombat to learn programming. The feedback that I got from them was mostly confusion about the yellow colored lines and less about the actual executing line. After getting this feedback I came up with the following approach:

The check marks next to the executed lines clearly highlights that this code was already executed. Additionally to that I changed the color of the executing line to green, added an animation (from Twitter Bootstraps progress-bar) and made the color span the whole line instead of just the code. This shows better the activity that is going on there and both colors as well as gutter images support each other in getting a meaning.

Please let me know what you think and I'll submit a pull request.

from codecombat.

Maybe we can just tell the player that the arrow means "now executing" when, say, he goes through the tutorial and whenever he hovers the arrow out of curiosity? @dkundel 's proposal sure is very visible, but spamming heavy highlights and ticks on everything is kind of over-stimulating.

I suppose it isn't always possible to make something intuitive to the very end, and educating the players a bit seems like an easy and effective way out.

from codecombat.

An optimal UX shouldn't actually require to explain too much so I disregarded that option although it would be a possibility.
I tried to reduce the highlight of the executed lines to a minimal and made the check marks adapt better to the background. I tried to kind of stick to the style that was started with marking the comments on the side. My current view looks like this:

from codecombat.

Hmm, one thing that comes to mind is that we often show current statement execution for several different statements within the same line, not for the same line all by itself. So the background highlight probably shouldn't be for the whole line there, but rather just the currently executing statement. I wonder if the green striped design will be as clear with less contrast if it isn't always connected to the gutter arrow?

I kind of like the checkmarks on the side (but I'm no designer). We could merge that in and start UX-testing it to see how it goes.

from codecombat.

I see. Keeping the changes and just going back to highlighting the executing statement it would look the following:

I think it would work but it's harder to see the actual slow moving animation. I could increase the color by setting a higher alpha value which hover would make statements written in light blue (i.e. comments) harder to read.

from codecombat.

Comments won't ever be currently executing, though, so that would be okay. Want to submit a pull request and we can start trying it out?

from codecombat.

I like the improved contrast at 0.35 opacity, but at least to my eye, I want it to go way up, to something like 0.65:

Thoughts?

from codecombat.

Would work for me but I tried it on three different screens for some it's hard to see the this. It depends on how intensive your colors are. In general I think we should give it a shot and see how users react on it.

from codecombat.

Ah, the curse of different colors on different screens. We could also try changing the this color to something else? I can't see the problem on any of my three screens with my two eyes, but my eyes aren't the best at colors.

from codecombat.

How would a light red look like for the this statement?

from codecombat.

I've got the brighter green and the light red in. I can't see the red at all compared to black 'cause I'm colorblind, but whatever, the contrast is there.

from codecombat.

Thanks! Looks good :)

from codecombat.