1

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

Below are the screens I thought of changing to:

1) enter image description here

2)enter image description here

3)enter image description here

4)enter image description here

5)enter image description here

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

Option 2 enter image description here

Improve this question
5
  • 3
    In my personal opinion, the arrows look like they scroll through the content in the box above.
    – erik_lev
    Jun 12, 2014 at 17:20
  • 1
    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, 2014 at 17:30
  • 2
    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, 2014 at 17:31
  • 1
    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, 2014 at 17:33
  • 1
    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, 2014 at 17:04

1 Answer 1

Reset to default
7

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.

Improve this answer
4
  • 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, 2014 at 18:28
  • 1
    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, 2014 at 19:24
  • I have created another alternate referring your design... can you have look at that too??
    – AT - UID
    Jun 12, 2014 at 19:26
  • I have updated my question with new screens
    – AT - UID
    Jun 12, 2014 at 19:28

Your Answer

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

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