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?
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.
I always liked this one (personal preference). It's an overlay with zoom icon.