1

This is my first project in mobile app UX and UI Design. I have facing problem in placing "close" button on UI. I have got two kind of screens, one like overlay and another one like form submission screen. From my knowledge I have placed "close" icon on top right corner for overlay and top left corner for form pages, In top right I have placed "submit" option for form page.

Please guide me which is good user experience for this situation.

2
  • Can you give some more details? Like, is this for mobile web? or native app? If native app, which platform?
    – Adit Gupta
    Jul 28, 2015 at 9:53
  • It's native application for iOS. Jul 28, 2015 at 10:07

3 Answers 3

7

We prefer a close button on the top right.

90% of the users are right handed and with mobile screens nowadays of 5.5 inches (14 centimeters) you go ahead and try to reach that close button on the top left with your right thumb. Of course you can hold your phone with 2 hands in landscape, which resolves the issue. But you can't expect users to hold their phone with 2 hands all the time.

We realise it's most common for a menu icon (burger) to be on the top left but this is an adaptation from desktop view. These larger mobile screens require different user gestures. Consider different placement of elements according to screen size with media queries.

2
  • Yes I agree with you. But most of the applications like Gmail and Behance are placing close button in top left. May i know the reason for that. Example : cdn.pttrns.com/247/2127_f.jpg Jul 28, 2015 at 10:58
  • It's an adaptation from desktop view where logo and company name where most often placed there, as top left is where we begin to read
    – RobSeg
    Jul 28, 2015 at 11:54
0

Edit: I misunderstood your question as it's about 'close button' for a specific page and not the entire application.

The most preferred place would be on side opposite to your menu, top corner as

  1. Users have that mental model coming from PCs.
  2. You wouldn't want to place close button at bottom to avoid accidental presses.
  3. Not placing the close button at the same side as your menu might result in more usable platform.

To Conclude: Close button at top right corner if you have menu at the left like usual apps.

First decide if you really need a close button in a mobile app? Plz refer this... Why don't mobile apps have a 'close' button?

If the answer is yes, I would like to know the details of the work and will answer accordingly.

0

For the native iOS apps, the right place for the "close" button (which should probably say "Done") is in the top right corner.

Also, consider rethinking your overlays as separate screens, these are much friendlier for the mobile users.

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.

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