User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
My client is a photographer, his website contains 3 types of images:
1) Homepage Full screen background gallery images
2) Gallery slider images
3) Blog posts with images
I can't decide which option to choose for each one.
When it comes to enjoying the experience of watching photos, is it ok to use a spinner or should I blur them while they are loading?
You should use the same approach in every one of the 3 cases. Using multiple approaches just confuses the user, so choose one feedback for image loading, not multiple feedbacks for different events.
I would use the blur effect combined with lazy loading (read more here: https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/).
While a spinner is a better indicator for loading, its not really aesthetic to have multiple spinners appear next to each other to load individual images.
Use the blurry photo technique, and consider using a progress bar in certain circumstances because blurry images are indeterminite progress indicators.
Spinners are useful for actions that complete quickly to give an indication that something is happening. When actions are going to take more than a second, you should provide an indication of progress. Progressively loading images (blurry -> crisp) does that, however, they don't indicate when the image is fully loaded. For example, if the final image is not high resolution, or is intentionally blurry (a common technique), the end user might not know that the image is fully loaded.
Implementation Matters
Not all implementations of progressive image loading are made equal.
According to this article, Facebook uses a technique to quickly load blurry images for profile cover photos that are representational of the final image. This is great because on slow connections, users still have an idea of what the image will be once it's loaded. The article describes how you can achieve the same thing.
Medium also uses the blurry images technique for loading images in blog posts, though their implementation seems less usefulness than Facebook's. Imagine that you're on a slow network, or your connection gets interrupted: how useful is seeing a non-representational blurry image?
Augmenting blurry images with progress bars
Flickr also uses the blurred photo technique, however you can see in the image below that they also use a progress bar to indicate how much of the image is loaded:
This addresses the original issue of not knowing when an image is fully loaded. On slow connections, this can really help.
I'm not suggesting using progress bars on each image when loading a series of images (like on the home page, or in blog posts), but when loading an individual image it can improve the user experience. I expect a common use case on your client's site is that visitors want to be able to load a higher resolution version of pictures by clicking on them. In this case, including a progress indicator helps let the user know how far along the loading of the image is.
Much has been written about the need to load page content quickly, with some studies showing that even an extra half second delay can lead to a 20% increase in page abandonment.
The purpose of any loading progress indicator, whether a simple spinner or a more complex system, is to give feedback that the page is, in fact, loading, thus reducing the user's perception of time passed and giving them a reason to wait. For this reason, however, progress indicators have come to have a negative connotation as users correlate their appearance with a lack of overall site speed.
Conversely, the blurry image approach is meant to give the impression of speed in loading without actually increasing page load time. Especially on pages with multiple large images, this approach works because it gives users content to focus on while waiting for other content to load. It provides faux speed to the user by giving the impression of faster loading without necessarily delivering extra speed.
It's worth noting that there are several different implementations of the blurry image approach, each with its own load time and usage considerations.
Pectoralis Major's points on the utility of lazy loading and the necessity of using a consistent approach across pages are well-founded, and should be adhered to if at all possible.
Late Update:
Since the images are in high quality/resolution, they could take some time to load for mobile users, so I did this:
1)Load blured, low-resolution images.
2)Lazy load.
3)If the loading takes more than 3 seconds, add the spinner to save 1-2 seconds of users attention.
Since images are much lighter and easier to load, I only used:
1)Blur.
2)Lazy load.
Worked as a charm, thanks to everyone for helping!
