Web applications: Problems with the Back button

Fred is ordering plants from the Plants Galore online store. (The arrow between steps indicates clicking on a link and moving to the next page.)

Illustration of navigation concept
A complete purchase in a Web application

Step (a) Fred collects the products he wants to purchase by clicking several Add item links in the catalog.

Step (b) He checks the order form for correctness and clicks on the Payment link when done with the form.

Step (c) Fred enters credit card information and clicks Submit.

Step (d) Finally, Fred sees that his purchase was approved.

Before leaving the store, Fred realizes that he forgot to buy the dibble that he needs to plant the tulip bulbs, so he uses the Back button to return to the pages of the catalog. As he goes back from (d) to (c) to (b) to (a), he realizes that he’s backed up over all of the ordering information.

Back-button example
The purchase pages unwinding as the Back button is pressed

Now he wonders, what is the state of his purchase?

Will his credit card be charged?

Will he get the items he's ordered?

Does he have to reorder?

When he clicks on the Add item link again, will he get an empty order form, or the one he has been using?

It is difficult for users to answer these questions, especially when they first encounter the situation. Designers should encourage users to kick the back habit. Instead of encouraging or requiring the use of the Back button, applications should have navigation buttons to take users directly to where they need to go. In this case, the buttons could be:

Kick the back habit with clearly labeled buttons

Back to previous page

Navigation in Web applications

1. Introduction
2. Basic navigation
3. Losing users and losing work
4. Separating the browser and the application
5. Lack of context
6. Delays caused by network connections
7. Conclusion

Download the full article (PDF, 52KB)