User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Where should the close [x] button in circular modal form be placed?

Circle Modal

share|improve this question
up vote 5 down vote accepted

Where users would expect it - in the top-right corner (outside the circle, near the point crossed by the normals of topmost and rightmost parts of the circle).

Alternatively, use a thin slice at the very bottom, clearly marked 'Close' (rather than [X])

share|improve this answer

Draw a square inside the circle and where the right-top corner touches the circle, place the big nice "X". You can put the "X" in a small circle also that comes over the content circle.

share|improve this answer

Two options:

  1. A smaller circle abutting/joining the larger one-placed at the top right side. The form should be aligned and non-disturbing.

  2. The same smaller circle at the centre right side - so it's a obvious extension of the larger circle, abutting the larger one.

If in case you intend to add the phrase "Close" both the smaller circles can be replaced by a more oblong or round rectangle that once again seamlessly matches with circle form.

share|improve this answer

I would suggest that you use one/both of the two below methods to go about doing what you want:

  • Include a small slice which has close clearly written on it (similar to what Kai suggested). You could place this at the bottom or at the top right corner of the circle.
  • You could also handle the click event for the modal area which closes the form when clicked on it. And you could display a message like 'You can also click outside the form to close' on hover of the slice that I mentioned above.
share|improve this answer

Most users as people said will expect to see the "x" button at right top corner but my advice is to make it visible enough.

When you see these pop ups and the "x" is not found or seeing easy it's bad and you make the visitor unhappy instant.

So choose wise the difference between colors and make it easy and clean so the visitor can see it instant.

share|improve this answer

Your Answer


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.