How to make a back button on a web page. Creating a "go back" button Return to the previous page

In this article, we will look at how you can create a "Go back" button in any place you need. I think from the very name of the button it is already clear what will happen when you click on it. Such a button can be inserted both in the category and in the material itself. Everything is done quite simply.

There are several options for how you can add a button, but I personally used only one way. Namely, the third option of the three proposed by me. A little further I will tell you why.

What options do we have:

  1. Edit Jooml template files.
  2. Just paste the button code in the right place.
  3. Create a "HTML code" module, paste the button code there, and then display this module in the right place.

The advantage in the third option is that if you need to edit the text on the button or change / add a style class, then you will only need to fix the module itself, and not fix the button in all places where it stands.

So, on one of my sites, I used the third option:

The "HTML-code" module was created and the button code was inserted there using the "Sourcerer" extension, which makes it possible to add any code to the material.

My working button code:

come back

The text is slightly decorated with an arrow, using components from bootstrap 3, and the button itself is styled via CSS.

Many usability studies show that users (both novice and experienced) often use the "go back" button in the browser. Unfortunately, front-end developers and marketers rarely consider what implications this might have for usability—given modern models web design that uses apps, animations, videos, and more. Often the technical structure of these layouts does not properly respond to the "go back" function, which breaks the mental template of users and degrades their experience.

The consequences of this can be dire: during the experiments, the inadequate response of the site to pressing the "back" button caused many users to leave, and with abuse and unflattering reviews. In most cases, even the venerable, grey-haired subjects lost their temper terribly.

From this article you will learn:

  • what users expect from the back button;
  • what are the 5 most common mistakes;
  • simple solution to these problems.

The solution is really very simple, but it is often neglected even by the largest brands. Can we fix this bug?

User expectations

In short: users expect the "go back" button to show them what they perceive to be the previous page. The word “perceive” is very important, because there is a huge difference between what seems to be the previous page and what is technically it.

The question arises: what exactly do users interpret as a new page? In most cases, if a page is significantly different visually, but conceptually related to the site, then it is perceived as new. Therefore, it is very important to monitor how the site handles various interactive elements: lightboxes, forms, filters, and so on.

Most of the visitors do not understand the technical aspects, but rely only on intuitive ideas about how the resource should work. So when they click the back button, they expect a page where they've already got important experience, but get a page with a slightly modified interface.

Below are the most popular interactive elements and recommendations on how to use them for maximum improvement user experience and usability.

The purpose of implementing overlays and lightboxes is to show the user an element that appears on top of the page. Therefore, users perceive such elements as new pages, and press the "back" button to return to their original position - but they do not get where they expected at all. This is especially unfortunate, because the use of lightboxes only increases the negative perception of the web page - most users do not like these elements on online shopping sites.

Using filters often transforms the page and gives the person a new experience. Therefore, the page after sorting is perceived as new, even if nothing was loaded on it. This is because after each interaction of the visitor with the page of the online store, a new output of results is obtained.

This example highlights that people do not delve into the technical aspects when determining new page, but use only intuition and formed perception.

3. Form of registration / payment

Checkout pages are treated like new pages, and even worse - as a multi-step process, each step of which can be canceled with the "go back" button.

This approach can bring problems, a simple example - a person wants to go back a step in filling out a form in order to edit the entered information. Pressing the "back" button returns it to the trash, and deletes all (!) Entered data. Irritation and leaving the site is a natural effect.

AJAX technology may not live up to user expectations: technically every AJAX page is under the same URL, but it looks like new pages are being opened.

In the context of e-commerce, users have a clear perception that page 3 and page 4 are separate, and page four can be navigated to third using the back button.

Users are not ready to give up the back button

Considering how widely used this feature of the Internet browser is, the issue of mismatching user expectations with the vision of developers becomes critical and should not be taken lightly.

Users especially liked the "go back" button mobile applications and sites. As the study showed mobile versions sites, the majority of users used this feature on all the proposed resources. Moreover, the use of the button is not limited to the rollback of one page - some subjects pressed it up to 15 (!) times in a row.

