1

I'm currently working on a modal in app, that can be display in full screen. I'm having some issue about the way to close this modal.

In the first situation, we can have a “Fermer” (close) button as main button where we can have a custom button if it’s set in the backo. Second situation is only a small “Fermer” at the top right corner like on the onboarding. The third situation is a combinaison of both with small button + “Fermer” main button. And finally, to not have a repetition of “Fermer”, we can put a small button + a different main button “Continuer” (continue). But wouldn’t it confuse the user who might think that it will continue on the content of the modal?

Tell me which option seems the best! Thanks!

modal full screen

1
  • Just add the close button at the bottom as it is the primary action (use "fermer" not "continuer"). Don't add the button in the top right corner too because that will make people think what the difference is and just unnecessarily reduces decision speed.
    – jazZRo
    May 3, 2021 at 8:54

2 Answers 2

2

Consider a floating Close button that is anchored to the top right. This is a standard place where users expect to find a modal Close button. By making the button float, you won't force the user to scroll up or down to close. And, that gives you space to anchor a more action-oriented primary button to the bottom of the screen. Be sure to make the button easy to find and distinct from the other elements on the page.

Example modal screen with a transparent X close button

5
  • The question is about just having one "got it, thank you" close button, which is the primary action and should be the one at the bottom. A button in a sticky footer also eliminates the need to scroll.
    – jazZRo
    May 3, 2021 at 8:47
  • What happens if later on, they need a primary CTA button in a modal? Do they put that in the same place where the user is used to seeing a "Close" button? It's better to have distinguished areas based on function.
    – Izquierdo
    May 3, 2021 at 15:06
  • You would still have both options below: primary action and a close/cancel button to see all available options at once in the same place. Spreading the actions to different locations makes it harder to quickly grasp the possible options. If e.g. the "cancel" option doesn't communicate the escape route well enough it still a viable idea to have that close button in the upper right corner.
    – jazZRo
    May 4, 2021 at 9:37
  • But then you're moving the position of the Close button around contextually, and that breaks the consistency heuristic. It's easier on the user to always have a "dismiss" function in the same location.
    – Izquierdo
    May 4, 2021 at 15:16
  • Yes, I agree to have that consistency. It is just that not everyone immediately translates that close button as a second option opposed to the primary button. Especially elder people.
    – jazZRo
    May 5, 2021 at 7:21
1

If there is no further content that can be accessed from within this modal, I would suggest placing your button at the bottom of the screen. Users will naturally look to return to what they were doing previously and the biggest target you can provide is a button in a logical location.

Perhaps changing the copy of the button to something more casual, like "Okay, got it" or "Okay, thanks" will help to imply that there is nothing more to see in a friendly way.

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.