back buttons: to javascript or not to javascript?

[dogbrain]

let me preface by saying that i am a COMPLETE beginner to javascript, so sorry if this is a silly question!

currently i'm working on adding back buttons to all the pages on my site. my understanding of back buttons so far is that there are a few ways you can do them... with pure HTML (e.g. linking a previous page by manually typing the url in an <a> tag), with javascript using history.back(), or possibly with some other method i'm not aware of yet!

i'm curious how YOU guys do them on your site, and if you prefer one over the other? i foresee both methods having their pros and cons (pure html is easiest and works just fine but it can't see your browser's history, making it less dynamic + risk of the link breaking; button won't work at all for someone with javascript turned off) but i'd really like to know what people with more experience than me think about this!

i can see it depending on the size of your site/how many pages you have as well. pure html back buttons are probably easier to keep track of in a smaller site but if you have a large site and a link to a page breaks, you'd have to go in everyyyyy page with a back button linking to that page and fix it 

 but i also just remembered the existence of in-browser back buttons, so i'm wondering if the javascript method is even useful at all???? scratches head........ let me know what you think!

[Melooon]

Well, there's no point having a button that just does history.back() since your browser already has a button that does that just fine

Normally I would use back buttons in situations where going back to some sort of index or entrance is contextually relevant. e.g. going back to an album index from a photo's page, or going back to blog from a blog breakout page. In those cases its very much ideal to use hard coded HTML with relative paths e.g. href="../" - that way even if the blog folder moves, its sub-page back links all still work. However that's more a question of "how do you organize your site" and that's another thread!

Otherwise if you're goal is to have a universal home button, then just have a standard html link that goes to the site home such as href="/" - if you want you can then augment it with JavaScript to do extra stuff like making it aware of its context (such as knowing if its inside an iframe), but you rarely need to do that sort of thing unless you know you need to do it.

[noahie]

HTML would be the way to go for sure. Using history.back() would only be useful if it's used in the context of a larger function, like Melonking was alluding to. For me personally (since you so kindly asked tyty lmao), I try to only use Javascript if I absolutely have to. In the case of my site, the main things I use Javascript for are the pseudo-UNIX terminal and my crossword blog. The main advantage of Javascript is its extensibility, and for sites that are actually cool and creative, it's important. Unfortunately, that extensibility gets mostly used for tracking these days and I try to keep it disabled where I can, particularly on sites where all I'm doing is just reading stuff. My site has hundreds of pages since I am a prolific blogger, and for the navigation between posts and stuff on my blog, I use Zola as my static site generator and code all the navigation in HTML and the built-in Tera (Rust templating) functionality. Overall, it's been a way more sustainable endeavor that way, especially now that I have to build hundreds of pages every time I deploy my site.

[dogbrain]

Well, there's no point having a button that just does history.back() since your browser already has a button that does that just fine

yeah that makes total sense! i only remembered while i was making the thread HAHA i've seen a handful of people put history.back() buttons in their site before so i guess i was just curious if they were in on something i wasn't, but since it's useless after all, i'll go with good ol' pure html.

i also didn't realize relative paths would fix the problem i was thinking of, that's very helpful! thanks for your input :)

 

[Dan Q]

In addition to all of the above (which is good advice), it's worth remembering that an on-page "back" button doesn't always made sense to begin with. After all, you have to ask... "back to where?"

Look at my cute animal galleries!

Suppose I have a collection of image galleries: one of Dogs, one of Cats, and one of Rabbits. And then I have a page that links to each of them:

You come to my site and you click on "Dogs". Now you're on My Dog Gallery, looking at lots of pictures of dogs. And there's a "Back" link. Where would you expect it to go? Back to the list of galleries, right? No-brainer.

Okay, now let's take another example: you go to your favourite search engine and you type "gallery of cute dogs". You follow a link and you end up on My Dog Gallery. There's a "Back" link. Now where would you expect it to go? You probably don't expect it to go back to your list of search results, do you? The same's true if you followed a link on Bob's site that deep-linked right into my gallery of dogs: the "Back" link shouldn't go back to Bob's site, should it?

There's also the question of: what if you bookmark my gallery so you can come back to it later. Tomorrow, you open a completely fresh web browser. First, you come to the Melonland Forum. Next, you re-use the same tab and click the bookmark, and come to My Dog Gallery. Should the "Back" link take you back to the Melonland Forum?

Hopefully those examples give away that most people don't actually expect "back" links on a page to take them "back", but "up one level". If they want to go back... they'll use the back button in their browser!

(This isn't just me saying this, by the way: there have been lots of clever academic folks who've done studies into Web usability and found, mostly, the same thing.)

So what should you do?

It's your site, of course: you should do what you want!

But from a usability perspective, you might consider:

• Making links "up" to higher-level sections of your site explicit links e.g. <a href="../">...[/url][/font][/font]
• Making the text of those links something more-specific than "back", which could be confusing: e.g. on my dogs page I might write "Back to list of galleries", or "All galleries", or "Gallery list", or "More cute animal pictures!".

Just remember that the very concept of a "back" link doesn't make a lot of sense, because you don't know for sure where the user came from before they were on your page!

[TheFrugalGamer]

Making the text of those links something more-specific than "back", which could be confusing: e.g. on my dogs page I might write "Back to list of galleries", or "All galleries", or "Gallery list", or "More cute animal pictures!".

This is what I prefer to do in my sites, since it makes it absolutely clear what behavior the user should expect. I instead of "back," I use "Back to main site," "Back to list," or "Back to index" etc. etc. The only time I use the word "Back" by itself is in image galleries, for flipping through sequential images.

[lakes]

i prefer either using html links or my browser's back/forward buttons for navigation
i see no point in having it be javascript because most modern browsers have back and forward buttons & older browsers tend to have more trouble with javascript anyway

[Dan Q]

i prefer either using html links or my browser's back/forward buttons for navigation
i see no point in having it be javascript because most modern browsers have back and forward buttons & older browsers tend to have more trouble with javascript anyway

Exactly.

Incidentally, this is the same basic reasoning for which you should avoid forcing links to open "in new tabs" (e.g. with target="_blank") and, if you must do so, make it obvious that that's what's going to happen.

Experienced users dislike links that force themselves to open in new tabs because they know how to do that for themselves and if that's what they wanted, they'd have done it themselves.

Novice users dislike links that force themselves to open in new tabs because they surprise them and they break the back button, leading to confusion.

There are exceptions to the rule, of course. But in general, target="_blank" gets used badly more-often than it gets used well, IMHO.