Page MenuHomePhabricator

Test if replacing the blur effect with pixelation makes loading feel faster
Closed, ResolvedPublic

Description

This should be perfect for an A/B test with random users. Goal: Find out which method feels fastest.

A: Show them the loading animation with the current blur effect.

B: Just remove the blur effect and let the browser decide how to scale the thumbnail (usually bicubic). That's what Google Maps does, by the way.

C: Use nearest-neighbor image rendering[1]. Yes, I really mean that. That's a very common trick in game development, made popular (but not invented) by Minecraft. There is a chance that big, square pixels make a better, less distracting user experience than any type of interpolation.

D: Remove the thumbnail and just show the empty, dark background till the image is loaded. Maybe add a progress spinner like Lightbox does.

Personally I think C would feel faster and less distracting. The current blur effect does have strange effects to my brain (and I have read and heard similar stories from other users): My eyes immediately start refocusing the obviously out-of-focus image but can't work it out. This is really distracting and makes the loading time feel longer than it is because I'm so focused on something that I should not care about.

[1]https://developer.mozilla.org/en/docs/Web/CSS/image-rendering


Version: master
Severity: normal
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=71553

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:34 AM
bzimport added a project: MediaViewer.
bzimport set Reference to bz69609.
bzimport added a subscriber: Unknown Object (MLST).

I don't see how something like this could be A/B tested. We could use some sort of a microsurvey (which does not exist at the moment, although the UX research group intends to develop something like that as I understand), ask the user to rate loading speed 1-10, but there are just so many factors influencing loading speed, from network connection to screen size to image details to cache warmness... we would require a huge amount of data to make this statistically valid.

Or we could do controlled user tests, in which case we can set up an identical environment, but it is resource-expensive and does not scale; and again, getting just 2-3 tests is not necessarily representative.

(In reply to Thiemo Mättig from comment #0)

C: Use nearest-neighbor image rendering[1]. Yes, I really mean that. That's
a very common trick in game development, made popular (but not invented) by
Minecraft. There is a chance that big, square pixels make a better, less
distracting user experience than any type of interpolation.

Note that no current browser supports image-rendering:pixelated. (Chrome 38 will support it; no other browser vendor seems to be working on it currently.)

Gilles subscribed.

Thinking a bit about this, the only practical way of doing such a test is to create a video showing each loading experience, and ask users to score them for speed. (Technically, HAR files could be used to ensure an objectively identical loading experience that's not influenced by network speed, cache status etc, but all currently existing solutions for replaying HAR files are rather complicated.)

Change 185830 had a related patch set uploaded (by Gergő Tisza):
Drop distracting, extra-blurry blur effect

https://gerrit.wikimedia.org/r/185830

Patch-For-Review

Change 186158 had a related patch set uploaded (by Gilles):
[WIP] Variant logging

https://gerrit.wikimedia.org/r/186158

Patch-For-Review

Change 185830 abandoned by Thiemo Mättig (WMDE):
Drop distracting, extra-blurry blur effect

https://gerrit.wikimedia.org/r/185830

Facebook is apparently also starting to use a Gaussian blur for image placeholders: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

While I have a feeling they got the idea from us, they still don't talk about verifying the user effects (speed perception, activity level) and comparing it to other ways of rendering the placeholder, or having none. It still seems based on a hunch that it's better than the alternatives. It's kind of a self-fulfilling prophecy if other large websites do it inspired by media viewer or facebook without A/B testing the effects, we shouldn't take such a trend as validation that one way or the other is superior for the user.

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Jdlrobson subscribed.

(Patch is WIP so doesn't need review)

We should probably remove this, i don't think the extra code weighs up to the possible benefit, especially with how much faster the internet has become since.

Good candidate for T77349

Jdlrobson raised the priority of this task from Low to Medium.May 15 2024, 12:17 AM
Jdlrobson moved this task from Backlog to Triaged on the MediaViewer board.

I would like to reiterate that the way the blur effect is implemented actively makes the users wait longer. It's called unblurWithAnimation and intentionally takes 300 extra milliseconds to fade out the blur effect. That's often longer than it took to fetch the data. Just removing this delay would reduce the waiting time for everyone.

I would like to reiterate that the way the blur effect is implemented actively makes the users wait longer. It's called unblurWithAnimation and intentionally takes 300 extra milliseconds to fade out the blur effect. That's often longer than it took to fetch the data. Just removing this delay would reduce the waiting time for everyone.

100% agree

Jdlrobson raised the priority of this task from Medium to High.May 15 2024, 2:16 PM
Jdlrobson added a project: patch-welcome.

Change #1032011 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MultimediaViewer@master] Remove the thumbnail blurring

https://gerrit.wikimedia.org/r/1032011

Change #1032011 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Remove the thumbnail blurring

https://gerrit.wikimedia.org/r/1032011

Blurring now removed (option B). We could still change the image rendering setting if we want to (option C), but I think we should wait a bit to test this out first

TheDJ claimed this task.

Think so yes. If anyone wants to change anything else, we can start a new ticket.