Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have created below UI controls... but I am not sure if they are really user friendly or not... so overall they should look good as well as user should be able to understand moment they see that these buttons are the controls through which I can controls/adjust the camera

This is what I have already:

Current Screen: ![enter image description here][1]

Below are the screens I thought of changing to:

1) ![enter image description here][2]

2)![enter image description here][3]

3)![enter image description here][4]

4)![enter image description here][5]

5)![enter image description here][6]

The Up and Down arrows are the buttons which move the camera. But the Camera in between is not doig anything its not a button... its just representing an icon.. I have added this icon to make this more clear as the current screen looks confusing to me.

Please suggest!

New Designs created reffering comments below: Option 1 ![enter image description here][7]

Option 2 ![enter image description here][8]

{Removed Images for Data Privacy reason}

share|improve this question
In my personal opinion, the arrows look like they scroll through the content in the box above. –  lineplay Jun 12 '14 at 17:20
thanks!!! Appreciatte your suggestion... and any comment about the Camera placement?? or how I can make it more visible or easy to understand for a user that it controls Camera Movement –  AT - UID Jun 12 '14 at 17:30
I agree with @usingtheinternet , buttons would make more sense if they would be transperent over the camera image with up arrow being at top right corener and down arrow being down right corner. –  skmasq Jun 12 '14 at 17:31
Another suggestion would be more explicit with instruction, e.g. "Adjust Customer Camera Position" saying that arrows work as position adjustment controls, or just "Adjust Position" because you already stated that it's Customer Camera section of page and adding to that I would put camera icon next to section Title. And If it's possible putting words up/down will increase the speed user will know what to do. –  skmasq Jun 12 '14 at 17:33
New designs: IMHO arrows for sure. Looks like it works with your tech limitations. Perhaps play with width and color a bit? –  Itumac Jun 17 '14 at 17:04

1 Answer 1

up vote 5 down vote accepted

Reconsider the whole paradigm. No matter where you place those arrows, they will not offer a user friendly experience. First, placed outside the box, they are out of context... only slightly but still. Second. The click to move is not nearly as effective as a drag on the camera image to move it.

I suggest you make the image draggable to set adjustment. This lets the user simple move it as they see fit with out arrows at all. You can hover indicators and instructions like I have here if the help.

I realize this may not be technically feasible and arrow controls are necessary. If that is the case. Hover them over the image and make keep them next to each other for minimal mouse movements.

enter image description here

I placed the controls center bottom so they don't conflict with the customers face. (assumption on my part). Finally, These are just 30 second mockups. For final design I would consider something like this :

enter image description here

Hope that helps.

share|improve this answer
I really like your design... thank you so much for that... the only problem with this is... on video/object you cannot put another div –  AT - UID Jun 12 '14 at 18:28
Thanks! I am imagining the problem there... There might be a way around it yet. This is a stab in the dark but look into using an iframe wrapper over the controls. Hit stack overflow for possible tech solutions. Best of luck. –  Itumac Jun 12 '14 at 19:24
I have created another alternate referring your design... can you have look at that too?? –  AT - UID Jun 12 '14 at 19:26
I have updated my question with new screens –  AT - UID Jun 12 '14 at 19:28

Your Answer


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.