Improve visibility of currently-executing-line indicator

[nwinter]

Aether can (in some levels) highlight the currently executing line, as well as indicating which lines have been executed already:

See the black gutter arrow and light blue highlight on line five, and the lighter blue highlight on line three? Really? You're the only one.

In our UX testing, players almost never see this even when it would be really helpful, so it's clearly not obvious enough. Also, I just made up the design as a placeholder, but I didn't make it ugly enough to warrant immediate redesign, so no one has come along to do a better job. If you have an idea for a design that meets these objectives, then let's hear it:

1. It should be totally obvious which line is currently executing.
2. It should be clear that that's what the indicator is trying to indicate.
3. We should be able to indicate which statements have already executed (not just lines, since we can be more specific than that).
4. It looks cool. (Wizardly magic animation?!)

Currently, we're using dynamic marker ranges in ACE to add "executing" or "executed" classes to spans of text (stacking up to three of the "executed" markers to indicate multiple executions), as well as adding the "executing" class to the gutter cell for the current line:

We could get more complicated if this CSS doesn't cut it, but if you have an idea that can be done just by tweaking the effects of those classes, then it'll be easy to try out by tweaking app/styles/play/level/tome/spell.sass

Otherwise, check out how the ranges are done in app/views/play/level/tome/spell_view.coffee:highlightCurrentLine.

[arav93]

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

[yangshun]

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

[dkundel]

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.

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.

[dkundel]

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:

[nwinter]

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.

[dkundel]

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.

[nwinter]

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?

[nwinter]

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?

[dkundel]

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.

[nwinter]

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.

[dkundel]

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

[nwinter]

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.