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

How to generate a unique server-id in MySQL

Preface We all know that MySQL uses server-id to ...

Native js to implement drop-down box selection component

This article example shares the specific code of ...

WebStorm cannot correctly identify the solution of Vue3 combined API

1 Problem Description Vue3's combined API can...

Should I use UTF-8 or GB2312 encoding when building a website?

Often when we open foreign websites, garbled char...

Detailed explanation of Docker daemon security configuration items

Table of contents 1. Test environment 1.1 Install...

Introduction to container of() function in Linux kernel programming

Preface In Linux kernel programming, you will oft...

How to Rename Multiple Files at Once in Linux

Preface In our daily work, we often need to renam...

JavaScript to achieve simple drag effect

This article shares the specific code of JavaScri...

Summary of MySQL common functions

Preface: The MySQL database provides a wide range...

Mysql inner join on usage examples (must read)

Grammatical rules SELECT column_name(s) FROM tabl...

Global call implementation of Vue2.x Picker on mobile terminal

Table of contents What is the Picker component Pr...

Simple writing of MYSQL stored procedures and functions

What is a stored procedure Simply put, it is a se...

MySQL 8.X installation tutorial under Windows

I had been using MySQL 5.7 before, but because My...

Details on how to use class styles in Vue

Table of contents 1. Boolean 2. Expression 3. Mul...