Rules for registration form design

Rules for registration form design
I finished reading "Patterns for Sign Up & Ramp Up" a long time ago. The reason why I am writing my review today is that after reading it carefully, I found that it is more like a guide to building a community that attracts registrations and increases activity. It is a good material for studying active community membership.
Since I agreed to write a review, I will talk about some things related to registration from my perspective. I will first break down the structure of the entire article, and then talk about my current feelings based on the viewpoints in it.
Registration is actually a somewhat boring task. The point mentioned in Patterns for Sign Up & Ramp Up is:
Give the user good reasons to join
At first glance, it may seem a bit like marketing. The essence of things remains unchanged, but people’s emotions can be reversed - give users a good reason to sign up;
Make the sign-up process feel effortless
To change the boring and annoying feeling, that is what we need to do: make the form or the entire registration process easy and labor-saving;
Don't leave new users hanging
The significance of this point of view in the entire document focuses on ways to increase activity - users have not completed their mission by completing registration, and learning about new things in the community is just the beginning;
Accelerate initial connection-making
If activity started from the previous point, then here is how to enable users to start living in the community and establish connections, such as contacting friends through information they have previously posted, and truly experience the feeling of "there are friends all over the world, and the world is like a neighborhood."
The skeleton structure of the whole article is a step-by-step behavioral guide, which provides detailed annotations and guidance for the initial guidance of introducing members and maintaining community activity on Facebook, and can be used as a manual for reference. After reading, focus on the summary of the work and sort out several rules of registration forms:
    When the form structure requires multiple steps, it is important to provide clear navigation Use a progress bar to tell users the current location and the entire step Emphasize the logical connection between the steps, such as marking: step 1, step 2, step 3 Use meaningful pictures or icons or even titles to explain each step Use simple language or second-person descriptions of the action logic steps should preferably be limited to 3 steps User prompts during registration
      Tips should be displayed where help is needed or where there is a connection between previous and subsequent actions. Encouragement for users should be reflected in the process, such as a check mark icon for each completed input item. Try to avoid pop-up warning boxes. Avoid using warnings to make users feel frustrated. Use simple and easy-to-identify icons to mark tips, success, and errors. If there is an error when submitting a form, it is best to display the error reminder at the top of the entire form for long forms to guide users to correct the error.
    Regarding the quality of copywriting , it is more important than the quantity. Point out the highlights directly rather than listing them in a flat manner. Try to avoid copywriting with special meanings. If there are special nouns, please explain them clearly to avoid user confusion. Try to think about the highlights on the surface of the copywriting and what is most attractive to users. Sometimes the word "latest" is not necessarily what users are most interested in. In our previous projects, many data and practices emphasize that copywriting is really important. The layout of the form should use aligned fields, equal-length input boxes, and consistent visual styles to reduce visual interference. Try to limit the appearance of 3-6 fields and input boxes on one screen (mostly used in multi-step situations). If there are optional and required fields, indicate the difference. Categorize information with different concepts and separate optional and required fields as much as possible.

These general rules of form design are also covered in the comprehensive explanation of forms by LukeW from Yahoo in the United States. They are all the most commonly used. I will summarize them for your reference. There are still many points that can be explored in depth in guiding activity. We will not discuss this here and leave it for later analysis.

<<:  Docker starts the elasticsearch image and solves the error after mounting the directory

>>:  Detailed application of Vue dynamic form

Recommend

Vue implements the method of displaying percentage of echart pie chart legend

This article mainly introduces the pie chart data...

How to draw the timeline with vue+canvas

This article example shares the specific code of ...

Vue-cli framework implements timer application

Technical Background This application uses the vu...

A brief discussion on three methods of asynchronous replication in MySQL 8.0

In this experiment, we configure MySQL standard a...

Linux uses iftop to monitor network card traffic in real time

Linux uses iftop to monitor the traffic of the ne...

How to install MySql in CentOS 8 and allow remote connections

Download and install. First check whether there i...

Vue implements card flip carousel display

Vue card flip carousel display, while switching d...

Summary of how to add root permissions to users in Linux

1. Add a user . First, use the adduser command to...

Complete code for implementing the vue backtop component

Effect: Code: <template> <div class=&quo...

How to build a private Docker repository using Harbor

Table of contents 1. Open source warehouse manage...

Detailed tutorial on distributed operation of jmeter in docker environment

1. Build the basic image of jmeter The Dockerfile...

Use Vue3 for data binding and display list data

Table of contents 1. Comparison with Vue2 1. New ...

Introduction to the three essential logs for MySQL database interviews

Table of contents 1. redo log (transaction log of...

jQuery plugin to implement floating menu

Learn a jQuery plugin every day - floating menu, ...