Back button on mobile web app

Question

I have 2 main questions about the back button and its functionality on a web site when running on a mobile. This isn't an app, but a responsive website working like an app.

The first question is whether or not should I use the back button or not and use the native button from the mobile device? I've been looking and found this question. It has a great answer but it's from 2011. The scenario is very different today.

I know we shouldn't rely on the browser functionality and provide the ones we need by ourselves. But today almost all the mobiles have a back button that most users are used to use. So is it ok to remove the back button?

---

Second, and most important question. If I stay with the back button, is it ok to use it until the users reach the home page? Or it should always go back 1 step in the history?

For example, let's say I have an e-commerce, the users search, find a list of products, return to the homepage and search again, this time he finds an item, explore it and decide to go back.

Should I provide a back button until he reaches the homepage or go all the way back? What is the best use case?

The page I'm building is like an e-commerce, but users can't buy, just search and then contact the company.

Answer 1

Question 1: Back button is totally needed! There is a few reasons for this.

1. With a back button, you ensure consistancy accross devices and browsers. Each browser could have the button in different places, different shapes or even hidden in a submenu. Essentially, you maintain control of the experience.

2. Not all user uses the back button in browser, myself for example, I almost never do on mobile.

3. Maintain Expectations. A good web app will feel as native as possible and the user will expect it's standard natigation to be found in all apps.

4. Control the behavior. With a back button you have full control over the behavior versus the browser button. (More about that in Q2).

Android apps is a perfect example of this. Back navigation is core to the system input but all apps still maintain the back button within their UI.

Question 2:

A back button should always go back the previous location in the hierarchy, ideally in the same state. Meaning if the page was scrolls to item Y, then going back should bring you back to list, scolled to item Y.

It is important to note that a back button does not go back in "history" but rather in "hierarchy".

History:

A -> B -> C -> D -> C

Hierarchy:

A -> B -> C -> D

Using this history, if the button was pressed at any step, the back button should result in:

NA | A | B | C | B

There could be a few justified exception to this. If a step makes the previous one not relevant anymore, then you could "double" jump back in hierarchy. For instance, if you ask a user to confirm his phone number and that it is "final" then going back should not bring you back to the confirm phone number screen.

If your application goes really deep, such as browse "categories-> category 1 -> category 1.1 -> category 1.1.1" then consider using a "home" or "categories" button to go back to the root!

Hope this helps! :)