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 5 down vote favorite

I'm a programmer first, so I'm not very good at these sort of things -- I've been building myself a image resizer/cropper/positioner for my own html pages ... however, most tools I've used that are resizer/croppers -- don't have an added dimension of the actual image viewport. I wonder if there is sort of "standard" for this ...

I want to be able to: - resize of the viewport - resize the image relative to the viewport - position the image relative to the viewport

enter image description here

However I can already see many issues with this

  • What happens if the outer image size is too large -- do the outer controls disappear?
  • Is this confusing to have two sets of controls?

Has anyone run into this usability issue before? (apologies if I tagged this wrong, first time to this part of the stack)

share|improve this question
Are you looking for a tool, or thoughts on how one would design a tool to do this? – Peter Jan 7 at 21:12
I'm more trying to address the question, since I've never seen a tool like this before -- If there is an tool, I'd love to see it -- to see if it makes sense for me. – ansiart Jan 7 at 21:14
I've seen several examples of being able to resize and move an image within a fixed frame, but not with the added ability resize the frame itself. Could you provide a little more contextual information about how and why it would be used? – Matt Obee Jan 7 at 22:10
2  
This is for an image within a website. I want to be able to clip an image to a specified height, and then move/resize the image within that clipping container. I'm just trying to combine both interactions into one interface, it seems like there is a method to make it intuitive, but, that method to make it intuitive is not very intuitive. :) – ansiart Jan 7 at 22:16

2 Answers

up vote 2 down vote accepted

Sure, it's not so usable as move + zoom image only.

I believe nobody has a frame resize controls because their frame is at maximum size already (I mean 100%). Like it's done for avatars at many sites (twiter.com, etc).

The idea is to show a frame form only (i.e. you should crop to a square picture) and keep the frame at 100% zoom to let you see how it will look from the visitor perspective at 100% zoom.

I think that best solution for your case will be to define a fixed number of forms (and sizes) and let user choose from this set. It's rarely needed to crop a free shape of any size, you can always define a set of defaults.

share|improve this answer
This seems like the most viable option for the "zoom" ratio -- it removes any need for ghosting the outer image. What's the standard for displaying the outer image in relation to the viewport? – ansiart Jan 7 at 23:13
@ansiart did you mean "how outer image is shown"? Twitter, for example, shows it clear inside the viewport and hides it outside so you can always see the real proportions and dimension of the original image. – alexeypegov Jan 8 at 8:20
up vote 2 down vote

I've not seen anything like what you describe, but if I were designing a tool, I'd change what you have above so that:

  • Only the inner viewport had crop markers
  • The width and height were displayed along the side and bottom, and changed dynamically
  • The user could enter a width and height, then move the fixed-size viewport
share|improve this answer

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.