5

I want to know when and why should I use the X or back button on top of the page. And additionally, related to that, how should I judge the transitions, when should a page just slide from the right, or slide up, etc. How should I make those decisions based on rational proven UX heuristics or testing?

I just can't find it anywhere and when I try to benchmark it just feels like there is not much of a pattern between different apps.

Thank you in advance!

Example images below

example of back usage

example of X usage

Improve this question
1

2 Answers 2

Reset to default
4

Question 1: Arrow or X

Generally speaking the arrow indicates that "you", the user, will return to a previous page of a sequence.

If a user selects an action and that entire action is done on one screen then use an "X". That one screen functions effectively as a modal. The "X" closes the modal.

To recap:

Use the arrow to go back if the user needs to move between several screens.

Question 2: Transitions

A transition sliding from the right simulates turning a page. (Except for Hebrew, Arabic, Chinese, Japanese ... readers). This is an understood transition for your users. Sliding down from the top has a surprise element to it.

This is not necessarily bad. It depends upon your user base. Test this. Your users will intellectually understand what happened. The only question is whether they were pleased by it or not. This requires "feeling" questions; a "Which did you prefer?" set of questions.

Improve this answer
3
  • About question 1: What about if the action inside the modal requires more than one screen? e.g.: a checkout process, or some kind of form, should I add some kind of back button, and mantain the X if the user wants to close the entire process?
    – Mateus Miyano
    Commented Jun 8, 2018 at 13:52
  • 1
    @MateusMiyano - yes. You may need both a back arrow and an "X". And, if there is a back arrow, then, when on that (-1) screen the user would need a forward arrow. -- An alternative would be to "back" and "next" buttons at the bottom and an "x" on the top.
    – Mayo
    Commented Jun 8, 2018 at 15:29
  • 1
    I think X and Arrow are too ambiguous, without further UX hints what exactly the user will close with the X, and what is behind the modal. In many cases an explicit button "Cancel Order Process" on the button will be clearer.
    – Falco
    Commented Jun 9, 2018 at 9:27
0

Back buttons are used to direct the user from CURRENT page to PREVIOUS page.

Close or cancel button is used remove a particular display(eg menu, modal, side nav, pop up..etc) from a screen. But in this case, the user is still on that page. Unless there is a redirect link attached.

Improve this answer

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.