Allow zoom on picture in mobile view

[Globulle]

Sometimes it's not convenient to define panels on a page (one single fullpage picture for example). Then it becomes really hard to read on a mobile device. It could be interesting to allow page zooming. It could be useful to see details on a panel too.

[mhkeller]

This would be a little tricky but should be doable.

[mhkeller]

I kinda like how some sites do a pinch zoom and then when you release it, it comes back to normal size. Do you think that would work?

[mhkeller]

This one will be a bigger lift though since if you're already zooming in on mobile you have to stash those scale values.

[Globulle]

Do you think that would work?

Yes I think that could really help reading the pages. Thanks!

[tsouk]

If I could upvote this issue, here it is: upvoted.

I think pinch zoom is the de facto way nowadays to look into more detail. Ideally we would have the option to do exactly what Instagram does, as people will default to that.

Also, the tap-swipe has confused almost every person I have tested this on.

[tsouk]

this looks promising, but I am having trouble adding it to the mix:
https://github.com/manuelstofer/pinchzoom

[mhkeller]

Ya natural behaviors have certainly matured since this first came out. What do you mean by tap-swipe? The panel-to-panel mobile navigation? What has your testing suggested as a more intuitive way?

[mhkeller]

@tsouk Lay out how you think the default should be since it sounds like the idea is to replace swiping from panel to panel is not coming across to readers. This issue was originally for just zooming in a little more but still preserving the panel-to-panel navigation.

How instagram currently works is you can zoom in with a two-finger pinch then if you release one finger you can pan. but you can't reach all of the image at that zoom level by panning. For this, are you imagining that from a page-view, a user two-finger pinches into their desired zoom level then releases a finger and pans from panel to panel?

In that scenario, the amount the person moves their finger would have to be on a scale as opposed to one-to-one pixels. Let me know what you're thinking since an improvement would be good.

[tsouk]

Yes that is what I meant; that "tap & swipe" sentence was a bit mystical and it's because I have changed things, sorry.

But my point is that most people will try to pinch zoom on a mobile, even on an iPad, and that doesn't make the image bigger now, instead it zooms you to the first panel. Sometimes it happens by accident that a user will pinch-zoom on the first frame, the swipe event is picked up, and they are taken to the first frame believing that the pinch-zoom worked. So the next thing they do is try to pinch out. Then they are confused.

I love the current interaction but people actually need to be told/trained somehow, and I hate giving instructions over my comic book chapters.

I think the Instagram UX is also not ideal for comics. It doesn't allow for a relaxed reading when you zoom in as you need to have a finger on that picture all the time. The reason they've done it is so you can't easily screenshot things, I believe.

I think a good compromise would be similar to what Chrome mobile does when you load a plain picture:

• Pinch-zoom will zoom in and when you lift your fingers it keeps it zoomed. Then you can pan around with one finger.
• Double tap can zoom in a frame as single tap does now. We can use the nice masking features but it needs some UX testing. I think when zoomed in a frame if a user tries to pan the mask has to dissolve, so you can freely look around. Still this is the trickiest one.
• When zoomed in, double tap will always take you to the full page view.
• On full page view, swipe takes you forwards or backwards a page, as now.

Not 100% on this obviously, needs some guerilla testing.
I could ask my UX people at the BBC to give it a go, they might have some advice.

[mhkeller]

So this seems like three changes:

• Current single taps become double taps. Should be fairly easy since most of the behavior seems to be the same, with the caveat that we'll have to test it and see how it feels
• Pinch-zoom will zoom in without any masking and the ability pan. The page needs to know it's in a pinch-zoom mode and thus a double-tap anywhere will zoom out, not tap into a panel.
• Eliminate swipe panel-to-panel. A swipe will take you to a different page

Does that summarize it, at this stage at least? And yes, any other UX opinions would be great.

[tsouk]

Yes! Well broken down.
I would add to the last point

• Eliminate swipe panel-to-panel. When in pinch-zoom mode a swipe will pan, when not in pinch-zoom mode a swipe will take you to a different page

[mhkeller]

Sounds good. I started doing some of these on the new-ux branch. On the double tap i get a screen flash that is a bit annoying...

[mhkeller]

fyi i added hammer.js to handle these mobile touch events