Website Interactive detail ANALYSIS--Registration & Login

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

　　

Registration & Login is a website portal, its design posture is to treat guests attitude. Although users may spend very little time interacting with the registration & login Each time, this "instant" is important, a node connecting the interactions between the user and the registration & login. Registration & Login All the details affect the ability to complete the product strategic positioning of the most basic tasks set to absorb the desired user's mission. Based on the research of many interactive design predecessors, the detail analysis is made in detail. Thanks for helping my friends around.

1, the registration process analysis and comparison:

1.1, registration and landing user experience bias:

: Ensure registered information security (long term)

: User registration process is simple and rapid (instant)

　　

1.2, the registration process analysis and comparison

① Tenpay: Choose the way to register > fill in Account Details > Email Verification > Registration Complete (available)

Tenpay backed by QQ This super huge user group, the Super large information flow processing technology experienced, very confident that the user registration process is not smooth or failure. For it to quickly seize a large amount of users is the first, the registration process is concentrated in one page complete, the most efficient.

② Hundred Pay: Fill in basic registration Information > Registration complete (not used) > Mailbox verification > Fill in Account Details (associated bank card) > can be used

Hundred pay only need to fill in username, password, confirm password, mailbox, authentication code can register account, but not immediately use payment, need a series of verification and account binding to really use its payment function. Is the product has just put into the market a large number of new user registration situation of the temporary decentralized traffic strategy, reduce the user registration process is not smooth or failed. But for the user's use process, several different partitions of the operation slightly more complicated.

③ Alipay: Fill in basic registration Information > Mobile verification + Email Verification > Fill in Account Details > associated bank card > Registration complete (can be used)

Alipay's process security checkpoint is particularly rigorous, because it users a very large user community, can attract users of all the energy into the product. Experience Alipay very confident attitude focus on the user's long-term information security experience.

④TUMBLR: Fill in: Mailbox, password, domain > Authentication code, Confirm password > Mailbox Verification > Registration Complete (can use)

Tumblr's light blog positioning itself is more vertical, want to register the user is really want to later more and more durable use, so it's the characteristics of the registration process in the confirmation password with the verification code placed in the second registration page, so that the user to delay the confirmation password, the account password to remember the impression of deeper.

⑤ need the invitation code: Fill in Account number, mailbox, personal information > Wait Invitation code > Verify Invitation code > Registration Complete

Need to invite a lot of code is the initial period of the site, such as a period of time before the Le Live network, there are very vertical community sites, such as Pinterest, Snowball, they need to filter the user group through the invitation code to ensure that the user type is in line with expectations.

⑥ use SNS Account registration: Select SNS Portal > SNS Account login > Confirm Connection > Registration complete

The use of SNS account registration can quickly guide a large number of SNS users to register, in the initial product quickly occupy the market situation will be significant, but in the long run is not conducive to the development of their own unique user groups.

⑦ Sina Weibo/Thunder Network/Huawei Network disk: Fill in the basic registration information (information requirements are different) > registration completed > (mailbox verification)

No special requirements of the most common registration process is to fill out the basic information and mailbox confirmation on the registration completed, coherent, smooth and confident. It probably has a huge user in itself.

Summary: Interactive process related factors are multifaceted, registration & login needs according to their own and the environment tailored, timely adjustment.

2, registration & Login form of the overall framework analysis:

2.1, registration & Login Form area analysis:

The registration form contains 7 parts:

① Visual focus. Guide the user to fill in the information.

② label. What information should be filled in the input field.

③ enter a hint. Prompts for input field information how to fill in.

④ the input field. This includes text entry boxes, password input boxes, multiple selection boxes, Drop-down lists, radio boxes, and sliders.

⑤ operation area. Include links, buttons, toggle Authenticode, expand Hints, or protocols.

⑥ validation. The availability of information and feedback to the user.

⑦ process instructions. Let the user know the interaction expectations.

　　

The landing box is similar to the partition, just a general process only one step, there is no "⑦ process instructions."

　　

2.2. Visual Interface:

2.2.1, visual focus-level relationship:

The first level is required, the egg is to pay attention to adapt to the browser, may be some browser itself can be implemented, otherwise require CSS, the second level is optional, when the text prompts more content when used can obviously aggregate user visual focus, more overall experience.

　　

2.2.2, guided Visual highlights:

Using visual means to highlight a part requires attracting the attention of the user area, guiding and encouraging the user to do something:

　　

Know the application Registration Channel Entry button area is particularly large to attract new users to register. But the color and the surrounding environment is just right, visually not for the highlight button and too much interference with the overall login frame vision.

2.2.3, modelling semantics:

In addition to operational interaction, one thing that should not be overlooked is emotional interaction.

The unique nature of "design" is to solve the problem that some logical operation cannot solve by means of "modelling semantics".

　　

For example, Sina Mailbox registration form in the upper right corner mascot small Wave big eyes before a finger, like saying: "Shh ... Keep your information safe.

　　

Login box embedded in a scarf, meaning "micro bo", bring a trace of warm feeling.

2.3, Reaction action mode analysis:

2.3.1, error, or confirmation prompt:

　　

#p # subtitle #e#

2.3.2, hint information location:

① Nearest principle

　　

② a location in a centralized display

　　

2.3.3, prompting information interference

Prompt information too many times, the likelihood of user anxiety increases (judgment error and just random click)

Three aspects of the proposed adjustment:

① Prompt Information

② Hint Visual form

③ Opportunity

2.3.4, submit return Error item:

① The focus automatically returns the wrong item after clicking submit

② does not clear the item directly

