1

There is a simple photo gallery:

enter image description here

Clicking on image opens a dialog with larger version of it:

enter image description here

We can do this in two ways:

First:

  1. User clicks on a thumbnail
  2. We show loading indicator over the clicked thumbnail (but do not display dialog yet).
  3. After large image is loaded - we open the dialog and show the image.

Second:

  1. User clicks on a thumbnail.
  2. We open the dialog right away with stretched thumbnail that matches size of the large image.
  3. After large image is loaded, we add it on top of the stretched thumbnail.

Image loading might take anywhere between 0.1 second and 10 seconds, the gallery might be used on desktop and mobile device.

Which method do you think is better? Or maybe there is another way?

1
  • 1
    Just an aside, if you do show the stretched thumbnail you should blur it like these progressive images or put a loading spinner over it still. If the lightbox opens to just a stretched thumbnail people may assume that's the largest photo you have of it and close out.
    – DasBeasto
    Apr 24, 2019 at 12:20

2 Answers 2

2

The second approach sounds better. It will not be necessary to display the thumbnail stretched within the Lightbox. Instead a progress spinner or bar will be appreciated. I prefer displaying the size of the file whenever a download is in progress so that the user is aware of the expected time and size.

2

First

I prefer the first option because I can still see the gallery while I wait for the selected image to appear. Instantly covering the gallery with a large, unrelated placeholder image seems quite jarring to me and interrupts the flow.

Neither experience is ideal, however. Note @DasBeasto's suggestion to use progressive images which will at least show something relevant during load time.

You should also consider ways users might want to browse from one image to the next directly without closing and opening the lightbox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.