It's such an extremely simple litmus test: if it breaks the back button of the browser, it's the wrong design. The closest thing to an exception being cases where one needs to be logged in to see a page, or when links are consciously invalidated for some other reason. And even then the website/webapp should still just signal this to the user without a bazillion redirects.
The problem there is the slide show. Converting a series of slides to a page in traditional vertical scrolling format works just fine. Overriding the back button behavior is just expecting a second wrong to make a right.
Your example is exactly why we have both History.pushState and History.replaceState[0]. The core question there is whether a new slide represents a new page or not. And in this case, I agree that it doesn't: it's the same page, just in a different state.
EDIT: If you mean one of those 20-image slideshows intentionally made to create fake click statistics, I agree that that's absolutely infuriating. But in that case ergothus' comment applies: the real problem is bad faith webdesign in that case.
And this example pretty much nails the theme: there is no technical reason for these problems. If a website screws it up, it's just bad design at this point.
But the problem there is that they used a carousel in the first place. Were it content that justified clicking 30 times into it, it would also justify backing out of it 30 times.
For something like a slideshow, I think you could have it both ways - default to a scroll view that shows all of the slides at once, and make it so clicking a slide shows the slide on a single page that is deep-linkable. The user could then navigate forward and backward between each individual slide page if they so desire.
I suppose it's all a matter of trying to do what will best match user expectations. Or just whatever will make them happiest. Maybe call it the principle of least annoyance.
Of course, if you make an ad supported slideshow app, maybe you want to show one slide per page to get more ad impressions. I suppose that would be the principle of maximum revenue, along with its corollary (from the user's perspective): the principle of maximum indignation.
The problem is that it might take a half-dozen clicks to realize it's not worth reading the other 24, then you need to click back a half-dozen times (worse if there are page reloads during that).
Or, use another built-in feature of the browser's back button. Click-and-hold the back button so that you can see a contextual menu with the steps you can go back to quickly. If I click back more than twice, the third is a click-and-hold.
That's my point though - if it takes a half-dozen clicks to decide it's not worth it, then they weren't using a good format anyway. You likely did the last 5 clicks hoping things would be different after the click - the click itself was NOT a value add.
I'm not saying it isn't useful to bypass that to get back, but then you're literally asking the people that made the bad design decision in the first place to make the good one to let you out - and they likely won't, for the same reasons they gave you that UI in the first place.
> It's such an extremely simple litmus test: if it breaks the back button of the browser, it's the wrong design.
What if state should be destroyed when you press the back button? What if I open an image in a photo app, click a button to delete it, and go to a 'deletion successful' page.
Should clicking the back button return me to a page containing the image? A page containing 'this image has been deleted'? The website I was on before I was on the photo app?
Which actions defines a history-worthy state change? Should clicking around a menu generate 10 history events? What about toggling a checkbox? What about an action that changes most of the information on a page? Should that generate a history event? What if that action is bringing an in-app tab to the forefront?
What if there is an obvious history event that should be generated, but there is no good reason for why a user would want to go back to that state?
It doesn't even matter how you answer all of the above questions - other people will have different answers for them, and have different expectations for how the back button should work, on the same app.
Not being able to click "back" out of a POST isn't broken, in my opinion.
Basically, if the "back" button behaves differently than it would have behaved in a functionally similar web app in 1998, it's broken. Web apps in 1998 didn't let you click "back" out of a POST.
In 1998, wouldn't a well done POST have issued a 3xx redirect? in which case, going ba k would bring you back to the form or originating page, right through the POST. In which case, the browser may still show the now-deleted image until the user explicitly decides to refresh the page. IIRC the old Opera browser was good about this, to the point of remembering dynamic DOM content as it was.
How will someone on a laptop run my website as an 'app'?
Should I download a Wells Fargo app to my desktop, so that I can do banking with them? And a Google Docs app? And a Seattle City Lights app? Maybe a Progressive app, so I can manage my insurance policy? And one for the Washington DMV?
How many problems is running random binaries from random developers at those organizations going to give me? How much more expensive is it to develop apps, over websites? How will you make these apps run on Android, IOS, Linux, MacOS, and Windows? [1]
All of these websites have rich app-like functionality. The web was designed as a document store, yes. This is 2018, though - its not used as a document store. It's the place where I do my banking, my shopping, keep my spreadsheets, and make image macros. Turning all of that into non-web apps will just make development more expensive, degrade my user experience, and negatively impact my PC's security.
But hey, the upshot is that the sanctity of the back button will be protected!
[1] Maybe we could sandbox them... And have a cross-platform 'operating system'[2] where they can run. Maybe even have several such 'operating systems', with similar functionality, but built by different vendors. Vendors like Microsoft, Apple, Mozilla, and Google, maybe?
[2] We can even make this 'operating system' support opening static .HTML pages, so that we can 'browse' through them.
> Which actions defines a history-worthy state change? Should clicking around a menu generate 10 history events? What about toggling a checkbox? What about an action that changes most of the information on a page? Should that generate a history event? What if that action is bringing an in-app tab to the forefront? What if there is an obvious history event that should be generated, but there is no good reason for why a user would want to go back to that state?
These are great questions, but they kind of apply to a different level of the design than my litmus test.
Start with not making it more complicated than it is: browser history is browser state that we should be able to go back to. When this is not the case, it does not go into browser history (strictly speaking about using the JavaScript history API here).
Otherwise, we need to ask and answer questions like the one you posed. And at that point, "does this break the back button?" is a good first question to ask oneself to ensure we think things through and figure out what it is that we are really trying to achieve.
> What if state should be destroyed when you press the back button?
That says something about which state of the current page is going to be stored in the history, not which state of the previous previous pages has been stored.
> What if I open an image in a photo app, click a button to delete it, and go to a 'deletion successful' page.
This is a solved problem! The "deletion successful" message should not be its own page to begin with, that's what makes it look more complicated! A modal pop-up is the right answer here. (tangent: I'm sure we both agree that many problems are caused by trying to fix issues created by using the wrong initial solution)
If all of this happens within a photo app, the app is the page, which we never left; we clicked a button, not a link. App state history is not the same as browsing history, so if, and only if, we want to preserve snapshots of the photo app state, we use replaceState and/or pushState.
In the case where different pages are warranted, for example within a photo gallery on Facebook or Imgur, the pop-up still happens on the page linking to the uploaded-but-now-deleted photo, followed by a redirect to, say, the main gallery. The link to the uploaded photo should then become a 404 page, because it is now an invalid link.
In both cases, the "deletion successful" modal obviously does not need to be preserved in the browser history.
> It doesn't even matter how you answer all of the above questions - other people will have different answers for them, and have different expectations for how the back button should work, on the same app.
And some of those answers will be right, most will be wrong, and some will depend on the desired context. But presenting hypothetical exceptional cases does not prove there is no such thing as really obviously bad design. There are exceptions, but they are just that: exceptions. They don't invalidate the question as a good first guiding principle to start from.
If anything, doing provokes these questions: you came up with them in response to the implied question "what does it mean to break the back button?" That is a lot better than just slapping something together without thinking about it.
> Start with not making it more complicated than it is: browser history is browser state that we should be able to go back to. When this is not the case, it does not go into browser history (strictly speaking about using the JavaScript history API here).
What is the state that we can go back to?
Is it the part of the app that we were on, or is it the part of the app + the content? Content these days is dynamic - if its gone, can we really 'go back to' it?
> This is a solved problem! The "deletion successful" message should not be its own page to begin with, that's what makes it look more complicated! A modal pop-up is the right answer here. (tangent: I'm sure we both agree that many problems are caused by trying to fix issues created by using the wrong initial solution)
That's not what's important, though. If 'deletion successful' is not its own page, then imagine that I then navigated to some other part of the app after deleting the image. What should happen when I press the back button?
a) Go to the "Do you want to delete this image" screen.
b) Go to a "No image found" screen.
c) ???
Option a) is misleading, because the image has already been deleted. Option b) is abuse of the back button, because we have not returned to old state.
> In the case where different pages are warranted, for example within a photo gallery on Facebook or Imgur, the pop-up still happens on the page linking to the uploaded-but-now-deleted photo, followed by a redirect to, say, the main gallery. The link to the uploaded photo should then become a 404 page, because it is now an invalid link.
When I click the back button in my browser, I see a cached version of the webpage I previously visited. What you described is not the behaviour I expect, (and is another way of breaking the back button).
> And some of those answers will be right, most will be wrong, and some will depend on the desired context. But presenting hypothetical exceptional cases does not prove there is no such thing as really obviously bad design. There are exceptions, but they are just that: exceptions. They don't invalidate the question as a good first guiding principle to start from.
These aren't edge cases and exceptions. This is trying to shoehorn a leaky abstraction (the browser back button) into a paradigm where it is often inappropriate, surprising, or just plain unworkable (pretty much everything you do in rich webapps). Your operating system doesn't have a 'back' button for that very same reason.
If your app has a consistent (Internally, and with how the rest of the web works) definition of what going 'back' is, great. Implement it. If it doesn't, that's also fine. 'The back button doesn't work in your app' is not, in itself, a sufficient heuristic for a poor design.
Virtually every site breaks the back button now. Even reddit will suddenly forget discussions I had closed, and where I was on the page, and then have to reload something, when I all I need it to do was take me back to the same state on the page that I had before.
I was including "fail to return to page state at time link was followed" as "breaking the back button". Reddit, Quora, and sites using Disqus fail that.
All those cases where pressing back repeatedly doesn't actually go back? They're broken. We may not be able to define 'broken' perfectly, nor catch every case, but we can definitely spot the worst!
Unless you mash the back button really quickly ...<sigh>
Your back button is "broken" every time your last transition from the previous page to the current page changed information on the server, and that information change isn't reflected in the cached version of the previous page your browser helpfully shows you when you hit back.
Cache invalidation is a technical solution, and it could conceivably be done with header magic or something, but the real problem is people thinking the back button undoes history and the server (and, possibly, reality) disagreeing.
Going "back" and showing the old information is accurate. I'm not reloading the prior URL. I'm viewing the last page I looked at. In fact maybe I don't even have network access at the moment (on a subway). I can always opt in to reload the page if I want to see refreshed data.
> if it breaks the back button of the browser, it's the wrong design.
Some people don't care about a back button in a single page application and it isn't "trivial" to implement properly. It requires libraries, polyfill support, etc. And in a world where everyone is complaining about js bloat, it should be no surprise why it exists.
