Previous and next web forms action
Among designers, questions about placing buttons (actions) in web forms are often discussed. A typical question from this discussion is:
One side of the discussion argues that it is a natural organization: actions that lead forward are placed on the right, back and left. The other side is of the opinion that the concept of “Primary” actions (those that move people forward) outweighs this consideration and that “Secondary” actions (which are less used) can be placed to the right of “Primary”, even if “Secondary” lead to previous steps. The presence of highly visible primary actions in the course of the users' view (on the “line of fire”) allows us to focus on the final actions of filling out the form.
')
Both sides! One of the reasons why there are so many discussions on this topic is that too often web designers (developers) create a “Master” (from Windows) in which users move through a chain of steps.
In the vast majority of web forms, people just want to answer the questions they are asked and move on. Thus, considering the primary action “Continue” and the secondary action “Back”, we find in this a new meaning.
Placing primary actions on the user's way (immediately under the last question of the form) makes it clear that he can and should move forward. When moving along a linear flow of information (such as placing an order in online stores), returning to the previous stage can be difficult; such scenarios can be covered by checking the entered information in the final window. In fact, research shows that very few users use the “Back” button in the forms.
But all the same there are cases when users for some reason need to jump on the steps of the form. In these cases, “Back” and “Forward” can be considered as primary actions and placed them from left to right, respectively in the direction of travel, as a pager.
These arguments help to choose the desired location of the buttons "Back" and "Forward."
The figure should avoid the first option, because the user may mistakenly select "Back", taking it as the primary action, which will greatly go astray to the final step. You can avoid this problem by making these actions visually different, while maintaining order (as shown in the picture). If “Back” and “Forward” are primary actions, then you should not break the order from left to right (the bottom two examples in the figure).
Forms in which the signature to the input field is placed on top are most susceptible to the problem of “Back-Forward” actions, since they have less space to the left of the input fields. In this case, keeping the order from left to right (Back-Forward) can lead to an unintentional pressing of the “Back” button instead of completing the form. Then you should arrange the actions: on the left “Forward”, on the right “Back”, so as not to interfere with the advancement of the user in form.
In each of these examples, simple considerations suggest design decisions: show the primary action that will lead the user forward; do not confuse the user by placing the functions from left to right (Previous-Forward); know when Back and Forward are really both primary actions and display them accordingly.
The answer to the discussion question is not in strict compliance with the provisions of the article, but in order to understand these arguments and act accordingly.
Can the action that leads to the previous step of the process be placed to the right of the action that leads forward?
One side of the discussion argues that it is a natural organization: actions that lead forward are placed on the right, back and left. The other side is of the opinion that the concept of “Primary” actions (those that move people forward) outweighs this consideration and that “Secondary” actions (which are less used) can be placed to the right of “Primary”, even if “Secondary” lead to previous steps. The presence of highly visible primary actions in the course of the users' view (on the “line of fire”) allows us to focus on the final actions of filling out the form.
')
So who is right?
Both sides! One of the reasons why there are so many discussions on this topic is that too often web designers (developers) create a “Master” (from Windows) in which users move through a chain of steps.
In the vast majority of web forms, people just want to answer the questions they are asked and move on. Thus, considering the primary action “Continue” and the secondary action “Back”, we find in this a new meaning.
Placing primary actions on the user's way (immediately under the last question of the form) makes it clear that he can and should move forward. When moving along a linear flow of information (such as placing an order in online stores), returning to the previous stage can be difficult; such scenarios can be covered by checking the entered information in the final window. In fact, research shows that very few users use the “Back” button in the forms.
But all the same there are cases when users for some reason need to jump on the steps of the form. In these cases, “Back” and “Forward” can be considered as primary actions and placed them from left to right, respectively in the direction of travel, as a pager.
These arguments help to choose the desired location of the buttons "Back" and "Forward."
So how should they be placed?
The figure should avoid the first option, because the user may mistakenly select "Back", taking it as the primary action, which will greatly go astray to the final step. You can avoid this problem by making these actions visually different, while maintaining order (as shown in the picture). If “Back” and “Forward” are primary actions, then you should not break the order from left to right (the bottom two examples in the figure).
What to do if the signature fields above?
Forms in which the signature to the input field is placed on top are most susceptible to the problem of “Back-Forward” actions, since they have less space to the left of the input fields. In this case, keeping the order from left to right (Back-Forward) can lead to an unintentional pressing of the “Back” button instead of completing the form. Then you should arrange the actions: on the left “Forward”, on the right “Back”, so as not to interfere with the advancement of the user in form.
In each of these examples, simple considerations suggest design decisions: show the primary action that will lead the user forward; do not confuse the user by placing the functions from left to right (Previous-Forward); know when Back and Forward are really both primary actions and display them accordingly.
The answer to the discussion question is not in strict compliance with the provisions of the article, but in order to understand these arguments and act accordingly.
Source: https://habr.com/ru/post/72554/
All Articles