Chevron or arrow for back button navigation on mobile?

Question

Is there a preference for using a chevron or an arrow for back-button navigation on mobile devices? I understand that this might attract largely opinion-based answers, but in the interest of understanding expected UX across platforms / developers, am curious to know what the community thinks.

Chevron:

• Takes up less visual space, for tighter screens.
• Can be more easily animated, e.g. to a plus icon.
• Apple's preferred icon in their native apps.

Arrow:

• More precise definition of function.

Answer 1

I think the answer is to keep with your app's language recommendations. The first one you have is for iOS (as you correctly mention).

However, Material Design recommends the second one, with this addition:

Your example is named UP (because it goes UP one level INSIDE YOUR APP), while the one I'm adding is named BACK and it goes back through the different screens you have visited, no matter which app.

From Material Design Up and Back buttons

Whereas the Up button ensures the user remains in your app, the Back button may take the user back through recent screens outside of your app.

The Back button also:

• Dismisses floating windows (such as dialogs or popups)
• Dismisses contextual action bars, and removes the highlight from the selected items
• Hides the on-screen keyboard (IME)

Conclusion

Unless you're building a PWA , you'll need to create Android and/or iOS versions. So simply stick to each platform conventions and you'll be OK

Answer 2

I'm gonna go out on a limb here and say that your answer is going to be: It depends.

There's no consistent use of iconography for the "back" function across platforms and devices, so generally the most you can hope to convey with either arrow is "left", which has to translate to "back" by common convention.

The trick is to find the right context so that users understand that meaning implicitly.

I'm going to pick on the left arrow for a minute here by comparing some examples:

In the first example we see a left arrow, which could mean either of the things in the other two panes. I would suggest being explicit with either arrow type in that context.

Continuing with our mobile theme here, let's consider some examples of back arrows that do work:

Here both examples use a chevron, but that's not what's important, is it? The navigation bar gives the icon the "go back/exit" meaning by virtue of convention.

So putting this into a web context, let's look at a good example and a back example, and this time we'll pick on the chevron for once:

Ignoring the atrocious color scheme, here if we examine the arrows the left one could just as easily mean "collapse the sidebar" as "go back a page". The orange arrow offers a little more context that better suggests "go back to the last thing you were looking at". This type of back arrow is even more powerful if it's paired with something like the breadcrumbs in the example that reinforce the context.