Tapping to hide an image risks opening it instead

[timtfj]

Steps to reproduce the problem

1. On mobile, scroll to any post containing a visible image, or tap to unhide one that's marked as sensitive.
2. Tap the eye icon slightly inaccurately.

Expected behaviour

The image should be hidden.

Actual behaviour

The full image opens.

Detailed description

For me, this happens about 10% of the time if I tap with a finger, and most of the time if I use a thumb. The eye icon itself shouldn't be any bigger than it already is (it's already a bit intrusive), but the area that registers a tap needs to be bigger. Possibly there should also be a dead area around that so a near-miss does nothing.

Mastodon instance

mastodon.online

Mastodon version

v.4.3.0

Browser name and version

Chrome 119.0.6045.194

Operating system

Android 7.0; HUAWEI VNS-L31 Build/HUAWEIVNS-L31

Technical details

No response

[KolyaKorruptis]

I partly agree. The behaviour is rather counter-intuitive: You can tap anywhere on a hidden image to show it, but doing so again doesn't reverse the action and instead opens it. Of course this happens to act consistent with images that were never hidden. But it makes the hide-feature feel like a tacked on after thought.
I don't agree with your proposal to make hiding images the default action for tapping anywhere on the image though.

[timtfj]

I don't agree with your proposal to make hiding images the default action for tapping anywhere on the image though.

Neither do I, and I didn't suggest it! I don't want any change to the current behaviour other than making the accuracy of taps less critical. I simply want to be able to reliably choose between tapping the image to open the image viewer, and tapping the eye icon to hide it. I think making the area a bit larger that registers a tap of the eye icon is the solution, possibly with a non-tappable buffer between the two areas (ie between the eye icon's zone and the rest of the image).

[KolyaKorruptis]

Sorry, I misunderstood. The hide button on the mobile site is 27.14 x 27.14px. This is indeed much smaller than usability guidelines usually suggest: 44px - 48px (Apple's Human Interface Guidelines, Android’s Material Design principles)
Making the hit area larger than the visible button is a good solution for an app, but on the web it would be weird and possibly error prone pointing the cursor next to the button and finding a clickable area.
I personally think it would be fine to enlarge the visible button while also decreasing its opacity, so as not to obscure the picture too much.

[timtfj]

For clarity, I'm talking about the web interface, simple view, in Chrome, on a smaller-than-average phone screen. I've never used any of the apps. I don't see any visible button (or need one), just a tappable icon It's purely about not being able to see precisely where one's finger is contacting the screen, and therefore needing an error margin. Nothing about the appearance needs to change.