Improve visibility of currently-executing-line indicator #6

Closed
nwinter opened this Issue Jan 1, 2014 · 14 comments

Projects

None yet

5 participants

@nwinter
Contributor
nwinter commented Jan 1, 2014

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

screenshot 2013-12-31 19 43 39

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:

screenshot 2013-12-31 19 51 29

screenshot 2013-12-31 19 49 46

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
arav93 commented Feb 26, 2014

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

@yangshun
Contributor

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

@dkundel
Contributor
dkundel commented Mar 5, 2014

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:

screenshot-coco

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.

@TecyT
Contributor
TecyT commented Mar 5, 2014

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
Contributor
dkundel commented Mar 5, 2014

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:

coco-screenshot-2

@nwinter
Contributor
nwinter commented Mar 5, 2014

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
Contributor
dkundel commented Mar 5, 2014

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

coco-text-highlight

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
Contributor
nwinter commented Mar 5, 2014

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
Contributor
nwinter commented Mar 14, 2014

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:

screenshot 2014-03-13 18 09 46

Thoughts?

@dkundel
Contributor
dkundel commented Mar 14, 2014

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
Contributor
nwinter commented Mar 14, 2014

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
Contributor
dkundel commented Mar 14, 2014

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

@nwinter nwinter closed this in c076bb1 Mar 27, 2014
@nwinter
Contributor
nwinter commented Mar 27, 2014

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.

@dkundel
Contributor
dkundel commented Mar 28, 2014

Thanks! Looks good :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment