Web page Registration Form design principles

If you want to maximize the benefits of your service, you must maximize the success rate of your site forms. Simply getting users to sign up on your site is not enough, unless you have an idea that allows people who visit your site to look at it with a deep image. In order to maximize the service, our designers need to provide users with a good user experience. We need to invite users to describe how well the service products are, explain to them why they need to fill out the forms and hint that they will be rewarded for their benefits. Of course, we should also make it very convenient for users to participate.

But it's not easy to design a valid page form. There is an indisputable fact that no one likes to fill out a form-whether online or offline. Therefore, as a designer we need to find the right design decisions that make the form simple, straightforward, and even painless.

But how can we pinpoint these decisions? Where should those links in the layout be placed on the form? How should we design it? How should we highlight tags, and how should we arrange them? How does the page form design style fit into a modern web site? We ask ourselves these questions, and we get these results by conducting surveys.

Here's a look at the results of the current Web Form design style for Internet. These results are analyzed by 100 Web sites that have processes associated with Web forms. We decided to start with the registration form.

　　Registration Form Design Survey

The purpose of the survey is to provide a reference for designers and developers who are directly judged on their effectiveness. We'll also show you some guidelines on how to make Web forms a perfect friendly user interface.

We have selected 100 large Web sites related to Web Forms. These sites are based on the blog search and Alexa rankings, as well as the popularity of search engines to consider the choice. The impact of these Web sites on direct business goals is generally related to their Web forms, so you need to specify a high priority design in the process. In particular, the registration form is the key to explaining why many comment forms come from social types of websites.

We are concerned that the registration form wants to separate more key forms (such as validating forms). We then complete the registration form for each selected site and analyze the design methods of those forms.

We use a special email account and special username in each form, and to make the survey as broad as possible, we point out 29 different design questions and questions that we encounter when designing a Web form.

We classify them and try to find similar design guidelines and design ideas. We try to start with a usability perspective, keep an eye on both positive and negative examples and display them in the survey results.

Please note that this article is not about validating the form-that's another topic for discussion, and we're going to look at it as an article that's about to be discussed independently. We would like to thank Wufoo for providing us with a framework to guide our investigation.

1.　　 Placement of forms

　　1.1 What is the title of the link to the registration form?

When the user wants to join the website, the user will look for the correct phrase, the user knows that they should be "sign-up", "register", "join", "join", "become a member" or "creat account" and so on. Clearly, users expect links from one of them to be linked to the registration form. Unfortunately, this is not necessarily the case.

Visible from the chart, the most popular titles are "Sign Up" (40%), followed by "Join" (18%), "Register" (18%), and "Creat account" (17%), and we observe that very few have the same size and sparkle as the buttons we saw last year, And the words "Start Here" are written. Clearly, designers and their design and emphasis on the functionality of the service might as well try to express information.

　　1.2 Where is the link for the registration form?

When a user accesses a site for the first time, they try to figure out what the individual layout block represents. Their eye movements are jumping, and users are trying to understand which areas are more important and what they want can be put somewhere. To satisfy the user experience, designers need to help users intuitively know what needs to be done before they start using the service.

If the user cannot find a link to the registration form, he may not be able to sign up for your service. So making the links as obvious as possible is the most critical. So where should the designer put the "registration" link to make the user feel more accessible?

According to our survey, this registration link

• 59% of sites are placed at the top of the site (where 76% are placed in the upper right corner)
• 21% of the site is placed on the homepage of the prominent position (link or form itself is placed on the home page)
• 9% are hidden behind the top "login" link (e.g. Craigslist)

In fact, the registration links are rarely placed on the sidebar (7%-propeller,xing), but 4% of the site provides users with services directly, only when users need to save settings when users need to register.

　　2. Design of form

　　2.1 Need to simplify the style of the registration form?

After the user clicks on the registration link, he is likely to want to sign up for the service you are offering. More importantly, he did not click on links to explore deeper navigation or attractive, shiny ad links.

Therefore, the designer tries to remove all unnecessary details and does not help the user to complete the description of the form. Often only presents a logo and form itself, without any navigation operations and additional information. Idea: The user must focus as much as possible on the task he is going to accomplish. Any factor that distracts the user's attention will have to be removed.

As a result, designers often use the "minimize" layout to build a registration form. According to our survey, 61% of Web Forms are simpler than popular pages (e.g. MovableType, LiveJournal, Amazon, yandex.ru)

According to Yahoo's registration form can be seen, visitors simply need to fill out the account information, there is no other interference factors to distract the user's attention. Note that the tone and semantics in the form are appealing, simple and friendly.

Flixster is a classic example of a negative case where the form is crammed full and does not respect its visitors at all. The registration page provides every possible navigational action at a draught, and the ads on the right side of the landing page are more prominent than the landing form. It's not friendly at all, Photobucket should be the second most crowded Web form we've ever seen.

