0

In my project I have placed the close button in the Title part of the dialog. Almost my project in the final stage, now there is a design issue that in the absence of Title the empty space looks odd. Can any one help me how to resolve the empty spacing in the dialog without title case?

Note: The close button position should not be changed. Since If I change the close button position for this case, It affects the entire dialog UI design.

enter image description here

1

Your current position for the X is in the wrong position for the dialog, which is why it is looking odd. See how it is not so much of a problem just by changing its position slightly.

enter image description here

Also remember that this X is just a duplicate feature that does the same thing as an explicit Cancel button (the duplication is fine because many users expect this in the top-right of the dialog).

All I did was implement one of the Gestalt principles of visual perception - Proximity. In your image the X is closer to the text than the border of the dialog, which is why it was being perceived as belonging to the text. So all I did was ensure that the X is much closer to the corner of the dialog to ensure it is perceived as belong to the dialog rather than the text.

Proximity occurs when elements are placed close together. They tend to be perceived as a group.

  • Thanks Steve. Please refer google gdrive "Rename" dialog, they too have given close button X closer to the text. – Pradeep Aug 26 '16 at 13:43
  • They might be one of the hottest corporations at the moment, but it doesn't guarantee they don't make mistakes.The Gestalt principles of visual perception are based on psychology, so maybe their designers weren't aware of this. Just because they didn't do this doesn't make them right. – SteveD Aug 26 '16 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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