Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

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.

share|improve this question
1  
+1 for a nice clear question with clear pics. – JohnGB Sep 23 '11 at 9:27
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

2 Answers

up vote 1 down vote

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.

share|improve this answer
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
up vote 1 down vote

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

enter image description here

share|improve this answer
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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