Geekly Articles each Day
⬆️ ⬇️

Web Forms Design Patterns: Subscription Forms

This is a translation of a rather new article that was published on July 4, 2008. If you have already read it, you are unlikely to find something new, but for those who are not familiar with the original in the article there will be a lot of interesting things. At first I wanted to translate and captions to pictures, but later I realized that I should not do this, since the article is aimed at a competent reader who is able to define the simplest phrases himself.



UPD: The second part of the article habrahabr.ru/blogs/ui_design_and_usability/45680 is published





When you want to increase the revenue of your service, you must increase the number of fillings for your web forms. Even if, at first glance, you have any revolutionary ideas in order to surprise visitors, it is not enough just to add the ability to register on your site. In order for the service to reach maximum visits, we, the designers, must provide the user with good user experience solutions. We have to lure them in, describe to them how the service works, explain to them why it’s worth filling out a form and describing the benefits they will get from it. And, of course, we must make their participation as simple as possible.



However, designing web forms is not a simple matter. And there is one simple reason: no one likes filling out forms - either offline or online. Therefore, as designers, we are obliged to find design solutions to make filling out forms with a business simple, intuitive and painless.

')

But how do we actually find such solutions? Where in the markup should be a link to the form? What design should it have? How should we highlight signatures, and what alignment should they have? What design patterns are used in modern websites? These are the questions that we asked ourselves. And to get the answers we conducted our review.



Below we present the results of the review on the current patterns of web forms design - the result of the analysis of one hundred popular websites, in which web forms (should) mean a lot. We decided to start with registration forms. Below we present the first part of our research, the second part of the survey results will be published next week [approx. trans. - translation of the second part will be later].



Review of registration forms design



The main purpose of the review was the desire to offer designers and developers some sensations (some intuition) about what design effective web forms have in practice; we also offer some tutorials on how to achieve user friendly web forms.



We have selected hundreds of large sites where web forms have (should have) substantial weight. The rationale for the selection of these sites were as Technorati, Alexa and popularity in search engines and various classifications. We used this popularity as an indicator for sites for which web forms are really important, as they directly affect business performance and therefore should have an increased priority during design. In particular, registration forms are a key factor for social applications, which explains why many of these forms were taken from social networking sites.



We focused on sign-up forms because we want to further discuss key forms (for example, forms for placing in a basket) separately. We went through each and every subscription form of selected sites and analyzed the design approach implemented in these forms.



For each of the forms we used a special e-mail and username. To make the review as comprehensive as possible, we identified 29 different design problems and issues that arise during the design of web forms.



We grouped them into categories and tried to find similar details in design solutions and ideas. Trying to approach the problem from the point of view of usability, we also evaluated positive and negative examples in order to demonstrate them in this article among our results.



Please keep in mind that this article is not about basket filling (checkout forms) is a topic for a separate discussion, we want to discuss it separately in the following articles. We would like to thank Wufoo for providing us with a tool for conducting our review.



Location of forms



What is the link to the subscription form?



Users think that when they intend to subscribe (sign-up), join (join), become a member, or create an account (create account), they should search for just such phrases to perform an action. Obviously, users expect one of these links to lead to the registration form. Unfortunately, this is not always the case.







The most popular phrase is “sign up” (40%), followed by “join” (Join) 18%, “register” (Register) 18% and “create an account” (Create Account) 17%. Much less often we observed a sonorous and bright “start here” (start here), which several years ago came across more often. Obviously, designers prefer to communicate information to design and emphasize the functionality of the service.



Where is the link to the subscription form?



When users visit the site for the first time, they try to determine what each of the blocks is for. Eyes move throughout the space, and users try to understand which parts are most important and where the content that he or she is looking for is located. To meet user expectations, designers must help users intuitively determine what is required to start using a service.



If the user cannot find the link that leads to the subscription form, he will not be able to subscribe to your service. Therefore, it is very important to make the reference (to the form) as visible and obvious as possible. Where should a designer have a subscription link to make it more accessible?



Based on our review this link:



Not so surprising is the fact that the link is very rarely located in the sidebar (7% - Propeller , Xing ). In addition, 4% of sites offer new users to directly use the site and require registration only when they need to save settings.



Form Design



