7

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.

Improve this question

6 Answers 6

Reset to default
7

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.

Improve this answer
4
  • 1
    Decided to have a close button. Seems user expects a close button.
    – user3060
    Dec 18, 2013 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, 2013 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, 2013 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, 2013 at 23:46
10

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.

Improve this answer
3
  • 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, 2013 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.
    – Lovis
    Dec 19, 2013 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, 2013 at 4:24
4

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.

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
1
  • 1
    That's an interesting option.
    – user3060
    Dec 27, 2013 at 4:07
0

I have came across few interfaces which use java script overlay window to display enlarged images. These overlay windows carry controls to navigate forward and back but lack a CLOSE button. You cannot close by clicking outside the image (on overlay windows itself) and there is no CROSS or Close button to click. You can close overlay mode by clicking on the image itself but there are no clues, no directions, no hints that you could get out of overlay mode and continue to read page's content.

An example: http://jacksonchoi.com/archives/100

I find this overlay pattern without a close button confusing and frustrating. However with the persistence it is being used, I feel it is being accepted and perhaps goes through user-testing as well. This site offer user experience and usability solutions and they keeping this overlay mode is rather a surprise. Howerver if I was the subject of a useability pattern, I must have stuck there and wouldn't had clicked on the image unless I had started random clicking which a user does if he feels stuck on a page.

Concluding: it is a bad usability pattern and I would put an X or a text "close" on the top-right corner of the window.

Improve this answer

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.