I need some advice on how to implement a XY pad and explaining labels for x and y axis. A XY pad is a 2 dimensional controller that can replace two knobs (which each is 1 dimensional).

Here's a picture:

XY pad

The left text box describes what happens when the dot on the XY pad is dragged horizontally (x axis) and the right text box describes what happens when dragged on Y axis.

My current design requires the text boxes to be on each side of the XY pad. How can I make a visual cue that shows that the left text box shows x axis info and the right shows y axis info without just putting a text label with "x" and "y" above them?

I tried to draw an horizontal arrow beneath the left text box but it felt like it was a scrollbar or something for the text box itself...

Update: I want to keep the area as clean as possible, too much text and graphics that explains the usage of the text boxes clutters up the area.

  • Why not rotate the text for the Y axis so it reads vertically? – Bevan Sep 23 '11 at 10:04
  • I don't think it's a good idea to make users read vertical text, since the explanations will differ from time to time so the won't learn that the y axis always does the same thing. – Henrik Ekblom Sep 23 '11 at 10:08

You could try adding icons that look something like this on the left of the boxes.

enter image description here

The idea is to represent the axis in some way that the person will recognise them as axes and then mark the one you are referring to in some way. Here I've just increased the line weight and changed the colour. I'm sure you can make it look better, but it illustrates the idea.

  • Yeah, sound like something I should try. I'll even try to colorize the borders of the text boxes themselves so they will act as icons. It might work :) – Henrik Ekblom Sep 23 '11 at 9:19
  • @HenrikEkblom: Is there a reason you don't also want to include labels though? Having a clear icon with a clear label is generally best. – JohnGB Sep 23 '11 at 9:29
  • Well, I haven't ruled out to use text labels too, what I wanted to achieve was that the user should only have to have a really quick look at the surface and understand what the textboxes does. But text is probably good, so the user for the first time knows what the icons means. The second time, hopefully the user have learned that :) – Henrik Ekblom Sep 23 '11 at 9:38

Try visualize both a controller (hand movement) and direction:

enter image description here

  • Well, it's a good idea but this software won't be used with touch screens. – Henrik Ekblom Sep 23 '11 at 9:51
  • @HenrikEkblom I think it will be understood easily by mouse users too. – Nikita Prokopov Sep 23 '11 at 10:21

You could visualize axis properties like that.
enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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