18

Some Material Design apps use the "close" icon instead of the more common "back" icon in the toolbar, for example:

enter image description here

(From https://stackoverflow.com/questions/27125340/material-close-button-in-toolbar-instead-of-back)

Are there any guidelines on this? Or is the best aproach to choose what feels most appropriate?

Improve this question

3 Answers 3

Reset to default
11

Oh, I'm sorry to give you this standard answer on UX.SE, but really it depends.

It depends on whether or not you're closing the page or moving back from the page. It depends on whether or not you're closing the product, because you don't need/want it or moving away from it.

Personally, a closing icon is related to delete and destroy, and that's not what you're doing in this case. You are moving from one page to another either back or forward, which make me feel that arrows are better than X:s. X terminates and arrows navigate.

So if you are navigating - use arrows. If you're deleting, use X.

Improve this answer
9

There are official Material guidelines on this—here.

From the guidelines:

The “X” used in a full-screen dialog differs from an up arrow, which indicates the view’s state is constantly being saved. For example, an up arrow used in Settings indicates all changes are committed immediately without explicit confirmation or cancel actions.

As for its behavior:

Both the discard action (the “X” at the top left of the screen) and the Back button close the full-screen dialog and discard changes.

("Back button" here refers to the system's back button, not the left-pointing Up arrow that is used within an app.)

Improve this answer
1
  • 1
    In short: Use the back arrow when the view's state is constantly being saved, and use the X when another action is required to save the state (e.g. a "submit" button).
    – Joe Lapp
    Commented Nov 18, 2019 at 4:05
5

As Benny says, it depends on the overall navigation metaphor/paradigm of the app. In one app I built, the metaphor was a home page, and the user opened additional windows on top to view details on entities/objects. They were all full screen (not like pop up dialogs), but the metaphor was "layers" instead of navigation steps. In that case, the X was appropriate to remove the top layer and return to the previous screen. In another app, the navigation metaphor was more of a breadcrumb, where back and forward arrows (like a browser) as more appropriate.

So, if your navigation is stack or layer based, I say X

If your navigation is path or graph based, I say Arrows

I think that is why, since there's a layer or z-dimension to Material Design, the app went with the X icon.

Improve this answer
1
  • Disagree. Material Design always recommends stacking / layering screens on top of one another for parent-child navigation, see this page from the guidelines. By your rationale then, we should always use X's instead of arrows. I think @Benny Skogberg's advice is much better.
    – Vicky Chijwani
    Commented May 30, 2016 at 10:06

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.