0

I am developing a phone app with Material UI (using Flutter).

To return to the previous route ("cancel" the current route), when should I use Icon.close (cross):

icon close

...and when Icon.arrow_circle_left in the app header?

icon arrow circle left

7
  • 3
    It depends on whether you open a dialog box or modal window for the process, or whether the process goes through steps. I suspect it's the latter (and therefore Gabriel Serrano's answer is correct), but please clarify.
    – Devin
    Feb 8, 2023 at 15:46
  • I open a full-screen page. It may be counted or not as modal dialog, I don't know whether I should consider every full-screen page as a modal dialog. Moreover, a full-screen page may open another full-screen page. So, we have a sequence of modal dialogs opening each other? What to do then?
    – porton
    Feb 8, 2023 at 17:00
  • as you have said, it's a sequence of pages, so Gabriel's answer applies
    – Devin
    Feb 8, 2023 at 20:02
  • Are these routes a linear sequence? Or are the a tree structure, i.e., easch route branches to multiple other routes. Feb 9, 2023 at 1:29
  • How do you describe the relationship between routes? When a route is opened on another route is the opened route a sub-route? Or a same level route. Feb 9, 2023 at 1:32

4 Answers 4

2

Left arrow seems more appropriate in this case, you are not trying to close the whole flow but to return to the previous route, if you provide a little more context about where are you on the process (Eg. In the first step of a modal screen it might be ok to go back with the cross icon)

But overall the most appropriate is to go with the left arrow icon to go back one step, hope this helps.

1
  • Please describe when to indeed use cross in more details.
    – porton
    Feb 8, 2023 at 16:58
1

Your question is a bit general and also unclear. The unclear part is what you mean by "route".

If your route is a process, then you need to be careful with the left arrow since users might confuse it with the previous step. I would use cross here instead.

But if your route all happens in one page and doesn't have multiple steps (for example, Google Map's direction page), then 'closing' it but tapping on the top left arrow makes sense.

1
  • A route is a page (taking entire screen) of an app that may be replaced by another route dependently on user's actions. So, app is like a site and route is like a page in Web browser.
    – porton
    Feb 8, 2023 at 16:57
1

From comments:

Routes form a tree.

Of the two choice you offer use Icon.arrow_circle_left:

arrow circle left

Also consider Icon.arrow_back:

arrow back

...or:

arrow left up

(Although not available on Material UI.)

 

Here's why...

Two of the most commonly used tree structure concepts are operating system file browsers and web browsers.

File Browser Navigation Schemes

Linux (left arrow, up arrow):

Linux

Mac (left arrow):

Mac OSX

Windows (left arrow, up arrow):

Windows 10

Note: each have a left pointing arrow, in first position. Two include an additional up pointing arrow, in last position.

 

Web Browser Navigation Schemes

Firefox (left arrow):

Firefox

Chrome (left arrow):

Chrome

Safari (left arrow):

Safari

Edge:

Edge

1

When using a design system, we should adopt it’s terminology and respect its guidance. That’s one of the design system‘s goals: to establish a common language.

Material Design differentiates three types of navigation: Lateral, Forward and Reverse.

Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.

Within forward navigation, Material design uses the term flow, which might compare to the mentioned route.

Sequentially through a flow, or an ordered sequence of screens, such as a checkout process

There is no close icon in top app bars

I’m assuming app header means the Top app bar.

It only has one Navigation icon, which is optional and on the left

An empty screen with a blue top app bar, the burger menu icon on the left is highlighted

It can take any of the following forms:

  • A menu icon, which opens a navigation drawer
  • An up arrow, which navigates upward an app’s hierarchy
  • A back arrow, which returns to the previous screen

With Material Design 3 the up arrow was removed from the guidelines.

A top app bar does have Action items and an overflow menu on the right. You might argue that the × would be an action (close), personally, I wouldn’t treat it as such.

× is only used in the Contextual action bar

The only place that the Material Design examples use an ×, is in the Contextual action bar which appears on selection.

A mobile screen with three tiles in the main content below a headline 123 photos, the first one is selected. The black top app bar shows an × navigation icon on the left, marked with an annotation number 1

Side sheets do use an ×, but are only for tablet and desktop

Side sheets are supplementary surfaces primarily used on tablet and desktop.

A landscape tablet screen showing a table in the main contents, and a list of checkboxes under a title Filters on the right side, separated by a grey line. There’s an × icon right to the title.

What is a screen in Responsive Design anyway?

On the smallest viewports, which usually are referred to as mobile, it’s pretty straight forward to define a screen. It’s anything that fills the screen at a given time. So the above explained navigation is easily understandable.

At some breakpoint, a screen might turn into a side sheet.

Hence the concept of a page is not as clear anymore, neither is back navigation.

Users might expect to close a filter screen by using the back button on mobile. But closing a side sheet via the back button seems not intuitive.

The Material Design system does not seem to have any guidance on that issue, so I guess this is the hard question to ask.

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.