Geekly Articles each Day
📜 ⬆️ ⬇️

Subscription form patterns, part two

This is the second part of the translation of an interesting study that was conducted by the authors of the popular Smashing Magazine website. You can read the first part here . This time, the authors touch on captcha questions, “Thank you for registration” messages, “Cancel” buttons on forms and some other interesting questions.


3. Form functionality


In the first part of our study, we looked at both the location of subscription links and registration forms, and their appearance. However, it does not matter how attractive the design looks, if the forms do not work as they should, the number of completed forms will be small. Let us now consider both the functionality of the subscription forms, and the associated typical problems, patterns and solutions used in the design of such forms.

3.1. Hover, active, focus - effects from use?


Obviously, in order to improve the number of fillable forms, designers try to avoid distraction in all forms and offer clean, precise and simple web forms. Essentially, this is the reason why visual effects are used very rarely, if at all.



3.2. Help, support, advice: statically or dynamically?


Sometimes the signature to the input field is not enough, however, users need to know what information they need to provide. What characters are allowed in the username? How many characters should be in the password? Either the specified e-mail address will automatically be a login on the service.

Hints and tooltips provide user support in order to minimize the amount of information to be re-entered. In addition, there is nothing more annoying than input fields that do not accept user data, although they look correct. To avoid this, designers use (most often) unobtrusive and clear tips.
')


57% of reviewed web forms offer static help — tips that explain to the user what is expected of user input; These tips are clearly located next to the input field. 10% of the tips appear on demand - most often after clicking on any help icon or when the user enters information in the input field.

3.3. Help, support, advice: where are they located?


When support is offered to the user, it is important to be sure that the help is not just offered, but easily found and understood by users. It is very important to make sure that users do not make a mistake by matching the prompt and the input field. To achieve this, you need to know where users expect to see a hint. So what are the tips and help most often on the form?



If tips and help are present, they are located:

We found a clear tendency to place clues right below the input field. Typically, these tips have a slightly different color, in most cases lighter than the main content.

3.4. Input Validation: Static or Ajax?


Despite the fact that in recent years, Ajax has literally flooded websites with rich user interaction, it still has reached a critical mass of popular web services. Surprisingly, we did not find a steady trend towards using Ajax. The “classic” validation technique that checks input after a user clicks on the submit button is more popular than real-time validation via Javascript.

According to our research,

3.5. Error message design


As you can see, we have identified six different types of error checking. Interestingly, 14% of forms continue to use message boxes via Javascript (Javascript-error-windows) to report problems (for example, YouSendIt , Mail.ru , Newsvine , Clipmarks , Yandex , see the screenshots below), and only 22% contain at least Partial Ajax based checking (mainly for checking available usernames). And what is even more interesting, there is not a single site on which there would be no verification at all.


Newsvine uses JavaScript messages to display error information.

Usually, designers seek to report errors using: a) error messages after clicking on the submit button and / or b) visually highlight “incorrect” input fields. In the first case, errors are usually presented as a list with bullets (bulleted) on top of the page before the form. In the second case, usually, the “wrong” input field changes the color of the border along with the field label (in most cases with red text color and red background).

Sometimes designers combine both techniques and use both the error message and the highlight of the input fields. For example, consider the Ning subscription form (see the image below) with the combination of both techniques.



Normally, red is used to indicate errors, but this is not necessarily the case. Tickspot , Mixx.com and Furl use the color yellow to report problems when filling out forms.



But be that as it may, the only color that is used to report a successful registration is green. In 97% of websites, this color was used to visually highlight a successful action.



3.6. Do you need to confirm e-mail?


Only in 18% of cases there is a need to confirm your e-mail (for example, Odeo , Ning ). To be honest, we do not see any reasonable justification for the requirement from the user to re-enter the e-mail, in the end, users see what they have entered, because the e-mail input field is not closed with asterisks (is not starred out). Do you agree?



3.7. Do I need to confirm my password?


It seems reasonable to ask for an input confirmation if the user does not see the information that he typed (instead, he / she sees asterisks). However, many sites decided to remove one input field to minimize the time required to complete the form.



In 72% of cases, password verification is considered important. However, many large sites such as Facebook, Friendster, LinkedIn, Stumbleupon, Pownce and Twitter do not require password confirmation.

3.8. Is captcha used?


Although users would be very happy for the captcha to disappear, it is necessary in practice due to the fact that websites need to make multiple registration of accounts impossible by spam bots, in other words, sites need to filter spam accounts in the database.

According to our research,

However, we did not find an unambiguous trend of sites to use or not to use captcha. In any case, if you use a captcha, please make sure that it is easy to read or that the user can update a captcha in case it is unreadable. Some sites do not have the ability to update the captcha, but Digg, AOL, Slashdot, Google and Last.fm offer users to listen to the captcha in the case when the captcha is illegible.

3.9. Is a cancel-button used?


When we decided to define design solutions when designing web forms, we expected that the subscription forms would not contain a “cancel” button, since in fact the user is not required to cancel the filling out of the form after all the fields have been filled out. And we are partially mistaken.

The "cancel" button is used only in 8% of cases. In some of these cases, the “cancel” button is located to the right after the “terms and conditions” section (for example, Zoho Writer ). Thus, if users do not want to accept the requirements of the service, they can interrupt the process. On the other hand, some services suggest choosing a payment plan before registering (for example, Crazyegg ). In this case, when choosing the wrong plan, they can go back by clicking the "cancel" button and select a plan that they see fit.



Separately from this: we did not understand why Dzone placed the “cancel” button on the left in its subscription form.

If the cancel button is used, it is located on the right side of the submit button (4%). In the sites reviewed in this article, the "cancel" and submit buttons did not differ from each other and were located side by side. From a usability point of view, it makes sense to use a clear visual separation between the buttons with basic actions and the buttons with additional actions and make a significant distance between them in order to clearly separate them.

3.10. Align the submit button (submit-button)


Depending on the markup of the form, it makes sense to place the submit button to the left, right, or middle. Designers prefer left alignment (56%), followed by buttons aligned in the middle (26%).



The right-aligned submit button remains popular (17%), most often used by designers to indicate the next registration step. In such cases, submit buttons are most often called Continue or Next. The reason: in normal applications, the Next buttons are also often located on the right.

3.11. Message "Thank you"


Just a few years ago, most services offered a simple “thank you” message after a successful registration (usually with a link to the login page), today most sites try to motivate users to immediately explore the service.

Additional research results:

Conclusion


Let's summarize and briefly review the results of the study. Please keep in mind that this only applies to subscription forms.

Source: https://habr.com/ru/post/45680/

More articles:


All Articles