7

I am building someone a portfolio website for their videos. When you click a thumbnail in a gallery of videos, a light-box no bigger than 65% of the viewport opens to show the video. You click the dark part of the light box to close the video and go back to the gallery. The light-box does not paginate.

I'm now almost done with the site, and have started overthinking one of the UI design choices I made.

It seems intuitive to me at this point to click the dark area of the light-box to close the video and return to the gallery. As it's become a very normalized behavior, but I know I'm biased based on my own experiences.

My other argument to myself is since the video never completely covers the video gallery, and the dark part of the light-box is only at about 70% opacity, you would want to click on the videos to bring them back.

Do I need a close button? Am I taking too big of a risk for user frustration? Would love some opinions or even better, theory, as to why or why I don't need one.

1
  • What's the possible causes of closing? it's because you hurry to move on to next video? or just don't want to see video any more?
    – Frank AK
    Commented Apr 26, 2019 at 6:44

2 Answers 2

15

Think of it the other way: Not every user has the same level of familiarity, and other sites don't conform to the same standards.

Clicking outside the content, or using the esc key to dismiss a dialog vary widely throughout the web.

Many sites have frustrating dark patterns for lightbox content

Oftentimes dialogs (used to collect email addresses / subscribe etc..) will not dismiss by clicking outside, and keep the close button subtle to force engagement.

People visit your site carrying all of their frustrations (baggage) from past experiences. They may not distinguish between video and other lightbox content.

Nielsen Norman Group an extensive article on overlays

Provide a visible 'close’ command to allow users to return to the underlying page.

Make overlay content accessible to keyboard users (by allowing the Escape key to close the overlay, and by providing keyboard access to content and fields within the overlay).

Keeping a close indicator provides a visible escape hatch, and doesn't impede those who just click outside the content.

enter image description here

0
4

There is a certain scenario for which a dedicated button is needed. For video, especially, it sounds like a bad idea to dismiss the Lightbox on clicking somewhere on the overlay background. Because that may happen accidentally, and buffering the same video which just finished loading is terribly painful. This will not be the case for an image, assuming it is a decently sized image.

A couple of other reasons in favour of having a dedicated close button are -

  1. It is more concrete and conveys the function appropriately. Even though the button may not actually function, having it there somewhere in the corner helps convey the message properly.
  2. If page loading is interrupted or slow, buttons can come to rescue for the user because they are visible.
1
  • Thank you very much for your input!
    – Dani
    Commented Apr 26, 2019 at 18:26

Your Answer

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

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