what's a good way to show the left/right hand of piano notes in "piano roll" format?

Question

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!!

Answer 1

I think that using only color to differ between something as important as which hand you're using is not the way to go here. The problems with that is:

• Accessability, this would make your application impossible to use if I'm color blind (more common than you might think)
• Items will not be quickly and easily distinguishable, there are a lot of colors in your UI already. If there are few colors and few occurances of them, it's easy, but in this scenario there are so many colors that adding another color won't make that item unique

Two options come to mind (though I'm not a piano player):

• Distinguish between lefthand items and righthand items with different shapes. This should make it easier to tell the difference, as well as allowing you to make your UI cleaner
• Have lefthand items and righthand items separated spatially, meaning you have two separate areas (although they can be close together) displaying the different notes

Edit: What I would try is to do some black-and-white wireframes on paper, and try different solutions. After doing on wireframe, ask yourself "if I couldn't do it this way, how would I do it then"? Then show the different sketches to some people, and without any descriptions just ask them what they think they're seeing. After that you should have a decent guess on what is working, and then you can go about adding color and other visual elements to further increase the usability of what you're doing.

Edit2: Some information about different ways of grouping elements together: http://en.wikipedia.org/wiki/Principles_of_grouping

Answer 2

Really interesting example. The main problem here is colour is overloaded - you're already using 7 different colours, so you can't possible use colour to communicate something else as well.

The obvious thing is to use something "left-shaped" to communicate the left hand and so on. Perhaps use a gradient shading to the left for the left, and vice versa? It needs to be intuitive.

Alternatively, and as long as you're not dealing with crossing hands, you could just draw some kind of line (perhaps just a white fade-out) down the middle between the two hands. The line will move a bit, but should be pretty obvious.

You probably don't need to mark the hand on every single note, in most cases, and especially for beginner music. I'm playing some Rachmaninov atm which has ridiculous hand (and finger!) crossing, but it's really the exception.