Back Button
Somebody is halfway through a checkout when they notice the delivery address is wrong. They press back to fix it. The cart page loads empty and the eleven fields they had typed are blank.
The back button breaks more flows than any bug. Hear why, and fix yours on Monday.
Listen to the full Back Button course on DesignPathThe server did nothing unusual. It was asked to build a page, it built one, and the typing was never part of that request. The person now has to decide whether to start again or buy the thing somewhere else.
That press used to be the second most common thing anybody did online. Catledge and Pitkow instrumented 107 people's browsers for 21 days in 1994 and found back accounted for 41% of navigation actions, behind only following a link at 52%. A decade later, Weinreich and colleagues measured it at 14.3%.
The drop tracks the web becoming applications. On a site of documents, back asks for the previous document and the browser serves it. In an application, back is an undo for whatever just happened, and only the product knows what that should mean.
Anatomy of Going Back
Back looks like one button doing one thing. Underneath it sit a stack, a pointer, seven triggers and a decision about hierarchy. Every argument a team has about back behavior is an argument about one of those four.
The Stack and Its Entries
Each browser tab keeps an ordered list of history entries and a pointer to the current one.
An entry is an address plus whatever state was saved alongside it. In a browser that means the URL, the scroll position and the values sitting in native form fields. Anything drawn by script after the page loaded is not in there unless the product put it there deliberately.
Back moves the pointer one place towards the start of the list and forward moves it the other way. Going somewhere new from the middle discards every entry after the pointer. That is why forward stops working once somebody goes back and then clicks a link.
The Seven Ways It Gets Pressed
Six of these are outside your design file, and all seven arrive at the same place.
The browser's own back button. Alt and left arrow on Windows, Command and left bracket on a Mac. The fourth button on a mouse, the one under the thumb. A two-finger swipe on a trackpad. The swipe in from the left edge on iOS, which has been part of the platform since iOS 7. The Android system gesture, or the button on older devices. And the back control you draw inside the interface, which is the only one you can style, place or label.
Android's predictive back arrived in Android 13 and ships by default from Android 15. It animates a peek at the screen the gesture is heading for, while the thumb is still on the glass. Where back goes is now visible before it happens, which raises the cost of it going somewhere surprising.
Back Against Up
Material Design names two movements that look identical in a header.
Back is previous in time and follows the stack. Up is one level in the hierarchy and follows the structure of the product. For somebody who walked in from the home page they land in the same place, and they come apart the moment somebody arrives from a search result. Article 4 is about that gap.
What the Product Decides
Three of these parts are yours.
Which state changes push an entry onto the stack, which is the next article. What each entry carries, so a returning screen can be rebuilt rather than reloaded, which is article 6. And where up goes when there is no back, which is article 4.
Pro tip: Hold down the back button in Chrome or Safari and read the list that drops out of it. That list is what your product pushed onto the stack. Eleven entries for the same page with a filter changed is the fastest diagnosis you will get.
