15

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?

9

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.

7

There are official 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.)

  • 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 Nov 18 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.

  • 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 May 30 '16 at 10:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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