1

I am designing an Android & iOS app which are supposed to look similar (as much as possible). Some screens have left drawer:

enter image description here

One of the requirements is to have modal screens (on top of other screens) that have a left drawer and a close/back button. The question is where would it be appropriate to put such a button?

Is this acceptable (right close button):

enter image description here

Improve this question

2 Answers 2

Reset to default
2

Material Design According to Google, drawer menu's (or navigation drawers) don't require a close button. Interaction with the content still visible on the right or by pressing a link in the menu will close it.

iOS Apple doesn't have any official guidelines on drawer menu's.

Pushing content aside This is a popular interaction you can see a lot on Dribbble. The drawer menu pushes the content right. The hamburger icon moves with it. Interaction with the button or the still visible content will close the drawer. No close button is displayed.

So, a close button is not necessary perse, it's optional.
But if you do want to add a close button, where to put it?

Mac vs Windows A great way of deciding where to place elements is to think about where your users would expect it taking in account any other conventions. Problem with this is that you can seperate people on this subject into windows users and mac users. Windows users would expect it in the top right corner. Mac users are used to it being on the left hand. Although the Windows group is larger, it is not a safe to assume the right side would be the best.

So you can't really fall back on solid conventions, what can you do?

I think keeping it as close to real world physics as possible is the answer. You do this by keeping context with animations and simulating real behaviour.

Sliding over
If your navigation drawer slides over the content from the left, I would put the close button in the top right corner. When closing a real drawer you push on the outer end, not close to the closet. Also, the animation draws the eye from the left to the right.

Pushing content all the way to the right
If your navigation drawer pushes the content all the way to the right I would put the close button in the top right corner for the same reason I mentioned above.
However, if your content is still partially visible I would strongly recommend considering not using a close button at all.

Fading layer on top
If your navigation fades full screen on top I would place the close button on the same spot the hamburger button was.

Looking at your design I see both hamburger icon and close icon. What does the hamburger icon do at this point? So answering your question if that is right: no, not in combination with the hamburger icon still visible.

Hope this helps.

Improve this answer
1
  • Thank you @Paul for the detailed answer. My problem is that I may be required to display drawers on secondary screens (screens which are on top of primary screens and have to allow to navigate back to the primary screen). So the difficulty is to design a navigation that will support both closing of a screen & opening of a drawer on the same layout. On Android this less acute as the back button is always available, but for iOS I must give the user the ability to go back. What do you is the right way to achieve this?
    – Doron Yakovlev Golani
    Dec 7, 2016 at 15:05
-1

Not sure about iOS, but on Android only the root screen of an app can have a drawer. On non-root screens, the up (not back) button goes in the corner instead. As an Android user I would be extremely confused to see a side drawer in some sub-screen of an app. So if you want to work to the material design guidelines (and match what users will expect) you need to change your design.

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.

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