Home AJAX and the Back button

AJAX and the Back button

In a traditional web application every link or form-submit brings you to a new page and adds a page into your navigation back stack. Now AJAX applications can create forms that don't add pages into the navigation as well as links that don't navigate. So this begs the question, what should the back button do?

At it's core the answer is simple. The back button should allow the user to move backwards in mental context and flow of the application. What does that mean? Well mental context is what the user is currently doing or thinking about. It doesn't have to be a 'page' but it's a mode of mental operation. If your life had a back button the these would be things like eating breakfast, driving, work, lunch, etc. Each has it's own mode of mental operation.

Clicking back usually means that the users wants to return to something that you saw recently in time or something that brought them to the current location. Users are likely to reach for the back button if they do something that they either want to undo or they want to try a different spoke off the hub that they recently saw.

Let's take some examples:
- A user is browsing a list of movies and the site allows them to rate the movies in-place. If the user rates 10 movies on the screen and click 'back.' They should return to the context that brought them to the list of movies. Each individual movie selection did not change the mental context. Users don't need to back-out since they can change their selection in-place.

- A user is on a mapping site and does a search that produces results and they click on a search result to see the individual location. If the user clicks 'back' they should return to the context that brought them to the specific map location, in this case the search results. Here I switched context between looking at a list of results and looking at the specific location for one item. Google Maps gets this right, Microsoft Local Live does not.

- A user is going through a checkout process on a store. They enter their billing information and click back. They should return to the screen that allowed them to enter their billing information. Each change in mental task should be placed within the history stack.
Back != Undo
Back is not undo. Please don't confuse these two things. The back button may take you back in time to the place where you made a mistake. It may even get you to a place where you can fix the mistake however it's not undo. This is important because sometimes users will back-out of your application to return to their previous task. If they undo all of their actions as they leave the application they are going to be both surprised and angry that their changes are gone.

How to control the back
I've seen a couple techniques on controlling the back stack using JavaScript. There seem to be two core ideas.
1 - To fake a navigation forward link to an anchor #id where the id is some string that preserves state and can be parsed and interpreted
2- Use an Iframe or Frame. This is a little clumsy but it seems to work.
3 - Simulate navigation via javascript functions history.back(-1)

I've said it before and I'll say it again. Don't break the back button.

This post is licensed under CC BY 4.0 by the author.