I'm a "lone developer" in need of some UX advice. I'm working on a piano practice program and currently show notes like this:
(argh, please note that these are shrunken images of the real thing)
The notes are colored according to the key signature (C,D,E,F,G,A,B are always certain colors regardless of octave)
And right hand / left hand is indicated by the outline color (red is right hand, blue is left hand).
The problem is that the outline introduces a pretty ugly aliasing effect. Without the outline, it's looks like this:
Some other elements are slightly prettier now, too. My goal is to have only the left hand outlined with a faded light blue transparent background grouping them together. Right now, I only have a start at this with a light blue transparent "shadow", sort of. It still needs to be clipped, and extended into a full "surrounding background"...
This way, when your left hand hops up into the right hand area, you'll see it with the light blue transparent surrounding background.
So am I on the right track here? Do you folks have any better ideas about how to separate the hands? Using color, lines, any ideas would be appreciated...:)
EDIT: Ok, here's what I got now. It's a little bit weird (kinda looks like a bunch of dig dug characters!) But I'm stickin with it for now. I tried little arrows, but in black and white, they don't show up so well and look arrow-y enough. I appreciate peoples' help!!