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:

old screen shot

(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:

new look

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

  • I promise I will. I'm just hoping to catch more than one fish :) Commented Nov 7, 2013 at 17:04
  • Good nice question by the way. :D Commented Nov 8, 2013 at 7:41

2 Answers 2


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

  • 1
    Thank you !! Those are some GREAT ideas. I'm gonna have to come here more often. Commented Nov 7, 2013 at 16:32
  • rats. what is with this "only edit for 5 mins thing". I'm gonna start on shapes. I'm a coder so writing code is not much slower than wireframes, etc. (I'm a one guy shop). Maybe some swooshes on the top,bot to indicate RH,LH. Commented Nov 7, 2013 at 16:40
  • 1
    Glad to hear it. New here myself :) Hope the shapes work out for you then, good luck! Commented Nov 7, 2013 at 16:43
  • 1
    +1 to different shapes, and I would suggest shapes that infer the handed-ness. Left-pointing triangle vs right-pointing triangle.
    – Erics
    Commented Nov 8, 2013 at 11:24
  • My first stab is to just shift the little black/white dots (showing piano key color) to the right or left. It's pretty strikingly obvious now which is RH/LH :) I'll try for something maybe a little glitzier soon. And try to get a screenshot up. I was kinda hoping for more answers, but this IS a good one so too late you other fish... Commented Nov 8, 2013 at 16:40

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.