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):
...and when Icon.arrow_circle_left in the app header?
-
3It 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.– DevinFeb 8 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?– portonFeb 8 at 17:00
-
as you have said, it's a sequence of pages, so Gabriel's answer applies– DevinFeb 8 at 20:02
-
Are these routes a linear sequence? Or are the a tree structure, i.e., easch route branches to multiple other routes.– bloodyKnucklesFeb 9 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.– bloodyKnucklesFeb 9 at 1:32
|
Show 2 more comments
4 Answers
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.
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.
-
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.– portonFeb 8 at 16:57
From comments:
Routes form a tree.
Of the two choice you offer use Icon.arrow_circle_left:
Also consider Icon.arrow_back:
...or:
(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):
Mac (left arrow):
Windows (left arrow, up arrow):
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):
Chrome (left arrow):
Safari (left arrow):
Edge:
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
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.
Side sheets do use an ×, but are only for tablet and desktop
Side sheets are supplementary surfaces primarily used on tablet and desktop.
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.
