Designing an Accessible Image Viewer That Reduced Dead Clicks by 17%

Snob.ru is a media platform with more than 6 million monthly visits. Microsoft Clarity showed readers repeatedly clicking article images that did not respond. I designed the interaction flow and UI for a full-screen viewer with image-specific zoom, gallery navigation, and accessible keyboard and focus behavior.

Comparing Clarity's dead-click rate for the three months before release with the three months after it, the rate on article images decreased by 17%.

Role: Product Designer — interaction flow, UI, and developer handoff
Scope: Article images and galleries across desktop and mobile
Evidence: Microsoft Clarity heatmaps and session recordings
Measurement: Three months before release compared with three months after release

Repeated clicks revealed an expectation gap

Clarity heatmaps and session recordings showed readers clicking the same article images repeatedly. The images did not open, zoom, or provide any other response.

The recordings did not explain every user's motivation, but the repeated behavior was a strong signal: readers expected to inspect the images more closely and the interface did not support that expectation. On a platform with millions of monthly visits, this small interaction gap could affect a large number of reading sessions.

Full screen alone would not solve the problem

Opening an image in a full-screen overlay would remove the surrounding article, but it would not necessarily help readers inspect details. I pushed for dedicated zoom behavior rather than treating full screen as the finished solution.

The interaction model became:

1. A reader clicks or taps an article image.
2. The image opens in a full-screen viewer.
3. On desktop, the reader can click the image or use the zoom-in control.
4. On mobile, the reader can pinch to zoom the image itself.
5. If the article contains a gallery, visible arrow controls and the Left and Right Arrow keys move between images.
6. The reader can close the viewer with the close control or Escape and return to the same place in the article.

Dedicated pinch-to-zoom required additional implementation. Without it, the browser would magnify the page rather than provide controlled zooming inside the image viewer.

Defining responsive image behavior

The viewer had to support landscape photographs, tall portraits, galleries, and different viewport sizes without distorting the source image or hiding essential controls. I documented the following layout rules for development:

• Portrait images scale proportionally to fit within the available viewport height, with padding above and below.
• Below 768 pixels, images use the available width while preserving their aspect ratio.
• At 768 pixels and above, images expand proportionally within the page grid.
• Galleries include visible previous and next controls.
• The Left and Right Arrow keys provide the same gallery navigation from the keyboard.

These constraints turned a single mock-up into predictable behavior across image formats, screen sizes, and gallery states.

Accessibility was part of the interaction model

Keyboard and focus behavior were specified alongside the visual design rather than added after handoff:

• Escape closes the viewer.
• Focus remains trapped inside the open viewer.
• Closing the viewer returns focus to the image that opened it.
• The close control has an accessible label.
• Left and Right Arrow keys navigate galleries.

This made the viewer usable without a pointer and prevented keyboard users from losing their place in a long article.

From specification to implementation

I owned the interaction flow, responsive UI, states, and developer handoff. The handoff documented image-fitting rules, zoom behavior for different input methods, gallery controls, keyboard interaction, and focus management.

The most important implementation decision was treating zoom as a real product requirement. It added development work, particularly for mobile gesture handling, but directly addressed the behavior seen in the recordings instead of stopping at a visually complete full-screen overlay.

Result

I compared Clarity's dead-click rate on article images across two equal periods: the three months before release and the three months after release.

The dead-click rate decreased by 17% after the viewer was introduced.

What this changed in my process

The useful design decision was not the modal itself. It was translating a behavioral signal into explicit rules for zoom, responsive image fitting, galleries, keyboard input, and focus management — and then checking whether the original frustration signal changed after release.

This became a repeatable approach for later Snob improvements: identify a specific behavior at scale, define the smallest complete solution, and measure the same signal after implementation.