4

I've been working on this plug-in to be included in an iFrame on a real estate investor website. However, I am torn in the decision of how to provide the user with the action of viewing the full size version of an item. I am currently using a lightbox, which is not 100% complete at the moment; however, the real issue is the action item for the user to click to trigger the full-size view.

Currently, the user can click on the image and it will open up the lightbox with the enlarged version. However, I can't help but feel there is a better, more intuitive way in providing the user to access this view. Currently, there is no call to action. They just have to hover over the image and realize it is a link. Granted, I could note "Click image to enlarge" somewhere on the page, but I am open to something a bit more original. Possibly an 'enlarge' icon in the upper right of the image?

What do you feel is an intuitive method of providing the user with a means of enlarging an image?

You can view the interface in my testing environment.

3 Answers 3

5

I would include a magnifying glass icon (with a plus sign inside) that is displayed in the corner of the image when you hover over it. Clicking the image still does the actual enlarging, but you have more visual cues than just the "hand" cursor.

4
  • Adding to this, I was initially confused by the "hide" tab you have overlaid over the photo. It wasn't clear to be that the tab was associated with the below metadata because the two are visually styled very differently. If you bring those two more inline with one another, it'll help a lot. IMO.
    – Rahul
    Aug 30, 2010 at 15:46
  • If possible I'd also add "View larger photo" alongside the magnifying glass.
    – Rahul
    Aug 30, 2010 at 15:48
  • Good point, the Hide icon does feel out of place. I will go ahead and redesign that to feel a bit more similar to the metadata box. The magnifying glass is also an idea I've been toying with, just wanted to see if there were other action items which might be a bit different than other sites. Thanks for the feedback! Aug 30, 2010 at 16:45
  • The drawback to coming up with unique implementations for UI is that the user is always going to have an easier time with actions they recognize. The magnifying glass is all over the place, so if you display one users are going to recognize what it is for. You could probably get away with just using a plus(+) sign in the corner if you really didn't want to use a magnifying glass. Aug 31, 2010 at 13:48
0

Like @LoganGoesPlaces suggested.

This is from a site I put up last week.

lightbox with zoom

0

I am not a fan of the magnifying glass icon because I think it's not aesthetically pleasing, which may matter for images... I'm not even sure it's all that informative as a magnifying glass can be kind of cryptic to some users.

I personally think people at this point are used to clicking on an image to see a larger size. One thing you could do though to prompt that this is possible is to open the page with the image slightly larger than the container, and using javascript shrink it down to fit in a second or so via some kind of animation to indicate there is more of the image than is seen. Some people think of animations as gimmicky but if they inform the user as to UI possibilities while leaving the interface uncluttered I think they can be useful.

Another option would be small text below the image that simply says "click for larger image". It doesn't intrude on the image and can be pretty subtle so as not to be intrusive. That approach also does not require any javascript.

Your Answer

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

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