③ straight back to right side of wrong item character

④ not allowed to submit until all items are completed correctly

2.3.5, slow state of the process:

First, users can get the machine is still operating feedback information

① machine is running or crashing, give the user a clear answer

② Let the user know what they have filled in and confirm that they have filled in

　　

Second, the lock user can not operate and operable parts

① Lock all the operations in the registration information, so as not to change the user to submit, what is the registration of the information?

② upload a long time without progress to be able to return (fill in a very troublesome, it is best to retain the full content)

3, the Registration form analysis:

3.1. General overview of the basic Information page of registration:

　　

3.1.1, registration Basic content:

Necessary)

① Email or other contact

② Password

③ Confirm Password

④ Verification Code

⑤ Use protocol

(optional)

⑥ Nickname

⑦ Registered Login Entry

3.1.2, select "Fill" content

① Mobile phone Number

② Alternate Mailbox

③ Speech Verification Code hint

3.1.3, security content

Necessary)

① password protection problem and answer

(optional)

② real name

③ ID Number

④ Phone Check Code

3.2, prompt statement:

　　

Five parts that may be included in a sentence:

① Initial Hints

② judgment input right and wrong

③ Error Reason

④ Input Suggestions

⑤ more details (security tips)

3.3, the password part:

3.3.1, password basic security measures:

① Most password input is the code "*"

② password length range, input specifications and security recommendations

③ Verify Password strength

④ Most of the set password can be pasted, confirm that the password can not be copied and pasted, the landing code may be sticky paste (Jingdong Mall can/Taobao may not)

⑤ Net Silver When you enter the password automatically suspend uppercase, and prompts

⑥ rejects input from keypad

3.3.2, password higher standard security measures:

Security interaction scope Security for registered operations

① Installation Security plugin related to Money account * * *

② Mailbox Verify all * * *

③ Phone Verification Important account * * *

④ Browser with screenshot function mask and Money account related * * *

⑤ change page to confirm password want users to use persistent (such as vertical community) to deepen user memory

⑥ password protection issues important account/depth user help retrieve password

3.3.3, enter password user experience interactive details:

① before the better clock input password experience is: Password input plaintext display 500ms after the "*" to cover up, let the user know whether the input is wrong. Now familiar with PC keyboard input more and more users, close to saturation. And the wireless side of the hardware conditions of the flaw users more easily error, so now the mobile end with this delay to cover up more, perhaps in the future a period of maturity in the mobile end is not needed this method.

② Taobao's registry alone with a screenshot of the browser with screenshots after the screenshot of the screen is blocked black map, the user's personal data by screenshot of the method was stolen. Can compare Tenpay and Alipay form, the content is basically similar: (the right is paid treasure screen effect) #p # subtitle #e#

　　

3.4. Verification Code

3.4.1, type of verification code:

① Letter/digit/text picture form (popular)

　　

② Letter/Digital audio form (mainly for blind use)

　　

③ Simple algorithm picture form (higher safety standard)

　　

④ Cognitive picture form (higher safety standard)

　　

3.4.2, usually required to enter a verification code:

① registration time. Prevent malicious registration.

② The first logon entry error. Anti-violent cracking.

　　

③ network risk peaks, such as the peak of hacker infestation, password leakage, internal system problems and so on.

Visual interaction details for 3.4.3 and CAPTCHA images:

　　

Verify that the size of the code map does not have a significant impact on the crack rate, but for the user's vision, slightly larger picture to increase the user's recognition efficiency.

3.5. Registration Agreement

How the protocol appears:

① New Window/tab open connection:

　　

② Floating window mode, default closed:

　　

③ text area to display directly, do not collect:

　　

4, Login Form analysis:

4.1, two kinds of login entrance:

① Link to landing page (most)

　　

② Direct Landing box (direct but takes up valuable space)

　　

4.2, the Landing box design:

4.2.1, traditional version of the Landing box:

From the registered structure to continue the landing box, so the frame structure is basically the same as the registration, and finally submitted to the final goal of login:

　　

4.2.2, contracted version of the Landing box:

① user Operation area and guide clear, useless features less

② Visual Experience: elegant, simple and smooth

③ Highlights company/Product visual image

　　

4.3, for the Login box registration channel of the outstanding degree of discussion:

① now most of the main line of the Login box task is to ensure that the attention of the user login focus, the registration channel will not snatch the eye of the place, just can ensure that when the new users need to be able to find. Here, the highlight is login.

　　

② but now more and more, especially social networking sites have a great demand for expanding user groups, placing registered channels in a more prominent position in the login box to guide and encourage users to join.

　　

Summary: How to find the focus and relative balance between the two, we need to take into account the positioning of the product and the environment currently in place. and needs to be adjusted at any time according to the reaction of the Times and the user group,

4.4, SNS account Joint Login

At the beginning of the discussion, the use of SNS account registration can quickly guide a large number of SNS users to register, in the initial product quickly occupy the market situation will be significant, but in the long run is not conducive to the development of their own unique user groups. But now the Internet to seize the user market competition is fierce, most of the practice is to maintain the number of joint SNS portal in a small range, can only be combined with one or two company strategic partners SNS account number.

　　

There are two types of joint login processes currently observed:

① register first, after binding SNS account number (false), can use SNS account joint login. (most, including thunder)

② do not register, directly use SNS account login (Grand Airplay)

4.5, server crashes:

1, warm language tips (buffer users anxious mood)

2, landing a bit of the prompt (Operation proposal)

3, three kinds of Operation choice: (Operation feedback Prompt)

① Return to login page wait

② Resubmit

③ Exit Login