1

I have a main view with a settings button on the top middle part of the screen as follows (please excuse the bad mockup):

enter image description here

After touching this button, The settings shows with animation of it coming from top to bottom (drop's down on top of the main view):

THE SETTINGS MENU COVERS THE WHOLE SCREEN - Very important

enter image description here

My question is where to place the close button?

On the top middle part of the settings view (similarly to the main view?) Maybe on the bottom?

(Would love to hear comments in case you believe the settings menu dropping down is not a good option as well).

1
  • Is there any chance of the menu scrolling?
    – CKH4
    Commented Jun 16, 2016 at 16:27

3 Answers 3

5

At the bottom

Take a look to the image below, and you'll see how placing the button on top will be more difficult than placing it on bottom, even requiring both hands in order to perform a simple touch action

enter image description here

But this is not the only reason (although it's really important)

The close action has to come AFTER the content or at least on a position that doesn't interfere with content. Think on a modal: you'll usually have a close button and quite often, a clickable close element at the top right, far away from content. This is because you need to allow the user to read what he is going to close up to the last millisecond.

Placing it on top would cover most information, more or less as in the image below:

enter image description here

In short

Placing it on bottom (or at least after the content) is the logical and expected behavior for a close button. It's comfortable, requires only one hand and it's easy to reach without any effort. And all this while allowing the user to be aware of what s/he's doing at every time

1

I would put the close button in the centered at the bottom of the screen. This is seen in notification panels of Android < 5 and all recent iOS versions. The same concept is put into the Snapchat menu. You click the menu icon (the ghost) which is located top and center and the menu drops from the top. You can see the menu close button at the bottom center:

Snapchat menu (Photo from the verge)

0

Depending on device the ideal placement would differ slightly. As android has a bigger screen the bottom would be best as its closest to your thumb, where as iphones are smaller thus buttons can be up around the top of screen without there being too much of a reach. But considering the user has tapped at the top middle section of the screen, I would say the best placement is to put it there for consistency as thats where the user will be expecting it to be.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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