　　2.2 Do you need to provide any additional information?

Many designers try to encourage visitors to fill out forms by adding information that is similar to help, information content requirements, or even a copyright statement. But it's different from point-to-point, and in most cases the benefits of registering are still reflected in the form.

• 41% of the form tells the user the benefits of registration
• (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
• 28% is just a simple registration page, without any additional information
• (Pownce, Deviantart, Dailymotion)
• 11% tell the user how long it will take to fill out.
• (Threadless, Newsvine, Wordpress)

Only a very small percentage (6%) of the website positively mentions the information required to be filled in during the registration process. Some of the steps will provide warnings (8%) and signals (6%, e.g. 37signals, Bloglines)

　　2.3 Single page form vs multiple page form

In the survey results, 93% of the form is a single page form. Clearly, designers are trying to help users complete the registration process as quickly and painlessly as possible. Only a few web sites use multi-page forms to try to combine exploratory user parameter selection into the registration process.

For example, Meebo integrates a complete registration process into a registration form and provides the user with the Registration Wizard in the form of a pop-up box. This form is made up of 6 pages, and the user can set up their account by selecting some additional information.

　　2.4 Input Box label additional questions need to be highlighted?

The 62% registration form is bold to highlight the title of the input box. In order to attract attention and more than one use italic to achieve the same effect. In order to make the label more visible, 20% of the registry alone color, 18% in plain text.

　　Large version

　　2.5 Label Alignment

To be honest, we have anticipated that alignment is a strong trend. But in our view, the trend of label alignment is no longer so strong.

• in the investigation 41%  the Web site uses labels to align right (YouTube, Facebook, Metacafe)
• 30% registration Form using top alignment (Behance.net, Wufoo, Tickspot, Dzone)
• 29% use is left-aligned (Digg, Ning, wykop.pl, 43things, Stupz).

According to the "Matteo Penzo label Placement Research Results" (1996) and "Luke Wroblewski's Discovery" (PDF), right alignment can dramatically reduce the finish time because they hardly require eye gaze. If you want to achieve the same goal but only a vertical screen constrained by the actual area, it is better to align the top of the label. And in case your form requires people to scan labels to understand what is necessary (unfamiliar or advanced data), the left alignment is the best.

　　2.6 How many fields are required?

When conducting a survey, we have noticed that the required entries in the form are getting less. A few years ago, designers asked visitors to fill in their names, addresses, cities, and personal interests, but now only require a login, password, and confirmation password.

We found that 54% of the forms require users to fill up 5 input boxes (6% of the sites do not need to register before using the service). 34% of the form uses 6-8 input boxes, but 12% of the sites have the user's patience to complete more than 9 required fields.

　　2.7 How many options are available?

Similar to what was found above, we note that most Web sites avoid optional options and require users to fill out the options after completing the registration process. 62% of the forms have no options at all, and 98% of the forms have fewer than 5 options available.

　　2.8 Vertical or horizontal arrangement area

In this respect, the vertical layout area, which has a vertical, unimpeded extension, is a strong trend in the registration form. 86% of the Web site put the input box vertical layout. In addition, the 15% layout emphasizes the use of attractive and attractive visual design to make visitors feel more comfortable filling out forms.

Box.net provides a simple, vertical layout of the input area. When the user enters the data, their eyes are fixed at the intersection on the left side of the vertical axis input box.

Mint is a horizontal layout of the registration form. When the user enters the data, their eyes need to jump out.

　　More discoveries

• There is a login form or a login connection next to the 18% registration form in the survey results. (for example, YouTube, Reddit, Digg, Lulu, Metacafe)
• 78% of the registration form does not use an asterisk or a high light to indicate a required box; In most cases, no asterisk or other form of high light will be used.
• The 9% registry alone tells the user where they are going and tells them which steps are required to complete the registration.
• 85% of sites prefer to use Web Forms as simple as possible.
• Areas are often grouped and split by whitespace, and sometimes borders are used in the same way as white space (22%), and 9% are differentiated by different background colors.

　　Profile

Let's make a summary of the first part of this Web Form Design style survey. Keep in mind that we only consider registering the form.

• The title of the registered link is mostly "sign up" (40%) and is placed in the upper-right corner.
• The registration form uses a simple style to avoid distracting users.
• The 93% registration form is a single page form.
• 41% registration form to attract users to register by interpreting the advantages of registration.
• 62% of the input box title is highlighted by bold.
• Labels are not all lined up in a straight line.
• Designers try not to fill in the required and optional options.
• The 86% registration form prefers a vertically-laid form.

The second part of the research results of the translation will be given to you next week, please look forward to ~ (