Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

There is a link which when clicked displays images as an overlay (translucent black background, center aligned image). Clicking outside the image or pressing escape key closes the overlay. At present I have not placed a close button. Is a close button necessary? This is a website. The images can be of varying size.

share|improve this question
add comment

5 Answers

up vote 8 down vote accepted

It's probably not necessary, that is becoming more and more of a standard for overlays. But if it does become a problem with users, it won't hurt to put a little 'x' in the top right corner - it's out of the way and everyone understands that is close.

share|improve this answer
1  
Decided to have a close button. Seems user expects a close button. –  kadaj Dec 18 '13 at 7:21
    
I agree here. There might be just 1 user out of 1000 that would actually click that button, but I don't think any other user would be inconvenienced by a little "x" on the top right anyway (btw, is it better if it's at the top left it user was using a mac?). –  Daryll Santos Dec 18 '13 at 7:39
    
OS X uses close buttons on the top left edge of Finder windows but the de facto standard on internet is to have the close button Windows style - top right. –  Henrik Ekblom Dec 18 '13 at 8:41
    
There are two use cases: 1- The user wants to play safe 2- The device doesn't have an "Esc" key (mobile) and touching somewhere else might trigger some other action. –  Juan Lanus Dec 26 '13 at 23:46
add comment

Although it has become quite common that overlays close on an outside click, it brings some usability flaws if you don't offer the close button:

  • Users that are new to the internet might be confused or feel lost when they can't find the close button (my mother, for example)
  • On (some android (?)) tablets, these overlays still don‘t seem to work really well, and closing the window by clicking outside is sometimes not possible (don't ask me why, it's just my experience).

Also consider users that are kind of experienced, but never came in contact with the missing close button - what will they do?

With a nice and big enough "X" (or better the word "close"), you wont't have these problems. And I doubt it will seriously break your design.

share|improve this answer
1  
Is the word "close" really better? Windows has been using "X" for quite a long time, and "X" is a localized symbol, or multilanguage alias for close. –  Robert Dec 19 '13 at 0:41
    
@Robert: good point. Don't really know whats better. It was just a "feeling" that words are better than symbols - but some symbols are so common that they're better than words. –  L. Möller Dec 19 '13 at 8:37
    
Elaborating on your mobile comments, sometimes the image overlay is so large that on a small device, there is no room to "tap outside". This can especially be a problem on some of the smaller smartphones. –  Thunderforge Dec 31 '13 at 4:24
add comment

Yes, please include a close button. L.Moller is correct: you need to consider inexperienced users. Also, if the image happens to be too large compared to the window and there is no empty space, then the user cannot click to close the image.

share|improve this answer
add comment

I would make the choice to add a little x in the upper right corner. perhaps on hover since its a web app. Make sure it doesn't distract from the photos if you can.

Here's the part of my answer that's important. TRACK IT!

As they say, "The reason you have a choice is because the answer is unclear"

Use mixpanel or google analytics or the like to track the escape, click outside or the "x" and find out what your user base REALLY does.

Very simple and free to do. If you do so, post back the data you get here. We'd all like to know.

share|improve this answer
1  
That's an interesting option. –  kadaj Dec 27 '13 at 4:07
add comment

I agree with including an 'x', I just recommend putting the 'x' on the overlay instead of inside the top right corner of the image box in consideration of training users to understand that clicking outside the modal can close it.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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