Who

Back again already? 

6 April

You did it! 

Congratulations, you made a single page app!  Look at the person to your left, now look at the person to your right.  Two of you blundered big-time and should have made a normal multi-page app. 

At least your app doesn’t break the most basic of web-browsing functionality you get by default with normal multi-page apps, right?  I’m talkin’ ‘bout links you can open in new tabs, a browser history with useful page titles, and a back button that, well, goes back.  Right? 

“What do you mean by goes back?” I hear you ask in my unrealistic imagination, somehow I’m a bit taller in this scenario, too. 

Well, back in the 90s when a mommy browser and a daddy browser disagreed about how HTML, CSS, and scripting should work there was something they shared which brought them together.  They found common ground with a special little button which could take the user back 1 page every time it was clicked. 

This special little button made people feel comfortable about making mistakes. You see, people make mistakes.  Not in a bad way, it’s a regular part of life. 

This button was never controversial.  Nobody said

“Hey, let’s make this button go back 2 pages per click”, or

“It should jump all the way back to the last top-level domain,” or even

“Who needs that?  Our users only need to navigate forward.” 

Those ideas would have been and are obviously ridiculous. 

In light of recent events, here are the simple rules for back button behavior

Principle

Every time the user’s action takes them to a new place, the back button takes them back to the last place. 

What is a place?  It’s a view which users perceive as a place.  There is no convenient definition like a “page” or “URL”, and that’s okay. 

Setup

With any flow through the app, like this one:

A roughly sketched wireframe of a sequence of pages with arbitrary modal dialogs and side sheets on some of the pages, and it has arrows showing the order which the pages were 'visited'.

Expectation

The back button is expected to do this:

A roughly sketched wireframe of the same sequence of pages and large arrows pointing in the reverse direction, one arrow per page.

*Caveat

Sometimes things appear between places, but those aren’t “places” themselves.  “Are you sure” dialogs and context menus are two examples of these things between places. 

A roughly sketched wireframe of a sequence of pages and interactions in which one of the pages depicts a confirmation dialog and another depicts a dropdown menu. The diagram shows large arrows pointing in the reverse direction, one per page, and the arrows skip over the confirmation dialog and context menu diagrams.

Nuance

When between places, the back button removes the between state first, then continues back as normal. 

Two roughly sketched 2-step wireframes. The first shows a page with a context-menu target being clicked as the first step and the second step shows the menu opened. That diagram also shows an arrow pointing in the reverse direction with text that says 'closes the context menu' indicating that the back button should close that menu. The second diagram is the exact same but instead of a context menu it shows a confirmation dialog with text that says 'cancels the dialog'.

Failures

1

Don’t skip past places which happen to be styled as dialogs. 

A roughly sketched wireframe of the same sequence of pages and large arrows pointing in the reverse direction, but instead of one arrow per page, a couple arrows are (incorrectly) skipping over some pages. Specifically, it is skipping the pages which are shown as modal dialogs. A caveat does apply for modals like 'are you sure?' which is shown in another diagram.

2

Don’t skip past preview panels, either. 

A roughly sketched wireframe of a sequence of pages which have the same main view containing a table of lines which could represent records, and each page shows a different selected record and preview panel. This diagram also shows one big arrow from the last page (incorrectly) skipping all the pages in the middle and pointing to the first page.

3

And don’t skip past searches or filter selections. 

A roughly sketched wireframe of a sequence of pages which shows different search results and filters selected on each page. This diagram also shows one big arrow from the last page (incorrectly) skipping all the pages in the middle and pointing to the first page.

Test

If any users reasonably expect to see a particular view after using the back button, then that is a “place.” 

Importantly, this doesn’t require all or even most users to have that expectation. 

That’s how the web works by default

We have to actively do something to break it.  But we don’t do that, right?  That’s what the people sitting next to you do. 

Software which punishes people for trying their best with high interaction costs by, e.g., mucking up the back button trains fear and inhibits their ability to learn how to use the software on their own.