Are subscription forms simplified?



When the user clicked on the subscription link (sign-up-link) we can assume that he decided to subscribe to the service that you provide. More importantly, he may not click on the link due to the fact that he used the navigation or went through a flashing flashing advertisement.



Therefore, designers seek to remove all unnecessary details and distracting objects that do not help the user to complete the form. Most often, only the logo and the form itself are presented without any navigation or additional information. Idea: the user should be focused on the task he needs to complete. Any distracting elements get in the way of the user and therefore must be removed.







Since users want what lies on the other side of the form, the process of filling out the form itself should be as simple as possible. Based on this, designers most often use minimized markup for subscription forms. According to our review, 61% of web forms are simplified compared to the main form (for example, MovableType , Livejournal , Amazon , Yandex.ru ).







Consider the form of Yahoo. Visitors only fill out the form that is required to create an account. There is nothing superfluous, therefore, attention is not distracted. Pay attention to the tone and spoken and touching language. It is simple, easy and friendly.









Flixster is probably our favorite example of a crowded form that doesn’t really respect its visitors. The registration page offers all sorts of navigation. A login page contains inappropriate advertising on the right. It is not friendly. The other busiest web form we met is Photobucket .



Is additional information offered?



Many designers try to encourage visitors to fill out information in forms, offering additional information such as: help, required information or even the definition of copyright rights (copyright disclaimer). From site to site it changes. However, in most cases, the benefits of registration are presented on the form.



Only a few sites mention what information is needed during registration (6%), what steps are needed to continue (8%) or carry out some warnings, tips, etc. (6%, for example, 37signals , Bloglines )



Single page form versus multi-page form



93% of the forms of our review are designed as one page. Obviously, designers are trying to help users get through the registration procedure as quickly and painlessly as possible. Several sites using a multipage form often try to combine a subscription with custom settings.



As an exception, Meebo combines the subscription form with full registration and offers users a subscription assistant in a pop-up window. The form contains 6 pages on which users in their account provide information on additional details.







How are the labels for the input fields highlighted?



62% of subscription forms use bold selection to highlight the signature for the input field. Interestingly, no site uses italics to achieve the same effect. To make these signatures more visible, 20% of the subscription forms use color and 18% use plain text.







Signature alignment



To be honest, we expected a more significant advantage of one of the possible alignments. However, in our case, there was no significant advantage in alignment of the signature.







According to a study by Matteo Penzo (1996) and a review by Luke Wroblewski ( pdf ), the captions displayed above can significantly reduce the time it takes to fill out forms because they require less eye fixation. If you want to achieve the same goals, but you have vertical screen restrictions, then the right alignment of signatures works better. And in the case when your form requires visitors to view signatures in order to find out what is required to enter (unusual or additional data), then left-aligned signatures work better.



How many required fields?



When we browsed, we observed a very confident trend of forms with a very small number of required fields. A few years ago, designers asked visitors to enter their personal information such as first name, last name, address, country and personal interests. Today, login, password and password confirmation are enough.







We found that 54% of the forms require the user to fill in at least 5 fields (in 6% of cases, registration was not required to start using the service). 34% of forms use 6-8 fields, and another 12% risk the user's peace of mind offering to fill in 9 mandatory fields.



How many optional fields are there?



The same research as above helped to determine that most sites avoid optional fields and ask for optional information to be entered after the registration process. 62% of the forms did not have optional fields at all, and 98% of the forms contained less than 5 such fields.







Vertical or horizontal field alignment?



In this aspect of subscription forms, there is a clear trend of vertical alignment of fields with a clear vertical fill path. 86% of websites contain input fields displayed vertically. 15% of them contain a beautiful and attractive design in order to attract the intended visitors and allow them to feel more comfortable while filling out forms.







Box.net offers a simple form with a vertical arrangement of input fields. When visitors enter data, their eyes are fixed on the vertical axis to the left of the input field.







Mint contains a form with horizontally arranged input fields. When visitors enter data, their eyes need to jump from one field to another



Other studies





Conclusion



Let's complete the first part of the review with a brief overview of the main results of the study of current patterns of form design. Please keep in mind that we only describe subscription forms.





Please stay with us, we will present you the second part of our research.



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

More articles:



All Articles