PC users also often press the button - but not in the same way as mobile users, because users desktop computers Easy site navigation is available.

Solution

The good news is that HTML5 has a relatively simple solution to the problem, and it's called the HTML5 History API. More specifically, the history.pushState() function allows you to change the URL without reloading the page. Accordingly, the site will behave adequately to the expectations of the user who clicked the "go back" button.

    Good afternoon, the question arose of how to move the button back and put it next to the next button when placing an order. Now it looks like this for me. https://yadi.sk/i/_ZNvGrvEhqSk3 If you move it down, it stops working. ..

    There is a solution

    Greetings, who can tell me how to make a back button, for example, in the basket, so that a person can return to the previous page?

    Insert a button into the template where you want, for example, this

    +1

    When I press the back button on the browser, all the styles seem to fly off until I refresh the page. The default theme should show as in the screenshot below) Tell me what the problem is

    Hello, I made a "Go back" button in the cart, not even a button, but just a link with a codeGo backNow when you go back in the cart...

    There is a solution

    Good afternoon! I encountered such a problem: when adding a product to the basket and pressing the "back" button in the browser, information about the products in the basket (in the additional block) is not saved until you refresh the page. Those. we go to the site, we go ...

    The site that you specified uses a plugin for the cart. As an option with improvements, you can use sending the addition of goods not to?html=1, but to?html=1&items=1, this will give the full contents of the cart in response.

    Good afternoon. At each step during the checkout, the "Next" button is indicated. In the "Supreme" topic, I found the button code: There is a solution

    Hello, we are happy to help: [email protected]

    Mr. X

    Good afternoon! Faced a problem. The site has a non-standard design and partially (most of the functions are preserved) source code - the shopping cart is implemented as a pop-up window. The site was accepted into work as is - without documentation, explanations, connection with...

    Has anyone come across, the admin panel is terribly slow, especially when you edit a product or template. For example, in a template, you need to insert or replace the code, you select it with the mouse, then the selection occurs late, and the insertion of the new code is also late. IN...

    +4

    Pay attention https://site/forum/386/predlozheniy...point number two has not yet been implemented, and you try to edit the lists with 500-1000 products by scrolling the loadable list further, the problem is again related to the point...

    Shop-Script 6.2.1 update

    Shop Script 6.2.1 update was released today. What's new:1. Added the ability to disable lazy loading of product lists in the backend to enable pagination. In the store settings in the "General Settings" section,...

    Good afternoon, there was such a problem - an undefined error in the admin panel, they won’t save, part of the menu disappeared, when adding new blocks in WYSIWYG it gives an undefined error.

    +19 Done

    It is necessary to make in the admin panel of the site, the option of loading goods in categories on a page-by-page basis, and not by a loaded list. For example, I have 21,000 positions and they need to be edited (added to different categories, etc.). But if, for example, the browser hangs...

    Hello! I encountered such a problem when working with the WebAssyst Shop-Script system: when entering the website of an online store, instead of the number 0, the amount of money is displayed next to the Basket, while the basket itself is empty. When you click on the "Cart" link...

    Good afternoon. On all pages of the store there is a module that shows how much goods are in the basket. The task is to show the number of goods in the basket. The template is default. In the index.html file, I changed the code like this: (if $wa->shop)...

    Good afternoon. How can I make it so that the user is shown information in the front-end about how many goods he currently has in the basket. That is, how to make a numerical counter near the basket, which will grow as it increases ...

    The question is: how to make the basket window display the total amount of goods put into it, and where can I prescribe the word "amount:" or the phrase "goods for the amount:" before the displayed amount?

    There is a solution

    I have this code: Display the link everywhere except the main one:(if $wa_url != $wa->currentUrl(0,1))...(/if) And I need not to display the link on three pages, this is on the main , on /cart/ and on /checkout/ Please tell me what else needs to be added to this...