1

I have a design where an image can be zoomed in in a lightbox. What is the best way to do it on mobile (should you allow it on mobile at all) and desktop?

1

There are a few ways you can do this. I'm not sure if there's a clear 'best way' to do it. That might be opinion based.

Here's a few things I thought of.

  • Have an icon in the corner that indicates zoom.
  • Have a percentage in the bottom corner (like a lot of editing tools have)
  • Show a touch-to-zoom text/overlay when the user hovers the image.
  • Have a +/- button in the corner of the image.

I would consider not using zoom on mobile. Imagine if a user is scrolling through a website using touch and he accidentally hits the photo while scrolling, it will zoom. This can confuse the user.

There's also a great article by Nielsen Norman Group about lightboxes and overlays. Check it out here.

Summary: Poorly implemented overlays and lightboxes are not only frustrating for users, but can also be disastrous for conversion and task completion. Use the five W’s – Who, What, When, Where, and Why – to determine whether an overlay is truly the most appropriate design solution, and how you should implement it.

enter image description here

I always liked this one (personal preference). It's an overlay with zoom icon.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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